/**
 * ColourPicker
 * Copyright (c) Mikko Mensonen
 * www.eternityproject.net
 */

var inputId = '';
var inputValue
var xPos;
var yPos;
var closeBtn = '/images/heart.gif';
var position = 'fixed';

function showPicker(id) {	
	inputId = id;
	inputValue = document.getElementById(id).value;
	picker = document.getElementById('colourPicker');
	picker.style.left = xPos +'px';
	picker.style.top = yPos + 'px';
	picker.style.visibility = 'visible';
	
}

function closePicker() {
	document.getElementById(inputId).value = inputValue;
	if (inputValue == 'FFFFFF') {
		document.getElementById(inputId).style.background = '#666666';
	} else {
		document.getElementById(inputId).style.background = '#FFFFFF';
	}
	document.getElementById(inputId).style.color = '#' + inputValue;
	document.getElementById('colourPicker').style.visibility = 'hidden';
}
function previewColour(colorStr) {
	document.getElementById('preview').style.background = colorStr;
	document.getElementById('previewStr').value = colorStr;
}

function setColour(colorstr, inp) {
//	alert("runnig");
//	alert("document.getElementById(inp).style.background = '#' + colorstr;");
//	eval('document.getElementById('+inp+').style.background = \'#' + colorstr + '\'');				
	document.getElementById(inp).style.background = '#' + colorstr;
//	alert(document.getElementById(inp).style.background);
	document.getElementById(inp).style.color = '#' + colorstr;
//	alert(document.getElementById(inp).style.color);
}

function insertColour(colorStr) {
	document.getElementById(inputId).value = colorStr;
	if (colorStr == 'FFFFFF') {
		document.getElementById(inputId).style.background = '#666666';
		document.getElementById(inputId).style.background = '#' + colorStr;		
	} else {
		document.getElementById(inputId).style.background = '#FFFFFF';
		document.getElementById(inputId).style.background = '#' + colorStr;			
	}
	document.getElementById(inputId).style.color = '#' + colorStr;
	document.getElementById('colourPicker').style.visibility = 'hidden';
}

function getMousePos(e){
	var offset = 20;
	var posx = 0;
	var posy = 0;
	if (!e) {
		var e = window.event;
	}
	if (e.pageX || e.pageY) {
		posx = e.pageX;
		posy = e.pageY -300;
	}
	else if (e.clientX || e.clientY) {
		posx = e.clientX + document.body.scrollLeft;
		posy = e.clientY + document.body.scrollTop -300;
	}

	xPos = posx + offset;
	yPos = posy;
}

function initPicker() {
	document.onmousedown=getMousePos;
}

	size = '12px';
	hex = ['00', '33', '66', '99', 'CC', 'FF'];
	colors = ['000000', '333333', '666666', '999999', 'CCCCCC', 'FFFFFF', 'FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF'];

	document.write('<table  id="colourPicker" cellpadding="0" cellspacing="0" style="position: ' + position + '; visibility: hidden; z-index:9999999;">');
	document.write('<tr style="background: #ddd; height: 10px; visibility: inherit;" colspan="4">');
	document.write('<td colspan="4" style="border: 1px solid #000; padding: 2px;">');
	document.write('<span id="preview" style="float: left; width: 40px; height; 8px; border: 1px solid #000; margin: 1px; font-size: 8px;">&nbsp;</span>');
	document.write('<input type="text" id="previewStr" style="background: none; width: 120px; height; 8px; border: none; margin: 1px; font-size: 9px;" />');
	document.write('<a onClick="closePicker(); return false;" href="#" ><img border="0" src="' + closeBtn + '" alt="close" title="close"  />Close</a></td></tr>');
	
	for (r=0; r<hex.length; r++) {
		
		if (r == 0 || r == 3) {
			document.write('<tr style="visibility: inherit; background: #000;">');
			
			if (r == 0) {
				document.write('<td><table cellpadding="1" cellspacing="1" style="border-right: 8px solid #000; background: #000; visibility: inherit;>');
				
				for (p=0; p<(colors.length/2); p++) {
					color = colors[p];
					document.write('<tr style="visibility: inherit;"><td style="border: 1px none; background: #' + color + '; font-size: 6px; margin: ' + size + '; width: ' + size + '; height: ' + size + ';" onMouseOver="previewColour(\'#' + color + '\')" onClick="insertColour(\'' + color + '\')"><a href="#' + color + '"></a></td></tr>');
				}
				
				document.write('</table></td>');
			}
			if (r == 3) {
				document.write('<td><table cellpadding="1" cellspacing="1" style="border-right: 8px solid #000; background: #000; visibility: inherit;>');
				
				for (p=(colors.length/2); p<colors.length; p++) {
					color = colors[p];
					document.write('<tr style="visibility: inherit;"><td style="border: 1px none; background: #' + color + '; font-size: 6px; margin: ' + size + '; width: ' + size + '; height: ' + size + ';" onMouseOver="previewColour(\'#' + color + '\')" onClick="insertColour(\'' + color + '\')"><a href="#' + color + '"></a></td></tr>');
				}
				
				document.write('</table></td>');
			}
			
		}
		document.write('<td><table cellpadding="1" cellspacing="1" style="background: #000; visibility: inherit;">');
		
	
		for (g=0; g<hex.length; g++) {
			
			document.write('<tr style="visibility: inherit;">');
			
			for (b=0; b<hex.length; b++) {
				
				color = (hex[r] + '' + hex[b] + '' + hex[g]);
				
				document.write('<td style="visibility: inherit; border: 1px none; font-size: 6px; background: #' + color + '; margin: ' + size + '; width: ' + size + '; height: ' + size + ';"  onMouseOver="previewColour(\'#' + color + '\')" onClick="insertColour(\'' + color + '\')"><a href="#' + color + '"></a></td>');
	
			}
			
			document.write('</tr>');
			
		}
		document.write('</table></td>');
		
		if (r == 2 || r == 5) {
			document.write('</tr>');
		}
		
		
	}
	
	document.write('</table>');