$(function() {
  
	var conveyor = $(".content-conveyor", $("#slider-content-scroll")),
	item = $(".item", $("#slider-content-scroll"));
	
	conveyor.css("width", item.length * parseInt(item.css("width")));
			
  var sliderOpts = { 
    min: 0,
	  max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#slider-content-scroll")).css("width")),
    animate: true,
	  slide: function(e, ui) { 
		conveyor.stop().animate({left:"-" + ui.value + "px"}, 500);
		  
		if(ui.value >= 0 && ui.value < 306){
			$('#slider li.slide-item-1').addClass('white');
		}
		else{
			$('#slider li.slide-item-1').removeClass('white');  
		}
		if(ui.value > 307 && ui.value < 1140){
			$('#slider li.slide-item-2').addClass('white');
		}
		else{
			$('#slider li.slide-item-2').removeClass('white');  
		}   
		if(ui.value > 1140 && ui.value < 1756){
			$('#slider li.slide-item-3').addClass('white');
		}
		else{
			$('#slider li.slide-item-3').removeClass('white');  
		}      
		if(ui.value > 1757){
			$('#slider li.slide-item-4').addClass('white');
		}
		else{
			$('#slider li.slide-item-4').removeClass('white');  
		}
		$('.lolo').text(ui.value);
    }
  };
  
  $("#slider").slider(sliderOpts); 

	var myHandle = $('.ui-slider-handle');  
	
	$('#slider li.slide-item-1').click(function(){    
		 myHandle.stop().animate({left:"0"}, 500);
		conveyor.stop().animate({left:"0"}, 500);       
	});   
	$('#slider li.slide-item-2').click(function(){    
		 myHandle.stop().animate({left:"180" }, 500);
		conveyor.stop().animate({left:"-721"}, 500);  		
	});
	$('#slider li.slide-item-3').click(function(){    
		 myHandle.stop().animate({left:"360"}, 500);
		conveyor.stop().animate({left:"-1440"}, 500);
	});
	$('#slider li.slide-item-4').click(function(){    
		 myHandle.stop().animate({left:"537"}, 500);
		conveyor.stop().animate({left:"-2139"}, 500); 
	});   

});