var array = new Array();
var arrayCount = 0;

var offX = 15;          // X offset from mouse position
var offY = 15;          // Y offset from mouse position
var _X = 0;          // X offset from mouse position
var _Y = 0;          // Y offset from mouse position

function mouseX(evt) 
{
  if (!evt) 
    evt = window.event; 
  if (evt.pageX) 
    return evt.pageX; 
  else if (evt.clientX)
    return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft);
  else 
    return 0;
}

function mouseY(evt) 
{
  if (!evt) 
    evt = window.event; 
  if (evt.pageY) 
    return evt.pageY; 
  else if (evt.clientY)
    return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
  else return 0;
}

function TestCreate(evt)
{
  _X = (parseInt(mouseX(evt)));
  _Y = (parseInt(mouseY(evt)));
}

function createDIV(parent, sColors, oColors, typeID, showPricing, parentID, singleSelectionOnly, featurePrice)
{
  try {
  var valid = true;
  var yOffSet = 0;
  var xOffSet = 0;
  var tmpItemID = 0;
  
  if(BrowserDetect.browser == "Explorer")
  {
    if(parent.childNodes[4] == null)
    {
      tmpItemID = parent.childNodes[5].value;
    }
    else
    {
      tmpItemID = parent.childNodes[4].value;
    }
  }
  else
  {
    if(parent.childNodes[4].value == null)
    {
      tmpItemID = parent.childNodes[5].value;
    }
    else
    {
      tmpItemID = parent.childNodes[4].value;
    }
  }
  
  if(typeID != 1)
  {
    for(var i=0; i<_optionArray.length; i++)
    {
      if(tmpItemID == _optionArray[i].ID)
      {
        valid = true;
        break;
      }
      else
      {
        valid = false;
      }
    }
  }

  // feature
  if(typeID == '2')
  {
    yOffSet = 10;
    xOffSet = -270;
  }
  else
  {
    yOffSet = -50;
    xOffSet = 10;
  }
  if(valid)
  {
    destroy();
    var largeCount;
    var colorNameDisplay = document.createElement("div");
    var xfeaturePrice = '0';
    var divBackground = document.createElement("div");
    divBackground.id = "uiDiv";
    
    var fPrice = document.getElementById(featurePrice);
    //alert(featurePrice);
    if(fPrice != null)
      xfeaturePrice = fPrice.value;

    //divBackground.style.left = xPageX(parent) - 210 + 'px';
    //divBackground.style.top = xPageY(parent) + yOffSet + 'px';
    divBackground.style.left = _X + xOffSet + 'px';
    divBackground.style.top = _Y + yOffSet + 'px';
    //alert(yOffSet + " " + divBackground.style.top);
    divBackground.style.position = "absolute";
    divBackground.style.border = "1px solid #000";
    divBackground.style.background = "#f0f0f0";
    divBackground.style.zIndex = 100;
    
    divBackground.innerHTML = "<div style='width:100%;' class='Header4'>Select Color</div>";
    
    document.body.appendChild(divBackground);
    array[arrayCount] = divBackground;
    arrayCount++;
    
    if (sColors != "") {
      divBackground.style.height = 105 + "px";
      var colorList = sColors.split(":");
      
      largeCount = colorList.length;
      divBackground.innerHTML = divBackground.innerHTML + "<u style='padding-left:5px;'>Standard Colors:</u><br />"
      for(var i=0; i < colorList.length; i++ ) {

        var valueArray = colorList[i].split(",");
        var multiColor = valueArray[1].split("|");
        var colorPrice = valueArray[3];
        if (multiColor.length > 1) {
          testDiv(parent, valueArray[0], multiColor[0], multiColor[1], valueArray[2], 45, i, typeID, colorPrice, showPricing, singleSelectionOnly, parentID, xfeaturePrice);
          testDiv(parent, valueArray[0], multiColor[1], multiColor[0], valueArray[2], 35, i, typeID, colorPrice, showPricing, singleSelectionOnly, parentID, xfeaturePrice);
        } else {
          testDiv(parent, valueArray[0], valueArray[1], "", valueArray[2], 35, i, typeID, colorPrice, showPricing, singleSelectionOnly, parentID, xfeaturePrice);
        }
      }
    }
    
    if (oColors != "") {
      divBackground.style.height = 135 + "px";
      var colorList2 = oColors.split(":");
      
      largeCount = colorList2.length;
      divBackground.innerHTML = divBackground.innerHTML + "<br /><br /><br /><u style='padding-left:5px;'>Optional Colors:</u><br />"
      for(var i2=0; i2 < colorList2.length; i2++ ) {

        var valueArray2 = colorList2[i2].split(",");
        var multiColor2 = valueArray2[1].split("|");
        var colorPrice2 = valueArray2[3];
        if (multiColor2.length > 1) {
          testDiv(parent, valueArray2[0], multiColor2[0], multiColor2[1], valueArray2[2], 105, i2, typeID, colorPrice2, showPricing, singleSelectionOnly, parentID, xfeaturePrice);
          testDiv(parent, valueArray2[0], multiColor2[1], multiColor2[0], valueArray2[2], 95, i2, typeID, colorPrice2, showPricing, singleSelectionOnly, parentID, xfeaturePrice);
        } else {
          testDiv(parent, valueArray2[0], valueArray2[1], "", valueArray2[2], 85, i2, typeID, colorPrice2, showPricing, singleSelectionOnly, parentID, xfeaturePrice);
        }
        
      }
    }
    
    var width = (largeCount * 14) + 10;
    if(width > 270)
    {
      divBackground.style.width = (largeCount * 14) + 20 + 'px';
    }
    else
    {
      divBackground.style.width = "290px";//(largeCount * 14) + 10 + 'px';
    }
//    divBackground.style.left = xPageX(parent) - 210;
//    divBackground.style.top = xPageY(parent) + 20 + 'px';
  }
  } catch(err) { alert('error:createDiv ' + err.message); }
}

