$(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, 
            height: parseInt(thumbnail.imgHeight) + thumbnail.imgIncrease/4.5,
            /* 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/9*(-1)  
  
        },{   
  
            "duration": thumbnail.effectDuration,  
            "queue": false  
  
        });  
  
        //show the caption using slideDown event  
	//$('.caption').css({ background: #FFFFFF } );
		
        //$(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,  
	    height: thumbnail.imgHeight,
            /* 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);  
  	//$('.caption').css({ background: #0c4b62 } );
	
    });  
  
});