<?xml version="1.0" encoding="UTF-8" ?>
<Module>
	<ModulePrefs
		title="Small Mosaic Tile Blend Tool"
		title_url="http://www.mosaictileblend.com"
		description="Custom Mosaic Glass Tile Blend Tools featuring tile from Mosaic Glass Tile Ent."
		height="475"
		width="277"
		scaling="false"
		author="Jonathan Johannsen"
		author_email="mgrubbs+Mosaic2@mosaicglasstileent.com"
		author_location="Pennsylvania"
		author_affiliation="Mosaic Glass Tile Ent"
		directory_title="Mosaic Tile Blend Tool"
		screenshot="http://www.mosaictileblend.com/ScreenShot.png"
	/>
	<Content type="html">
	<![CDATA[

<style>
html, body, p, table, td, tr, img 
{
	padding:0;
	margin:0;
	font-size:100%;
	font-weight:normal;
}

#border
{
	border: solid black 2px;
}

#mainTable
{
	margin:1px; 
	background-color:#6666FF;
}

#mainTable2 
{
	margin:1px; 
	background-color:#6666FF; 
	position:absolute; 
	left:4px; 
	top:4px;
}

#mainTable3 
{
	margin:1px; 
	background-color:#6666FF; 
	position:absolute; 
	left:4px; 
	top:4px;
}

.tile
{
	height:22px; 
	width:22px; 
	background-color:#CCCCFF;
}

.selectionTable
{
	border: solid black 1px; 
	position:absolute; 
	left:2px; 
	top:10px; 
	background-color:#FFFFFF;
}

.pick 
{
	border: solid black 1px; 
	height:23px; 
	width:23px;
}

.joint
{
	border: solid black 1px; 
	height:12px; 
	width:12px; 
	font-size:9px;
}

.option 
{
	height:30px; 
	width:30px; 
	font-size:9px;
}

.picker 
{
	font-size:8px; 
	width:120px;
}

.tileNumber 
{
	font-size:8px;
}

.selection 
{
	position:relative; 
	height:84px; 
	width:37px; 
	background-color:#CCCCCC;
}

.button 
{
	position:absolute; 
	left:2px; 
	top:1px; 
	border: solid black 1px; 
	background-image: url(http://www.mosaictileblend.com/images/BtnHand.gif);
	background-color:#FFFFFF; 
	height:30px; 
	width:30px;
}

.wordMix 
{
	font-size:8px; 
	position:absolute; 
	left:7px; 
	top:45px;
}

.tilePercent 
{
	font-size:9px; 
	position:absolute; 
	text-align:center; 
	left:2px; 
	top:55px;
}

.wordTile 
{
	font-size:8px; 
	position:absolute; 
	left:1px; 
	top:33px;
}

.upArrow 
{
	padding:0; 
	margin:0; 
	border:0;
	font-size:6px; 
	width:12px; 
	height:8px; 
	position:absolute; 
	left:7; 
	top:75px; 
}

.downArrow
{
	padding:0; 
	margin:0; 
	border:0;
	font-size:6px; 
	width:12px; 
	height:8px; 
	position:absolute; 
	left:19; 
	top:75px; 
}

.infoDisplay
{
	font-size:10px; 
	text-align:center;
	width:277px;
}

.pickLabel
{
	font-size:8px; 
	text-align:center;
}
</style>

<script type="text/javascript">

var chosenButton; //global variable used when picking a color
var chosenTile;
var colorArray = new Array(); //this array will contain the different colors chosen by the user
colorArray[0] = 0;
colorArray[1] = 0;
colorArray[2] = 0;
colorArray[3] = 0;
colorArray[4] = 0;
colorArray[5] = 0;
colorArray[6] = 0;
var tileNumArray = new Array();	// This holds the tile numbers chosen by the user
tileNumArray[0] = 0;
tileNumArray[1] = 0;
tileNumArray[2] = 0;
tileNumArray[3] = 0;
tileNumArray[4] = 0;
tileNumArray[5] = 0;
tileNumArray[6] = 0;
var curPattern = 1; //this is the current pattern. 
var curGroutColor = '#6666FF';

function setGroutColor(clr)
{	
	curGroutColor = clr;
	var cell = document.getElementById("mainTable");
	cell.style.backgroundColor = clr;

	cell = document.getElementById("mainTable2");
	if (cell) 
	{
		cell.style.backgroundColor = clr;
	}

	cell = document.getElementById("mainTable3");
	if (cell) 
	{
		cell.style.backgroundColor = clr;
	}
}

function increasePercent(name)
{
	var cell = document.getElementById(name);
	var number = parseInt(cell.value, 10);
	if (isNaN(number))
	{
		number=0;
	}
	number=number+1;
	if (number > 100)
	{
		number=100;
	}
	cell.value=number;
	cell.focus();
}

function decreasePercent(name)
{
	var cell = document.getElementById(name);
	var number = parseInt(cell.value, 10);
	if (isNaN(number))
	{
		number=0;
	}
	number=number-1;
	if (number < 0)
	{
		number=0;
	}

	if (number > 100)
	{
		number=100;
	}
	cell.value=number;
	cell.focus();
}

function numeralsOnly(evt)
{
	evt = (evt) ? evt : event;
	var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
		((evt.which) ? evt.which : 0));
	if (charCode > 31 && (charCode < 48 || charCode > 57)) 
	{
		return false;
	}
	return true;
	
}

function resetPercent()
{
	//clear the percentage fields back to 0
	var resetColor, resetNum;
	var cell = document.getElementById("tile1");
	cell.value="0";
	cell = document.getElementById("tile2");
	cell.value="0";
	cell = document.getElementById("tile3");
	cell.value="0";
	cell = document.getElementById("tile4");
	cell.value="0";
	cell = document.getElementById("tile5");
	cell.value="0";
	cell = document.getElementById("tile6");
	cell.value="0";
	cell = document.getElementById("tile7");
	cell.value="0";
	var i;
	for(i=1; i<8; i++)
	{
		resetColor="button"+i;
		cell=document.getElementById(resetColor);
		cell.style.backgroundImage='url("http://www.mosaictileblend.com/images/BtnHand.gif")';
		resetNum="wordTile"+i;
		cell=document.getElementById(resetNum);
		cell.innerHTML="Tile #";
		colorArray[i-1] = 0;
		tileNumArray[i-1] = 0;
	}
	for(i=1; i < 123; i++)
	{
		cell=document.getElementById("cell"+i);
		cell.style.backgroundColor=("#CCCCFF");
		cell=document.getElementById("cella"+i);
		if(cell)
		{
			cell.style.backgroundColor=("#CCCCFF");
		}
		cell=document.getElementById("cellb"+i);
		if(cell)
		{
			cell.style.backgroundColor=("#CCCCFF");
		}
	}
}

function pickColor(buttonName, tileNum)
{
	var cell = document.getElementById("selectionTable");
	cell.style.visibility="visible";
	chosenButton=buttonName;
	chosenTile=tileNum;
}

function colorChosen(color, tileNum)
{
	//color has been picked from the chart, take it and put it in the selector table
	var cell = document.getElementById("selectionTable");
	cell.style.visibility="hidden";
	cell = document.getElementById(chosenButton);
	cell.style.backgroundImage="none";
	cell.style.backgroundColor=color;
	cell = document.getElementById(chosenTile);
	cell.innerHTML="Tile #"+tileNum;
	if(chosenButton=="button1")
	{
		colorArray[0] = color;
		tileNumArray[0] = "Tile #"+tileNum;
	}
	if(chosenButton=="button2")
	{
		colorArray[1] = color;
		tileNumArray[1] = "Tile #"+tileNum;
	}
	if(chosenButton=="button3")
	{
		colorArray[2] = color;
		tileNumArray[2] = "Tile #"+tileNum;
	}
	if(chosenButton=="button4")
	{
		colorArray[3] = color;
		tileNumArray[3] = "Tile #"+tileNum;
	}
	if(chosenButton=="button5")
	{
		colorArray[4] = color;
		tileNumArray[4] = "Tile #"+tileNum;
	}
	if(chosenButton=="button6")
	{
		colorArray[5] = color;
		tileNumArray[5] = "Tile #"+tileNum;
	}
	if(chosenButton=="button7")
	{
		colorArray[6] = color;
		tileNumArray[6] = "Tile #"+tileNum;
	}
}

function clearChosen()
{
	//user has decided to clear one of the colors from the selector table
	var cell = document.getElementById("selectionTable");
	cell.style.visibility="hidden";
	cell = document.getElementById(chosenButton);
	cell.style.backgroundImage='url("http://www.mosaictileblend.com/images/BtnHand.gif")';
	cell = document.getElementById(chosenTile);
	cell.innerHTML="Tile #"
	for(var i = 0; i < 7; i++)
	{
		if(chosenButton=="button"+(i+1))
		{
			colorArray[i]=0;
			tileNumArray[i]=0;
			document.getElementById("tile"+(i+1)).value=0;
		}
	}
}

function submitButton()
{
	var total=0;
	var offBy=0;
	var numColors=0;
	var numToAdd=0;
	var biggest=0;
	//the user has submitted their percentages, draw them to the table here
	var i;
	var percentArray = new Array();
	for(i=1;i<8;i++)
	{
		//fill up the percentage array with the percent for each color
		//color array is global and already filled
		var cell = document.getElementById("tile"+i);
		var number = parseInt(cell.value, 10);
		percentArray[i-1]=number;
	}
	//make sure the percentage adds up to 100
	for(i=0;i<7;i++)
	{
		//check to see how many colors we have set
		if(colorArray[i]!=0)
		{
			total=total+percentArray[i];
			numColors++;
		}
	}
	if(total != 100)
	{
		//since it adds up to less than 100, fix the numbers
		offBy=100-total;
		numToAdd=offBy/numColors;
		if(numToAdd<0)
		{
			numToAdd=numToAdd-1;
		}
	}
	numToAdd=parseInt(numToAdd, 10);
	for(i=1; i<8; i++)
	{
		var cell = document.getElementById("tile"+i);
		if(colorArray[i-1]!=0)
		{
			var number = parseInt(cell.value, 10)+numToAdd;
			if(number<0)
			{
				number=0;
			}
			cell.value=number;
			percentArray[i-1] = percentArray[i-1]+numToAdd;
		}
	}
	total=0;
	var noneSet=true;
	for(i=0; i < 7; i++)
	{
		if(colorArray[i]!=0)
		{
			total=total+percentArray[i];
			noneSet=false;
		}
		//add the rest of the value to the biggest number
	}
	if(noneSet)
	{
		//no colors were picked
		return;
	}
	if(total < 100)
	{
		//find the biggest number and add the rest to it
		for(i=1; i < 7; i++)
		{
			if(percentArray[i] > percentArray[biggest])
			{
				biggest=i;
			}
		}
		percentArray[biggest]=percentArray[biggest]+(100-total);
		cell=document.getElementById("tile"+(biggest+1));
		number = parseInt(cell.value, 10);
		cell.value=number+(100-total);
	}
	//algorithm to add colors to the main board
	total=0;
	var rndNum = 0;
	var assignArray = new Array(); //this array will be used in the algorithm for placing the colors on the board
	for(i=0; i < 7; i++)
	{
		assignArray[i] = percentArray[i]+total;
		total=assignArray[i];
	}
	for(i=0; i < 121; i++)
	{
		rndNum = (Math.floor(Math.random() *99)+1);
		for(var j=0; j < 7; j++)
		{
			if(colorArray[j]==0)
			{
				continue;
			}
			//search assignArray until you find a number that is bigger than rndNum
			if(assignArray[j] > rndNum)
			{
				cell=document.getElementById("cell"+(i+1));
				cell.style.backgroundColor=colorArray[j];
				cell=document.getElementById("cella"+(i+1));
				if(cell)
				{
					cell.style.backgroundColor=colorArray[j];
				}
				cell=document.getElementById("cellb"+(i+1));
				if(cell)
				{
					cell.style.backgroundColor=colorArray[j];
				}
				break;
			}
		}
	}

}

function printPage()
{
	var cell, i, number;

	var display_setting="toolbar=yes,location=no, directories=yes, menubar=yes,";
	display_setting+="scrollbars=yes, width=750, height=600, left=100, top=";

	var content_innerhtml;
	if (curPattern == 1)
		content_innerhtml = document.getElementById("style1").innerHTML;
	else if (curPattern == 2)
		content_innerhtml = document.getElementById("style2").innerHTML;
	else
		content_innerhtml = document.getElementById("style3").innerHTML;

	var document_print=window.open("","", display_setting);
	document_print.document.open();
	document_print.document.write('<html><head><title>Print using javascript</title></head>');
	document_print.document.write('<body style="font-family:verdana; font-size:12px;"onLoad="self.print(); self.close();" >');
	document_print.document.write(content_innerhtml);
	document_print.document.write('<table cellpadding="4">');
	for(i=1;i<8;i++)
	{
		if(tileNumArray[i-1]==0)
			continue;
		cell = document.getElementById("tile"+i);
		if (cell)
		{
			number = parseInt(cell.value, 10);
			document_print.document.write('<tr><td>'+tileNumArray[i-1]+'</td><td>'+number+'</td></tr>');
		}
	}
	document_print.document.write('</table>');
	document_print.document.write('<p>If the image of your grid of tiles did not print, ');
	document_print.document.write('your browser is set to not print background images.</p>');
	document_print.document.write('<p>For FireFox, under <b>File -&gt; Page Setup</b>, check the ');
	document_print.document.write('<em>Print Background (color &amp; images)</em> box.</p>');
	document_print.document.write('<p>For Internet Explorer, under <b>Tools -&gt; Internet Options -&gt; Advanced (tab)</b> ');
	document_print.document.write('in the <b>Printing</b> section, check the <em>Print background colors and images</em> box.</p>');
	document_print.document.write('</body></html>');
	document_print.print();
	document_print.document.close();
	return false;
}

function emailPage(_frm)
{
	var eml, bod, sub, i, cell, number;
	eml="sales";
	bod="&body=";
	sub="?subject=Design from Mosaic Tile Generator";
	eml+='@mosaic';
	for(i=1;i<8;i++)
	{
		if(tileNumArray[i-1]==0)
			continue;
		cell = document.getElementById("tile"+i);
		if (cell)
		{
			number = parseInt(cell.value, 10);
			bod+=tileNumArray[i-1]+" = "+number+"%...";
		}
	}
	bod+="Joint color "+curGroutColor+"...";
	switch (curPattern)
	{
	case 1:
		bod+="Pattern 1x1...";
		break;
	case 2:
		bod+="Pattern 1x2...";
		break;
	case 3:
		bod+="Pattern Variety...";
		break;
	}
	eml+='glasstileent.com';
	location.href="mailto:"+eml+sub+bod;
}

function setDisplay(str)
{
    document.getElementById("infoDisplay").innerHTML = str;
}

function changePattern()
{
	curPattern++;
	if(curPattern > 3)
	{
		curPattern=1;
	}
	var cell = document.getElementById("mainTable2");
	if(curPattern==2)
	{
		cell.style.visibility="visible";
	}
	else
	{
		cell.style.visibility="hidden";
	}

	cell = document.getElementById("mainTable3");
	if(curPattern==3)
	{
		cell.style.visibility="visible";
	}
	else
	{
		cell.style.visibility="hidden";
	}
	cell = document.getElementById("pattern");
	if(curPattern==1)
	{
		cell.src="http://www.mosaictileblend.com/images/BtnGrid1.gif";
	}
	else if(curPattern==2)
	{
		cell.src="http://www.mosaictileblend.com/images/BtnGrid2.gif";
	}
	else
	{
		cell.src="http://www.mosaictileblend.com/images/BtnGrid4.gif";
	}
}
</script>

<!-- The main table -->
	<table id="border">
	<tr>
	<td>
		<div id="style1">
			<table id="mainTable" padding="2" width="266">
			<tr>
			<td class="tile" id="cell1" width="22" height="22"></td>
			<td class="tile" id="cell2" width="22" height="22"></td>
			<td class="tile" id="cell3" width="22" height="22"></td>
			<td class="tile" id="cell4" width="22" height="22"></td>
			<td class="tile" id="cell5" width="22" height="22"></td>
			<td class="tile" id="cell6" width="22" height="22"></td>
			<td class="tile" id="cell7" width="22" height="22"></td>
			<td class="tile" id="cell8" width="22" height="22"></td>
			<td class="tile" id="cell9" width="22" height="22"></td>
			<td class="tile" id="cell10" width="22" height="22"></td>
			<td class="tile" id="cell11" width="22" height="22"></td>
			</tr>
			<tr>
			<td class="tile" id="cell12" width="22" height="22"></td>
			<td class="tile" id="cell13" width="22" height="22"></td>
			<td class="tile" id="cell14" width="22" height="22"></td>
			<td class="tile" id="cell15" width="22" height="22"></td>
			<td class="tile" id="cell16" width="22" height="22"></td>
			<td class="tile" id="cell17" width="22" height="22"></td>
			<td class="tile" id="cell18" width="22" height="22"></td>
			<td class="tile" id="cell19" width="22" height="22"></td>
			<td class="tile" id="cell20" width="22" height="22"></td>
			<td class="tile" id="cell21" width="22" height="22"></td>
			<td class="tile" id="cell22" width="22" height="22"></td>
			</tr>
			<tr>
			<td class="tile" id="cell23" width="22" height="22"></td>
			<td class="tile" id="cell24" width="22" height="22"></td>
			<td class="tile" id="cell25" width="22" height="22"></td>
			<td class="tile" id="cell26" width="22" height="22"></td>
			<td class="tile" id="cell27" width="22" height="22"></td>
			<td class="tile" id="cell28" width="22" height="22"></td>
			<td class="tile" id="cell29" width="22" height="22"></td>
			<td class="tile" id="cell30" width="22" height="22"></td>
			<td class="tile" id="cell31" width="22" height="22"></td>
			<td class="tile" id="cell32" width="22" height="22"></td>
			<td class="tile" id="cell33" width="22" height="22"></td>
			</tr>
			<tr>
			<td class="tile" id="cell34" width="22" height="22"></td>
			<td class="tile" id="cell35" width="22" height="22"></td>
			<td class="tile" id="cell36" width="22" height="22"></td>
			<td class="tile" id="cell37" width="22" height="22"></td>
			<td class="tile" id="cell38" width="22" height="22"></td>
			<td class="tile" id="cell39" width="22" height="22"></td>
			<td class="tile" id="cell40" width="22" height="22"></td>
			<td class="tile" id="cell41" width="22" height="22"></td>
			<td class="tile" id="cell42" width="22" height="22"></td>
			<td class="tile" id="cell43" width="22" height="22"></td>
			<td class="tile" id="cell44" width="22" height="22"></td>
			</tr>
			<tr>
			<td class="tile" id="cell45" width="22" height="22"></td>
			<td class="tile" id="cell46" width="22" height="22"></td>
			<td class="tile" id="cell47" width="22" height="22"></td>
			<td class="tile" id="cell48" width="22" height="22"></td>
			<td class="tile" id="cell49" width="22" height="22"></td>
			<td class="tile" id="cell50" width="22" height="22"></td>
			<td class="tile" id="cell51" width="22" height="22"></td>
			<td class="tile" id="cell52" width="22" height="22"></td>
			<td class="tile" id="cell53" width="22" height="22"></td>
			<td class="tile" id="cell54" width="22" height="22"></td>
			<td class="tile" id="cell55" width="22" height="22"></td>
			</tr>
			<tr>
			<td class="tile" id="cell56" width="22" height="22"></td>
			<td class="tile" id="cell57" width="22" height="22"></td>
			<td class="tile" id="cell58" width="22" height="22"></td>
			<td class="tile" id="cell59" width="22" height="22"></td>
			<td class="tile" id="cell60" width="22" height="22"></td>
			<td class="tile" id="cell61" width="22" height="22"></td>
			<td class="tile" id="cell62" width="22" height="22"></td>
			<td class="tile" id="cell63" width="22" height="22"></td>
			<td class="tile" id="cell64" width="22" height="22"></td>
			<td class="tile" id="cell65" width="22" height="22"></td>
			<td class="tile" id="cell66" width="22" height="22"></td>
			</tr>
			<tr>
			<td class="tile" id="cell67" width="22" height="22"></td>
			<td class="tile" id="cell68" width="22" height="22"></td>
			<td class="tile" id="cell69" width="22" height="22"></td>
			<td class="tile" id="cell70" width="22" height="22"></td>
			<td class="tile" id="cell71" width="22" height="22"></td>
			<td class="tile" id="cell72" width="22" height="22"></td>
			<td class="tile" id="cell73" width="22" height="22"></td>
			<td class="tile" id="cell74" width="22" height="22"></td>
			<td class="tile" id="cell75" width="22" height="22"></td>
			<td class="tile" id="cell76" width="22" height="22"></td>
			<td class="tile" id="cell77" width="22" height="22"></td>
			</tr>
			<tr>
			<td class="tile" id="cell78" width="22" height="22"></td>
			<td class="tile" id="cell79" width="22" height="22"></td>
			<td class="tile" id="cell80" width="22" height="22"></td>
			<td class="tile" id="cell81" width="22" height="22"></td>
			<td class="tile" id="cell82" width="22" height="22"></td>
			<td class="tile" id="cell83" width="22" height="22"></td>
			<td class="tile" id="cell84" width="22" height="22"></td>
			<td class="tile" id="cell85" width="22" height="22"></td>
			<td class="tile" id="cell86" width="22" height="22"></td>
			<td class="tile" id="cell87" width="22" height="22"></td>
			<td class="tile" id="cell88" width="22" height="22"></td>
			</tr>
			<tr>
			<td class="tile" id="cell89" width="22" height="22"></td>
			<td class="tile" id="cell90" width="22" height="22"></td>
			<td class="tile" id="cell91" width="22" height="22"></td>
			<td class="tile" id="cell92" width="22" height="22"></td>
			<td class="tile" id="cell93" width="22" height="22"></td>
			<td class="tile" id="cell94" width="22" height="22"></td>
			<td class="tile" id="cell95" width="22" height="22"></td>
			<td class="tile" id="cell96" width="22" height="22"></td>
			<td class="tile" id="cell97" width="22" height="22"></td>
			<td class="tile" id="cell98" width="22" height="22"></td>
			<td class="tile" id="cell99" width="22" height="22"></td>
			</tr>
			<tr>
			<td class="tile" id="cell100" width="22" height="22"></td>
			<td class="tile" id="cell101" width="22" height="22"></td>
			<td class="tile" id="cell102" width="22" height="22"></td>
			<td class="tile" id="cell103" width="22" height="22"></td>
			<td class="tile" id="cell104" width="22" height="22"></td>
			<td class="tile" id="cell105" width="22" height="22"></td>
			<td class="tile" id="cell106" width="22" height="22"></td>
			<td class="tile" id="cell107" width="22" height="22"></td>
			<td class="tile" id="cell108" width="22" height="22"></td>
			<td class="tile" id="cell109" width="22" height="22"></td>
			<td class="tile" id="cell110" width="22" height="22"></td>
			</tr>
			<tr>
			<td class="tile" id="cell111" width="22" height="22"></td>
			<td class="tile" id="cell112" width="22" height="22"></td>
			<td class="tile" id="cell113" width="22" height="22"></td>
			<td class="tile" id="cell114" width="22" height="22"></td>
			<td class="tile" id="cell115" width="22" height="22"></td>
			<td class="tile" id="cell116" width="22" height="22"></td>
			<td class="tile" id="cell117" width="22" height="22"></td>
			<td class="tile" id="cell118" width="22" height="22"></td>
			<td class="tile" id="cell119" width="22" height="22"></td>
			<td class="tile" id="cell120" width="22" height="22"></td>
			<td class="tile" id="cell121" width="22" height="22"></td>
			</tr>
			</table>
		</div>
	</td>
	</tr>
	</table>
 <!-- end of main table -->


 <!-- The selection block -->
 	<table>
	<tr>
	<td>
		<div class="selection">
			<div class="button" id="button1" onClick='pickColor("button1","wordTile1");'></div>
			<div class="wordMix">Mix %</div>
			<input class="tilePercent" type="text" onkeypress="return numeralsOnly(event)" value="0" name="tile1" 
				id="tile1" size="3" maxlength="3" />
			<div class="wordTile" id="wordTile1">Tile #</div>
			<img class="upArrow" id="inc1" src='http://www.mosaictileblend.com/images/BtnUp.gif'
				onMouseOver='document.getElementById("inc1").src="http://www.mosaictileblend.com/images/BtnUpDown.gif"'
				onMouseOut='document.getElementById("inc1").src="http://www.mosaictileblend.com/images/BtnUp.gif"'
				onClick='increasePercent("tile1");' />
			<img class="downArrow" id="dec1" src='http://www.mosaictileblend.com/images/BtnDown.gif'
				onMouseOver='document.getElementById("dec1").src="http://www.mosaictileblend.com/images/BtnDownDown.gif"'
				onMouseOut='document.getElementById("dec1").src="http://www.mosaictileblend.com/images/BtnDown.gif"'
				onClick='decreasePercent("tile1");' />
		</div>
	</td>
	<td>
		<div class="selection">
			<div class="button" id="button2" onClick='pickColor("button2","wordTile2");'></div>
			<div class="wordMix">Mix %</div>
			<input class="tilePercent" type="text" onkeypress="return numeralsOnly(event)" value="0" name="tile2" 
				id="tile2" size="3" maxlength="3" />
			<div class="wordTile" id="wordTile2">Tile #</div>
			<img class="upArrow" id="inc2" src='http://www.mosaictileblend.com/images/BtnUp.gif'
				onMouseOver='document.getElementById("inc2").src="http://www.mosaictileblend.com/images/BtnUpDown.gif"'
				onMouseOut='document.getElementById("inc2").src="http://www.mosaictileblend.com/images/BtnUp.gif"'
				onClick='increasePercent("tile2");' />
			<img class="downArrow" id="dec2" src='http://www.mosaictileblend.com/images/BtnDown.gif'
				onMouseOver='document.getElementById("dec2").src="http://www.mosaictileblend.com/images/BtnDownDown.gif"'
				onMouseOut='document.getElementById("dec2").src="http://www.mosaictileblend.com/images/BtnDown.gif"'
				onClick='decreasePercent("tile2");' />
		</div>
	</td>
	<td>
		<div class="selection">
			<div class="button" id="button3" onClick='pickColor("button3","wordTile3");'></div>
			<div class="wordMix">Mix %</div>
			<input class="tilePercent" type="text" onkeypress="return numeralsOnly(event)" value="0" name="tile3" 
				id="tile3" size="3" maxlength="3" />
			<div class="wordTile" id="wordTile3">Tile #</div>
			<img class="upArrow" id="inc3" src='http://www.mosaictileblend.com/images/BtnUp.gif'
				onMouseOver='document.getElementById("inc3").src="http://www.mosaictileblend.com/images/BtnUpDown.gif"'
				onMouseOut='document.getElementById("inc3").src="http://www.mosaictileblend.com/images/BtnUp.gif"'
				onClick='increasePercent("tile3");' />
			<img class="downArrow" id="dec3" src='http://www.mosaictileblend.com/images/BtnDown.gif'
				onMouseOver='document.getElementById("dec3").src="http://www.mosaictileblend.com/images/BtnDownDown.gif"'
				onMouseOut='document.getElementById("dec3").src="http://www.mosaictileblend.com/images/BtnDown.gif"'
				onClick='decreasePercent("tile3");' />
		</div>
	</td>
	<td>
		<div class="selection">
			<div class="button" id="button4" onClick='pickColor("button4","wordTile4");'></div>
			<div class="wordMix">Mix %</div>
			<input class="tilePercent" type="text" onkeypress="return numeralsOnly(event)" value="0" name="tile4" 
				id="tile4" size="3" maxlength="3" />
			<div class="wordTile" id="wordTile4">Tile #</div>
			<img class="upArrow" id="inc4" src='http://www.mosaictileblend.com/images/BtnUp.gif'
				onMouseOver='document.getElementById("inc4").src="http://www.mosaictileblend.com/images/BtnUpDown.gif"'
				onMouseOut='document.getElementById("inc4").src="http://www.mosaictileblend.com/images/BtnUp.gif"'
				onClick='increasePercent("tile4");' />
			<img class="downArrow" id="dec4" src='http://www.mosaictileblend.com/images/BtnDown.gif'
				onMouseOver='document.getElementById("dec4").src="http://www.mosaictileblend.com/images/BtnDownDown.gif"'
				onMouseOut='document.getElementById("dec4").src="http://www.mosaictileblend.com/images/BtnDown.gif"'
				onClick='decreasePercent("tile4");' />
		</div>
	</td>
	<td>
		<div class="selection">
			<div class="button" id="button5" onClick='pickColor("button5","wordTile5");'></div>
			<div class="wordMix">Mix %</div>
			<input class="tilePercent" type="text" onkeypress="return numeralsOnly(event)" value="0" name="tile5" 
				id="tile5" size="3" maxlength="3" />
			<div class="wordTile" id="wordTile5">Tile #</div>
			<img class="upArrow" id="inc5" src='http://www.mosaictileblend.com/images/BtnUp.gif'
				onMouseOver='document.getElementById("inc5").src="http://www.mosaictileblend.com/images/BtnUpDown.gif"'
				onMouseOut='document.getElementById("inc5").src="http://www.mosaictileblend.com/images/BtnUp.gif"'
				onClick='increasePercent("tile5");' />
			<img class="downArrow" id="dec5" src='http://www.mosaictileblend.com/images/BtnDown.gif'
				onMouseOver='document.getElementById("dec5").src="http://www.mosaictileblend.com/images/BtnDownDown.gif"'
				onMouseOut='document.getElementById("dec5").src="http://www.mosaictileblend.com/images/BtnDown.gif"'
				onClick='decreasePercent("tile5");' />
		</div>
	</td>
	<td>
		<div class="selection">
			<div class="button" id="button6" onClick='pickColor("button6","wordTile6");'></div>
			<div class="wordMix">Mix %</div>
			<input class="tilePercent" type="text" onkeypress="return numeralsOnly(event)" value="0" name="tile6" 
				id="tile6" size="3" maxlength="3" />
			<div class="wordTile" id="wordTile6">Tile #</div>
			<img class="upArrow" id="inc6" src='http://www.mosaictileblend.com/images/BtnUp.gif'
				onMouseOver='document.getElementById("inc6").src="http://www.mosaictileblend.com/images/BtnUpDown.gif"'
				onMouseOut='document.getElementById("inc6").src="http://www.mosaictileblend.com/images/BtnUp.gif"'
				onClick='increasePercent("tile6");' />
			<img class="downArrow" id="dec6" src='http://www.mosaictileblend.com/images/BtnDown.gif'
				onMouseOver='document.getElementById("dec6").src="http://www.mosaictileblend.com/images/BtnDownDown.gif"'
				onMouseOut='document.getElementById("dec6").src="http://www.mosaictileblend.com/images/BtnDown.gif"'
				onClick='decreasePercent("tile6");' />
		</div>
	</td>
	<td>
		<div class="selection">
			<div class="button" id="button7" onClick='pickColor("button7","wordTile7");'></div>
			<div class="wordMix">Mix %</div>
			<input class="tilePercent" type="text" onkeypress="return numeralsOnly(event)" value="0" name="tile7" 
				id="tile7" size="3" maxlength="3" />
			<div class="wordTile" id="wordTile7">Tile #</div>
			<img class="upArrow" id="inc7" src='http://www.mosaictileblend.com/images/BtnUp.gif'
				onMouseOver='document.getElementById("inc7").src="http://www.mosaictileblend.com/images/BtnUpDown.gif"'
				onMouseOut='document.getElementById("inc7").src="http://www.mosaictileblend.com/images/BtnUp.gif"'
				onClick='increasePercent("tile7");' />
			<img class="downArrow" id="dec7" src='http://www.mosaictileblend.com/images/BtnDown.gif'
				onMouseOver='document.getElementById("dec7").src="http://www.mosaictileblend.com/images/BtnDownDown.gif"'
				onMouseOut='document.getElementById("dec7").src="http://www.mosaictileblend.com/images/BtnDown.gif"'
				onClick='decreasePercent("tile7");' />
		</div>
	</td>
	</tr>
	</table>
<!-- End of the selection block -->


<!-- Joint color -->
	<p>Select joint color:</p>
	<table cellspacing="7">
	<tr>
	<td><div class="joint" onclick="setGroutColor('rgb(255, 255, 255)');" style="background-color: #FFFFFF; "></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(179, 179, 179)');" style="background-color: #B3B3B3; "></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(76, 76, 76)');" style="background-color: #4C4C4C;"></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(0, 0, 0)');" style="background-color: #000000; "></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(243, 243, 204)');" style="background-color: #F3F3CC; "></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(230, 230, 153)');" style="background-color: #E6E699; "></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(204, 204, 51)');" style="background-color: #CCCC33; "></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(230, 179, 153)');" style="background-color: #E6B399; "></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(230, 128, 51)');" style="background-color: #E68033; "></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(194, 12, 0)');" style="background-color: #C20C00; "></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(102, 179, 179)');" style="background-color: #66B3B3;"></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(0, 76, 76)');" style="background-color: #004C4C; "></div></td>
	<td><div class="joint" onclick="setGroutColor('rgb(58, 163, 0)');" style="background-color: #3AAC00; "></div></td>
	</tr>
	</table>
<!-- End of Joint Color -->


<!-- Control buttons -->
	<div class="infoDisplay" id="infoDisplay">&nbsp;</div>
	<form enctype="text/plain" method="POST" onsubmit="emailPage(this);return false;">
	<img id="pattern" src="http://www.mosaictileblend.com/images/BtnGrid1.gif"
		onClick="changePattern();"   
		onMouseOver='setDisplay("Change Pattern")'
		onMouseOut='setDisplay("&nbsp")' />
	<img id="BtnPrinter" src="http://www.mosaictileblend.com/images/BtnPrinter.gif" 
		onClick="printPage();"
		onMouseOver='document.getElementById("BtnPrinter").src="http://www.mosaictileblend.com/images/BtnPrinterDown.gif";setDisplay("Print")'
		onMouseOut='document.getElementById("BtnPrinter").src="http://www.mosaictileblend.com/images/BtnPrinter.gif";setDisplay("&nbsp")'>
	<img id="BtnCancel" src="http://www.mosaictileblend.com/images/BtnCancel.gif" 
		onClick="resetPercent();"
		onMouseOver='document.getElementById("BtnCancel").src="http://www.mosaictileblend.com/images/BtnCancelDown.gif"; infoDisplay.innerHTML="Clear"' 
		onMouseOut='document.getElementById("BtnCancel").src="http://www.mosaictileblend.com/images/BtnCancel.gif";setDisplay("&nbsp")'>
	<input type="image" id="BtnEmail" src="http://www.mosaictileblend.com/images/BtnEmail.gif"
		onMouseOver='document.getElementById("BtnEmail").src="http://www.mosaictileblend.com/images/BtnEmailDown.gif"; infoDisplay.innerHTML="E-mail"' 
		onMouseOut='document.getElementById("BtnEmail").src="http://www.mosaictileblend.com/images/BtnEmail.gif";setDisplay("&nbsp")'>
	<img id="BtnSubmit" src="http://www.mosaictileblend.com/images/BtnCheck.gif" 
		onClick="submitButton();"
		onMouseOver='document.getElementById("BtnSubmit").src="http://www.mosaictileblend.com/images/BtnCheckDown.gif"; infoDisplay.innerHTML="Submit"' 
		onMouseOut='document.getElementById("BtnSubmit").src="http://www.mosaictileblend.com/images/BtnCheck.gif";setDisplay("&nbsp")'>
	</form>
<!-- End of control buttons -->


<!-- style 2 tile layout -->
<div id="style2">
	<table id="mainTable2" padding="2" width="266" style="visibility:hidden;">
	<tr>
	<td class="tile" id="cella1" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella3" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella5" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella7" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella9" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella11" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cella12" width="22" height="22"></td>
	<td class="tile" id="cella13" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella15" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella17" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella19" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella21" colspan="2" width="46" height="22"></td>

	</tr>
	<tr>
	<td class="tile" id="cella23" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella25" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella27" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella29" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella31" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella33" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cella34" width="22" height="22"></td>
	<td class="tile" id="cella35" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella37" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella39" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella41" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella43" colspan="2" width="46" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cella45" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella47" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella49" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella51" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella53" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella55" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cella56" width="22" height="22"></td>
	<td class="tile" id="cella57" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella59" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella61" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella63" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella65" colspan="2" width="46" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cella67" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella69" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella71" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella73" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella75" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella77" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cella78" width="22" height="22"></td>
	<td class="tile" id="cella79" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella81" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella83" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella85" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella87" colspan="2" width="46" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cella89" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella91" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella93" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella95" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella97" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella99" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cella100" width="22" height="22"></td>
	<td class="tile" id="cella101" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella103" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella105" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella107" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella109" colspan="2" width="46" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cella111" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella113" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella115" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella117" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella119" colspan="2" width="46" height="22"></td>
	<td class="tile" id="cella121" width="22" height="22"></td>
	</tr>
	<tr>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	</tr>
	</table>
</div>
<!-- End of style 2 -->


<!-- style 3 tile layout -->
<div id="style3">
	<table id="mainTable3" padding="2" width="266" style="visibility:hidden;">
	<tr>
	<td class="tile" id="cellb1" colspan="3"></td>
	<td class="tile" id="cellb4" colspan="3"></td>
	<td class="tile" id="cellb7" rowspan="3"></td>
	<td class="tile" id="cellb8" width="22" height="22"></td>
	<td class="tile" id="cellb9" colspan="2" rowspan="2"></td>
	<td class="tile" id="cellb11" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cellb12" width="22" height="22"></td>
	<td class="tile" id="cellb13" width="22" height="22"></td>
	<td class="tile" id="cellb14" colspan="3"></td>
	<td class="tile" id="cellb17" rowspan="3"></td>
	<td class="tile" id="cellb19" width="22" height="22"></td>
	<td class="tile" id="cellb22" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cellb23" rowspan="3"></td>
	<td class="tile" id="cellb24" width="22" height="22"></td>
	<td class="tile" id="cellb25" width="22" height="22"></td>
	<td class="tile" id="cellb26" rowspan="3"></td>
	<td class="tile" id="cellb27" width="22" height="22"></td>
	<td class="tile" id="cellb30" width="22" height="22"></td>
	<td class="tile" id="cellb31" colspan="3"></td>
	</tr>
	<tr>
	<td class="tile" id="cellb35" rowspan="2" colspan="2"></td>
	<td class="tile" id="cellb38" width="22" height="22"></td>
	<td class="tile" id="cellb40" colspan="3"></td>
	<td class="tile" id="cellb43" width="22" height="22"></td>
	<td class="tile" id="cellb44" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cellb49" colspan="3"></td>
	<td class="tile" id="cellb52" width="22" height="22"></td>
	<td class="tile" id="cellb53" width="22" height="22"></td>
	<td class="tile" id="cellb54" rowspan="3"></td>
	<td class="tile" id="cellb55" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cellb56" width="22" height="22"></td>
	<td class="tile" id="cellb57" colspan="3"></td>
	<td class="tile" id="cellb60" width="22" height="22"></td>
	<td class="tile" id="cellb61" width="22" height="22"></td>
	<td class="tile" id="cellb62" colspan="3"></td>
	<td class="tile" id="cellb66" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cellb67" rowspan="3"></td>
	<td class="tile" id="cellb68" colspan="2"></td>
	<td class="tile" id="cellb70" colspan="3"></td>
	<td class="tile" id="cellb73" rowspan="2" colspan="2"></td>
	<td class="tile" id="cellb75" width="22" height="22"></td>
	<td class="tile" id="cellb77" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cellb79" rowspan="2" colspan="2"></td>
	<td class="tile" id="cellb81" width="22" height="22"></td>
	<td class="tile" id="cellb82" width="22" height="22"></td>
	<td class="tile" id="cellb83" width="22" height="22"></td>
	<td class="tile" id="cellb86" width="22" height="22"></td>
	<td class="tile" id="cellb87" width="22" height="22"></td>
	<td class="tile" id="cellb88" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cellb92" width="22" height="22"></td>
	<td class="tile" id="cellb93" colspan="3"></td>
	<td class="tile" id="cellb96" width="22" height="22"></td>
	<td class="tile" id="cellb97" colspan="3"></td>
	</tr>
	<tr>
	<td class="tile" id="cellb100" width="22" height="22"></td>
	<td class="tile" id="cellb101" width="22" height="22"></td>
	<td class="tile" id="cellb102" width="22" height="22"></td>
	<td class="tile" id="cellb103" width="22" height="22"></td>
	<td class="tile" id="cellb104" colspan="2" rowspan="2"></td>
	<td class="tile" id="cellb106" colspan="3"></td>
	<td class="tile" id="cellb109" width="22" height="22"></td>
	<td class="tile" id="cellb110" width="22" height="22"></td>
	</tr>
	<tr>
	<td class="tile" id="cellb111" width="22" height="22"></td>
	<td class="tile" id="cellb112" colspan="3"></td>
	<td class="tile" id="cellb117" width="22" height="22"></td>
	<td class="tile" id="cellb118" width="22" height="22"></td>
	<td class="tile" id="cellb119" colspan="3"></td>
	</tr>
	<tr>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	<td width="30" height="1"></td>
	</tr>
	</table>
</div>
<!-- End of style 3 -->


<!--hidden table with all of the color options listed, will pop up when button on right is clicked -->
<div id="selectionTable" class="selectionTable" style="visibility:hidden;">
	<table cellpadding="4">
	<tr>
	<td class="pick" style="background-color: #EEEE00;" onClick='colorChosen("#EEEE00", 1101);'></td>
	<td class="pick" style="background-color: #CD9B1D;" onClick='colorChosen("#CD9B1D", 1102);'></td>
	<td class="pick" style="background-color: #FF9912;" onClick='colorChosen("#FF9912", 1105);'></td>
	<td class="pick" style="background-color: #E3A869;" onClick='colorChosen("#E3A869", 1107);'></td>
	<td class="pick" style="background-color: #EECFA1;" onClick='colorChosen("#EECFA1", 1108);'></td>
	<td class="pick" style="background-color: #FFA500;" onClick='colorChosen("#FFA500", 1109);'></td>
	<td class="pick" style="background-color: #CDCD00;" onClick='colorChosen("#CDCD00", 1116);'></td>
	<td class="pick" style="background-color: #BDFCC9;" onClick='colorChosen("#BDFCC9", 1118);'></td>
	<td class="pick" style="background-color: #6E8B3D;" onClick='colorChosen("#6E8B3D", 1202);'></td>
	<td class="pick" style="background-color: #B4EEB4;" onClick='colorChosen("#B4EEB4", 1203);'></td>
	</tr>
	<tr>
	<td class="pickLabel">1101</td>
	<td class="pickLabel">1102</td>
	<td class="pickLabel">1105</td>
	<td class="pickLabel">1107</td>
	<td class="pickLabel">1108</td>
	<td class="pickLabel">1109</td>
	<td class="pickLabel">1116</td>
	<td class="pickLabel">1118</td>
	<td class="pickLabel">1202</td>
	<td class="pickLabel">1203</td>
	</tr>

	<tr>
	<td class="pick" style="background-color: #CDC673;" onClick='colorChosen("#CDC673", 1204);'></td>
	<td class="pick" style="background-color: #C1FFC1;" onClick='colorChosen("#C1FFC1", 1209);'></td>
	<td class="pick" style="background-color: #9ACD32;" onClick='colorChosen("#9ACD32", 1211);'></td>
	<td class="pick" style="background-color: #F0FFF0;" onClick='colorChosen("#F0FFF0", 1213);'></td>
	<td class="pick" style="background-color: #228B22;" onClick='colorChosen("#228B22", 1214);'></td>
	<td class="pick" style="background-color: #006400;" onClick='colorChosen("#006400", 1216);'></td>
	<td class="pick" style="background-color: #9BCD9B;" onClick='colorChosen("#9BCD9B", 1217);'></td>
	<td class="pick" style="background-color: #556B2F;" onClick='colorChosen("#556B2F", 1219);'></td>
	<td class="pick" style="background-color: #191970;" onClick='colorChosen("#191970", 1301);'></td>
	<td class="pick" style="background-color: #00008B;" onClick='colorChosen("#00008B", 1302);'></td>
	</tr>
	<tr>
	<td class="pickLabel">1204</td>
	<td class="pickLabel">1209</td>
	<td class="pickLabel">1211</td>
	<td class="pickLabel">1213</td>
	<td class="pickLabel">1214</td>
	<td class="pickLabel">1216</td>
	<td class="pickLabel">1217</td>
	<td class="pickLabel">1219</td>
	<td class="pickLabel">1301</td>
	<td class="pickLabel">1302</td>
	</tr>

	<tr>
	<td class="pick" style="background-color: #436EEE;" onClick='colorChosen("#436EEE", 1303);'></td>
	<td class="pick" style="background-color: #C6E2FF;" onClick='colorChosen("#C6E2FF", 1304);'></td>
	<td class="pick" style="background-color: #CAE1FF;" onClick='colorChosen("#CAE1FF", 1307);'></td>
	<td class="pick" style="background-color: #515151;" onClick='colorChosen("#515151", 1401);'></td>
	<td class="pick" style="background-color: #848484;" onClick='colorChosen("#848484", 1402);'></td>
	<td class="pick" style="background-color: #B7B7B7;" onClick='colorChosen("#B7B7B7", 1403);'></td>
	<td class="pick" style="background-color: #EAEAEA;" onClick='colorChosen("#EAEAEA", 1404);'></td>
	<td class="pick" style="background-color: #CD0000;" onClick='colorChosen("#CD0000", 1501);'></td>
	<td class="pick" style="background-color: #FF8247;" onClick='colorChosen("#FF8247", 1502);'></td>
	<td class="pick" style="background-color: #C76114;" onClick='colorChosen("#C76114", 1503);'></td>
	</tr>
	<tr>
	<td class="pickLabel">1303</td>
	<td class="pickLabel">1304</td>
	<td class="pickLabel">1307</td>
	<td class="pickLabel">1401</td>
	<td class="pickLabel">1402</td>
	<td class="pickLabel">1403</td>
	<td class="pickLabel">1404</td>
	<td class="pickLabel">1501</td>
	<td class="pickLabel">1502</td>
	<td class="pickLabel">1503</td>
	</tr>

	<tr>
	<td class="pick" style="background-color: #8B4513;" onClick='colorChosen("#8B4513", 1504);'></td>
	<td class="pick" style="background-color: #E9967A;" onClick='colorChosen("#E9967A", 1506);'></td>
	<td class="pick" style="background-color: #CD3700;" onClick='colorChosen("#CD3700", 1508);'></td>
	<td class="pick" style="background-color: #CD2626;" onClick='colorChosen("#CD2626", 1509);'></td>
	<td class="pick" style="background-color: #EE5C42;" onClick='colorChosen("#EE5C42", 1519);'></td>
	<td class="pick" style="background-color: #FFC1C1;" onClick='colorChosen("#FFC1C1", 1520);'></td>
	<td class="pick" style="background-color: #EE8262;" onClick='colorChosen("#EE8262", 1521);'></td>
	<td class="pick" style="background-color: #FFA07A;" onClick='colorChosen("#FFA07A", 1522);'></td>
	<td class="pick" style="background-color: #009ACD;" onClick='colorChosen("#009ACD", 1602);'></td>
	<td class="pick" style="background-color: #00688B;" onClick='colorChosen("#00688B", 1604);'></td>
	</tr>
	<tr>
	<td class="pickLabel">1504</td>
	<td class="pickLabel">1506</td>
	<td class="pickLabel">1508</td>
	<td class="pickLabel">1509</td>
	<td class="pickLabel">1519</td>
	<td class="pickLabel">1520</td>
	<td class="pickLabel">1521</td>
	<td class="pickLabel">1522</td>
	<td class="pickLabel">1602</td>
	<td class="pickLabel">1604</td>
	</tr>

	<tr>
	<td class="pick" style="background-color: #ADD8E6;" onClick='colorChosen("#ADD8E6", 1609);'></td>
	<td class="pick" style="background-color: #000000;" onClick='colorChosen("#000000", 1701);'></td>
	<td class="pick" style="background-color: #FCFCFC;" onClick='colorChosen("#FCFCFC", 1801);'></td>
	<td class="pick" style="background-color: #008080;" onClick='colorChosen("#008080", 1902);'></td>
	<td class="pick" style="background-color: #388E8E;" onClick='colorChosen("#388E8E", 1903);'></td>
	<td class="pick" style="background-color: #03A89E;" onClick='colorChosen("#03A89E", 1904);'></td>
	<td class="pick" style="background-color: #AEEEEE;" onClick='colorChosen("#AEEEEE", 1905);'></td>
	<td class="pick" style="background-color: #E0FFFF;" onClick='colorChosen("#E0FFFF", 1906);'></td>
	<td class="pick" style="background-color: #0000CD;" onClick='colorChosen("#0000CD", 2101);'></td>
	<td class="pick" style="background-color: #4169E1;" onClick='colorChosen("#4169E1", 2102);'></td>
	</tr>
	<tr>
	<td class="pickLabel">1609</td>
	<td class="pickLabel">1701</td>
	<td class="pickLabel">1801</td>
	<td class="pickLabel">1902</td>
	<td class="pickLabel">1903</td>
	<td class="pickLabel">1904</td>
	<td class="pickLabel">1905</td>
	<td class="pickLabel">1906</td>
	<td class="pickLabel">2101</td>
	<td class="pickLabel">2102</td>
	</tr>

	<tr>
	<td class="pick" style="background-color: #B9D3EE;" onClick='colorChosen("#B9D3EE", 2103);'></td>
	<td class="pick" style="background-color: #BFEFFF;" onClick='colorChosen("#BFEFFF", 2107);'></td>
	<td class="pick" style="background-color: #7A378B;" onClick='colorChosen("#7A378B", 2404);'></td>
	<td class="pick" style="background-color: #CD8500;" onClick='colorChosen("#CD8500", 2405);'></td>
	<td class="pick" style="background-color: #FFA54F;" onClick='colorChosen("#FFA54F", 2406);'></td>
	<td class="pick" style="background-color: #E3A869;" onClick='colorChosen("#E3A869", 2407);'></td>
	<td class="pick" style="background-color: #FF4500;" onClick='colorChosen("#FF4500", 2408);'></td>
	<td class="pick" style="background-color: #FF6103;" onClick='colorChosen("#FF6103", 2409);'></td>
	<td class="pick" style="background-color: #CCCCCC;" onClick='colorChosen("#CCCCCC", "metal");'></td>
	<td class="pick" id="clear" onClick='clearChosen();'></td>
	</tr>
	<tr>
	<td class="pickLabel">2103</td>
	<td class="pickLabel">2107</td>
	<td class="pickLabel">2404</td>
	<td class="pickLabel">2405</td>
	<td class="pickLabel">2406</td>
	<td class="pickLabel">2407</td>
	<td class="pickLabel">2408</td>
	<td class="pickLabel">2409</td>
	<td class="pickLabel">metal</td>
	<td class="pickLabel">none</td>
	</tr>
	</table>
</div>
<!-- End of color selection table -->

	]]>
	</Content>
</Module>


