// Colour Picker v1.0
// Provides functionality for a dropdown palette of colours.
// Copyright (C) 2006 Neil Fraser
// http://neil.fraser.name/software/colourpicker/

// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation.

// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License (www.gnu.org) for more details.


// Include at the top of your page:
//   <SCRIPT LANGUAGE='JavaScript1.3' SRC='cp.js'></SCRIPT>
// Call with:
//   <INPUT NAME="mycolour" ID="mycolour" VALUE="ff00ff">
//   <SCRIPT LANGUAGE='JavaScript1.3'><!--
//   cp_init("mycolour")
//   //--></SCRIPT>

var cp_grid = [
	["000000", "000033", "000066", "000099", "0000cc", "0000ff", "003300", "003333", "003366", "003399", "0033cc", "0033ff", "006600", "006633", "006666", "006699"],
	["0066cc", "0066ff", "009900", "009933", "009966", "009999", "0099cc", "0099ff", "00cc00", "00cc33", "00cc66", "00cc99", "00cccc", "00ccff", "00ff00", "00ff33"],
	["00ff66", "00ff99", "00ffcc", "00ffff", "330000", "330033", "330066", "330099", "3300cc", "3300ff", "333300", "333333", "333366", "333399", "3333cc", "3333ff"],
	["336600", "336633", "336666", "336699", "3366cc", "3366ff", "339900", "339933", "339966", "339999", "3399cc", "3399ff", "33cc00", "33cc33", "33cc66", "33cc99"],
	["33cccc", "33ccff", "33ff00", "33ff33", "33ff66", "33ff99", "33ffcc", "33ffff", "660000", "660033", "660066", "660099", "6600cc", "6600ff", "663300", "663333"],
	["663366", "663399", "6633cc", "6633ff", "666600", "666633", "666666", "666699", "6666cc", "6666ff", "669900", "669933", "669966", "669999", "6699cc", "6699ff"],
	["66cc00", "66cc33", "66cc66", "66cc99", "66cccc", "66ccff", "66ff00", "66ff33", "66ff66", "66ff99", "66ffcc", "66ffff", "990000", "990033", "990066", "990099"],
	["9900cc", "9900ff", "993300", "993333", "993366", "993399", "9933cc", "9933ff", "996600", "996633", "996666", "996699", "9966cc", "9966ff", "999900", "999933"],
	["999966", "999999", "9999cc", "9999ff", "99cc00", "99cc33", "99cc66", "99cc99", "99cccc", "99ccff", "99ff00", "99ff33", "99ff66", "99ff99", "99ffcc", "99ffff"],
	["cc0000", "cc0033", "cc0066", "cc0099", "cc00cc", "cc00ff", "cc3300", "cc3333", "cc3366", "cc3399", "cc33cc", "cc33ff", "cc6600", "cc6633", "cc6666", "cc6699"],
	["cc66cc", "cc66ff", "cc9900", "cc9933", "cc9966", "cc9999", "cc99cc", "cc99ff", "cccc00", "cccc33", "cccc66", "cccc99", "cccccc", "ccccff", "ccff00", "ccff33"],
	["ccff66", "ccff99", "ccffcc", "ccffff", "ff0000", "ff0033", "ff0066", "ff0099", "ff00cc", "ff00ff", "ff3300", "ff3333", "ff3366", "ff3399", "ff33cc", "ff33ff"],
	["ff6600", "ff6633", "ff6666", "ff6699", "ff66cc", "ff66ff", "ff9900", "ff9933", "ff9966", "ff9999", "ff99cc", "ff99ff", "ffcc00", "ffcc33", "ffcc66", "ffcc99"],
	["ffcccc", "ffccff", "ffff00", "ffff33", "ffff66", "ffff99", "ffffcc", "ffffff"] ];

var cp_dom = null;
var cp_caller = null;
var cp_defaultcolour = 'ffffff';
var cp_closePID = null;

function cp_init(id) {
	// Hide the form element, and replace it with a colour box.
	var obj = document.getElementById(id);
	
	if (!obj) {
		alert("Colour picker can't find '"+id+"'");
		return;
	}
	
	if (obj.value=='') { obj.value='ffffff'; }
	
	if (!cp_hex2rgb(obj.value)) {
		alert("Colour picker can't parse colour code in '"+id+"'");
		return;
	}
	
	// IE 6 chokes on this:
	//   obj.type = "hidden";
	// So we'll do it the hard way:
	var newobj = document.createElement("input");
	
	newobj.type = "hidden"
	newobj.value = obj.value;
	newobj.name = obj.name;
	
	if (obj.onchange) newobj.onchange = obj.onchange;
	
	obj.parentNode.insertBefore(newobj, obj);
	obj.parentNode.removeChild(obj);
	newobj.id = id;
	obj = newobj;
	
	// <IMG style="background-color: #ff0000; border: outset 3px #888;" SRC="framework/js/images/1x1.gif" HEIGHT=20 WIDTH=30>
	var box = document.createElement("img");
	
	box.style.backgroundColor = "#"+obj.value;
	box.style.border = "outset 3px #F4F3EF";
	box.style.cursor = "pointer";
	box.title="Klik hier om een kleur te selecteren";
	box.src = "./framework/javascript/images/1x1.gif";
	box.height = 20;
	box.width = 30;
	box.label = id;
	box.onclick = new Function("cp_open(this)");
	box.onmouseover = cp_cancelclose;
	box.onmouseout = cp_closesoon;
	obj.parentNode.insertBefore(box, obj);
}

