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

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

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

/* Called by icon mouseover event */
function showImage()
{
	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;
	
	resetBorder(index);

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

	largeImage.src = largeImages[index].src;
	largeImage.width = largeImages[index].width;
	largeImage.height = largeImages[index].height;
	
	document.getElementById("colorway").innerHTML = names[index];
}

/* called by colorOptions select onchange event */
function showColor()
{
	var index = selectObj.selectedIndex-1;

	resetBorder(index);

	var largeImage = document.getElementById("largeImage");
	
	largeImage.src = largeImages[index].src;
	largeImage.width = largeImages[index].width;
	largeImage.height = largeImages[index].height;
	
	var colorName = selectObj.value;
	colorName = colorName.substr(colorName.indexOf(":")+1);

	document.getElementById("colorway").innerHTML = colorName
}

/* called by colorOptions select onchange event */
function showColor2()
{
	var index = selectObj2.selectedIndex-1;

	resetBorder(index);

	var largeImage = document.getElementById("largeImage");
	
	largeImage.src = largeImages[index].src;
	largeImage.width = largeImages[index].width;
	largeImage.height = largeImages[index].height;
	
	var colorName = selectObj2.value;
	colorName = colorName.substr(colorName.indexOf(":")+1);

	document.getElementById("colorway").innerHTML = colorName
}

/* called by color3 select onchange event */
function showColor3()
{
	var index = selectObj3.selectedIndex-1;

	resetBorder(index);

	var largeImage = document.getElementById("largeImage");
	
	largeImage.src = largeImages[index].src;
	largeImage.width = largeImages[index].width;
	largeImage.height = largeImages[index].height;
	
	var colorName = selectObj2.value;
	colorName = colorName.substr(colorName.indexOf(":")+1);

	document.getElementById("colorway").innerHTML = colorName
}

/* called by color4 select onchange event */
function showColor4()
{
	var index = selectObj4.selectedIndex-1;

	resetBorder(index);

	var largeImage = document.getElementById("largeImage");
	
	largeImage.src = largeImages[index].src;
	largeImage.width = largeImages[index].width;
	largeImage.height = largeImages[index].height;
	
	var colorName = selectObj2.value;
	colorName = colorName.substr(colorName.indexOf(":")+1);

	document.getElementById("colorway").innerHTML = colorName
}

/* 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 */
var names = new Array();
function initialize()
{
	if (document.getElementById("imageContainer"))
	{
		document.getElementById("imageContainer").innerHTML = '<img src="/images/clear.gif" id="largeImage" name="largeImage" width="450" height="225" alt="" />';
	}
	/* get the names of all images */
	selectObj = document.getElementById("colorOptions");
	var ops = document.getElementById("colorOptions").options;
	var initialName = "";
	for (var i = 1; i < ops.length; i++)
	{
		var colorName = ops[i].value;

		if (colorName.indexOf(":") > 0)
		{
			colorName = colorName.substr(colorName.indexOf(":")+1);
		}
		else
		{
			colorName = ops[i].value;
		}

		names.push(colorName);
		if (i == 1)
		{
			initialName = colorName;
		}
	}
	var imageNames = new Array(names.length);
	largeImages = new Array(names.length);
	
	/* 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++)
	{
		imageNames[i] = names[i].replace(re, "_").toLowerCase();
		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 = showImage;
		icon.style.borderColor = (i == 0) ? focusColor : noFocusColor;
	}

	/* attach event to color selector */
	document.getElementById("colorOptions").onchange = showColor;
	
	document.getElementById("colorOptions").selectedIndex = 0;
	document.getElementById("colorway").innerHTML = initialName;

	selectObj.selectedIndex = 1;
	showColor();
	selectObj.selectedIndex = 0
	/* if contrastColor select exists, attacth event to it also */
	var obj = document.getElementById("contrastColor");
	if (obj != undefined && obj.tagName == "SELECT")
	{
		selectObj2 = obj;
		obj.onchange = showColor2;
		obj.selectedIndex = 0;
	}
	/* if color3 select exists, attacth event to it also */
	var obj = document.getElementById("color3");
	if (obj != undefined && obj.tagName == "SELECT")
	{
		selectObj3 = obj;
		obj.onchange = showColor3;
		obj.selectedIndex = 0;
	}
	/* if color4 select exists, attacth event to it also */
	var obj = document.getElementById("color4");
	if (obj != undefined && obj.tagName == "SELECT")
	{
		selectObj4 = obj;
		obj.onchange = showColor4;
		obj.selectedIndex = 0;
	}
}

function noColorMessage(pIndex)
{
	var messages = new Array(4);
	messages[0] = "Please select a color before adding this item to your shopping cart.";
	messages[1] = "Please select a contrasting color before adding this item to your shopping cart.";
	messages[2] = "Please select a third color before adding this item to your shopping cart.";
	messages[3] = "Please select a fourth color before adding this item to your shopping cart.";
	alert(messages[pIndex]);
}

function confirmColorSelected()
{
	var colors = new Array(document.getElementById("colorOptions"),
							document.getElementById("contrastColor"),
							document.getElementById("color3"),
							document.getElementById("color4"));
	for (var i = 0; i < 4; i++)
	{
		if (colors[i] != undefined && (colors[i].selectedIndex == undefined || colors[i].selectedIndex == 0))
		{
			noColorMessage(i);
			return false;
		}
	}
}

window.onload = initialize;