// This must match the name of the HTML form that
// gets posted to "add to cart"
var formName = "fred";

// This name must match the name of the html select
// box.
var sType = "type";

// This name must match the name of the html select
// box.
// NOTE: this must also match whatever "product id"
// is called in the "add to cart" query string
var sSize = "size";

var sProductId = "oa_id";

// The names of these must match the names of the
// html select boxes.
// Same NOTE as above regarding query string applies
// here as well.
// NOTE: the order of these must match the order
// in the aProduct array (after product id and name).
// In other words, don't change the order.
var aAttrName =
[
   'color',
   'style',
   'hang'
];

var aHiddenAttrName =
[
   'colorId',
   'styleId',
   'hangId'
];

var sChoose = "--- Choose ---";

var aType =
[
   "Economy",
   "Premium",
   "Archival",
   "Deluxe"
];

var aAttr =
[
   [
      [
         "Satin Black",
         "Satin Gold",
         "Shiny Gold",
         "Satin Silver",
         "Shiny Silver",
         "Satin Bronze",
         "Shiny Gun Metal",
         "Satin Champagne"
      ],
      [
         "UV filtered",
         "Non-glare UV filtered"
      ],
      [
         "Vertical",
         "Horizontal"
      ]
   ],
   [
      [
         "Satin Black",
         "Satin Gold",
         "Shiny Gold",
         "Satin Silver",
         "Shiny Silver",
         "Shiny Gun Metal",
         "Satin Champagne"
      ],
      [
         "UV filtered",
         "Non-glare UV filtered"
      ],
      [
         "Vertical",
         "Horizontal"
      ]
   ],
   [
      [
         "Satin Black",
         "Satin Gold",
         "Shiny Gold",
         "Satin Silver",
         "Shiny Silver",
         "Satin Bronze",
         "Shiny Gun Metal",
         "Satin Champagne"
      ],
      [
         "UV filtered",
         "Non-glare UV filtered"
      ],
      [
         "Vertical",
         "Horizontal"
      ]
   ],
   [
      [
         "Satin Black",
         "Satin Gold",
         "Shiny Gold",
         "Satin Silver",
         "Shiny Silver",
         "Shiny Gun Metal",
         "Satin Champagne"
      ],
      [
         "UV filtered",
         "Non-glare UV filtered"
      ],
      [
         "Vertical",
         "Horizontal"
      ]
   ]
];

// This series of nested arrays is built on the fly. Each value
// in the first nest is an array of products that belong to the
// different styles. Thus there are 4 values in the first nest
// (one for "Economy", "Deluxe", etc.). There will be 26 products
// in each of these 4 arrays (corresponding to the different
// frame sizes). Each product is again array of the following values
//     product id
//     product name (i.e., the size)
//     array of color attributes
//     array of plexiglass attributes (clear vs. non-glare)
//     array of hang direction attributes
// The 3 attribute arrays have values that are 2 element arrays
// containing the attribute id tied to the product and the attribute
// name.
//var aProduct

function _reset()
{
   var i;
   for (i = 0; i < aAttrName.length; i++)
   {
      document.forms[formName][aAttrName[i]].options.length = 1;
      document.forms[formName][aAttrName[i]].options[0] = new Option(sChoose, -1, true, true);
   }
}

function _setProductList(aProdList)
{
   document.forms[formName][sSize].options.length = aProdList.length + 1;
   document.forms[formName][sSize].options[0] = new Option(sChoose, -1, true, true);
   for (i = 0; i < aProdList.length; i++)
   {
      // in a product, the first value is the product id, the second is the product name
      document.forms[formName][sSize].options[i+1] = new Option(aProdList[i][1], aProdList[i][0], false, false);
   }

   // clear out the attributes that are available
   _reset();
}

function _getStyleArray()
{
   var value = _getStyleIndex();
   if (value == -1)
   {
      return null;
   }
   // here, value translates directly to the array index
   return aProduct[value];
}

function _getSizeArray()
{
   var arr = _getStyleArray();
   if (arr == null)
   {
      return null;
   }

   var selected_index = document.forms[formName][sSize].selectedIndex;
   var value = document.forms[formName][sSize].options[selected_index].value;
   if (value == -1)
   {
      return null;
   }

   // here, value is the product id... need to find it
   var i;
   for (i = 0; i < arr.length; i++)
   {
      // index 0 is the product id
      if (value == arr[i][0])
      {
         return arr[i];
      }
   }
   // TODO: this is bad!
   return null;
}

function _setProduct(aProd, aAttrList)
{
   // in aProd, id is 0th element and name is the 1st element

   var i, j;
   for (i = 0; i < aAttrName.length; i++)
   {
      document.forms[formName][aHiddenAttrName[i]].value = aProd[i+2];

      document.forms[formName][aAttrName[i]].options.length = aAttrList[i].length + 1;
      document.forms[formName][aAttrName[i]].options[0] = new Option(sChoose, -1, true, true);

      for (j = 0; j < aAttrList[i].length; j++)
      {
         document.forms[formName][aAttrName[i]].options[j+1] = new Option(aAttrList[i][j], aAttrList[i][j], false, false);
      }
   }
}

function changeSize()
{
   var arr = _getSizeArray();
   if (arr == null)
   {
      return;
   }
   if (document.forms[formName][sSize].options[0].value == -1)
   {
      // clear out the "Choose" option from "size"
      document.forms[formName][sSize].options[0] = null;
   }

   // specify the product id
   document.forms[formName][sProductId].value = arr[0];

   // fill in the product attributes available to this style + size
   _setProduct(arr, aAttr[ _getStyleIndex() ]);
}

function changeAttribute(name)
{
   var selected_index = document.forms[formName][name].selectedIndex;
   var value = document.forms[formName][name].options[selected_index].value;
   if (value == -1)
   {
      return;
   }
   if (document.forms[formName][name].options[0].value == -1)
   {
      // clear out the "Choose" option from the attribute
      document.forms[formName][name].options[0] = null;
   }
}

function doSubmit()
{
   var id = document.forms[formName][sSize].value;

   var qs = "";
   for (i = 0; i < aHiddenAttrName.length; i++)
   {
      qs += "oa_attributes[" + document.forms[formName][aHiddenAttrName[i]].value + "]=";
      qs += escape(document.forms[formName][aAttrName[i]].value) + "&";
   }

   var action = document.forms[formName].action + qs;
   document.forms[formName].action = action;
   return true;
}