﻿function loadThumbnails(type, max_x)
{
    var output = "";
	var target = document.getElementById('thumbnails');

    if (lines.length == 0) 
    {
    	target.innerHTML = "This gallery is empty.";
    }
    else if (target)
    {
		// -4 for table cell spacing
    	var thumbnailwidth = (target.clientWidth / max_x) - 4;

		output += "<table style=\"width:" + target.clientWidth + "px;\" border=\"0\" cellspacing=\"2\" cellpadding=\"0\">";

		var index = 0;
		var cells = lines.length + (max_x - (lines.length % max_x));

		while (index < cells)
		{
			if (index % max_x == 0)
				output += "<tr>";

			output += "<td class=\"thumbnails\">";

			if (index < lines.length)
			{
				output += "<img class=\"thumbnail\" style=\"width:" + thumbnailwidth + "px;height:" + thumbnailwidth + "px;\" onclick=\"showImage('" + type + "','" + lines[index][0] + "','" + lines[index][1] + "','" + lines[index][2] + "','" + lines[index][3] + "')" + "\" id=\"" + lines[index][0] + "\" src=\"" + type + "/" + lines[index][0] + " THUMB.jpg\" alt=\"ice sculpture " + lines[index][0] + "\">";
				output += "<div class=\"thumbnailcaption\" style=\"width:" + thumbnailwidth + "\">" + lines[index][4] + "</div>";
			}
			else
			{
				output += "<div style=\"width:" + thumbnailwidth + "px\">&nbsp;</div>";
			}

			output += "</td>";

			index++;

			if (index % max_x == 0)
				output += "</tr>";
		}

		output += "</table>";

		target.innerHTML = output;
    }
}
function hideImage()
{
	var target = document.getElementById('mainimage');
	if (target)
	{
		target.style.visibility = "hidden";
	}
}
function showImage(type, image, line1, line2, line3)
{
	var target = document.getElementById('mainimage');
	if (target)
	{
		var output = "";
		output += "<img class=\"mainimage\" style=\"width:" + target.clientWidth + "px;\" src=\"" + type + "/" + image + ".jpg\" alt=\"" + image + "\" onclick=\"hideImage()\">";
		output += "<div style=\"width:" + target.clientWidth + "px;\" class=\"mainimagecaption\">" + line1 + "<br/>" + line2 + "<br/>" + line3 + "</div>";
		target.innerHTML = output;

		var positionX = (getClientWidth() - target.clientWidth) / 2;
		var positionY = (getClientHeight() - target.clientHeight) / 2;

		// Stop top going out of bounds
		if (positionY < 0)
			positionY = 0;
			
		target.style.left = positionX + 'px';
		target.style.top =  positionY + 'px';
		target.style.visibility = "visible";
	}
}
function getClientWidth()
{
	return document.compatMode == 'CSS1Compat' && 
		!window.opera ? document.documentElement.clientWidth : document.body.clientWidth;
}
function getClientHeight()
{
	return document.compatMode == 'CSS1Compat' &&
		!window.opera ? document.documentElement.clientHeight : document.body.clientHeight;
}
