/* all scripting (c) 2005 bob lathe - bob@jsguru.com */

/* image collections */
var smallImages = null;
var largeImages = null;
var iconArray = null;

/* Global vars */
var focusColor = null;
var noFocusColor = null;
var imagePath = null;
var selectObj = null;

/* Called by icon mouseover event */
function showSmallImage()
{
	var el = null;
	if (this != undefined && this.tagName == "IMG")
	{
		el = this;
	}
	if (window.event != undefined && window.event.srcElement.tagName == "IMG")
	{
		el = window.event.srcElement;
	}

	var index = el.id.replace("icon_", "");
	index = parseInt(index);

	selectObj.selectedIndex = index;
	
	var smallImage = document.getElementById("img_200_125");
	smallImage.src = smallImages[index].src;
	
	resetBorder(index);
	if (document.getElementById("largeImageDiv").style.visibility == "visible")
	{
		var largeImage = document.getElementById("largeImage");

		document.getElementById("colorway").innerHTML = selectObj.value;

		largeImage.src = largeImages[index].src;
		largeImage.width = largeImages[index].width;
		largeImage.height = largeImages[index].height;
	
		document.getElementById("largeImageDiv").style.display = "block";
		document.getElementById("largeImageDiv").style.visibility = "visible";

	}
	else
	{
		document.getElementById("colorname").innerHTML = selectObj.value;
	}
}

/* Called by icon onclick event */
function showLargeImage()
{
	var el = null;
	if (this != undefined && this.tagName == "IMG")
	{
		el = this;
	}
	if (window.event != undefined && window.event.srcElement.tagName == "IMG")
	{
		el = window.event.srcElement;
	}

	var index = el.id.replace("icon_", "");
	index = parseInt(index);

	selectObj.selectedIndex = index;
	
	document.getElementById("colorway").innerHTML = selectObj.value;

	var largeImage = document.getElementById("largeImage");

	largeImage.src = largeImages[index].src;
	largeImage.width = largeImages[index].width;
	largeImage.height = largeImages[index].height;

	document.getElementById("colornameDiv").style.display = "none";
	document.getElementById("colornameDiv").style.visibility = "hidden";

	document.getElementById("largeImageDiv").style.display = "block";
	document.getElementById("largeImageDiv").style.visibility = "visible";
	
}

function closeView()
{
	document.getElementById("largeImageDiv").style.display = "none";
	document.getElementById("largeImageDiv").style.visibility = "hidden";

	document.getElementById("colornameDiv").style.display = "block";
	document.getElementById("colornameDiv").style.visibility = "visible";

	return false;
}
/* called by colorOptions select onchange event */
function showColor()
{
	var index = selectObj.selectedIndex;
	var smallImage = document.getElementById("img_200_125");
	smallImage.src = smallImages[index].src;
	resetBorder(index);
	if (document.getElementById("largeImageDiv").style.visibility == "visible")
	{
		var largeImage = document.getElementById("largeImage");
	
		largeImage.src = largeImages[index].src;
		largeImage.width = largeImages[index].width;
		largeImage.height = largeImages[index].height;
	
		document.getElementById("largeImageDiv").style.display = "block";
		document.getElementById("largeImageDiv").style.visibility = "visible";

		document.getElementById("colorway").innerHTML = selectObj.value;
	}
	else
	{
		document.getElementById("colorname").innerHTML = selectObj.value;
	}
}

/* reset the icon borders and set the current icon border color */
function resetBorder(pIndex)
{
	for (var i = 0; i < iconArray.length; i++)
	{
		iconArray[i].style.borderColor = noFocusColor;
	}
	iconArray[pIndex].style.borderColor = focusColor;
}

/* called by body onload event to initialize the page */
function initialize()
{
	/* get the names of all images */
	selectObj = document.getElementById("colorOptions");
	var names = document.getElementById("colorOptions").options;
	var imageNames = new Array(names.length);
	smallImages = new Array(names.length);
	largeImages = new Array(names.length);
	
	imagePath = document.getElementById("img_200_125").src;
	imagePath = imagePath.substring(0, imagePath.lastIndexOf("/")+1)
	
	/* get the colors for the icon borders */
	if (!document.styleSheets) return;
	var rules = null;
	
	/* find the stylesheet rules set */
	if (document.styleSheets[1].cssRules)
	{
		rules = document.styleSheets[2].cssRules
	}
	else if (document.styleSheets[1].rules)
	{
		rules = document.styleSheets[2].rules
	}
	/* set the border color for icons in and out of focus */
	focusColor = (rules != null) ? rules[0].style.color : "#ddd";
	noFocusColor = (rules != null) ? rules[2].style.backgroundColor : "#fff";
	iconArray = document.getElementById("icons").getElementsByTagName("IMG");

	/* set the width and height for the large images */
	var width = 450;
	var height = 225;

	var re = / /g;
	/* preload all the images */
	for (var i = 0; i < names.length; i++)
	{
		imagePath = document.getElementById(iconArray[i].id).src;
		imagePath = imagePath.substring(0, imagePath.lastIndexOf("/")+1)
		imageNames[i] = names[i].value.replace(re, "_").toLowerCase();
		smallImages[i] = new Image();
		smallImages[i].src = imagePath + imageNames[i] + "_200_125.jpg";
		largeImages[i] = new Image();
		largeImages[i].src = imagePath + imageNames[i] + "_" + width + "_" + height + ".jpg";
		/* This resizes the images to 450 x 225 (3/4 size) to fit into the main content area */
		largeImages[i].width = 450;
		largeImages[i].height = 225;
	}
	
	/* attach events to icons */
	for (var i = 0; i < iconArray.length; i++)
	{
		var icon = iconArray[i];
		icon.onmouseover = showSmallImage;
		icon.onclick = showLargeImage;
		icon.style.borderColor = (i == 0) ? focusColor : noFocusColor;
	}

	/* attach event to color selector */
	document.getElementById("colorOptions").onchange = showColor;
	
	document.getElementById("colorname").innerHTML = document.getElementById("colorOptions").value;

	showColor();
}

window.onload = initialize;