// Requires general.js
// Requires animation.js

function showImage (thumbnail, number)
{
	if ( ! thumbnail.displayed )
	{
		var mainImage = id("mainProductImage");		
		var mainImageSize = getElementDimensions(mainImage);
		var mainImageWidth = mainImageSize.width;
		var mainImageHeight = mainImageSize.height;

		var thumbnailHeight = getElementSize(thumbnail).height;
		var thumbnailStyle = getElementStyle(thumbnail);
		var thumbnailTopMargin = parseInt(thumbnailStyle.marginTop);
		var thumbnailBottomMargin = parseInt(thumbnailStyle.marginBottom);
		
		if ( navigator.appName.search(/Microsoft Internet Explorer/i) >= 0)
		{// Internet Explorer does not count the margin as part of height.
			thumbnailBottomMargin = 0;
		}
		
		var startLeft = (number % 4) * 122;
		var startBottom = thumbnailBottomMargin;
				
		var animatedThumbnail = id("animatedThumbnail");
		animatedThumbnail.style.left = startLeft + "px";
		animatedThumbnail.style.bottom = startBottom + "px";
		animatedThumbnail.src = thumbnail.getElementsByTagName("img")[0].src;
		animatedThumbnail.style.width = "114px";
		animatedThumbnail.style.height = thumbnailHeight + "px";
		
		var duration = 0.6;
						
		var onFinish = function () { mainImage.src = animatedThumbnail.src; animatedThumbnail.style.visibility = "hidden"; };

		var leftAnimation = { attribute: "left",
							  startValue: null,
							  endValue: ( (480 - mainImageWidth) / 2 ),
							  unit: "px" };
		var bottomAnimation = { attribute: "bottom",
								startValue: null,
								endValue: thumbnailBottomMargin + thumbnailHeight + thumbnailTopMargin, 
								unit: "px" };
		var widthAnimation = { attribute: "width",
							   startValue: null,
							   endValue: mainImageWidth,
							   unit: "px" };
		var heightAnimation = { attribute: "height",
								startValue: null,
								endValue: mainImageHeight,
								unit: "px" };
		var opacityAnimation = { attribute: "opacity",
								 startValue: 0.25,
								 endValue: 1,
								 unit: "" };
								
		animatedThumbnail.style.opacity = 0.0;
		animatedThumbnail.style.visibility = "visible";
			
		animateAttributes( animatedThumbnail, [ leftAnimation, bottomAnimation, widthAnimation, heightAnimation, opacityAnimation ], duration, "ease-in", null, onFinish );
	}

	return false;
}

/*
function productImagesSetup ()
{
	var productThumbnails = document.getElementById("productThumbnails");
	
	var thumbnails = productThumbnails.childNodes;
	
	var i;
	for( i = 0; i < thumbnails.length ; i++)
	{
		thumbnails[i].onclick = showImage(this, i);
	}
}
*/