// http://www.queness.com/post/590/jquery-thumbnail-with-zooming-image-and-fading-caption-tutorial

$(document).ready(function() {

	//On mouse over those thumbnail
	$('.zitem').hover(function() {
		
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':125, 'height':125, 'top':-12, 'left':-12}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':100, 'height':100, 'top':'0', 'left':'0'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(100);
	});

});


// Custom script to animate the "wave"

$(document).ready(function() {

	//On mouse over those thumbnail
	$('.wave_box').hover(function() {
		
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'top':0}, {duration:200});
		
		//Display the caption
		$(this).find('div.wave_cap').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'top':'20'}, {duration:100});	

		//Hide the caption
		$(this).find('div.wave_cap').stop(false,true).fadeOut(100);
	});

});