// JavaScript Document
$(document).ready(function(){
		
		//set default image displayed to first image
		var imageIndex = 0;
		
		//set the width of the slider based on the number of images and the image width
		var imageWidth = $("#images #slider .piece").width();
		var numImages = $("#images #slider .piece").size();
		
		$("#images #slider").width(imageWidth*numImages);
		
		//initialise thumbs to 75% opacity	
	 	$("#thumbs .piece").fadeTo(200, .75);
	 
	 	//hover states for thumbs
	 	$(".thumbs-container img").hover(function(){
		 	$(this).fadeTo(200, 1);
		}, function(){
				$(this).fadeTo(200, .75);
		});
	 
	 	//click handler for thumbs.
	 	$("#thumbs img").click(function(){
	
			//set imageIndex from the index of the clicked on thumb
			imageIndex = $("#thumbs img").index(this);
			var slideTo = -imageIndex*imageWidth;
			$("#images #slider").animate({"margin-left": slideTo},800, "easeOutQuad");
			
		});
	 
});