$(window).load(function(){			
	//set and get some variables
	var thumbnail = {
		imgIncrease : 100, /* the image increase in pixels (for zoom) */
		effectDuration : 400, /* the duration of the effect (zoom and caption) */
		/* 
		get the width and height of the images. Going to use those
		for 2 things:
			make the list items same size
			get the images back to normal after the zoom 
		*/
		imgWidth : $('.thumbnailWrapper ul li').find('img').width(), 
		imgHeight : $('.thumbnailWrapper ul li').find('img').height() 				
	};			
	//make the list items same size as the images
	$('.thumbnailWrapper ul li').css({ 				
		'width' : thumbnail.imgWidth, 
		'height' : thumbnail.imgHeight 				
	});		
	//when mouse over the list item...
	$('.thumbnailWrapper ul li').hover(function(){				
		$(this).find('img').stop().animate({					
			/* increase the image width for the zoom effect*/
			width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
			/* we need to change the left and top position in order to 
			have the zoom effect, so we are moving them to a negative
			position of the half of the imgIncrease */
			left: thumbnail.imgIncrease/2*(-1),
			top: thumbnail.imgIncrease/2*(-1)					
		},{ 					
			"duration": thumbnail.effectDuration,
			"queue": false					
		});			
		//show the caption using slideDown event
		$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);			
	//when mouse leave...
	}, function(){				
		//find the image and animate it...
		$(this).find('img').animate({
			/* get it back to original size (zoom out) */
			width: thumbnail.imgWidth,
			/* get left and top positions back to normal */
			left: 0,
			top: 0				
		}, thumbnail.effectDuration);			
		//hide the caption using slideUp event
		$(this).find('.caption').slideUp(thumbnail.effectDuration);				
	});			
});