$(document).ready(function(){
  //Get our elements for faster access and set overlay width
  var div = $('#sc_menu'),
               ul = $('#sc_menu ul');
               // unordered list's left margin
               lpadd = 15;

  //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
  $('#sc_menu').mousemove(function(e){

    //As images are loaded ul width increases,
    //so we recalculate it each time

	var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + lpadd;
	
	 
	 var len = parseInt($('#sc_menu ul li').width() * $('#sc_menu ul li').length);
     
	
	
	var left =  Math.round((e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth);
	//var left = Math.round((len - e.pageX)/100 * len / 2);
	//alert(left);
	//div.scrollLeft(left);
	//var left = divWidth;
	
	div.animate({scrollLeft: left}, {queue:false, duration:500});
	//div.scrollTo(left, 1000, {axis:'x'});
			
	});
});