<script>
varname = location.search.substr(1);
var varnames = varname.split('|');
varname = varnames[0];
var varnamev = !varnames[1] ? varnames[0] + '_v' : varnames[1];
function getcolor(event) {
	var hex = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
	if(event.clientX > 164 || event.clientY > 164) {
		return;
	}
	var hsv = new Object();
	var h = 164;
	var y = event.clientY;
	hsv.h = 360 * event.clientX / 164;
	if (y > h/2) {
		hsv.s = 1.0;
		hsv.v = 2 * (h - y) / h;
	}
	else {
		hsv.v = 1.0;
		hsv.s = y / (h/2);
	}
	var rgb = hsvToRgb(hsv);
	var red   = Math.round(255 * rgb.r);
	var green = Math.round(255 * rgb.g);
	var blue  = Math.round(255 * rgb.b);
	hexstr = '#' + hex[(red - (red % 16)) / 16].toString() + hex[red % 16].toString()
		 + hex[(green - (green % 16)) / 16].toString() + hex[green % 16].toString()
		 + hex[(blue - (blue % 16)) / 16].toString() + hex[blue % 16].toString()
	document.getElementById('box').style.backgroundColor = hexstr;
	document.getElementById('colorhex').value = hexstr;
}

function hsvToRgb(hsv) {
	var rgb = new Object();
	var i, f, p, q, t;

	if(hsv.s == 0) {
		// achromatic (grey)
		rgb.r = rgb.g = rgb.b = hsv.v;
		return rgb;
	}
	hsv.h /= 60;
	i = Math.floor( hsv.h );
	f = hsv.h - i;
	p = hsv.v * ( 1 - hsv.s );
	q = hsv.v * ( 1 - hsv.s * f );
	t = hsv.v * ( 1 - hsv.s * ( 1 - f ) );
	switch( i ) {
		case 0:
			rgb.r = hsv.v;
			rgb.g = t;
			rgb.b = p;
			break;
		case 1:
			rgb.r = q;
			rgb.g = hsv.v;
			rgb.b = p;
			break;
		case 2:
			rgb.r = p;
			rgb.g = hsv.v;
			rgb.b = t;
			break;
		case 3:
			rgb.r = p;
			rgb.g = q;
			rgb.b = hsv.v;
			break;
		case 4:
			rgb.r = t;
			rgb.g = p;
			rgb.b = hsv.v;
			break;
		default:
			rgb.r = hsv.v;
			rgb.g = p;
			rgb.b = q;
			break;
	}
	return rgb;
}

function setvalue(obj) {
	parent.$(varnamev).value = obj.value;
	if(parent.$(varnamev).onchange) {
		var change = parent.$(varnamev).onchange.toString();
		if(change) {
			var start = change.indexOf('{');
			var end = change.lastIndexOf('}');
			var s = change.substring(start + 1, end);
			s = s.replace(/this\.value/ig, "'" + obj.value + "'");
			s = s.replace(/imgdirurl/ig, "parent.imgdirurl");
			s = s.replace(/\$\(/ig, "parent.$(");
			//alert(s)
			eval(s)		
		}
	}
		
	parent.$(varname).style.background = obj.value;
	document.getElementById('box').style.background = obj.value;
}

function updatecolorpreview() {
}
</script>
<style>
body {
	margin: 0px;
	background-color: #FFFFFF;
}
table{ border:1px solid #333; }
</style>

<body onmousedown="getcolor(event);setvalue(document.getElementById('colorhex'))" scrolling="no">
<table cellspacing="0" cellpadding="0">
<tr><td colspan="2"><img src="color.jpg" style="cursor: crosshair ;width: 164px; height: 164px"></td></tr>
<tr height="20"><td width="20" id="box"></td>
<td width="144">
<input id="colorhex" style="padding: 2px;font: 12px Arial, Tahoma;cursor: pointer;width: 100%;border: 0px" onkeyup="setvalue(this)" onclick="setvalue(this)">
</td></tr>
</table>
<script>
var obj = parent.$(varnamev);
document.getElementById('colorhex').value = obj.value;
try {
	document.getElementById('box').style.background = cvalue;
} catch(e) {}
</script>
</body>