// config ---
var Width = 6;
var Height = 8;
var Height2 = Height*2;
var CellSpacing = 1;
var BgColor = '#000000';
var ActionPicker = 'onClick';
var ActionSlider = 'onMouseOver';
var CellContent = ''; // for netscape compatibility
var Colors = new Array('0','1','3','5','7','8','a','c','e','f');
//var Colors = new Array('0','1','2','3','4','5','6','7','8','a','b','c','d','e','f');
// variables ---
var id = 0;
var Stat = new Array();
var Name = new Array();
// functions ---
function ColorPicker(name) {
	id++;
	Stat[id] = 0;
	Name[id] = name;
	document.write('<table border=0 cellspacing=0 celpadding=0>\n<tr>\n<td>\n');
	ColorSlider(id);
	ColorTable(id);
	ColorField(id);
	document.write('</td>\n</tr>\n</table>\n');
}
function ColorPickerReadOnly(color) {
	document.write('<table border=0 cellspacing='+CellSpacing+' celpadding=0 width='+(Width*Colors.length)+' bgcolor='+BgColor+'>\n<tr>\n');
	document.write('<td id=ColorField'+id+' height='+Height2+' bgcolor='+color+'>'+CellContent+'</td>\n');
	document.write('</tr>\n</table>\n');
}
function ColorTable(id) {
	document.write('<table id=ColorPicker'+id+' border=0 cellspacing='+CellSpacing+' celpadding=0 bgcolor='+BgColor+'>\n');
	for(i=0;i<Colors.length;i++) {
		document.write('<tr>\n');
		for(j=0;j<Colors.length;j++) {
			document.write('<td width='+Width+' height='+Height+' '+ActionPicker+'="ColorSelect('+id+',this.bgColor)">'+CellContent+'</td>\n');
		}
		document.write('</tr>\n');
	}
	document.write('</table>\n');
	ColorFill(id);
}
function ColorFill(id) {
	doc = document.getElementById('ColorPicker'+id);
	for(i=0;i<Colors.length;i++) {
		for(j=0;j<Colors.length;j++) {
			k = Stat[id];
			color = '#'+Colors[i]+Colors[i]+Colors[j]+Colors[j]+Colors[k]+Colors[k];
			l = i*Colors.length+j;
			doc.cells[l].bgColor = color;
		}
	}
}
function ColorSlider(id) {
	document.write('<table border=0 cellspacing='+CellSpacing+' celpadding=0 bgcolor='+BgColor+'>\n<tr>\n');
	for(i=0;i<Colors.length;i++) {
		//document.write('');
		color = '#0000'+Colors[i]+Colors[i];
		document.write('<td width='+Width+' height='+Height2+' bgcolor='+color+' '+ActionSlider+'="ColorSet('+id+','+i+')">'+CellContent+'</td>\n');
		//document.write('');
	}
	document.write('</tr>\n</table>\n');
}
function ColorField(id) {
	field = document.getElementsByName(Name[id]);
	color = field[0].value;
	document.write('<table border=0 cellspacing='+CellSpacing+' celpadding=0 width=100% bgcolor='+BgColor+'>\n<tr>\n');
	document.write('<td id=ColorField'+id+' height='+Height2+' bgcolor='+color+'>'+CellContent+'</td>\n');
	document.write('</tr>\n</table>\n');
}
function ColorSet(id,color) {
	Stat[id] = color;
	ColorFill(id);
}
function ColorSelect(id,color) {
	cell = document.getElementById('ColorField'+id);
	cell.bgColor = color;
	field = document.getElementsByName(Name[id]);
	field[0].value = color;
}
// example
/*
<script language="javascript" src="js/ColorPicker.js"></script>
<script language="javascript">ColorSlider('fieldname');</script>
*/