$(function(){
   var count_video = $('#count_video').text();

	//Get our elements for faster access and set overlay width
	var pageid = $('#pageid').attr('_id');

        if (!pageid)
	  pageid=Math.floor(Math.random() * (31 - 1 + 1)) + 1;

	var div = $('div.sc_menu'),
		ul = $('ul.sc_menu'),
		ulPadding = 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');


	var  scroll = (lastLi.outerWidth())*(pageid-1);

	if (scroll>0) {
	div.animate({scrollLeft:scroll}, 200*pageid);
	}
//	alert(pageid);
	//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;
		//div.scrollLeft(1000);
	});
	/*$('#nav2').hover(function() {
		    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
		var left = (100 - div.offset().left) * (ulWidth-divWidth) / divWidth;
	     now = div.scrollLeft();
		 if ((now+100)>ulWidth-600)
		     posit = now;
	     else 
		     posit=now+100;
	

		div.scrollLeft(posit);
	});*/
	
	$('#nav2').click(function() {
		    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
		var left = (100 - div.offset().left) * (ulWidth-divWidth) / divWidth;
	     now = div.scrollLeft();
		 if ((now+100)>ulWidth-750)
		     posit = now;
	     else 
		     posit=now+(lastLi.outerWidth())*7;
	

		div.scrollLeft(posit);
	});
	
		
		$('#nav1').click(function() {
	     now = div.scrollLeft();
         if ((now-100)<0)
		     posit = 0;
	     else 
		     posit=now-(lastLi.outerWidth())*7;
	    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
			//alert(ulWidth);
		var left = (100 - div.offset().left) * (ulWidth-divWidth) / divWidth;
		div.scrollLeft(posit);
	});
	
	
	$('.sc_menu li').hover(function() {
	       liid=$(this).attr('id');
		   $('#'+liid+' img').width(96);
	       $(this).addClass('this_view');
	},function () {
		    liid=$(this).attr('id');
		    $('#'+liid+' img').width(80);
	        $('.sc_menu li').removeClass('this_view');
    });
});