function cp_open(caller) {
	// Create a table of colours.
	if (cp_dom) {
		cp_close();
		return;
	}
	
	cp_caller = caller;
	
	//  alert(document.getElementById(caller.label));
	cp_defaultcolour = document.getElementById(caller.label).value;
	
	var posX = 0;
	var posY = caller.offsetHeight;
	
	while (caller) {
		posX += caller.offsetLeft;
		posY += caller.offsetTop;
		caller = caller.offsetParent;
	}
	
	cp_dom = document.createElement("div");
	
	var table = document.createElement("table");
	
	table.setAttribute("border", "1");
	table.style.backgroundColor = "#F4F3EF";
	table.onmouseover = cp_cancelclose;
	table.onmouseout = cp_closesoon;
	
	var tbody = document.createElement("tbody"); // IE 6 needs this.
	var row, cell;
	
	for (var y=0; y<cp_grid.length; y++) {
		row = document.createElement("tr");
		tbody.appendChild(row);
		for (var x=0; x<cp_grid[y].length; x++) {
			cell = document.createElement("td");
		  	row.appendChild(cell);
		  	cell.style.backgroundColor = "#"+cp_grid[y][x];
		  	cell.label = cp_grid[y][x];
		  	cell.style.border = "solid 2px #"+cell.label;
		  	cell.onmouseover = cp_onmouseover;
		  	cell.onmouseout = cp_onmouseout;
		  	cell.onclick = cp_onclick;
		  	cell.innerHTML = "<IMG SRC='./framework/javascript/images/1x1.gif' HEIGHT=8 WIDTH=8>";
		  	
		  	if (cp_defaultcolour.toLowerCase() == cp_grid[y][x].toLowerCase()) {
		    	cell.onmouseover();
		    	cell.onmouseout();
		  	}
		}
	}
	
	table.appendChild(tbody);
	cp_dom.appendChild(table);
	
	cp_dom.style.position = "absolute";
	cp_dom.style.left = "0px";
	cp_dom.style.top = "0px";
	cp_dom.style.visibility = "hidden";
	document.body.appendChild(cp_dom);
	
	// Don't widen the screen.
	if (posX + cp_dom.offsetWidth > document.body.offsetWidth)
	
	posX = document.body.offsetWidth - cp_dom.offsetWidth;
	
	cp_dom.style.left = posX+"px";
	cp_dom.style.top = posY+"px";
	cp_dom.style.visibility = "visible";
}

function cp_close() {
	// Close the table now.
	cp_cancelclose();
	
	if (cp_dom) document.body.removeChild(cp_dom)
	
	cp_dom = null;
	cp_caller = null;
}

function cp_closesoon() {
	// Close the table a split-second from now.
	cp_closePID = window.setTimeout("cp_close()", 250);
}

function cp_cancelclose() {
	// Don't close the colour table after all.
	if (cp_closePID) window.clearTimeout(cp_closePID);
}

function cp_onclick() {
	// Clicked on a colour.  Close the table, set the colour, fire an onchange event.
	cp_caller.style.backgroundColor = "#"+this.label;
	
	var input = document.getElementById(cp_caller.label)
	
	input.value = this.label;
	cp_close();
	
	if (input.onchange) input.onchange();
}

function cp_onmouseover() {
	// Place a black border on the cell if the contents are light, a white border if the contents are dark.
	this.style.borderStyle = "dotted";
	this.style.cursor = "pointer";

	var rgb = cp_hex2rgb(this.label);
	
	if (rgb[0]+rgb[1]+rgb[2] > 255*3/2) this.style.borderColor = "black";
	else this.style.borderColor = "white";
}

function cp_onmouseout() {
	// Remove the border.
	if (this.label == cp_defaultcolour) this.style.borderStyle = "outset";
	else this.style.border = "solid 2px #"+this.label;
}

function cp_hex2rgb(hexcode) {
	// Parse '0088ff' and return the [r, g, b] ints.
	var m = hexcode.match(/^([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])$/);

	if (m) {
		var r = parseInt(m[1], 16);
		var g = parseInt(m[2], 16);
		var b = parseInt(m[3], 16);
		return [r, g, b];
	} 
	else {
		return null;
	}
}