hexdigits=new Array("00", "11", "22", "33", "44", "55", "66", "77", "88", "99", "aa", "bb", "cc", "dd", "ee", "ff")
colors=new Array("r", "g", "b")
colorNames=new Array("Red", "Green", "Blue")
swatches=new Array("ffffff", "ffffff", "ffffff", "ffffff", "ffffff")
currentSwatch=0;
r="ff"
g="ff"
b="ff"

for (i=0; i<colors.length; i++) {
	document.write("<ul><li>"+colorNames[i]+"</li>")
	for (j=0; j<hexdigits.length; j++) {
		thisId=colors[i]+hexdigits[j]
		document.write("<li><a href='javascript:select(\""+thisId+"\")' id='"+thisId+"'>"+hexdigits[j]+"</a></li>")
	}
	document.write("</ul>")
}
document.write("<div id='swatches'><ul><li>Swatches</li>")

for (i=0; i<swatches.length; i++) {
	document.write("<li><a href='javascript:selectSwatch("+i+")' id='swatch"+i+"'>Swatch "+(i+1)+"</a></li>")
}

document.write("</ul><ul><li>Invert</li>")

for (i=0; i<swatches.length; i++) {
	document.write("<li><a href='javascript:invertSwatch("+i+")' id='swatch"+i+"i'>Swatch "+(i+1)+"</a></li>")
}

document.write("</ul><ul><li>Shift Left</li>")

for (i=0; i<swatches.length; i++) {
	document.write("<li><a href='javascript:shiftSwatchLeft("+i+")' id='swatch"+i+"shl'>Swatch "+(i+1)+"</a></li>")
}

document.write("</ul><ul><li>Shift Right</li>")

for (i=0; i<swatches.length; i++) {
	document.write("<li><a href='javascript:shiftSwatchRight("+i+")' id='swatch"+i+"shr'>Swatch "+(i+1)+"</a></li>")
}

document.write("</ul></div>")

document.write("<div id='form'><form name='form'><table border=1>")
document.write("<tr><td></td><td>Border</td><td>Background</td><td>Color</td><td>Title</td></tr>")
for (i=0; i<swatches.length; i++) {
	document.write("<tr><td>Swatch "+(i+1)+"</td><td><input type='radio' onchange='javascript:colorize()' name='border'")
	if (i==0) {
		document.write(" checked")
	}
	document.write("></td><td><input type='radio' onchange='javascript:colorize()' name='background'")
	if (i==0) {
		document.write(" checked")
	}
	document.write("></td><td><input type='radio' onchange='javascript:colorize()' name='color'")
	if (i==0) {
		document.write(" checked")
	}
	document.write("></td><td><input type='radio' onchange='javascript:colorize()' name='title'")
	if (i==0) {
		document.write(" checked")
	}
	document.write("></td></tr>")
}

document.write("</table></form></div>")

function select(aColor) {
	whichColor=aColor.charAt(0)
	whatValue=aColor.substring(1)
	if (whichColor=="r") {
		r=whatValue
	} else if (whichColor=="g") {
		g=whatValue
	} else if (whichColor=="b") {
		b=whatValue
	}
	swatches[currentSwatch]=r+g+b
	colorize()
}

function selectSwatch(whichSwatch) {
	currentSwatch=whichSwatch
	r=swatches[currentSwatch].substring(0, 2)
	g=swatches[currentSwatch].substring(2, 4)
	b=swatches[currentSwatch].substring(4, 6)
	colorize()
}

function invert(aColor) {
	toReturn=(0xffffff-Number("0x"+aColor)).toString(16)
	while (toReturn.length<6) {
		toReturn="0"+toReturn
	}
	return toReturn
}

function shiftLeft(aColor) {
	return aColor.substring(2)+aColor.substring(0, 2)
}

function shiftRight(aColor) {
	return aColor.substring(4)+aColor.substring(0, 4)
}

function invertSwatch(whichSwatch) {
	swatches[whichSwatch]=invert(swatches[whichSwatch])
	selectSwatch(whichSwatch)
}

function shiftSwatchLeft(whichSwatch) {
	swatches[whichSwatch]=shiftLeft(swatches[whichSwatch])
	selectSwatch(whichSwatch)
}

function shiftSwatchRight(whichSwatch) {
	swatches[whichSwatch]=shiftRight(swatches[whichSwatch])
	selectSwatch(whichSwatch)
}

function colorize() {
	for (i=0; i<swatches.length; i++) {
		if (i==currentSwatch) {
			document.getElementById("swatch"+i).style.backgroundColor="#00f"
		} else {
			document.getElementById("swatch"+i).style.backgroundColor="#fff"
		}
		document.getElementById("swatch"+i).style.border="10px solid #"+swatches[i]
		document.getElementById("swatch"+i+"i").style.border="10px solid #"+invert(swatches[i])
		document.getElementById("swatch"+i+"shl").style.border="10px solid #"+shiftLeft(swatches[i])
		document.getElementById("swatch"+i+"shr").style.border="10px solid #"+shiftRight(swatches[i])
	}
	for (i=0; i<colors.length; i++) {
		for (j=0; j<hexdigits.length; j++) {
			thisId=colors[i]+hexdigits[j]
			thisColor="#"
			if (i==0) {
				if (r==hexdigits[j]) {
					document.getElementById(thisId).style.backgroundColor="#00f"
				} else {
					document.getElementById(thisId).style.backgroundColor="#fff"
				}
				thisColor+=hexdigits[j]
			} else {
				thisColor+=r
			}
			if (i==1) {
				if (g==hexdigits[j]) {
					document.getElementById(thisId).style.backgroundColor="#00f"
				} else {
					document.getElementById(thisId).style.backgroundColor="#fff"
				}
				thisColor+=hexdigits[j]
			} else {
				thisColor+=g
			}
			if (i==2) {
				if (b==hexdigits[j]) {
					document.getElementById(thisId).style.backgroundColor="#00f"
				} else {
					document.getElementById(thisId).style.backgroundColor="#fff"
				}
				thisColor+=hexdigits[j]
			} else {
				thisColor+=b
			}
			document.getElementById(thisId).style.border="7px solid "+thisColor
		}
	}
	document.body.style.backgroundColor="#"+r+g+b
	sampleBorder=0
	sampleBackground=0
	sampleColor=0
	sampleTitle=0
	for (i=0; i<swatches.length; i++) {
		if (document.form.border[i].checked) {
			sampleBorder=i
		}
		if (document.form.background[i].checked) {
			sampleBackground=i
		}
		if (document.form.color[i].checked) {
			sampleColor=i
		}
		if (document.form.title[i].checked) {
			sampleTitle=i
		}
	}
	document.getElementById("sample").style.border="10px solid #"+swatches[sampleBorder]
	document.getElementById("sample").style.background="#"+swatches[sampleBackground]
	document.getElementById("sample").style.color="#"+swatches[sampleColor]
	document.getElementById("title").style.color="#"+swatches[sampleTitle]
}

colorize()