/**
 * ImageGallery Constructor
 * Show the imagegallery
 * @constructor
 * @param {Object} dimension The imagedimension set in the page specific function.
 * @param {Boolean} mouseOver act on mouseover.
 * @return {Boolean} true
 */
function ImageGallery(dimension, mouseOver) 
{
	var dom	 = new DOM(),
	    shop = controller.getParameter("shopid");

	// Get the img element for the full size image
	if (!dom.getById("product_image"))
	{
		return false;
	}

	var fullSize = dom.getById("product_image");

	// Get the thumbnails list element
	if (dom.getById("product_image_gallery"))
	{
		var thumbnails = dom.getById("product_image_gallery").getElementsByTagName("li"); // When used on the product page
	}
	else if (dom.getById("product_gallery_thumbnails")) {
		var thumbnails = dom.getById("product_gallery_thumbnails").getElementsByTagName("li"); // When used on the gallery page
	}
	else
	{
		return false;
	}

	// The product page has two additional anchors (besides the thumbnails) pointing to the full size image
	if (dom.getById("product_image_zoom"))
	{
		var zoomAnchor = dom.getById("product_image_zoom").getFirstByTagName("a");
	}

	if (fullSize.parentNode.nodeName.toLowerCase() == "a")
	{
		var fullSizeAnchor = fullSize.parentNode;
	}


	// Create navigation for gallery page
	if (dom.getById("product_gallery"))
	{
		dom.getById("product_gallery").insertBefore(dom.create(
			"div",
			{
				id : "navigation_gallery"
			}
			),
			dom.getById("product_gallery_thumbnails")
		);
	}

	// Create next and previous button when more than 1 image and on gallery page
	if (dom.getById("navigation_gallery") && thumbnails.length > 1)
	{
		dom.getById("navigation_gallery").appendChild(dom.create(
				"ul",
				null,
				[
					dom.create(
						"li",
						{
							className : "navigation_gallery_previous"
						},
						[
							dom.create(
								"a",
								{
									href		: window.location.href,
									className	: "js",
									title		: "Vorige",
									onclick		: previous
								},
								["Vorige"]
							)
						]
					),
					dom.create(
						"li",
						{
							className : "navigation_gallery_next"
						},
						[
							dom.create(
								"a",
								{
									href		: window.location.href,
									className	: "js",
									title		: "Volgende",
									onclick		: next
								},
								["Volgende"]
							)
						]
					)
				]
			)
		);
	}


	// Preload blank image
	var preload = new Image();
		preload.src = "/images/default/blank.gif";

	// Thumbnail index, used by the next/previous functions to determine what the next/previous image should be
	var index = {},
		currentFullSize = 0;


	// Set the event handlers, eiter onclick or onmouseover
	if (mouseOver)
	{
		for (var i = 0, thumbnailsLength = thumbnails.length; i < thumbnailsLength; i++)
		{
			dom.extend(thumbnails[i]);

			thumbnails[i].onmouseover = zoom;

			// Build the thumbnail index
			index[thumbnails[i].id.substr(14)] = i;

			if (thumbnails[i].hasClass("current"))
			{
				currentFullSize = i;
			}
		}
	}
	else
	{
		for (var i = 0, thumbnailsLength = thumbnails.length; i < thumbnailsLength; i++)
		{
			dom.extend(thumbnails[i]);

			thumbnails[i].onclick = zoom;

			// Build the thumbnail index
			index[thumbnails[i].id.substr(14)] = i;

			if (thumbnails[i].hasClass("current"))
			{
				currentFullSize = i;
			}
		}
	}



	/**
	 * Show the thumbnail full size
	 * @return {Boolean} false
	 */
	function zoom()
	{
		// Is the current thumbnail already fullsize?
		if ((this == currentFullSize) || (this.hasClass("current"))) 
		{
			return false;
		}

		var imageId = this.id.substr(14);

		// First, set the blank image, so the loading icon shows, then load the full size image
		fullSize.src = "/images/default/blank.gif";
		fullSize.src = "/images/product/" + imageId + "?dimensionid=a:2:{i:0;i:"+fullSize.width+";i:1;i:"+fullSize.height+";}" + dimension + "&shopid=" + shop;

		// Update the anchors pointing to the gallery on the product page
		if (fullSizeAnchor)
		{
			fullSizeAnchor.href	= this.getFirstByTagName("a").href;
		}

		if (zoomAnchor)
		{
			zoomAnchor.href	= this.getFirstByTagName("a").href;
		}

		// Clear the "current" class from the other thumbnails and set it to this thumbnail
		for (var i = 0, thumbnailsLength = thumbnails.length; i < thumbnailsLength; i++)
		{
			thumbnails[i].removeClass("current");
		}

		this.addClass("current");
		currentFullSize = index[imageId];

		return false;
	}

	/**
	 * Show the previous thumbnail full size
	 * @return {Boolean} false
	 */
	function previous()
	{
		if (currentFullSize > 0)
		{
			thumbnails[(currentFullSize - 1)].onclick();
		}
		else
		{
			thumbnails[(thumbnails.length - 1)].onclick();
		}

		return false;
	}



	/**
	 * Show the next thumbnail full size
	 * @return {Boolean} false
	 */
	function next()
	{
		if (currentFullSize < (thumbnails.length - 1))
		{
			thumbnails[(currentFullSize + 1)].onclick();
		}
		else
		{
			thumbnails[0].onclick();
		}

		return false;
	}

	return true;
}