// Image dimensions in pixels (must be changed in the CSS also)
var img_width = 50; 
var img_height = 61;

// Scale factor to stretch the image in each dimension
var x_scale = 1.20;
var y_scale = 1.20;
var startPosLeft;

$(document).ready(function(){
	$('.growImage').mouseover(
		function(){
                           var startPosTop;
	    		var posLeft = $(this).position().left;
			this.startPosLeft = $(this).position().left;
			this.startPosTop = $(this).position().top;
	    		if ($(this).attr('class').indexOf('col3') > 0) 
	    			posLeft = ((posLeft + img_width) - (x_scale * img_width));
	    		var posTop = $(this).position().top;
	    		if ($(this).attr('class').indexOf('row3') > 0)
//  "1" is added to the y-coordinate for row 3 to compensate for the pixel lost by rounding to the nearest integer in the formulas.
//  This ensures that the enlarged thumbnails in row 3 align with the other two smaller thumbnails.
	    			posTop = ((posTop + img_height) - (y_scale * img_height) + 1);
			if ($(this).attr('class').indexOf('col2') > 0) 
	    			posLeft = ((posLeft + (0.5 * img_width)) - (0.5 * x_scale * img_width));
			if ($(this).attr('class').indexOf('row2') > 0) {
	    			posTop = ((posTop + (0.5 * img_height)) - (0.5 * y_scale * img_height));
			}

//  The next 4 lines have been commented out because they apply specifically to the middle image - but the middle image is in row 2 and
//  in column 2 and is therefore already covered by the rest of the code.
//			if ($(this).attr('class').indexOf('col2') > 0 && $(this).attr('class').indexOf('row2') > 0) {
//	    			posLeft = ((posLeft + (0.5 * img_width)) - (0.5 * x_scale * img_width));
//				posTop = ((posTop + (0.5 * img_height)) - (0.5 * y_scale * img_height));
//			}

			
	    		$(this).css('zIndex', 10);
			$(this).stop().animate(
				{"width":x_scale*img_width,"height":y_scale*img_height,"left":posLeft,"top":posTop},
				300,
				'swing'
			);
			}
		    		).mouseout(
	    				function(){
						var posLeft = $(this).position().left;
						var posTop = $(this).position().top;
// These lines are not necessary because it		if ($(this).attr('class').indexOf('col2') > 0) 
// doesn't matter what row or column the			posLeft = this.startPosLeft;
// thumbnail is in the code will use its		if ($(this).attr('class').indexOf('row2') > 0) 
// original coordinates	    				posTop = this.startPosTop;
//	    					if ($(this).attr('class').indexOf('col3') > 0)
	    						posLeft = this.startPosLeft;
//	    					if ($(this).attr('class').indexOf('row3') > 0)
	    						posTop = this.startPosTop;
	      					$(this).stop().animate(
							{"width":img_width,"height":img_height,"left":posLeft,"top":posTop},
							200,
							'swing',
							function() {$(this).css('zIndex', 0);}
						);
	    				}
		    		);;
			});