// JavaScript Document
	
 window.onload = function () {
	 



            var total = $(".sliderGallery li").size();
			//var ulwidth=(158)*(total);
			//$("#sliderul").css({width:ulwidth});
	        var hleft=$(".sliderGallery li").width();
            var container = $('div.sliderGallery');
			var slidercontainer=$('div.slidercontainer');
            var ul = $('ul', container);
			var left=0;
            var itemsWidth = ul.innerWidth() - container.outerWidth();
             $("#left_scroll").mousedown ( function() {
	       var handleval=container.outerWidth()/total;	  
         var theLeftAmount = $("#sliderul").css("left");  
        var theNumber = parseFloat(theLeftAmount, 0);  
	   var handleleftamount=$(".handle").css("left");
	   var handlenumber = parseFloat(handleleftamount, 0); 
	    handlenumber += -handleval;
      theNumber += 158;  
	var hope =theNumber;
    var maxval= 0;
	//alert(maxval);
    var amountToShift = theNumber + "px";  
	 if(hope >= maxval || handlenumber >=maxval){
    $("#sliderul").animate({left: maxval});
	$(".handle").animate({left: 0});
	 }
    else{
	
	 $("#sliderul").animate({left: amountToShift});
	 $(".handle").animate({left:amountToShift});
	}
   
		});	
			
		
                  
		  $("#right_scroll").mouseup ( function() {
	var handleval=container.outerWidth()/total;	 	  
    var theLeftAmount = $("#sliderul").css("left");  
    var theNumber = parseFloat(theLeftAmount, 0);  
    theNumber += -158;  
	var handleleftamount=$(".handle").css("left");
	var handlenumber = parseFloat(handleleftamount, 0); 
	 handlenumber +=handleval;
	 //alert(handlenumber);
	var hope = theNumber;
	//alert(hope);
	var maxval= -(itemsWidth);
	//alert(maxval);
    var amountToShift = theNumber + "px";  
	 if(hope <= maxval ){
	  //alert('hi');
	   $("#sliderul").animate({left: maxval});
	 }
    else{
	
	 $("#sliderul").animate({left: amountToShift});
	 $(".handle").animate({left:handlenumber});
	}
   
		});
			
            $('.slider', slidercontainer).slider({
                min: 0,
                max: itemsWidth,
                handle: '.handle',
                stop: function (event, ui) {
                    ul.animate({'left' : ui.value * -1}, 100);
					//alert(event);
                },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
                }
            });
        };