var cont = '<a href="#" onclick="return hideapop();">';
    cont += '<img src="../images/continue_button.gif" alt="continue" /></a>\n';
var dhelp = '<h3>How to Use the Decorator:</h3>';
 dhelp += 'Click the colored swatches inside the hoop to change the tapes.<br />';
 dhelp += 'To change between hoop styles, click the radial buttons above the hoop.<p />';
 dhelp += 'Can&rsquo;t decide? ';
 dhelp += 'Click &ldquo;random&rdquo; to load a random design.<br />';
 dhelp += 'Feel free to tweak the random design by clicking on the swatches.<br />';
 dhelp += 'When you find one you like, click &ldquo;save&rdquo; ';
 dhelp += 'to store the design while you continue decorating hoops.<br />';
 dhelp += 'Click the radio buttons next to your stored selections to review them.<p />';
 dhelp += 'When you see a design you like, click &ldquo;add to cart&rdquo; to make your order.<p />';
 dhelp += 'Still have questions? Email us at info@troohoops.com or ';
 dhelp += 'give us a call at 800-763-0909.<p />';
 dhelp += cont;

var model = 0;
var pieces = 0;
var amodel = ["", "Twist", "Tango", "Swing", "Matrix"];
var apieces = ["", "Quattro", "Pocket"];
var basenums = [0,5010,5020,5000,5040];
var cf = 1;
var cs = 0;
var pt = ["", "", "", "", "", ""];
var at = ["", "", "", "", "", ""]

var acolors = ["Yellow", "Red", "Teal", "Green", "Orange", "Pink", "Black", "White", "Silver", "Gold", "Red", "Aqua", "Green", "Pink", "Purple"];

function reSize2(v)
{ size=v;
  reNameNum(); }

function reWeight2(v)
{ weight=v;
  reNameNum();
  if (v==0)
  { document.getElementById("sport").src = "images/NavBtn_On.gif";
    document.getElementById("dance").src = "images/NavBtn_Off.gif"; }
  else
  { document.getElementById("sport").src = "images/NavBtn_Off.gif";
    document.getElementById("dance").src = "images/NavBtn_On.gif"; }
 }

function reNameNum()
{ var x = ""+model; var m = parseInt(x);
  var x = ""+pieces; var p = parseInt(x);
  var pc = p-1;

  var pm = m + (4 * pc);
  if (pm==0 || pm>8) {var prc="["+pm+"]";} else {var prc="";}

  document.fm.elements["pName[]"][1].value = prc + basename + apieces[p] + " " + amodel[m] + " " + szs[size] + " " + wts[weight];
  document.fm.elements["pModel[]"][cf].value = m;
  document.fm.elements["pPieces[]"][cf].value = p;
  var basen = basenums[model] + (800 * pc);
  document.fm.elements["pNum[]"][1].value = "T" + (basen + (size*2) + weight);
  document.fm.elements["pPrice[]"][cf].value = aprc[pm];
   }

function selRandom()
{ var i=0; var t1="";
  if (model!=3)
  { i = Math.floor(Math.random()*15); if (i<8) {t1="C_"+acolors[i];} else {t1="P_"+acolors[i];} }
  i = Math.floor(Math.random()*8); var t2=acolors[i];
  if (model>1) {i = Math.floor(Math.random()*8); var t3=acolors[i];} else {var t3="";}
  if (model>2) {i = Math.floor(Math.random()*8); var t4=acolors[i];} else {var t4="";}
  i = Math.floor(Math.random()*8); var t5=acolors[i];
  selTape1(t1);
  selTape2(t2);
  selTape3(t3);
  selTape4(t4);
  selTape5(t5); return false; }

function setDisp()
{ if (model!=3) {var s = at[1] + ", " + at[2] + ", ";}
  else {var s = at[2] + ", ";}
  if (model>1) {s += at[3] + ", ";}
  if (model>2) {s += at[4] + ", ";}
  s += at[5];
  document.fm.elements["pDisplay[]"][cf].value = s; }

function setCt(t)
{ var p = pt[t];
  var c = at[t];
  if (p)
  { var x = ""+p+t; document.getElementById(x).style.border = "1px solid #fff"; }
  if (c)
  { var x = ""+c+t; document.getElementById(x).style.border = "3px solid #8fe174"; }
  pt[t]=c; }

function selTape1(c, d)
{ if (!c) {var i="swatch/spacer.gif"; var s=""; var p = "";}
  else
  { var i="swatch/1"+c+".png";
    if (c.substr(0,1)=="P") {var mt=" Prism";} else {var mt=" Cloth";}
    var s="Base 1: " + c.substr(2) + mt;
    var p="1"+c; }
  document.getElementById("tape1").src = i;
  document.getElementById("slabel1").value = s;
  at[1] = c; setCt(1);
  if (!d)
  { document.fm.elements["pOption1[]"][cf].value = p;
    setDisp(); return false; } }
