????

Your IP : 18.220.85.96


Current Path : /home2/morganrand/backup.morganrand.com/design_room/design/A10/
Upload File :
Current File : /home2/morganrand/backup.morganrand.com/design_room/design/A10/layers.html

<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 wPomLists = new Array("111111111111", "221111222112", "132311223123","233142141234","352144521312","415324326156"); - from flash script
var wPomLists = new Array("111111111111", "212111222112", "113123223123","243231141234","345421521312","424453326156");

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 = "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 = "pom/A10POM00" + (i-2) + "WHXXXX00.png";
	}
	for (i=3;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("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 = "pom/A10POM010" + poms[wPomLists[npom-1].substring(9,10)-1] + "XXXX00.png";
	//document.getElementById("debug").innerHTML =(poms.toString());
}
</script>
<script type="text/javascript">
function f1(obj,str)
	{
		document.getElementById("L2").src = "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 = "tub/A10CAN" + str.substring(0,1) + "00" + str.substring(1,3) + "XXXX00.png";
		document.getElementById("Candy1").innerHTML = obj.title;
	}
</script>
<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
</script>
	<script>
	$(function() {
		//$( "#radio" ).buttonset();
		//$( "#radio2" ).buttonset();
	});
	</script>
	

<script type="text/javascript">
rnd = 95600;	
function loadXMLDoc()
{
// works
var xmlhttp;
rnd=rnd+1;
var urlZ = "../../read_stated.php?rm=5&timestamp=" + 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)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
//xmlhttp.open("GET","../../read_stated.php?rm=1&&timestamp=" + 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();
  }
}

</script>
	
	
</head>
<body>

