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

var Global = this;

/* image collections */
Global.largeImages = null;
Global.iconArray = null;

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

/* Get the array index of the current icon */
function getIconIndex(thisEl)
{
    var el = null;
    if (thisEl != undefined && thisEl.tagName == "IMG")
    {
        el = thisEl;
    }
    if (window.event != undefined && window.event.srcElement.tagName == "IMG")
    {
        el = window.event.srcElement;
    }

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

/* Draw the large image and set the color name */
function drawLargeImage(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];
}

/* 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 icon mouseover event */
function showImage()
{
    var index = getIconIndex(this);
    drawLargeImage(index);
}

Global.lockedIndex = -1;
/* Called by icon click event */
function lockColor()
{
    var index = getIconIndex(this);
    Global.lockedIndex = index;
	
    resetBorder(index);
    selectObj.selectedIndex = index+1;
    var skuOptions = document.getElementById("skuOptions");
    if (skuOptions) skuOptions.selectedIndex = index+1;
    var button = document.getElementById("submitOrderButton");
    button.value = "Order - " + names[index];
	
    /* set the colors on the quantity dropdown if there is one */
    var quantityList = document.getElementById("yarnQuantity");
    if (quantityList)
    {
        var len = quantityList.length;
        for (var i = 0; i < len; i++)
        {
            quantityList.options[i].style.backgroundColor = "White";
        }
        if (optionsData[index][2] < len)
        {
            for (var i = optionsData[index][2]; i < len; i++)
            {
                quantityList.options[i].style.backgroundColor = "Red";
            }
        }
        button.value = button.value + "   (" + optionsData[index][2] + ")";
        setOrderButtonColor();
    }
    // set the price if a price dropdown (op8) exists
    var priceList = document.getElementById("op8");
    if (priceList)
    {
        setPriceOption(optionsData[index]);
    }
    if (multiOptions)
    {
        customOptionsHandler();
    }
}

function setOrderButtonColor()
{
    if (Global.lockedIndex >= 0)
    {
        var count = parseInt(document.getElementById("yarnQuantity").value);
        var button = document.getElementById("submitOrderButton");
        var available = optionsData[Global.lockedIndex][2];
		
        if (available >= 0)
        {
            button.className = available >= count ?  "orderbutton" : "orderbuttonOS";
        }
    };
	
}

/* called by body onload event to initialize the page */
var names = new Array();
var colorIds = new Array();
function initialize()
{
	try {
	highlight();
	}
	catch(e) {};
	
    /* get the names of all images */
    selectObj = document.getElementById("colorOptions");
	if (!selectObj) return;
    selectObj.selectedIndex = 0;
    //var ops = document.getElementById("colorOptions").options;
    var initialName = "";
    for (var i = 0; i < optionsData.length; i++)
    {
        var colorName = optionsData[i][0];

        if (colorName.indexOf("-") > 0)
        {
            colorId = colorName.substr(0, colorName.indexOf("-")-1);
            colorName = colorName.substr(colorName.indexOf("-")+1);
        }
        else
        {
            colorId = optionsData[i][1];
            colorName = optionsData[i][0];
        }
		
        colorIds.push(colorId);
        names.push(colorName);
        if (i == 0)
        {
            initialName = colorName;
            initialId = colorId;
        }
    }

    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 largeImage = document.getElementById("largeImage");
	
    largeImage.src = imagePath + colorIds[0] + "_" + width + "_" + height + ".jpg";
    largeImage.width = width;
    largeImage.height = height;
	
    var re = / /g;
    /* preload all the images */
    for (var i = 0; i < names.length; i++)
    {
        largeImages[i] = new Image();
        largeImages[i].src = imagePath + colorIds[i] + "_" + width + "_" + height + ".jpg";
    }
	
    /* attach events to icons */
    for (var i = 0; i < iconArray.length; i++)
    {
        var icon = iconArray[i];
        icon.onmouseover = showImage;
        icon.onclick = lockColor;
    }

    document.getElementById("colorway").innerHTML = initialName;
	
    /* 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;
    }
	
    document.getElementById("productSubmitForm").onsubmit = confirmColorSelected;
	
    var dropDown = document.getElementById("yarnQuantity");
    if (dropDown)
    {
        dropDown.onchange = setOrderButtonColor;
    }
	
	

	
    if (multiOptions)
    {
        multiOptions = multiOptions.length > 1;
        if (multiOptions)
        {
            customInitialize();
        }
    }

}

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;
        }
    }
    return true;
}

function customOptionsHandler()
{
    var r = document.productSubmitForm.item;
    var len = r.length;
    for (j = 0; j < len; j++)
    {
        if (r[j].checked) i = j;
    }
    var v = i >= 0 ? r[i].value : "";
    var s = "";
    if (v != "")
    {
        var k = v.indexOf("Size");
        var m = v.indexOf("^", k);
        s = v.substr(k, m - k);
    }
    var button = document.getElementById("submitOrderButton");
    button.value = button.value + " " + s;
}

function sizeHandler()
{
    var r = document.productSubmitForm.item;
    var len = r.length;
    for (var j = 0; j < len; j++)
    {
        if (r[j].checked) i = j;
    }
    var v = i >= 0 ? r[i].value : "";
    var s = "";
    if (v != "")
    {
        var k = v.indexOf("Size");
        var m = v.indexOf("^", k);
        s = v.substr(k, m - k);
    }
    var button = document.getElementById("submitOrderButton");
    if (button.value.indexOf("Size") > 0)
    {
        var bs = button.value;
        var k = bs.indexOf("Size");
        bs= bs.substr(0, k);
        button.value = bs + " " + s;
    }
}

function customInitialize()
{
    var r = document.productSubmitForm.item;
    var len = r.length;
    for (j = 0; j < len; j++)
    {
        r[j].onclick = sizeHandler;
    }

}

window.onload = initialize;