function selTape2(c, d)
{ if (model==3) { if (pieces==2) {var z="_8";} else {var z="";}
	var i="swatch/1Q_"+c+z+".png"; var s="Q1:"+c+" Cloth"; var p="q1_"+c;}
  else {var i="swatch/2_" + c + ".png"; var s="Base 2: " + c + " Cloth"; var p="2_"+c;}
  document.getElementById("tape2").src = i;
  document.getElementById("slabel2").value = s;
  at[2] = c; setCt(2);
  if (!d)
  { document.fm.elements["pOption2[]"][cf].value = p;
    setDisp(); return false; } }
function selTape3(c, d)
{ if (!c) {var i="swatch/spacer.gif"; var s=""; var p = "";}
  else if (model==3) { if (pieces==2) {var z="_8";} else {var z="";}
	var i="swatch/2Q_"+c+z+".png"; var s="Q2:"+c+" Cloth"; p="q2_"+c;}
  else {var i="swatch/3Ac_"+c+".png"; var s="Accent: "+c+" Cloth"; p="3Ac_"+c;}
  document.getElementById("tape3").src = i;
  document.getElementById("slabel3").value = s;
  at[3] = c; setCt(3);
  if (!d)
  { document.fm.elements["pOption3[]"][cf].value = p;
    setDisp(); return false; } }
function selTape4(c, d)
{ if (!c) {var i="swatch/spacer.gif"; var p = "";}
  else if (model==3) { if (pieces==2) {var z="_8";} else {var z="";}
	var i="swatch/3Q_"+c+z+".png"; var s="Q3:"+c+" Cloth"; p="q3_"+c;}
  else {var i="swatch/4CrA_"+c+".png"; var s="Accent Cross: "+c+" Cloth"; var p="4CrA_"+c;}
  document.getElementById("tape4").src = i;
  document.getElementById("slabel4").value = s;
  at[4] = c; setCt(4);
  if (!d)
  { document.fm.elements["pOption4[]"][cf].value = p;
    setDisp(); return false; } }
function selTape5(c, d)
{ var j="swatch/spacer.gif";
  if (model==3) { if (pieces==2) {var z="_8";} else {var z="";}
	var i="swatch/4Q_"+c+z+".png"; var s="Q4:"+c+" Cloth"; p="q4_"+c;}
  else {var i="swatch/Conn_"+c+".png"; var s="Connector: "+c+" Cloth"; var p="Conn_"+c;
	if (pieces==2) {var j="swatch/Conn_"+c+"_8.png";} }
  document.getElementById("tape5").src = i;
  document.getElementById("tape6").src = j;
  document.getElementById("slabel5").value = s;
  at[5] = c; setCt(5);
  if (!d)
  { document.fm.elements["pOption5[]"][cf].value = p;
    setDisp(); return false; } }

function selPieces(i)
{ pieces=i; setPuttons();
  reNameNum();
  if (model==3) {selTape2(at[2], 1); selTape3(at[3], 1); selTape4(at[4], 1);}
  selTape5(at[5], 1);
  return false; }

function selModel(m, p, t1, t2, t3, t4, t5)
{ if (!m) {model=1;} else {model=m;}
  if (!p) {if (!pieces) {pieces=1;}} else {pieces=p;}
  reNameNum();
  if (!t1 && model!=3) {t1="P_Silver";}
  if (!t2)
  { if (model==1 || model==4) {t2="Teal";}
    else if (model==3) {t2="White";}
    else {t2="White";} }
  if (!t3)
  { if (model==2 || model==3) {t3="Teal";}
    else if (model==4) {t3="White";} }
  if (!t4)
  { if (model==4) {t4="Pink";}
    else if (model==3) {t4="White";} }
  if (!t5) {t5="Teal";}
  setButtons();
  setPuttons();
  setBG();
  selTape1(t1);
  selTape2(t2);
  selTape3(t3);
  selTape4(t4);
  selTape5(t5); return false; }

function setButtons()
{ var nx = ["", "Off", "Off", "Off", "Off"];
  nx[model] = "On";
  document.getElementById("navb1").src = "images/NavBtn_" + nx[1] + ".gif";
  document.getElementById("navb2").src = "images/NavBtn_" + nx[2] + ".gif";
  document.getElementById("navb3").src = "images/NavBtn_" + nx[3] + ".gif";
  document.getElementById("navb4").src = "images/NavBtn_" + nx[4] + ".gif";
  var nx = ["", "none", "none", "none", "none"];
  nx[model] = "block";
  document.getElementById("model1").style.display = nx[1];
  document.getElementById("model2").style.display = nx[2];
  document.getElementById("model3").style.display = nx[3];
  document.getElementById("model4").style.display = nx[4]; }

function setPuttons()
{ var nx = ["", "Off", "Off"];
  nx[pieces] = "On";
  var dx = ["", "none", "none"];
  dx[pieces] = "block";
  document.getElementById("navp2").src = "images/NavBtn_" + nx[2] + ".gif";
  document.getElementById("navp1").src = "images/NavBtn_" + nx[1] + ".gif";
  document.getElementById("snipQuattro").style.display = dx[1];
  document.getElementById("snipPocket").style.display = dx[2];
  document.getElementById("revQuattro").style.display = dx[1];
  document.getElementById("revPocket").style.display = dx[2];
 }