<div style="position: absolute; top:250px; z-index:100"> 
<img id = "L0" src = "A10BAS000AGXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:200"> 
<img id = "L1" src = "tub\A10CAN110BKPPXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:300"> 
<img id = "L2" src = "rib\A10RIB000MLXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:400">
<img id = "L3" src = "pom\A10POM001CBXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:500"> 
<img id = "L4" src = "pom\A10POM003BUXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:600"> 
<img id = "L5" src = "pom\A10POM005GYXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:700">
<img id = "L6" src = "pom\A10POM006AZXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:800">
<img id = "L7" src = "pom\A10POM002FGXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:900">
<img id = "L8" src = "pom\A10POM004EPXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1000">
<img id = "L9" src = "pom\A10POM007BRXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1100"> 
<img id = "L10" src = "pom\A10POM008CAXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1200"> 
<img id = "L11" src = "pom\A10POM009CAXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1300"> 
<img id = "L12" src = "pom\A10POM010BUXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1400"> 
<img id = "L13" src = "tas\A10TAS001MPXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1500"> 
<img id = "L14" src = "tas\A10TAS002MNXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1600"> 
<img id = "L15" src = "tas\A10TAS003RDXXXX01.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1700"> 
<img id = "L16" src = "tas\A10TAS004CEXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1800"> 
<img id = "L17" src = "tas\A10TAS005EPXXXX00.png" width = 640 hight = 620 />
</div>
<div style="position: absolute; top:250px; z-index:1900"> 
<img id = "L18" src = "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)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Silver" onclick="f4(0,this,'MS')" style="background-color:rgb(231,232,242)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Iridescent White" onclick="f4(0,this,'IW')" style="background-color:rgb(245,227,210)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Ivory" onclick="f4(0,this,'IV')" style="background-color:rgb(242,237,206)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Grey" onclick="f4(0,this,'GY')" style="background-color:rgb(154,145,174)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Burgundy" onclick="f4(0,this,'BU')" style="background-color:rgb(92,1,8)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Burgundy" onclick="f4(0,this,'MY')" style="background-color:rgb(98,1,8)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Brown" onclick="f4(0,this,'BR')" style="background-color:rgb(101,39,44)">&nbsp;&nbsp;&nbsp;</td>
			  </tr>
			  <tr>
				<td title="Cabernet" onclick="f4(0,this,'CA')" style="background-color:rgb(125,0,0)">&nbsp;&nbsp;&nbsp;</td>
			  	<td title="Red" onclick="f4(0,this,'RD')" style="background-color:rgb(208,21,41)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Red" onclick="f4(0,this,'RM')" style="background-color:rgb(208,21,41)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Orange" onclick="f4(0,this,'OR')" style="background-color:rgb(255,104,8)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Tangerine" onclick="f4(0,this,'TA')" style="background-color:rgb(255,161,114)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Copper" onclick="f4(0,this,'MC')" style="background-color:rgb(245,109,0)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Coral" onclick="f4(0,this,'CO')" style="background-color:rgb(242,88,88)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Fuchsia" onclick="f4(0,this,'FU')" style="background-color:rgb(255,140,255)">&nbsp;&nbsp;&nbsp;</td>
			  </tr>
			  <tr>
				<td title="Metallic Fuchsia" onclick="f4(0,this,'MF')" style="background-color:rgb(255,33,163)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Hot Pink" onclick="f4(0,this,'HP')" style="background-color:rgb(255,70,213)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Pink" onclick="f4(0,this,'MK')" style="background-color:rgb(242,136,171)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Baby Pink" onclick="f4(0,this,'BP')" style="background-color:rgb(255,207,214)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Azalea" onclick="f4(0,this,'AZ')" style="background-color:rgb(255,179,202)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Peach" onclick="f4(0,this,'PH')" style="background-color:rgb(242,204,200)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Gold" onclick="f4(0,this,'MG')" style="background-color:rgb(233,222,129)">&nbsp;</td>
				<td title="Light Yellow" onclick="f4(0,this,'LY')" style="background-color:rgb(255,249,90)">&nbsp;</td>
			  </tr>
			  <tr>
				<td title="Daffodil Yellow" onclick="f4(0,this,'DA')" style="background-color:rgb(245,192,0)">&nbsp;</td>
				<td title="Mustard" onclick="f4(0,this,'MU')" style="background-color:rgb(217,172,37)">&nbsp;</td>
				<td title="Lime Green" onclick="f4(0,this,'LM')" style="background-color:rgb(44,213,65)">&nbsp;</td>
				<td title="Mint" onclick="f4(0,this,'MI')" style="background-color:rgb(59,255,3)">&nbsp;</td>
				<td title="Metallic Green" onclick="f4(0,this,'MN')" style="background-color:rgb(59,167,88)">&nbsp;</td>
				<td title="Hunter Green" onclick="f4(0,this,'HU')" style="background-color:rgb(5,73,57)">&nbsp;</td>
				<td title="Metallic Light Blue" onclick="f4(0,this,'ML')" style="background-color:rgb(185,230,245)">&nbsp;</td>
				<td title="Sage" onclick="f4(0,this,'SA')" style="background-color:rgb(175,206,180)">&nbsp;</td>
			  </tr>
			  <tr>
				<td title="Celedon" onclick="f4(0,this,'CE')" style="background-color:rgb(190,255,214)">&nbsp;</td>
				<td title="Baby Blue" onclick="f4(0,this,'BB')" style="background-color:rgb(185,230,249)">&nbsp;</td>
				<td title="Aqua" onclick="f4(0,this,'AQ')" style="background-color:rgb(31,205,193)">&nbsp;</td>
				<td title="Seafoam" onclick="f4(0,this,'SF')" style="background-color:rgb(47,217,235)">&nbsp;</td>
				<td title="Turquoise" onclick="f4(0,this,'TU')" style="background-color:rgb(6,197,227)">&nbsp;</td>
				<td title="Teal" onclick="f4(0,this,'TL')" style="background-color:rgb(30,166,167)">&nbsp;</td>
				<td title="Cornflower" onclick="f4(0,this,'CB')" style="background-color:rgb(40,133,208)">&nbsp;</td>
				<td title="Metallic Royal Blue" onclick="f4(0,this,'MR')" style="background-color:rgb(2,120,217)">&nbsp;</td>
			  </tr>
			  <tr>
				<td title="Royal Blue" onclick="f4(0,this,'RB')" style="background-color:rgb(27,39,177)">&nbsp;</td>
				<td title="Navy" onclick="f4(0,this,'NA')" style="background-color:rgb(18,27,99)">&nbsp;</td>
				<td title="Periwinkle" onclick="f4(0,this,'PW')" style="background-color:rgb(108,106,185)">&nbsp;</td>
				<td title="Lavender" onclick="f4(0,this,'LA')" style="background-color:rgb(195,154,255)">&nbsp;</td>
				<td title="Metallic Rurple" onclick="f4(0,this,'MP')" style="background-color:rgb(215,82,244)">&nbsp;</td>
				<td title="Purple" onclick="f4(0,this,'PP')" style="background-color:rgb(163,58,180)">&nbsp;</td>
				<td title="Eggplant" onclick="f4(0,this,'EP')" style="background-color:rgb(86,50,77)">&nbsp;</td>
				<td title="Black" onclick="f4(0,this,'BK')" style="background-color:rgb(16,11,23)">&nbsp;</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)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Silver" onclick="f2(0,this,'MS')" style="background-color:rgb(231,232,242)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Iridescent White" onclick="f2(0,this,'IW')" style="background-color:rgb(245,227,210)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Ivory" onclick="f2(0,this,'IV')" style="background-color:rgb(242,237,206)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Grey" onclick="f2(0,this,'GY')" style="background-color:rgb(154,145,174)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Burgundy" onclick="f2(0,this,'BU')" style="background-color:rgb(92,1,8)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Burgundy" onclick="f2(0,this,'MY')" style="background-color:rgb(98,1,8)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Brown" onclick="f2(0,this,'BR')" style="background-color:rgb(101,39,44)">&nbsp;&nbsp;&nbsp;</td>
			  </tr>
			  <tr>
				<td title="Cabernet" onclick="f2(0,this,'CA')" style="background-color:rgb(125,0,0)">&nbsp;&nbsp;&nbsp;</td>
			  	<td title="Red" onclick="f2(0,this,'RD')" style="background-color:rgb(208,21,41)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Red" onclick="f2(0,this,'RM')" style="background-color:rgb(208,21,41)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Orange" onclick="f2(0,this,'OR')" style="background-color:rgb(255,104,8)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Tangerine" onclick="f2(0,this,'TA')" style="background-color:rgb(255,161,114)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Copper" onclick="f2(0,this,'MC')" style="background-color:rgb(245,109,0)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Coral" onclick="f2(0,this,'CO')" style="background-color:rgb(242,88,88)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Fuchsia" onclick="f2(0,this,'FU')" style="background-color:rgb(255,140,255)">&nbsp;&nbsp;&nbsp;</td>
			  </tr>
			  <tr>
				<td title="Metallic Fuchsia" onclick="f2(0,this,'MF')" style="background-color:rgb(255,33,163)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Hot Pink" onclick="f2(0,this,'HP')" style="background-color:rgb(255,70,213)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Pink" onclick="f2(0,this,'MK')" style="background-color:rgb(242,136,171)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Baby Pink" onclick="f2(0,this,'BP')" style="background-color:rgb(255,207,214)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Azalea" onclick="f2(0,this,'AZ')" style="background-color:rgb(255,179,202)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Peach" onclick="f2(0,this,'PH')" style="background-color:rgb(242,204,200)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Gold" onclick="f2(0,this,'MG')" style="background-color:rgb(233,222,129)">&nbsp;</td>
				<td title="Light Yellow" onclick="f2(0,this,'LY')" style="background-color:rgb(255,249,90)">&nbsp;</td>
			  </tr>
			  <tr>
				<td title="Daffodil Yellow" onclick="f2(0,this,'DA')" style="background-color:rgb(245,192,0)">&nbsp;</td>
				<td title="Mustard" onclick="f2(0,this,'MU')" style="background-color:rgb(217,172,37)">&nbsp;</td>
				<td title="Lime Green" onclick="f2(0,this,'LM')" style="background-color:rgb(44,213,65)">&nbsp;</td>
				<td title="Mint" onclick="f2(0,this,'MI')" style="background-color:rgb(59,255,3)">&nbsp;</td>
				<td title="Metallic Green" onclick="f2(0,this,'MN')" style="background-color:rgb(59,167,88)">&nbsp;</td>
				<td title="Hunter Green" onclick="f2(0,this,'HU')" style="background-color:rgb(5,73,57)">&nbsp;</td>
				<td title="Metallic Light Blue" onclick="f2(0,this,'ML')" style="background-color:rgb(185,230,245)">&nbsp;</td>
				<td title="Sage" onclick="f2(0,this,'SA')" style="background-color:rgb(175,206,180)">&nbsp;</td>
			  </tr>
			  <tr>
				<td title="Celedon" onclick="f2(0,this,'CE')" style="background-color:rgb(190,255,214)">&nbsp;</td>
				<td title="Baby Blue" onclick="f2(0,this,'BB')" style="background-color:rgb(185,230,249)">&nbsp;</td>
				<td title="Aqua" onclick="f2(0,this,'AQ')" style="background-color:rgb(31,205,193)">&nbsp;</td>
				<td title="Seafoam" onclick="f2(0,this,'SF')" style="background-color:rgb(47,217,235)">&nbsp;</td>
				<td title="Turquoise" onclick="f2(0,this,'TU')" style="background-color:rgb(6,197,227)">&nbsp;</td>
				<td title="Teal" onclick="f2(0,this,'TL')" style="background-color:rgb(30,166,167)">&nbsp;</td>
				<td title="Cornflower" onclick="f2(0,this,'CB')" style="background-color:rgb(40,133,208)">&nbsp;</td>
				<td title="Metallic Royal Blue" onclick="f2(0,this,'MR')" style="background-color:rgb(2,120,217)">&nbsp;</td>
			  </tr>
			  <tr>
				<td title="Royal Blue" onclick="f2(0,this,'RB')" style="background-color:rgb(27,39,177)">&nbsp;</td>
				<td title="Navy" onclick="f2(0,this,'NA')" style="background-color:rgb(18,27,99)">&nbsp;</td>
				<td title="Periwinkle" onclick="f2(0,this,'PW')" style="background-color:rgb(108,106,185)">&nbsp;</td>
				<td title="Lavender" onclick="f2(0,this,'LA')" style="background-color:rgb(195,154,255)">&nbsp;</td>
				<td title="Metallic Rurple" onclick="f2(0,this,'MP')" style="background-color:rgb(215,82,244)">&nbsp;</td>
				<td title="Purple" onclick="f2(0,this,'PP')" style="background-color:rgb(163,58,180)">&nbsp;</td>
				<td title="Eggplant" onclick="f2(0,this,'EP')" style="background-color:rgb(86,50,77)">&nbsp;</td>
				<td title="Black" onclick="f2(0,this,'BK')" style="background-color:rgb(16,11,23)">&nbsp;</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)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Gold Foil Wrapped Candy" onclick="f5(this,'1GL')" style="background-color:rgb(220,210,160)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Red Foil Wrapped Candy" onclick="f5(this,'1RD')" style="background-color:rgb(208,41,21)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Blue Foil Wrapped Candy" onclick="f5(this,'1BL')" style="background-color:rgb(18,27,99)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Purple Foil Wrapped Candy" onclick="f5(this,'1PP')" style="background-color:rgb(255,155,255)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Black Foil Wrapped Candy" onclick="f5(this,'1BK')" style="background-color:rgb(16,11,23)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Green Foil Wrapped Candy" onclick="f5(this,'1GN')" style="background-color:rgb(59,167,88)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Gold Hershey Kisses" onclick="f5(this,'2GL')" style="background-color:rgb(219,208,165)">&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td title="Silver Hershey Kisses" onclick="f5(this,'2SL')" style="background-color:rgb(210,211,222)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Lavender Jordan Almonds" onclick="f5(this,'3LA')" style="background-color:rgb(195,154,255)">&nbsp;&nbsp;&nbsp;</td>
				<td title="White Jordan Almonds" onclick="f5(this,'3WH')" style="background-color:rgb(252,251,252)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Pink Jordan Almonds" onclick="f5(this,'3PK')" style="background-color:rgb(255,207,214)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Light Blue Jordan Almonds" onclick="f5(this,'3LB')" style="background-color:rgb(185,230,249)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Light Green Jordan Almonds" onclick="f5(this,'3LG')" style="background-color:rgb(44,213,65)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Light Yellow Jordan Almonds" onclick="f5(this,'3LY')" style="background-color:rgb(255,249,90)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Peach Jordan Almonds" onclick="f5(this,'3PH')" style="background-color:rgb(242,204,200)">&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td title="After Dinner Mints" onclick="f5(this,'4WH')" style="background-color:rgb(250,250,250)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Light Pink Lentils" onclick="f5(this,'5LP')" style="background-color:rgb(255,207,214)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Dark Pink Lentils" onclick="f5(this,'5DP')" style="background-color:rgb(255,70,213)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Lavender Lentils" onclick="f5(this,'5LA')" style="background-color:rgb(195,154,255)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Purple Lentils" onclick="f5(this,'5PP')" style="background-color:rgb(255,131,255)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Navy Lentils" onclick="f5(this,'5NA')" style="background-color:rgb(18,27,99)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Green Lentils" onclick="f5(this,'5GN')" style="background-color:rgb(0,129,21)">&nbsp;</td>
				<td title="White Lentils" onclick="f5(this,'5WH')" style="background-color:rgb(252,252,252)">&nbsp;</td>
			</tr>
			<tr>
				<td title="Black Lentils" onclick="f5(this,'5BK')" style="background-color:rgb(16,11,23)">&nbsp;</td>
				<td title="Light Yellow Lentils" onclick="f5(this,'5LY')" style="background-color:rgb(255,249,90)">&nbsp;</td>
				<td title="Red Lentils" onclick="f5(this,'5RD')" style="background-color:rgb(208,21,41)">&nbsp;</td>
				<td title="Orange Lentils" onclick="f5(this,'5OR')" style="background-color:rgb(255,59,9)">&nbsp;</td>
				<td title="Fruit Runts" onclick="f5(this,'6FR')" style="background-color:rgb(255,59,9)">&nbsp;</td>
				<td title="Jelly Beans" onclick="f5(this,'7JB')" style="background-color:rgb(232,139,134)">&nbsp;</td>
				<td title="Gumballs" onclick="f5(this,'8WH')" style="background-color:rgb(251,251,251)">&nbsp;</td>
				<td>&nbsp;</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)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Silver" onclick="f1(this,'MS')" style="background-color:rgb(231,232,242)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Grey" onclick="f1(this,'GY')" style="background-color:rgb(154,145,174)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Silver" onclick="f1(this,'SL')" style="background-color:rgb(231,232,242)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Burgundy Dark" onclick="f1(this,'BX')" style="background-color:rgb(87,4,2)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Burgundy" onclick="f1(this,'MY')" style="background-color:rgb(98,1,8)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Brown" onclick="f1(this,'BR')" style="background-color:rgb(101,39,44)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Cabernet" onclick="f1(this,'CA')" style="background-color:rgb(125,0,0)">&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td title="Metallic Red" onclick="f1(this,'RM')" style="background-color:rgb(208,21,41)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Red" onclick="f1(this,'RD')" style="background-color:rgb(208,21,41)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Orange" onclick="f1(this,'OR')" style="background-color:rgb(255,104,8)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Tangerine" onclick="f1(this,'TA')" style="background-color:rgb(255,161,114)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Copper" onclick="f1(this,'MC')" style="background-color:rgb(245,109,0)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Fuchsia" onclick="f1(this,'FU')" style="background-color:rgb(255,140,255)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Hot Pink" onclick="f1(this,'HP')" style="background-color:rgb(255,70,213)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Hot Pink" onclick="f1(this,'MH')" style="background-color:rgb(255,70,200)">&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td title="Apricot" onclick="f1(this,'AP')" style="background-color:rgb(255,124,127)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Metallic Pink" onclick="f1(this,'MK')" style="background-color:rgb(242,136,171)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Mauve" onclick="f1(this,'MO')" style="background-color:rgb(254,210,192)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Baby Pink" onclick="f1(this,'BP')" style="background-color:rgb(255,207,214)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Azalea" onclick="f1(this,'AZ')" style="background-color:rgb(255,179,202)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Peach" onclick="f1(this,'PH')" style="background-color:rgb(242,204,200)">&nbsp;&nbsp;&nbsp;</td>
				<td title="Eggshell" onclick="f1(this,'EG')" style="background-color:rgb(242,237,208)">&nbsp;</td>
				<td title="Gold" onclick="f1(this,'GL')" style="background-color:rgb(233,222,129)">&nbsp;</td>
			</tr>
			<tr>
				<td title="Light Yellow" onclick="f1(this,'LY')" style="background-color:rgb(255,249,90)">&nbsp;</td>
				<td title="Daffodil Yellow" onclick="f1(this,'DA')" style="background-color:rgb(245,192,0)">&nbsp;</td>
				<td title="Mustard" onclick="f1(this,'MU')" style="background-color:rgb(217,172,37)">&nbsp;</td>
				<td title="Mint" onclick="f1(this,'MI')" style="background-color:rgb(204,249,216)">&nbsp;</td>
				<td title="Lime Green" onclick="f1(this,'LM')" style="background-color:rgb(44,213,65)">&nbsp;</td>
				<td title="Metallic Green" onclick="f1(this,'MN')" style="background-color:rgb(59,167,88)">&nbsp;</td>
				<td title="Emerald Green" onclick="f1(this,'EM')" style="background-color:rgb(0,129,21)">&nbsp;</td>
				<td title="Hunter Green" onclick="f1(this,'HU')" style="background-color:rgb(5,73,57)">&nbsp;</td>
			</tr>
			<tr>
				<td title="Metallic Light Blue" onclick="f1(this,'ML')" style="background-color:rgb(185,230,245)">&nbsp;</td>
				<td title="Light Blue" onclick="f1(this,'LB')" style="background-color:rgb(185,230,245)">&nbsp;</td>
				<td title="Aqua" onclick="f1(this,'AQ')" style="background-color:rgb(31,205,193)">&nbsp;</td>
				<td title="Turquoise" onclick="f1(this,'TU')" style="background-color:rgb(6,197,227)">&nbsp;</td>
				<td title="Teal" onclick="f1(this,'TL')" style="background-color:rgb(30,166,167)">&nbsp;</td>
				<td title="Cornflower" onclick="f1(this,'CB')" style="background-color:rgb(40,133,208)">&nbsp;</td>
				<td title="Metallic Royal Blue" onclick="f1(this,'MR')" style="background-color:rgb(2,120,217)">&nbsp;</td>
				<td title="Royal Blue" onclick="f1(this,'RB')" style="background-color:rgb(27,39,177)">&nbsp;</td>
			</tr>
			<tr>
				<td title="Navy" onclick="f1(this,'NA')" style="background-color:rgb(18,27,99)">&nbsp;</td>
				<td title="Lavender" onclick="f1(this,'LA')" style="background-color:rgb(195,154,255)">&nbsp;</td>
				<td title="Metallic Rurple" onclick="f1(this,'MP')" style="background-color:rgb(215,82,244)">&nbsp;</td>
				<td title="Purple" onclick="f1(this,'PP')" style="background-color:rgb(163,58,180)">&nbsp;</td>
				<td title="Eggplant" onclick="f1(this,'EP')" style="background-color:rgb(86,50,77)">&nbsp;</td>
				<td title="Black" onclick="f1(this,'BK')" style="background-color:rgb(16,11,23)">&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</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>
		
		<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 -->

<!-- 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>