// JavaScript Document
jQuery(document).ready(function($){
	window.onload = function() { // Prevents code from running before all images in the gallery have loaded.
		var imgCollection = $(".imgThumb");
		var imgWidth = new Array();
		var imgHeight = new Array();
		var thumbWidth = new Array();
		var thumbHeight = new Array();
		var thumbWidthSplit = new Array();
		var thumbHeightSplit =  new Array();
		for (var i=0; i < imgCollection.length; i++){ // Step through collection of images for details page.
			imgWidth[i] = $(imgCollection[i]).width();	// Set width and height to the original size while the image is hidden from display
			imgHeight[i] = $(imgCollection[i]).height();				
			thumbWidth[i] = "" + (imgWidth[i] - (imgWidth[i]/3));
			thumbHeight[i] = "" + (imgHeight[i] - (imgHeight[i] / 3));
			//alert("IMG: " + imgWidth[i] + " ::: " + imgHeight[i]);
			//alert("THUMB: " +thumbWidth[i] + " ::: " + thumbHeight[i]);
			
			if (thumbWidth[i].indexOf(".") > -1) { // Remove decimal places to ensure the width and height are whole numbers.
				thumbWidthSplit[i] = thumbWidth[i].split(".");
				thumbWidth[i] = thumbWidthSplit[i][0];
			}
			if (thumbHeight[i].indexOf(".") > -1) {
				thumbHeightSplit[i] = thumbHeight[i].split(".");
				thumbHeight[i] = thumbHeightSplit[i][0];
			}
			$(imgCollection[i]).css("height",thumbHeight[i]); // Set the height of the image to the thumbnail size
			$(imgCollection[i]).css("width",thumbWidth[i]);
			$(imgCollection[i]).css("display","block"); // Display the image with the correct size so the user does not see the image before this point with the full size.
			
			$("ul.thumb li#li" + i).css("height",parseFloat(thumbHeight[i]) + 10); // Set the height of the container to the height of the thumbnail (Dynamic)
			$("ul.thumb li#li" + i).css("width",parseFloat(thumbWidth[i]) + 10);
		}	
		
		$("ul.thumb li").hover(function() {
			$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
			$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
				.animate({
					top: '-25%',
					left: '-25%',
					width: imgWidth[this.id.substring(this.id.length-1,this.id.length)] + "px", /* Set new width */
					height: imgHeight[this.id.substring(this.id.length-1,this.id.length)] + "px", /* Set new height */
					padding: '10px'
				}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
		
			} , function() {
			$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
			$(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
				.animate({
					marginTop: '0', /* Set alignment back to default */
					marginLeft: '0',
					top: '0',
					left: '0',
					width: thumbWidth[this.id.substring(this.id.length-1,this.id.length)] + "px", /* Set width back to half of the default */
					height: thumbHeight[this.id.substring(this.id.length-1,this.id.length)] + "px", /* Set height back to half of the default */
					padding: '0px'
				}, 400);
		});
	};
});