<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title></title>
<style type="text/css">
body
{
	background-color: #000;
}
.colorSample, .addedColor
{
	width: 40px;
	height: 20px;
/*	margin: 0px 1px 1px 0px;*/
	border: 2px solid #222;
	float: left;
	cursor: pointer;
}
.addedColor
{
	border: 1px solid #000;
}
FORM
{
	margin: 0px;
}
#colorField
{
	clear: both;
	border: 2px solid #ccc;
	background-color: #f0f0f0;
	padding: 10px;
	margin: 10px 0px;
}
</style>
<script language="JavaScript1.4" type="text/javascript">
	addColor = function(obj, color){
		obj.inList = (obj.inList)? false : true;
		if(obj.inList){
			prefix = (document.colorForm.color.value.length > 0)? ", " : "";
			document.colorForm.color.value += (prefix + color);
			obj.style.borderColor = "#fff";
		}else{
			re = new RegExp("(,\\s)*"+color,"gi");
			document.colorForm.color.value = document.colorForm.color.value.replace(re,"");
			re = /^,\s/gi;
			document.colorForm.color.value = document.colorForm.color.value.replace(re,"");
			obj.style.borderColor = "#000";
		}
	}
</script>

</head>
<body>
<div id="colorField">
	<form name="colorForm">
		<input type="text" name="color" value="" size="100" readonly>
	</form>
</div>

<div id="colorSamples">
</div>

</body>
</html>
