$(document).ready(function(){
    $("#slider").slider({
    	animate: false
    });
	$('#slider').slider('option', 'max', 558);
	$("#tabs-box").attr("scrollLeft", 0);
  
	$('#slider').bind('slidechange',function (event, ui) {
		var maxScroll = $("#tabs-box").attr("scrollWidth") - $("#tabs-box").width() - 40;
		$("#tabs-box").attr("scrollLeft", ((ui.value / 558) * 100) * (maxScroll / 100) );
	//alert(ui.value * (maxScroll / 100));
	});

	$('#slider').bind('slide',function (event, ui) {
		var maxScroll = $("#tabs-box").attr("scrollWidth") - $("#tabs-box").width() - 40;
		$("#tabs-box").attr({scrollLeft: ((ui.value / 558) * 100) * (maxScroll / 100) });
	});
  
  
	var downint;
	$("#arrow-right").mousedown(function() {
			start = $("#tabs-box").attr("scrollLeft");
			downint = setInterval("scrollRight()", 5);
			return false;
	});
	
		
	$("#arrow-right").mouseup(function() {
			downint = clearInterval(downint);
			return false;
	});
	
	$("#arrow-left").mousedown(function() {
			downint = setInterval("scrollLeft()", 5);
			return false;
	});
	
		
	$("#arrow-left").mouseup(function() {
			downint = clearInterval(downint);
			return false;
	});
  
  });
	
	
	
	function scrollRight() {
	
		var maxScroll = $("#tabs-box").attr("scrollWidth") - $("#tabs-box").width();
		var step = 10;
		
		if ( $("#tabs-box").attr("scrollLeft") < maxScroll - 40 )
		{
			var value = $('#slider').slider('option', 'value');
			$("#tabs-box").attr("scrollLeft", $("#tabs-box").attr("scrollLeft") + step);
			$('#slider').slider('option', 'value', value + ( (step * 558) / (maxScroll - 40 ) ) );
		}		
	}
	
	function scrollLeft() {
	
		var maxScroll = $("#tabs-box").attr("scrollWidth") - $("#tabs-box").width();
		if ( $("#tabs-box").attr("scrollLeft") > 0 )
		{
			var value = $('#slider').slider('option', 'value');
			$("#tabs-box").attr("scrollLeft", $("#tabs-box").attr("scrollLeft") - 10);
			$('#slider').slider('option', 'value', value - ( (10 * 558) / (maxScroll-40) ) );
		}		
	}