/* 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");
  var priceOptions = document.getElementById("priceOptions");

  if (skuOptions) skuOptions.selectedIndex = index + 1;

  if (priceOptions) {
    if (!isMultiSKU) {
 //     priceOptions.name = skuOptions.value + ":price";
    } else {
      sku = document.getElementById("productSubmitForm").sku;

      for (var i = 0; i < sku.length; i++) {
        if (sku[i].checked) {
          priceOptions.selectedIndex = i;
          priceOptions.name = sku[i].value + ":price";
        }
      }
    }
  }
  var button = document.getElementById("submitOrderButton");
  button.value = "Add to Cart - " + names[index];

  /* set the colors on the quantity dropdown if there is one */
  var quantity = document.getElementById("yarnQuantity");

  if (quantity) {
    quantity.name = skuOptions.value + ":qnty";
    button.value = button.value + "   (" + optionsData[index][2] + ")";
    setOrderButtonColor();
  }

  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() {
  /* get the names of all images */
  selectObj = document.getElementById("colorOptions");
  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;
  }

  multiOptions = document.getElementById('item');

  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.getElementById('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) - 1;
    s = v.substr(k, m - k);
  }
  var button = document.getElementById("submitOrderButton");
  button.value = button.value + " " + s;
}

function sizeHandler() {
  var r = document.getElementById('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) - 1;
    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.getElementById('item');
  var len = r.length;

  for (j = 0; j < len; j++) {
    r[j].onclick = sizeHandler;
  }
}

window.onload = initialize;