// JavaScript Document

$(function(){
	//Get our elements for faster access and set overlay width
	var step
	step = 0; 
	var div = $('div.sc_menu'),
		ul = $('ul.sc_menu'),
		ulPadding = 30;
		
	var divdx = $('div.hand_dx');
	var divsx = $('div.hand_sx');
	
	//Get menu width
	var divWidth = div.width();

	//Remove scrollbars	
	div.css({overflow: 'hidden'});
	
	//Find last image container
	var lastLi = ul.find('li:last-child');
	
	//When user move mouse over menu
	div.mousemove(function(e){
		//As images are loaded ul width increases,
		//so we recalculate it each time
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
		step = left;
		div.scrollLeft(left);
	});
	
		divdx.click(function(e){
		//As images are loaded ul width increases,
		//so we recalculate it each time
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
		step = step + 100; 
		if(step < ulWidth - divWidth){
		div.scrollLeft(step);
		}else{
			div.scrollLeft(left-60);
			}
	});
		divsx.click(function(e){
		//As images are loaded ul width increases,
		//so we recalculate it each time
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
		step =step - 100; 
		if(step > 0){
		div.scrollLeft(step);
		}else{
			div.scrollLeft(30);
		}
	});

});