function setBG()
{ document.getElementById("imodel").src = "swatch/arrow" + amodel[model] + ".png";
  if (model>2) {var h="block";} else {var h="none";}
  document.getElementById("swtape4").style.display = h;
  if (model!=1) {var h="block";} else {var h="none";}
  document.getElementById("swtape3").style.display = h;
  if (model==3)
  { document.getElementById("swtape1").style.display = "none";
    document.getElementById("ibase").src = "swatch/TubeBlack.png";
    document.getElementById("slabel2").style.paddingLeft = "24px";
    document.getElementById("swtape2").style.top = "34px";
    document.getElementById("swtape2").style.left = "146px";
    document.getElementById("swtape3").style.top = "260px";
    document.getElementById("swtape3").style.left = "270px";
    document.getElementById("swtape4").style.top = "368px";
    document.getElementById("swtape4").style.left = "190px";
    document.getElementById("swtape5").style.top = "162px";
    document.getElementById("swtape5").style.left = "48px"; }
  else
  { document.getElementById("swtape1").style.display = "block";
    document.getElementById("ibase").src = "swatch/spacer.gif";
    document.getElementById("slabel2").style.paddingLeft = "0px";
    document.getElementById("swtape2").style.top = "104px";
    document.getElementById("swtape2").style.left = "274px";
    document.getElementById("swtape3").style.top = "262px";
    document.getElementById("swtape3").style.left = "44px";
    document.getElementById("swtape4").style.top = "302px";
    document.getElementById("swtape4").style.left = "274px";
    document.getElementById("swtape5").style.top = "204px";
    document.getElementById("swtape5").style.left = "274px"; }
 }

function reDraw(m, p, t1, t2, t3, t4, t5)
{ model = m; setButtons();
  pieces = p; setPuttons();
  setBG();
  selTape1(t1, 1);
  selTape2(t2, 1);
  selTape3(t3, 1);
  selTape4(t4, 1);
  selTape5(t5, 1); }

function verifyHoops()
{ var qt = document.fm.elements["pQty[]"];
  var pTotal = 0;
  for (i=0; i<qt.length; i++)
  { if (qt[i].value > 0) { pTotal += qt[i].value; } }
  if (pTotal == 0)
  { return popAlert("You must input a quantity."); }
  return true; }

function saveStyle()
{ if (cs==0)
  { cs=1; document.getElementById("fline").style.display="block"; }
  else
  { var newdiv = document.createElement("div");
    newdiv.innerHTML = document.getElementById("fline").innerHTML;
    var container = document.getElementById("flines");
    container.appendChild(newdiv);
    document.fm.elements["xSel[]"][cs].checked = false;
    ++cs;
    document.fm.elements["xSel[]"][cs].value = cs; }
  var m = document.fm.elements["pModel[]"][cf].value;
  var p = document.fm.elements["pPieces[]"][cf].value;
  var s = amodel[m]+" "+apieces[p]+": ";
  var t1 = document.fm.elements["pOption1[]"][cf].value.substr(1);
  var a = document.fm.elements["pOption2[]"][cf].value.split("_"); var t2 = a[1];
  if (m>1) {a = document.fm.elements["pOption3[]"][cf].value.split("_"); var t3 = a[1];} else {var t3="";}
  if (m>2) {a = document.fm.elements["pOption4[]"][cf].value.split("_"); var t4 = a[1];} else {var t4="";}
  a = document.fm.elements["pOption5[]"][cf].value.split("_"); var t5 = a[1];
  s += t1;
  if (m!=3) {s+=", ";}
  s += t2 + ", ";
  if (m>1) {s += t3 + ", ";}
  if (m>2) {s += t4 + ", ";}
  s += t5;
  document.fm.elements["xSel[]"][cs].checked = true;
  document.fm.elements["xModel[]"][cs].value = m;
  document.fm.elements["xPieces[]"][cs].value = p;
  document.fm.elements["xTape1[]"][cs].value = t1;
  document.fm.elements["xTape2[]"][cs].value = t2;
  document.fm.elements["xTape3[]"][cs].value = t3;
  document.fm.elements["xTape4[]"][cs].value = t4;
  document.fm.elements["xTape5[]"][cs].value = t5;
  document.fm.elements["xLabel[]"][cs].value = s; return false; }

function setCf(o)
{ var n = o.value;
  var m = document.fm.elements["xModel[]"][n].value;
  var p = document.fm.elements["xPieces[]"][n].value;
  var t1 = document.fm.elements["xTape1[]"][n].value;
  var t2 = document.fm.elements["xTape2[]"][n].value;
  var t3 = document.fm.elements["xTape3[]"][n].value;
  var t4 = document.fm.elements["xTape4[]"][n].value;
  var t5 = document.fm.elements["xTape5[]"][n].value;
  selModel(m, p, t1, t2, t3, t4, t5); }