// JavaScript Document
$(window).load(function(){
	//for each description span...
	$('.description').each(function(){
		//...set the opacity to 0...
		$(this).css('opacity', 0);
		//...set the display to block
		$(this).css('display', 'block');
	});

});

$(document).ready(function() { 

	$('.animateMe').hover(function(){
		var $this = $(this).find('img');						   
		$this.css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
		$this.addClass("hover").stop() /* Add class of "hover" for bg shadow, then stop animation queue buildup*/

		var position = $this.position();
		$this
			.css({position:'absolute',top:position.top,
				left:position.left})
			.animate(
				{
				width: '164px',
				height: '96px',
				top: '-10px',
				left: '-18px',
				padding: '8px'
			},
			'normal',
		function() { $this.next('.description').stop().fadeTo(250, 0.8); } /* Callback to show caption AFTER image animation */
		);
	} , 
	function(){
		var $this = $(this).find('img');	
		$this.next('.description').stop().fadeTo(100, 0); /*Get rid of caption */
		$this.css({'z-index' : '0'}); /* Set z-index back to 0 */
		$this.removeClass("hover").stop();  /* Remove the "hover" class, then stop animation queue buildup*/
		$this
			.animate(
				{
				width: '144px',
				height: '84px',
				top: '0px',
				left: '0px',
				padding: '0px'
			},
			'normal')
	});
	
});