/* Assign callback function to window.onload
	without overriding previously assigned callbacks from other scripts */
function addLoadEvent(func) 
{
	var oldonload = window.onload;
	if (typeof window.onload != 'function') 
	{
		window.onload = func;
	} 
	else 
	{
		window.onload = function() 
		{
			oldonload();
			func();
		}
	}
}

function prepareDocument()
{
	var image_list = document.getElementById("image_list");
	var image_box = document.getElementById("image_box");
	
	image_list.innerHTML += image_box.innerHTML;
	
	var child = image_list.firstChild;
	var totalwidth = 0;
	var totalheight = 0;
	var counter = 0;
	
	while (child != null)
	{
		while ((child != null) && ((child.tagName == null) || (child.tagName.toLowerCase() != "img")))
		{
			child = child.nextSibling;
		}
 
		if (child != null)
		{
			totalwidth += child.width;
			totalheight += child.height;
			counter++;

			child.onmouseover = changeImage;
			child.style.height = "40px";
			child.style.width = "40px";
			
			child = child.nextSibling;
		}
	}
	
	child = image_box.firstChild;
	while ((child != null) && ((child.tagName == null) || (child.tagName.toLowerCase() != "img")))
	{
		child = child.nextSibling;
	}
	
	if (child == null)
	{
		image_box.innerHTML = "<img />";
		
		child = image_list.firstChild;
		while ((child != null) && ((child.tagName == null) || (child.tagName.toLowerCase() != "img")))
		{
			child = child.nextSibling;
		}
		
		image_box.firstChild.src = child.src;
		image_box.firstChild.alt = child.alt;
		
		child = image_box.firstChild;
	}
	
	child.height = totalheight / counter;
	child.width = totalwidth / counter;

}

function changeImage()
{
	var image_box = document.getElementById("image_box");
	var child = image_box.firstChild;
	while ((child != null) && ((child.tagName == null) || (child.tagName.toLowerCase() != "img")))
	{
		child = child.nextSibling;
	}
	
	if (child != null)
	{
		if (child.src != this.src)
		{
			child.alt = this.alt;
			child.src = this.src;
		}
	}

}

function changeColourInfo()
{
	var colour_info = document.getElementById("colour_info");
	
	var colour = this.style.backgroundColor;
	var details = this.parentNode.innerHTML;
	details = details.substr(details.toLowerCase().indexOf('</span>') + 7);	
	
	if ((colour.toLowerCase() == "rgb(255, 255, 255)") || (colour.toLowerCase() == "#ffffff"))
	{
		colour += ";border:1px solid #000000;height:78px;width:78px";
	}	
	
	html = "<span style=\"float:left;height:80px;width:80px;margin-right:0.5em;background-color:" + colour + ";\">&nbsp;</span>" + details + "<br class=\"clear\" />";
	colour_info.innerHTML = html;
}

addLoadEvent(prepareDocument);