function testDiv(inParent, text, bgcolor, bgcolor2, value, yDivOffset, xDivOffset, typeID, colorPrice, showPricing, singleSelectionOnly, parentID, featurePrice)
{
  try {
  var yOffSet = _Y;
  var xOffSet = (_X + 18);
  var height = 20;
  // features
  if(typeID == 2)
  {
    yOffSet = yOffSet + yDivOffset + 15;
    xOffSet = (xOffSet + (xDivOffset * 14)) - 280;
    //xOffSet = (xOffSet + (xDivOffset * 14)) + 100;
  }
  else
  {
    if(bgcolor2 != '')
    {
      height = 10;
    }
    else
    {
      height = 20;
    }
    yOffSet = yOffSet + yDivOffset - 45;
    xOffSet = (_X + 18) + (xDivOffset * 14);
  }
  var newdiv = document.createElement("div");
  newdiv.setAttribute("id","DivName" + arrayCount);
  newdiv.style.width = 10 + 'px';
  newdiv.style.height = height + 'px';
  
  //alert((_X + 10) + xOffSet);
  newdiv.singleSelectionOnly = singleSelectionOnly;
  newdiv.style.left = xOffSet + 'px';
  newdiv.style.top = yOffSet + 'px';
  newdiv.style.position = "absolute";
  newdiv.style.zIndex = 101;
  newdiv.style.border = "1px solid #000000";
  newdiv.typeID = typeID;
  newdiv.colorPrice = colorPrice;
  newdiv.showPricing = showPricing;
  newdiv.parentID = parentID;
  newdiv.colorName = text;
  newdiv.xvalue = value;
  newdiv.featurePrice = featurePrice;
  
  newdiv.valueControl = inParent.childNodes[1];
  
  // child nodes ie7|firefox
  // 1: Color|Color
  // 2: undifine|undifine
  // 3: Color2|Color2
  // 4: ColorAreaID|undifine
  // 5: undifine|ColorAreaID
    
  if(BrowserDetect.browser == "Explorer")
  {
    if(inParent.childNodes[4] == null)
    {
      newdiv.paramID = inParent.childNodes[5].value;
    }
    else
    {
      newdiv.paramID = inParent.childNodes[4].value;
    }
  }
  else
  {
    if(inParent.childNodes[4].value == null)
    {
      newdiv.paramID = inParent.childNodes[5].value;
    }
    else
    {
      newdiv.paramID = inParent.childNodes[4].value;
    }
  }
    
  newdiv.displayControl = inParent;
  var flag = false;
  switch (value)
  {
    case '8286': //Stratosphere Blue Metallic
      newdiv.style.background = 'url(images/m_flakes/blue.png)';
      flag = true;
      break;
    case '8287': //Machine Silver Metallic
      newdiv.style.background = 'url(images/m_flakes/silver.png)';
      flag = true;
      break;
    case '8288': //Atomic Orange Metallic
      newdiv.style.background = 'url(images/m_flakes/orange.png)';
      flag = true;
      break;
    case '8272': //Black flake
      newdiv.style.background = 'url(images/m_flakes/black.png)';
      flag = true;
      break;
    case '8271': //Silver flake
      newdiv.style.background = 'url(images/m_flakes/silver.png)';
      flag = true;
      break;
    case '8299': //Chrystal Red Metallic
      newdiv.style.background = 'url(images/m_flakes/red.png)';
      flag = true;
      break;
    default:
      newdiv.style.background = bgcolor;
      if (bgcolor2 != "")
        newdiv.color2 = bgcolor2;    
  }
  // black flake
  //if(value == 8272)
  //{
  //  newdiv.style.background = 'url(images/black_flake.jpg)';
  //}
  // silver flake
  //else if(value == 8271)
  //{
  //  newdiv.style.background = 'url(images/silver_flake.jpg)';
  //}
  // no flake
  //if(flag != true)
  //{
  //  newdiv.style.background = bgcolor;
  //  if (bgcolor2 != "")
  //    newdiv.color2 = bgcolor2;  
  //}
 
  newdiv.onmouseover = itemMouseOver; //divOver; //
  newdiv.onmouseout = PopupDivOut;
  newdiv.onclick = itemClick;

  document.body.appendChild(newdiv);

  array[arrayCount] = newdiv;
  arrayCount++;
  }
  catch(err) { alert("Error in Javascript Section - testDiv:" + err.description);}
}

