$(document).ready(function() {
  // put all your jQuery goodness in here.
	var features = $("#filmstrip");
	var animating = false;
	
	//create the automatic animation
	features.everyTime(6000, "slider", function() {
		scrollLeft(true);
	});
	
	function scrollLeft(clear){
		//stop the timer
		if(!clear){
			features.stopTime("slider");
		}
		
		if(!animating){
			animating = true;
		  
		  //now animate it
		  $("#items").animate({"marginLeft": "-119px"}, 1200, function(){
				//clone the element so we can add it to the end
        var clone = $("#items li:first").clone();
			
				//remove the element
				$("#items li:first").remove();
			
				//set the margin left
				$("#items").css("marginLeft", "0px");

				//append the cloned element to the end
				$("#items").append(clone);
			
				//set the animating to false
				animating = false;
			});
		}
		
		return false;
	}
	
	function scrollRight(){
		//stop the timer
		features.stopTime("slider");
		
		if(!animating){
			animating = true;
		
			//set the margin left to the negative value
			$("#items").css("marginLeft", "-119px");
		
			//clone the last in the dive
			var clone = $("#items li:last").clone();
		
			//remove the element
			$("#items li:last").remove();

			//prepend the cloned element to the begining so it looks right
			$("#items").prepend(clone);
		
			//animate it back to 0p
			$("#items").animate({"marginLeft":"0px"}, 1200, function(){
				//set the animating to false
				animating = false;
			});
		}
		
		return false;
	}
	
	$("#strip-buttons .scroll-left").click(scrollLeft);
	$("#strip-buttons .scroll-right").click(scrollRight);
		
})