if (document.captureEvents) document.captureEvents(Event.CLICK);
addEvent(window, "load", initColorFields);
var curTarget = null;
var picker = null;

function initColorFields () {
	var fields = getElementsByClass("color", document, "div");
	
	if (fields.length > 0) {
		//draw colorgrid
		createColorGrid();
	}
	
	for (var i = 0; i < fields.length; i++)
	{
		var button = fields[i].getElementsByTagName("a")[0];
		var field = fields[i].getElementsByTagName("input")[0];
		button.field = field;
		field.button = button;
		field.example = fields[i].getElementsByTagName("span")[0];
		button.onclick = onColorButton;
		field.onkeyup = changeColor;
		field.onchange = changeColor;
		
		field.onchange();
	}
}

/**
 * Will update example color. Called when the inputfield value changes.
 */
function changeColor () {
	this.example.style.background = this.value;
}

function onColorButton (e) {
	if (e) e.cancelBubble = true;
	if (e && e.stopPropagation) e.stopPropagation();
	
	showColorGrid(this.field);
}

function createColorGrid() {
	picker = document.createElement("div");
	picker.id = "colorpicker";
	document.body.appendChild(picker);
	
	var colors = new Array('00', '33', '66', '99', 'CC', 'FF');
	var color, content = "<ul>";
	
	//create field
	for (var i = 0; i < 6; i++) {
		for (var j = 0; j < 6; j++) {
			for (var k = 0; k < 6; k++) {
				color = colors[i] + colors[j] + colors[k];
				content += '<li style="background: #'+color+'" onclick="setColor(\'#'+color+'\');"><span>'+color+'</span></li>'
			}
		}
	}
	content += "</ul>";
	picker.innerHTML = content;
}

function showColorGrid (target) {
	curTarget = target;
	picker.style.display = "block";
	var pos = findPos(target.button);
	picker.style.top = pos[1]+"px";
	picker.style.left = pos[0]+"px";
	
	document.onclick = hideColorGrid;
}

function hideColorGrid (e) {
	picker.style.display = "none";
	document.onclick = curTarget = null;
	
	if (e) e.cancelBubble = true;
	if (e && e.stopPropagation) e.stopPropagation();
}

function setColor (color) {
	if (curTarget != null) {
		curTarget.value = color;
		curTarget.onchange();
		hideColorGrid();
	}
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}