Color Picker hint example

Color Picker hint example

Background color:
Border color: 
<html>
<head>

<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="hint/codethathintpro.js"></script>
<script language="javascript1.2">
<!--
var imgblank = 'img/s.gif'; //blank image used by colorPicker

//create a color picker hint
function colorpicker_html() {
	var html = "<table border=0 cellpadding=0 cellspacing=0><tr><td>" +
		"<table border=0 cellpadding=0 cellspacing=0><tr>";
	var steps = ['00', '33', '66', '99', 'CC', 'FF'],
	colors = ['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia',
		'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua'];
	var i, j,k, n = 0, color = '';
	for (i = 0; i<steps.length; i++) {
		for (j = 0; j<steps.length; j++) {
			for (k = 0; k<steps.length; k++) {
				var kcolor = '#' + steps[i] + steps[j] + steps[k];
				if (n % 15 == 0 && n > 0) html += "</tr><tr>";
				n++;
				html += '<td width=10 height=10 bgcolor="' + kcolor +
					'"><a href="#" onclick="retcolor(\''
					+ kcolor + '\');return false" title="' +
					kcolor + '"><img src="' + imgblank +
					'" width=15 height=15 border=0></a></td>'
			}
		}
	}
	html += "</tr></table></td><td><table border=0 cellpadding=0 cellspacing=0>";
	for (i = 0; i<colors.length; i++) html +=
		(i % 2 ? "" : "<tr>") + '<td width=28 height=28 bgcolor="' + colors[i] +
		'"><a href="#" onclick="retcolor(\'' + colors[i] +
		'\');return false" title="' + colors[i] + '"><img src="' + imgblank +
		'" width=28 height=28 border=0></a></td>' + (i % 2 ? "</tr>" : "");
	return html + "</table></td></tr></table>"
}

var colorField;
var colorPicker = new CT_Hint(281, 225, 1,"", true, 1,1,
	colorpicker_html(), "", "", "",
	{
		width : 1, color : "black"
	}, true, 3,"", 0,0, 0
);

function retcolor(s) {
	colorField.value = s;
	colorPicker.hide()
}

function showColorPicker(fld, e) {
	var pos, ev = new CEvent(e);
	if (!colorPicker.hidden()) {
		alert("Please, choose the color for previous field!");
		return
	}
	colorField = fld;
	var w = colorPicker.width(), h = colorPicker.height();
	var x = ev.x - w/2, y = ev.y - h/2;
	var scrx = CodeThat.getScrollX(), scry = CodeThat.getScrollY();
	pos = scrx + CodeThat.getWinWidth() - w;
	if (x > pos) x = pos;
	if (x < scrx) x = scrx;
	pos = scry + CodeThat.getWinHeight() - h;
	if (y > pos) y = pos;
	if (y < scry) y = scry;
	colorPicker.move(x, y);
	colorPicker.show()
}

colorPicker.create(); 
//-->
</script>
</head>
<body>
<form>
<table border=0 cellspacing=3 cellpadding=3>
<tr>
<td class=tableheadleft>Background color:</td>
<td class=tableform><input name=c1 maxlength=7 size=7 value="white"></td>
<td class=tableform><input type=button value="Choose..."
 onclick="showColorPicker(this.form.c1, event)"></td>
</tr>
<tr>
<td class=tableheadleft>Border color:</td>
<td class=tableform><input name=c2 maxlength=7 size=7 value="black"></td>
<td class=tableform><input type=button value="Choose..."
 onclick="showColorPicker(this.form.c2, event)"></td>
</tr>
</table>
</form>
</body>
</html>