function findChildElement(obj, number)
{
  try {
  var nodeNumber = 0;

  for(var i=0; i < obj.Nodes.length; i++ ) {
    if (obj.childNodes[i].nodeType == 3)
    {
      nodeNumber++;
      if (nodeNumber == number)
      {
        return obj.childNodes[i];
        break;
      }
    } 
  }
  } catch(err) { alert("findChildElement"); }
}

function destroy() {
  try {
    for(var i=0; i < arrayCount; i++ ) {
      array[i].style.display = "none";
      array[i] = null;
    }
    
    arrayCount = 0;
    array = null;
    array = new Array();
  } catch(err) { alert("destroy"); }
}

function itemClick() {
  this.valueControl.value = this.xvalue;
  this.displayControl.style.background = this.style.background;
  //alert(this.displayControl);
  
  if (this.color2 != null)
  {
    this.displayControl.childNodes[3].style.background = this.color2;
    this.displayControl.childNodes[3].style.display = "block";
  }
  else
  {
    this.displayControl.childNodes[3].style.display = "none";
  }
  //alert(this.displayControl.childNodes[8].id);
  //this.displayControl.childNodes[8].innerText = this.colorName;
  //alert(this.valueControl.id.substring(0, this.valueControl.id.length - 5) + "uiColorName");
  
  var uiColorName = xGetElementById(this.valueControl.id.substring(0, this.valueControl.id.length - 5) + "uiColorName");
  var uiColorPrice = xGetElementById(this.valueControl.id.substring(0, this.valueControl.id.length - 5) + "Price");
  var cPrice = Math.round((parseFloat(this.colorPrice)));
  
  if(BrowserDetect.browser == "Explorer")
  {
    if(uiColorName != null)
    {
      uiColorName.innerText = this.colorName;
    }
    else
    {
      this.displayControl.innerText = this.colorName;
      //alert(this.displayControl.id);
    }
    
    uiColorPrice.innerText = this.colorPrice;
  }
  else
  {
    if(uiColorName.id != null)
    {
      uiColorName.innerHTML = this.colorName;
    }
    else
    {
      this.displayControl.innerHTML = this.colorName;
      //alert(this.displayControl.id);
    }
    if(this.colorPrice != '')
      uiColorPrice.innerHTML = this.colorPrice;
  }
  
  var totalPrice = parseFloat(this.colorPrice) + parseFloat(this.featurePrice);
  //alert(this.colorPrice);
  //alert(this.paramID + " " + this.xvalue + " " + this.typeID + " " + this.colorPrice + " " + this.parentID + " " + this.singleSelectionOnly); 
  SetOption(this.paramID, this.xvalue, this.typeID, totalPrice, this.parentID, this.singleSelectionOnly);
  //alert(this.paramID);
//  if(this.pramID == 64)
//    __doPostBack();
  destroy();
}

function itemMouseOver() {
  //this.valueControl.value = this.xvalue;
  //this.displayControl.style.background = this.style.background;
  
//  if (this.color2 != null)
//  {
//    this.displayControl.childNodes[3].style.background = this.color2;
//    this.displayControl.childNodes[3].style.display = "block";
//  }
//  else
//  {
//    this.displayControl.childNodes[3].style.display = "none";
//  }
//  var uiColorName = document.getElementById(this.valueControl.id.substring(0, this.valueControl.id.length - 5) + "uiColorName");
//  if(uiColorName != null)
//  {
//    //alert(uiColorName.id + " 1");
//    uiColorName.innerHTML = this.colorName;
//    //alert(this.colorName);
//  }
//  else
//  {
//    this.displayControl.innerHTML = this.colorName;
//    //alert(this.displayControl.id + " 2");
//  }
//  SetOption(this.paramID, this.xvalue, this.typeID, this.colorPrice, this.parentID, this.singleSelectionOnly);
  
  this.onload = Loaded();
  this.mousemove = Follow(this, 100, 25, "uiPopupDiv");
  var cPrice = Math.round((parseFloat(this.colorPrice)));
  if(this.showPricing == "False")
  {
    PopupDivOver(this, this.colorName);
  }
  else
  {
    PopupDivOver(this, this.colorName + " $" + parseFloat(cPrice) + ".00");
  }
}