????
Your IP : 18.227.140.251
<html>
<head><script src="//cdn.optimizely.com/js/1865631164.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
x = 1;
npom = 1;
ntas = 1;
ncan = 1;
cpom = 1;
ctas = 1;
ccan = 1;
var tassels = new Array("WH","WH","WH","WH","WH","WH");
var poms = new Array("WH","WH","WH","WH","WH","WH");
var candies = new Array("1SL","0XX");
var tpath = "design/A10/";
//var wPomLists = new Array("111111111111", "221111222112", "132311223123","233142141234","352144521312","415324326156"); - from flash script
var wPomLists = new Array("111111111111", "212111222112", "113123223123","243231141234","345421521312","424453326156");
var wTasselLists = new Array("111111", "122112", "123132","123412","123451","123456");
function f0() {
if(x>0){
x=0;
document.getElementById("L9").src = "pom/A10POM007BRXXXX00.png";
} else {
x=1;
document.getElementById("L9").src = "pom/A10POM007FGXXXX00.png";
}
}
function f2orig(num,obj,str) {
var i=0;
if (num < 1) {
// color btn
tassels[ctas-1] = str;
document.getElementById("Tassel"+ctas).innerHTML = obj.title;
//document.getElementById("Tassel"+ctas).style.border="thin solid #90887F";
for (i=1;i<=6;i++) {
if (i <= ntas){
//document.getElementById("Tassel"+i).innerHTML = "Red";
} else {
tassels[i-1] = tassels[i-ntas-1];
}
}
} else {
//ntas = num;
for (i=1;i<=6;i++) {
if (i <= num){
//document.getElementById("Tassel"+i).innerHTML = "Red";
if (i > ntas){
// if (document.getElementById("Tassel"+i).innerHTML.length < 3){
document.getElementById("Tassel"+i).innerHTML = document.getElementById("Tassel"+(i-ntas)).innerHTML;
// alert(ntas);
}
} else {
document.getElementById("Tassel"+i).innerHTML = " ";
document.getElementById("Tassel"+i).style.border="NONE";
tassels[i-1] = tassels[i-num-1];
}
document.getElementById("Tassel"+i).style.border="NONE";
}
ntas = num;
ctas = num;
document.getElementById("Tassel"+ntas).style.border="thin solid #90887F";
}
for (i=13;i<=18;i++) {
document.getElementById("L"+i).src = "tas/A10TAS00" + (i-12) + tassels[i-13] + "XXXX00.png";
}
//alert(ntas);
}
function f2(num,obj,str) {
var i=0;
if (num < 1) {
// color btn
tassels[ctas-1] = str;
document.getElementById("Tassel"+ctas).innerHTML = obj.title;
for (i=1;i<=6;i++) {
if (i <= ntas){
} else {
tassels[i-1] = tassels[i-ntas-1];
}
}
} else {
for (i=1;i<=6;i++) {
if (i <= num){
if (i > ntas){
document.getElementById("Tassel"+i).innerHTML = document.getElementById("Tassel"+(i-ntas)).innerHTML;
}
} else {
document.getElementById("Tassel"+i).innerHTML = "[Add Color]";
document.getElementById("Tassel"+i).style.border="NONE";
tassels[i-1] = tassels[i-num-1];
}
document.getElementById("Tassel"+i).style.border="NONE";
}
ntas = num;
ctas = num;
document.getElementById("Tassel"+ntas).style.border="thin solid #90887F";
}
for (i=13;i<=18;i++) {
document.getElementById("L"+i).src = tpath + "TAS/A10TAS00" + (i-12) + tassels[i-13] + "XXXX00.png";
}
document.getElementById("debug").innerHTML =(tassels.toString());
}
function f3(num, num2) {
// should also affect poms array
var i=0;
if (num < 2) {
// pompom labels
cpom = num2;
for (i=1;i<=6;i++) {
document.getElementById("Pompom"+i).style.border="NONE";
if (i <= num2){
if (i > npom){
document.getElementById("Pompom"+i).innerHTML = document.getElementById("Pompom"+(i-npom)).innerHTML;
poms[i-1] = poms[i-1-npom];
}
}
}
document.getElementById("Pompom"+cpom).style.border="thin solid #90887F";
if (cpom > npom) npom = cpom;
//document.getElementById("debug").innerHTML =(poms.toString());
} else if (num > 2) {
// candie labels
ccan = num2;
document.getElementById("Candy1").style.border="NONE";
document.getElementById("Candy2").style.border="NONE";
document.getElementById("Candy" + ccan).style.border="thin solid #90887F";
if (ccan > ncan) ncan = ccan;
} else {
// tassel labels
ctas = num2;
for (i=1;i<=6;i++) {
document.getElementById("Tassel"+i).style.border="NONE";
if (i <= num2){
if (i > ntas){
document.getElementById("Tassel"+i).innerHTML = document.getElementById("Tassel"+(i-ntas)).innerHTML;
tassels[i-1] = tassels[i-1-ntas];
}
}
}
document.getElementById("Tassel"+ctas).style.border="thin solid #90887F";
if (ctas > ntas) ntas = ctas;
}
}
function f4(num,obj,str) {
var i=0;
if (num < 1) {
// color btn
poms[cpom-1] = str;
document.getElementById("Pompom"+cpom).innerHTML = obj.title;
for (i=1;i<=6;i++) {
if (i <= npom){
} else {
poms[i-1] = poms[i-npom-1];
}
}
} else {
for (i=1;i<=6;i++) {
if (i <= num){
if (i > npom){
document.getElementById("Pompom"+i).innerHTML = document.getElementById("Pompom"+(i-npom)).innerHTML;
}
} else {
document.getElementById("Pompom"+i).innerHTML = "[Add Color]";
document.getElementById("Pompom"+i).style.border="NONE";
poms[i-1] = poms[i-num-1];
}
document.getElementById("Pompom"+i).style.border="NONE";
}
npom = num;
cpom = num;
document.getElementById("Pompom"+npom).style.border="thin solid #90887F";
}
//for (i=7;i<=11;i++) {
// for (i=3;i<=11;i++) {
// document.getElementById("L"+i).src = tpath + "POM/A10POM00" + (i-2) + "WHXXXX00.png";
//}
for (i=3;i<=11;i++) {
document.getElementById("L"+i).src = tpath + "POM/A10POM00" + (i-2) + poms[wPomLists[npom-1].substring(i-3,i-2) - 1] + "XXXX00.png";
document.getElementById("ppm"+(i-2)).innerHTML = wPomLists[npom-1].substring(i-3,i-2)-1;
}
// for (i=5;i<=11;i++) {
// document.getElementById("L"+i).src = "pom/A10POM00" + (i-2) + poms[wPomLists[npom-1].substring(i-3,i-2) - 1] + "XXXX00.png";
// }
//document.getElementById("L12").src = "pom/A10POM010" + poms[wPomLists[npom-1].substring(9,10)] + "XXXX00.png";
//document.getElementById("ppm"+(i-2)).innerHTML = wPomLists[npom-1].substring(9,10)-1;
document.getElementById("L12").src = tpath + "POM/A10POM010" + poms[wPomLists[npom-1].substring(9,10)-1] + "XXXX00.png";
//document.getElementById("debug").innerHTML =(poms.toString());
}
function f1(obj,str)
{
document.getElementById("L2").src = tpath + "RIB/A10RIB000" + str + "XXXX00.png";
document.getElementById("Ribbon").innerHTML = obj.title;
}
function f5(obj,str)
{
tmp = candies[ccan - 1];
candies[ccan - 1] = str;
temp = candies[0].substring(0,1) + candies[1].substring(0,1) + "0";
switch (temp)
{
case "100":
case "110":
case "130":
case "140":
case "150":
case "200":
case "230":
case "250":
case "300":
case "310":
case "320":
case "330":
case "400":
case "410":
case "500":
case "510":
case "520":
case "550":
case "600":
case "700":
case "800":
// build picture
document.getElementById("debug").innerHTML = temp + "xx";
break;
default:
candies[ccan - 1] = tmp;
document.getElementById("debug").innerHTML = temp + "deff";
}
document.getElementById("L1").src = tpath + "TUB/A10CAN" + str.substring(0,1) + "00" + str.substring(1,3) + "XXXX00.png";
document.getElementById("Candy1").innerHTML = obj.title;
}
$(function() {
$( "#tabs" ).tabs();
});
$(function() {
//$( "#radio" ).buttonset();
//$( "#radio2" ).buttonset();
});
rnd = 115077;
var state = "";
function loadXMLDoc()
{
// works
var xmlhttp;
rnd=rnd+1;
var urlZ = "read_state.php?rm=2&trimestamp=" + rnd;
//document.getElementById("myDiv").innerHTML=urlZ;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
state = xmlhttp.responseText;
document.getElementById("myDiv").innerHTML=state;
parseB();
}
}
//xmlhttp.open("GET","../../read_stated.php?rm=1&×tamp=" + rnd, true);
xmlhttp.open("GET",urlZ, true);
xmlhttp.send();
}
var t;
var timer_is_on=0;
function timedCount()
{
loadXMLDoc();
t=setTimeout("timedCount()",5000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function parseB()
{
// initState = "A101IWXXXXXXXXXX400WHXXXXPPXXXXXXXXXXPPGL";
// 0123456789a123456789b123456789c123456789d
// oooN112233445566ccc112233tt2233445566rrbb
// base
document.getElementById("L0").src = tpath + "A10BAS000" + state.substring(39,41) + "XXXX00.png";
// candy
temp = state.substring(16,19);
gwrk = state.substring(19,25);
wrevers = 100;
switch (temp)
{
case "310":
case "320":
case "410":
case "510":
case "520":
wrevers = 1;
break;
case "110":
wrevers = 0;
if (gwrk.substring(0,2) == "BK") {wrevers = 0;}
else if (gwrk.substring(2,4) == "BK") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "BL") {wrevers = 0;}
else if (gwrk.substring(2,4) == "BL") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "RD") {wrevers = 0;}
else if (gwrk.substring(2,4) == "RD") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "GN") {wrevers = 0;}
else if (gwrk.substring(2,4) == "GN") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "PP") {wrevers = 0;}
else if (gwrk.substring(2,4) == "PP") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "SL") {wrevers = 0;}
else {wrevers = 1;}
}
}
}
}
}
break;
case "330":
if (gwrk.substring(0,2) == "WH") {wrevers = 0;}
else if (gwrk.substring(2,4) == "WH") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "LA") {wrevers = 0;}
else if (gwrk.substring(2,4) == "LA") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "LB") {wrevers = 0;}
else if (gwrk.substring(2,4) == "LB") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "PH") {wrevers = 0;}
else if (gwrk.substring(2,4) == "PH") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "LG") {wrevers = 0;}
else {wrevers = 1;}
}
}
}
}
break;
case "550":
if (gwrk.substring(0,2) == "PP") {wrevers = 0;}
else if (gwrk.substring(2,4) == "PP") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "RD") {wrevers = 0;}
else if (gwrk.substring(2,4) == "RD") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "OR") {wrevers = 0;}
else if (gwrk.substring(2,4) == "OR") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "NA") {wrevers = 0;}
else if (gwrk.substring(2,4) == "NA") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "BK") {wrevers = 0;}
else if (gwrk.substring(2,4) == "BK") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "LA") {wrevers = 0;}
else if (gwrk.substring(2,4) == "LA") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "GN") {wrevers = 0;}
else if (gwrk.substring(2,4) == "GN") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "LY") {wrevers = 0;}
else if (gwrk.substring(2,4) == "LY") {wrevers = 1;}
else {
if (gwrk.substring(0,2) == "LP") {wrevers = 0;}
else {wrevers = 1;}
}
}
}
}
}
}
}
}
break;
case "100":
case "200":
case "300":
case "400":
case "500":
case "600":
case "700":
case "800":
case "900":
wrevers = 100;
break;
default:
wrevers = 0;
}
if (wrevers == 1) {temp = temp.substring(1,2) + temp.substring(0,1) + temp.substring(2,3);}
switch (wrevers)
{
case 0:
document.getElementById("L1").src = tpath + "TUB/A10CAN" + temp + state.substring(19,23) + "XX00.png";
document.getElementById("debug").innerHTML = tpath + "TUB/A10CAN" + temp + state.substring(19,23) + "XX00.png";
break;
case 1:
document.getElementById("L1").src = tpath + "TUB/A10CAN" + temp + state.substring(21,23) + state.substring(19,21) + "XX00.png";
document.getElementById("debug").innerHTML = tpath + "TUB/A10CAN" + temp + state.substring(21,23) + state.substring(19,21) + "XX00.png";
break;
case 100:
document.getElementById("L1").src = tpath + "TUB/A10CAN" + temp + state.substring(19,21) + "XXXX00.png";
document.getElementById("debug").innerHTML = tpath + "TUB/A10CAN" + temp + state.substring(19,21) + "XXXX00.png";
break;
}
// ribbon
document.getElementById("L2").src = tpath + "RIB/A10RIB000" + state.substring(37,39) + "XXXX00.png";
// poms
npom = 0;
var i = 0;
for (i=0;i<=5;i++) {
poms[i] = "XX";
poms[i] = state.substring(4+i*2,6+i*2);
if (poms[i]=="XX") {
npom = i;
break;
}
}
if (npom == 0) npom = 1;
for (i=3;i<=11;i++) {
document.getElementById("L"+i).src = tpath + "POM/A10POM00" + (i-2) + poms[wPomLists[npom-1].substring(i-3,i-2) - 1] + "XXXX00.png";
}
document.getElementById("L12").src = tpath + "POM/A10POM010" + poms[wPomLists[npom-1].substring(9,10)-1] + "XXXX00.png";
//document.getElementById("debug").innerHTML =(poms.toString());
// tassels
ntas = 0;
for (i=0;i<=5;i++) {
tassels[i] = "XX";
tassels[i] = state.substring(25+i*2,27+i*2);
if (tassels[i]=="XX") {
ntas = i;
break;
}
}
if (ntas == 0) ntas = 1;
// if (ntas < 6) {
// for (i=ntas+1;i<=6;i++) {
// tassels[i-1] = tassels[i-ntas-1];
// }
// }
for (i=13;i<=18;i++) {
document.getElementById("L"+i).src = tpath + "TAS/A10TAS00" + (i-12) + tassels[wTasselLists[ntas-1].substring(i-13,i-12) - 1] + "XXXX00.png";
}
}
</script>
</head>
<body>
<div style="position: absolute; top:250px; z-index:100">
<img id = "L0" src = "design/A10/A10BAS000AGXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:200">
<img id = "L1" src = "design/A10/TUB/A10CAN110BKPPXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:300">
<img id = "L2" src = "design/A10/RIB/A10RIB000MLXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:400">
<img id = "L3" src = "design/A10/POM/A10POM001CBXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:500">
<img id = "L4" src = "design/A10/POM/A10POM003BUXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:600">
<img id = "L5" src = "design/A10/POM/A10POM005GYXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:700">
<img id = "L6" src = "design/A10/POM/A10POM006AZXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:800">
<img id = "L7" src = "design/A10/POM/A10POM002FGXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:900">
<img id = "L8" src = "design/A10/POM/A10POM004EPXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1000">
<img id = "L9" src = "design/A10/POM/A10POM007BRXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1100">
<img id = "L10" src = "design/A10/POM/A10POM008CAXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1200">
<img id = "L11" src = "design/A10/POM/A10POM009CAXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1300">
<img id = "L12" src = "design/A10/POM/A10POM010BUXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1400">
<img id = "L13" src = "design/A10/TAS/A10TAS001MPXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1500">
<img id = "L14" src = "design/A10/TAS/A10TAS002MNXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1600">
<img id = "L15" src = "design/A10/TAS/A10TAS003RDXXXX01.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1700">
<img id = "L16" src = "design/A10/TAS/A10TAS004CEXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1800">
<img id = "L17" src = "design/A10/TAS/A10TAS005EPXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1900">
<img id = "L18" src = "design/A10/TAS/A10TAS006AZXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; left:720px; z-index:3000">
<br>
</div>
<div class="demo">
<div id="tabs" style="position: absolute; top:250; left:660px">
<ul>
<li><a href="#tabs-1">Pompoms</a></li>
<li><a href="#tabs-2">Tassels</a></li>
<li><a href="#tabs-3">Candy</a></li>
<li><a href="#tabs-4">Ribbon</a></li>
<li><a href="#tabs-5">Base</a></li>
</ul>
<div id="tabs-1">
<table>
<td width=40%>
<p id="Pompom1" onclick="f3(1,1)" ondblclick="f4(1,this,'x')" style="cursor:default">White</p>
<p id="Pompom2" onclick="f3(1,2)" ondblclick="f4(2,this,'x')" style="cursor:default">[Add Color]</p>
<p id="Pompom3" onclick="f3(1,3)" ondblclick="f4(3,this,'x')" style="cursor:default">[Add Color]</p>
<p id="Pompom4" onclick="f3(1,4)" ondblclick="f4(4,this,'x')" style="cursor:default">[Add Color]</p>
<p id="Pompom5" onclick="f3(1,5)" ondblclick="f4(5,this,'x')" style="cursor:default">[Add Color]</p>
<p id="Pompom6" onclick="f3(1,6)" ondblclick="f4(6,this,'x')" style="cursor:default">[Add Color]</p>
<p id="ppm1" style="cursor:default">0</p>
<p id="ppm2" style="cursor:default">0</p>
<p id="ppm3" style="cursor:default">0</p>
<p id="ppm4" style="cursor:default">0</p>
<p id="ppm5" style="cursor:default">0</p>
<p id="ppm6" style="cursor:default">0</p>
<p id="ppm7" style="cursor:default">0</p>
<p id="ppm8" style="cursor:default">0</p>
<p id="ppm9" style="cursor:default">0</p>
<p id="ppm10" style="cursor:default">0</p>
</td>
<td>
<table style="cursor:default" border=1>
<tr>
<td title="White" onclick="f4(0,this,'WH')" style="background-color:rgb(252,251,252)"> </td>
<td title="Metallic Silver" onclick="f4(0,this,'MS')" style="background-color:rgb(231,232,242)"> </td>
<td title="Iridescent White" onclick="f4(0,this,'IW')" style="background-color:rgb(245,227,210)"> </td>
<td title="Ivory" onclick="f4(0,this,'IV')" style="background-color:rgb(242,237,206)"> </td>
<td title="Grey" onclick="f4(0,this,'GY')" style="background-color:rgb(154,145,174)"> </td>
<td title="Burgundy" onclick="f4(0,this,'BU')" style="background-color:rgb(92,1,8)"> </td>
<td title="Metallic Burgundy" onclick="f4(0,this,'MY')" style="background-color:rgb(98,1,8)"> </td>
<td title="Brown" onclick="f4(0,this,'BR')" style="background-color:rgb(101,39,44)"> </td>
</tr>
<tr>
<td title="Cabernet" onclick="f4(0,this,'CA')" style="background-color:rgb(125,0,0)"> </td>
<td title="Red" onclick="f4(0,this,'RD')" style="background-color:rgb(208,21,41)"> </td>
<td title="Metallic Red" onclick="f4(0,this,'RM')" style="background-color:rgb(208,21,41)"> </td>
<td title="Orange" onclick="f4(0,this,'OR')" style="background-color:rgb(255,104,8)"> </td>
<td title="Tangerine" onclick="f4(0,this,'TA')" style="background-color:rgb(255,161,114)"> </td>
<td title="Metallic Copper" onclick="f4(0,this,'MC')" style="background-color:rgb(245,109,0)"> </td>
<td title="Coral" onclick="f4(0,this,'CO')" style="background-color:rgb(242,88,88)"> </td>
<td title="Fuchsia" onclick="f4(0,this,'FU')" style="background-color:rgb(255,140,255)"> </td>
</tr>
<tr>
<td title="Metallic Fuchsia" onclick="f4(0,this,'MF')" style="background-color:rgb(255,33,163)"> </td>
<td title="Hot Pink" onclick="f4(0,this,'HP')" style="background-color:rgb(255,70,213)"> </td>
<td title="Metallic Pink" onclick="f4(0,this,'MK')" style="background-color:rgb(242,136,171)"> </td>
<td title="Baby Pink" onclick="f4(0,this,'BP')" style="background-color:rgb(255,207,214)"> </td>
<td title="Azalea" onclick="f4(0,this,'AZ')" style="background-color:rgb(255,179,202)"> </td>
<td title="Peach" onclick="f4(0,this,'PH')" style="background-color:rgb(242,204,200)"> </td>
<td title="Metallic Gold" onclick="f4(0,this,'MG')" style="background-color:rgb(233,222,129)"> </td>
<td title="Light Yellow" onclick="f4(0,this,'LY')" style="background-color:rgb(255,249,90)"> </td>
</tr>
<tr>
<td title="Daffodil Yellow" onclick="f4(0,this,'DA')" style="background-color:rgb(245,192,0)"> </td>
<td title="Mustard" onclick="f4(0,this,'MU')" style="background-color:rgb(217,172,37)"> </td>
<td title="Lime Green" onclick="f4(0,this,'LM')" style="background-color:rgb(44,213,65)"> </td>
<td title="Mint" onclick="f4(0,this,'MI')" style="background-color:rgb(59,255,3)"> </td>
<td title="Metallic Green" onclick="f4(0,this,'MN')" style="background-color:rgb(59,167,88)"> </td>
<td title="Hunter Green" onclick="f4(0,this,'HU')" style="background-color:rgb(5,73,57)"> </td>
<td title="Metallic Light Blue" onclick="f4(0,this,'ML')" style="background-color:rgb(185,230,245)"> </td>
<td title="Sage" onclick="f4(0,this,'SA')" style="background-color:rgb(175,206,180)"> </td>
</tr>
<tr>
<td title="Celedon" onclick="f4(0,this,'CE')" style="background-color:rgb(190,255,214)"> </td>
<td title="Baby Blue" onclick="f4(0,this,'BB')" style="background-color:rgb(185,230,249)"> </td>
<td title="Aqua" onclick="f4(0,this,'AQ')" style="background-color:rgb(31,205,193)"> </td>
<td title="Seafoam" onclick="f4(0,this,'SF')" style="background-color:rgb(47,217,235)"> </td>
<td title="Turquoise" onclick="f4(0,this,'TU')" style="background-color:rgb(6,197,227)"> </td>
<td title="Teal" onclick="f4(0,this,'TL')" style="background-color:rgb(30,166,167)"> </td>
<td title="Cornflower" onclick="f4(0,this,'CB')" style="background-color:rgb(40,133,208)"> </td>
<td title="Metallic Royal Blue" onclick="f4(0,this,'MR')" style="background-color:rgb(2,120,217)"> </td>
</tr>
<tr>
<td title="Royal Blue" onclick="f4(0,this,'RB')" style="background-color:rgb(27,39,177)"> </td>
<td title="Navy" onclick="f4(0,this,'NA')" style="background-color:rgb(18,27,99)"> </td>
<td title="Periwinkle" onclick="f4(0,this,'PW')" style="background-color:rgb(108,106,185)"> </td>
<td title="Lavender" onclick="f4(0,this,'LA')" style="background-color:rgb(195,154,255)"> </td>
<td title="Metallic Rurple" onclick="f4(0,this,'MP')" style="background-color:rgb(215,82,244)"> </td>
<td title="Purple" onclick="f4(0,this,'PP')" style="background-color:rgb(163,58,180)"> </td>
<td title="Eggplant" onclick="f4(0,this,'EP')" style="background-color:rgb(86,50,77)"> </td>
<td title="Black" onclick="f4(0,this,'BK')" style="background-color:rgb(16,11,23)"> </td>
</tr>
</table>
</td>
</table>
</div>
<div id="tabs-2">
<table>
<td width=35%>
<p id="Tassel1" onclick="f3(2,1)" ondblclick="f2(1,this,'x')" style="cursor:default">White</p>
<p id="Tassel2" onclick="f3(2,2)" ondblclick="f2(2,this,'x')" style="cursor:default">[Add Color]</p>
<p id="Tassel3" onclick="f3(2,3)" ondblclick="f2(3,this,'x')" style="cursor:default">[Add Color]</p>
<p id="Tassel4" onclick="f3(2,4)" ondblclick="f2(4,this,'x')" style="cursor:default">[Add Color]</p>
<p id="Tassel5" onclick="f3(2,5)" ondblclick="f2(5,this,'x')" style="cursor:default">[Add Color]</p>
<p id="Tassel6" onclick="f3(2,6)" ondblclick="f2(6,this,'x')" style="cursor:default">[Add Color]</p>
</td>
<td width=5%> </td>
<td>
<table style="cursor:default" border=1>
<tr>
<td title="White" onclick="f2(0,this,'WH')" style="background-color:rgb(252,251,252)"> </td>
<td title="Metallic Silver" onclick="f2(0,this,'MS')" style="background-color:rgb(231,232,242)"> </td>
<td title="Iridescent White" onclick="f2(0,this,'IW')" style="background-color:rgb(245,227,210)"> </td>
<td title="Ivory" onclick="f2(0,this,'IV')" style="background-color:rgb(242,237,206)"> </td>
<td title="Grey" onclick="f2(0,this,'GY')" style="background-color:rgb(154,145,174)"> </td>
<td title="Burgundy" onclick="f2(0,this,'BU')" style="background-color:rgb(92,1,8)"> </td>
<td title="Metallic Burgundy" onclick="f2(0,this,'MY')" style="background-color:rgb(98,1,8)"> </td>
<td title="Brown" onclick="f2(0,this,'BR')" style="background-color:rgb(101,39,44)"> </td>
</tr>
<tr>
<td title="Cabernet" onclick="f2(0,this,'CA')" style="background-color:rgb(125,0,0)"> </td>
<td title="Red" onclick="f2(0,this,'RD')" style="background-color:rgb(208,21,41)"> </td>
<td title="Metallic Red" onclick="f2(0,this,'RM')" style="background-color:rgb(208,21,41)"> </td>
<td title="Orange" onclick="f2(0,this,'OR')" style="background-color:rgb(255,104,8)"> </td>
<td title="Tangerine" onclick="f2(0,this,'TA')" style="background-color:rgb(255,161,114)"> </td>
<td title="Metallic Copper" onclick="f2(0,this,'MC')" style="background-color:rgb(245,109,0)"> </td>
<td title="Coral" onclick="f2(0,this,'CO')" style="background-color:rgb(242,88,88)"> </td>
<td title="Fuchsia" onclick="f2(0,this,'FU')" style="background-color:rgb(255,140,255)"> </td>
</tr>
<tr>
<td title="Metallic Fuchsia" onclick="f2(0,this,'MF')" style="background-color:rgb(255,33,163)"> </td>
<td title="Hot Pink" onclick="f2(0,this,'HP')" style="background-color:rgb(255,70,213)"> </td>
<td title="Metallic Pink" onclick="f2(0,this,'MK')" style="background-color:rgb(242,136,171)"> </td>
<td title="Baby Pink" onclick="f2(0,this,'BP')" style="background-color:rgb(255,207,214)"> </td>
<td title="Azalea" onclick="f2(0,this,'AZ')" style="background-color:rgb(255,179,202)"> </td>
<td title="Peach" onclick="f2(0,this,'PH')" style="background-color:rgb(242,204,200)"> </td>
<td title="Metallic Gold" onclick="f2(0,this,'MG')" style="background-color:rgb(233,222,129)"> </td>
<td title="Light Yellow" onclick="f2(0,this,'LY')" style="background-color:rgb(255,249,90)"> </td>
</tr>
<tr>
<td title="Daffodil Yellow" onclick="f2(0,this,'DA')" style="background-color:rgb(245,192,0)"> </td>
<td title="Mustard" onclick="f2(0,this,'MU')" style="background-color:rgb(217,172,37)"> </td>
<td title="Lime Green" onclick="f2(0,this,'LM')" style="background-color:rgb(44,213,65)"> </td>
<td title="Mint" onclick="f2(0,this,'MI')" style="background-color:rgb(59,255,3)"> </td>
<td title="Metallic Green" onclick="f2(0,this,'MN')" style="background-color:rgb(59,167,88)"> </td>
<td title="Hunter Green" onclick="f2(0,this,'HU')" style="background-color:rgb(5,73,57)"> </td>
<td title="Metallic Light Blue" onclick="f2(0,this,'ML')" style="background-color:rgb(185,230,245)"> </td>
<td title="Sage" onclick="f2(0,this,'SA')" style="background-color:rgb(175,206,180)"> </td>
</tr>
<tr>
<td title="Celedon" onclick="f2(0,this,'CE')" style="background-color:rgb(190,255,214)"> </td>
<td title="Baby Blue" onclick="f2(0,this,'BB')" style="background-color:rgb(185,230,249)"> </td>
<td title="Aqua" onclick="f2(0,this,'AQ')" style="background-color:rgb(31,205,193)"> </td>
<td title="Seafoam" onclick="f2(0,this,'SF')" style="background-color:rgb(47,217,235)"> </td>
<td title="Turquoise" onclick="f2(0,this,'TU')" style="background-color:rgb(6,197,227)"> </td>
<td title="Teal" onclick="f2(0,this,'TL')" style="background-color:rgb(30,166,167)"> </td>
<td title="Cornflower" onclick="f2(0,this,'CB')" style="background-color:rgb(40,133,208)"> </td>
<td title="Metallic Royal Blue" onclick="f2(0,this,'MR')" style="background-color:rgb(2,120,217)"> </td>
</tr>
<tr>
<td title="Royal Blue" onclick="f2(0,this,'RB')" style="background-color:rgb(27,39,177)"> </td>
<td title="Navy" onclick="f2(0,this,'NA')" style="background-color:rgb(18,27,99)"> </td>
<td title="Periwinkle" onclick="f2(0,this,'PW')" style="background-color:rgb(108,106,185)"> </td>
<td title="Lavender" onclick="f2(0,this,'LA')" style="background-color:rgb(195,154,255)"> </td>
<td title="Metallic Rurple" onclick="f2(0,this,'MP')" style="background-color:rgb(215,82,244)"> </td>
<td title="Purple" onclick="f2(0,this,'PP')" style="background-color:rgb(163,58,180)"> </td>
<td title="Eggplant" onclick="f2(0,this,'EP')" style="background-color:rgb(86,50,77)"> </td>
<td title="Black" onclick="f2(0,this,'BK')" style="background-color:rgb(16,11,23)"> </td>
</tr>
</table>
</td>
</table>
</div>
<div id="tabs-3">
<p id="Candy1" onclick="f3(3,1)" ondblclick="f6(1,this)" style="cursor:default">Silver Foil Wrapped Candy</p>
<p id="Candy2" onclick="f3(3,2)" ondblclick="f6(2,this)" style="cursor:default">[Add Candy]</p>
<p id="debug" style="cursor:default">Debug</p>
<table style="cursor:default" border=1>
<tr>
<td title="Silver Foil Wrapped Candy" onclick="f5(this,'1SL')" style="background-color:rgb(210,211,220)"> </td>
<td title="Gold Foil Wrapped Candy" onclick="f5(this,'1GL')" style="background-color:rgb(220,210,160)"> </td>
<td title="Red Foil Wrapped Candy" onclick="f5(this,'1RD')" style="background-color:rgb(208,41,21)"> </td>
<td title="Blue Foil Wrapped Candy" onclick="f5(this,'1BL')" style="background-color:rgb(18,27,99)"> </td>
<td title="Purple Foil Wrapped Candy" onclick="f5(this,'1PP')" style="background-color:rgb(255,155,255)"> </td>
<td title="Black Foil Wrapped Candy" onclick="f5(this,'1BK')" style="background-color:rgb(16,11,23)"> </td>
<td title="Green Foil Wrapped Candy" onclick="f5(this,'1GN')" style="background-color:rgb(59,167,88)"> </td>
<td title="Gold Hershey Kisses" onclick="f5(this,'2GL')" style="background-color:rgb(219,208,165)"> </td>
</tr>
<tr>
<td title="Silver Hershey Kisses" onclick="f5(this,'2SL')" style="background-color:rgb(210,211,222)"> </td>
<td title="Lavender Jordan Almonds" onclick="f5(this,'3LA')" style="background-color:rgb(195,154,255)"> </td>
<td title="White Jordan Almonds" onclick="f5(this,'3WH')" style="background-color:rgb(252,251,252)"> </td>
<td title="Pink Jordan Almonds" onclick="f5(this,'3PK')" style="background-color:rgb(255,207,214)"> </td>
<td title="Light Blue Jordan Almonds" onclick="f5(this,'3LB')" style="background-color:rgb(185,230,249)"> </td>
<td title="Light Green Jordan Almonds" onclick="f5(this,'3LG')" style="background-color:rgb(44,213,65)"> </td>
<td title="Light Yellow Jordan Almonds" onclick="f5(this,'3LY')" style="background-color:rgb(255,249,90)"> </td>
<td title="Peach Jordan Almonds" onclick="f5(this,'3PH')" style="background-color:rgb(242,204,200)"> </td>
</tr>
<tr>
<td title="After Dinner Mints" onclick="f5(this,'4WH')" style="background-color:rgb(250,250,250)"> </td>
<td title="Light Pink Lentils" onclick="f5(this,'5LP')" style="background-color:rgb(255,207,214)"> </td>
<td title="Dark Pink Lentils" onclick="f5(this,'5DP')" style="background-color:rgb(255,70,213)"> </td>
<td title="Lavender Lentils" onclick="f5(this,'5LA')" style="background-color:rgb(195,154,255)"> </td>
<td title="Purple Lentils" onclick="f5(this,'5PP')" style="background-color:rgb(255,131,255)"> </td>
<td title="Navy Lentils" onclick="f5(this,'5NA')" style="background-color:rgb(18,27,99)"> </td>
<td title="Green Lentils" onclick="f5(this,'5GN')" style="background-color:rgb(0,129,21)"> </td>
<td title="White Lentils" onclick="f5(this,'5WH')" style="background-color:rgb(252,252,252)"> </td>
</tr>
<tr>
<td title="Black Lentils" onclick="f5(this,'5BK')" style="background-color:rgb(16,11,23)"> </td>
<td title="Light Yellow Lentils" onclick="f5(this,'5LY')" style="background-color:rgb(255,249,90)"> </td>
<td title="Red Lentils" onclick="f5(this,'5RD')" style="background-color:rgb(208,21,41)"> </td>
<td title="Orange Lentils" onclick="f5(this,'5OR')" style="background-color:rgb(255,59,9)"> </td>
<td title="Fruit Runts" onclick="f5(this,'6FR')" style="background-color:rgb(255,59,9)"> </td>
<td title="Jelly Beans" onclick="f5(this,'7JB')" style="background-color:rgb(232,139,134)"> </td>
<td title="Gumballs" onclick="f5(this,'8WH')" style="background-color:rgb(251,251,251)"> </td>
<td> </td>
</tr>
</table>
</p>
</div>
<div id="tabs-4">
<p id="Ribbon">White</p>
<table style="cursor:default" border=1>
<tr>
<td title="White" onclick="f1(this,'WH')" style="background-color:rgb(252,251,252)"> </td>
<td title="Metallic Silver" onclick="f1(this,'MS')" style="background-color:rgb(231,232,242)"> </td>
<td title="Grey" onclick="f1(this,'GY')" style="background-color:rgb(154,145,174)"> </td>
<td title="Silver" onclick="f1(this,'SL')" style="background-color:rgb(231,232,242)"> </td>
<td title="Burgundy Dark" onclick="f1(this,'BX')" style="background-color:rgb(87,4,2)"> </td>
<td title="Metallic Burgundy" onclick="f1(this,'MY')" style="background-color:rgb(98,1,8)"> </td>
<td title="Brown" onclick="f1(this,'BR')" style="background-color:rgb(101,39,44)"> </td>
<td title="Cabernet" onclick="f1(this,'CA')" style="background-color:rgb(125,0,0)"> </td>
</tr>
<tr>
<td title="Metallic Red" onclick="f1(this,'RM')" style="background-color:rgb(208,21,41)"> </td>
<td title="Red" onclick="f1(this,'RD')" style="background-color:rgb(208,21,41)"> </td>
<td title="Orange" onclick="f1(this,'OR')" style="background-color:rgb(255,104,8)"> </td>
<td title="Tangerine" onclick="f1(this,'TA')" style="background-color:rgb(255,161,114)"> </td>
<td title="Metallic Copper" onclick="f1(this,'MC')" style="background-color:rgb(245,109,0)"> </td>
<td title="Fuchsia" onclick="f1(this,'FU')" style="background-color:rgb(255,140,255)"> </td>
<td title="Hot Pink" onclick="f1(this,'HP')" style="background-color:rgb(255,70,213)"> </td>
<td title="Metallic Hot Pink" onclick="f1(this,'MH')" style="background-color:rgb(255,70,200)"> </td>
</tr>
<tr>
<td title="Apricot" onclick="f1(this,'AP')" style="background-color:rgb(255,124,127)"> </td>
<td title="Metallic Pink" onclick="f1(this,'MK')" style="background-color:rgb(242,136,171)"> </td>
<td title="Mauve" onclick="f1(this,'MO')" style="background-color:rgb(254,210,192)"> </td>
<td title="Baby Pink" onclick="f1(this,'BP')" style="background-color:rgb(255,207,214)"> </td>
<td title="Azalea" onclick="f1(this,'AZ')" style="background-color:rgb(255,179,202)"> </td>
<td title="Peach" onclick="f1(this,'PH')" style="background-color:rgb(242,204,200)"> </td>
<td title="Eggshell" onclick="f1(this,'EG')" style="background-color:rgb(242,237,208)"> </td>
<td title="Gold" onclick="f1(this,'GL')" style="background-color:rgb(233,222,129)"> </td>
</tr>
<tr>
<td title="Light Yellow" onclick="f1(this,'LY')" style="background-color:rgb(255,249,90)"> </td>
<td title="Daffodil Yellow" onclick="f1(this,'DA')" style="background-color:rgb(245,192,0)"> </td>
<td title="Mustard" onclick="f1(this,'MU')" style="background-color:rgb(217,172,37)"> </td>
<td title="Mint" onclick="f1(this,'MI')" style="background-color:rgb(204,249,216)"> </td>
<td title="Lime Green" onclick="f1(this,'LM')" style="background-color:rgb(44,213,65)"> </td>
<td title="Metallic Green" onclick="f1(this,'MN')" style="background-color:rgb(59,167,88)"> </td>
<td title="Emerald Green" onclick="f1(this,'EM')" style="background-color:rgb(0,129,21)"> </td>
<td title="Hunter Green" onclick="f1(this,'HU')" style="background-color:rgb(5,73,57)"> </td>
</tr>
<tr>
<td title="Metallic Light Blue" onclick="f1(this,'ML')" style="background-color:rgb(185,230,245)"> </td>
<td title="Light Blue" onclick="f1(this,'LB')" style="background-color:rgb(185,230,245)"> </td>
<td title="Aqua" onclick="f1(this,'AQ')" style="background-color:rgb(31,205,193)"> </td>
<td title="Turquoise" onclick="f1(this,'TU')" style="background-color:rgb(6,197,227)"> </td>
<td title="Teal" onclick="f1(this,'TL')" style="background-color:rgb(30,166,167)"> </td>
<td title="Cornflower" onclick="f1(this,'CB')" style="background-color:rgb(40,133,208)"> </td>
<td title="Metallic Royal Blue" onclick="f1(this,'MR')" style="background-color:rgb(2,120,217)"> </td>
<td title="Royal Blue" onclick="f1(this,'RB')" style="background-color:rgb(27,39,177)"> </td>
</tr>
<tr>
<td title="Navy" onclick="f1(this,'NA')" style="background-color:rgb(18,27,99)"> </td>
<td title="Lavender" onclick="f1(this,'LA')" style="background-color:rgb(195,154,255)"> </td>
<td title="Metallic Rurple" onclick="f1(this,'MP')" style="background-color:rgb(215,82,244)"> </td>
<td title="Purple" onclick="f1(this,'PP')" style="background-color:rgb(163,58,180)"> </td>
<td title="Eggplant" onclick="f1(this,'EP')" style="background-color:rgb(86,50,77)"> </td>
<td title="Black" onclick="f1(this,'BK')" style="background-color:rgb(16,11,23)"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</p>
</div>
<div id="tabs-5">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="doTimer()">Change Content</button><br>
<button type="button" onclick="parseB()">Parse</button>
<form>
<div id="radio">
<input type="radio" id="radio11" name="radio" onclick="f4(1,this,'x')" checked="checked" /><label for="radio11">1</label>
<input type="radio" id="radio12" name="radio" onclick="f4(2,this,'x')" /><label for="radio12">2</label>
<input type="radio" id="radio13" name="radio" onclick="f4(3,this,'x')" /><label for="radio13">3</label>
<input type="radio" id="radio14" name="radio" onclick="f4(4,this,'x')" /><label for="radio14">4</label>
<input type="radio" id="radio15" name="radio" onclick="f4(5,this,'x')" /><label for="radio15">5</label>
<input type="radio" id="radio16" name="radio" onclick="f4(6,this,'x')" /><label for="radio16">6</label>
</div>
</form>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>Click tabs to swap between content that is broken into logical sections.</p>
</div><!-- End demo-description -->
<!-- Start of LiveChat (www.livechatinc.com) code -->
<script type="text/javascript">
var __lc = {};
__lc.license = 6479331;
(function() {
var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();
</script>
<!-- End of LiveChat code --> <!-- Hotjar Tracking Code for wanderfuls.com -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:78806,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script></body>
</html>