$(document).ready(function() {
	//$(".leftscroll").eq(0).hide();
	var itemsToBeDisplayed = 4;
    var divWidth = 884;
	var widthScroll = 0;
	var items = $(".item").length;
	var maxMargin = divWidth * (items - itemsToBeDisplayed) / 4;
	var minMargin = 0;
	$.easing.def = "easeOutCubic";

	$(".rightscroll").click(function(){
		$(".leftscroll").show();
		var actualMargin = parseInt($("#items").css("marginLeft"));
		actualMargin = !isNaN(actualMargin) ? actualMargin : 0;
		
		widthScroll = parseInt(actualMargin) - divWidth;
		var leftElementIndex = Math.abs(actualMargin/divWidth);
		if(actualMargin > (-maxMargin)){
			$("#items").animate({
				marginLeft: widthScroll
			  }, 1000, function(){
			  //$(".leftscroll").eq(leftElementIndex+1).hide();
			  } );
		} //else 
			//$(".leftscroll").eq(leftElementIndex).hide();
	
	});
	
	$(".leftscroll").click(function(){
		$(".leftscroll").show();
		var actualMargin = parseInt($("#items").css("marginLeft"));
		
		widthScroll = parseInt(actualMargin) + divWidth;
		var leftElementIndex = Math.abs(actualMargin/divWidth);
		
		if(actualMargin < minMargin ){
			$("#items").animate({ 
				marginLeft: widthScroll
			  }, 1000, function(){
			  	//$(".leftscroll").eq(leftElementIndex-1).hide();
			  } );
		} //else 
			//$(".leftscroll").eq(leftElementIndex).hide();
	});
});