var perline = 16;
 var divSet = false;
 var curId;
 var colorLevels = Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
 var colorArray = Array();
 var ie = false;
 var nocolor = 'none';
 if (document.all) { ie = true; nocolor = ''; }
 function getObj(id) {
	if (ie) { return document.all[id]; } 
	else {	return document.getElementById(id);	}
 }

 function addColor(r, g, b) {var red = colorLevels[r];var green = colorLevels[g];var blue = colorLevels[b];addColorValue(red, green, blue);}
 function addColorValue(r, g, b) {colorArray[colorArray.length] = r + r + g + g + b + b;}
 function setColor(color) {
 	var link = getObj(curId);
 	var field = getObj(curId + 'field');
 	var picker = getObj('colorpicker');
 	field.value = color;
 	if (color == '') {
     	link.style.background = nocolor;
     	link.style.color = nocolor;
     	color = nocolor;
 	} else {
     	link.style.background = color;
     	link.style.color = color;
    }
 	picker.style.display = 'none';
 }
    
 function setDiv() {     
 	if (!document.createElement) { return; }
    var elemDiv = document.createElement('div');
    if (typeof(elemDiv.innerHTML) != 'string') { return; }
    genColors();
    elemDiv.id = 'colorpicker';
    elemDiv.style.position = 'absolute';
    elemDiv.style.display = 'none';
    elemDiv.style.border = '#808 2px ridge';
    elemDiv.style.background = '#fcc';
    elemDiv.style.padding = '3px';
    elemDiv.innerHTML = '<span style="font: 11px Verdana;"><span style="color:#808;line-height:20px;height:20px;font:bold 14px;">&nbsp;Choose a colour: ' 
      	+ '(<a href="javascript:setColor(\'\');">clear</a>)</span>' 
    	+ getColorTable() + '</span>';

    document.body.appendChild(elemDiv);
    divSet = true;
 }
 
 function pickColor(id) {
 	if (!divSet) { setDiv(); }
 	var picker = getObj('colorpicker');     	
	if (id == curId && picker.style.display == 'block') {
		picker.style.display = 'none';
		return;
	}
 	curId = id;
 	var thelink = getObj(id);
 	picker.style.top = (getAbsoluteOffsetTop(thelink) + 20) + "px";
 	picker.style.left = getAbsoluteOffsetLeft(thelink) + "px";     
	picker.style.display = 'block';		
 }
 
 function genColors() {
    addColorValue('0','0','0'); addColorValue('1','1','1'); addColorValue('2','2','2');
    addColorValue('3','3','3'); addColorValue('4','4','4'); addColorValue('5','5','5');
    addColorValue('6','6','6'); addColorValue('7','7','7'); addColorValue('8','8','8');
    addColorValue('9','9','9'); addColorValue('A','A','A'); addColorValue('B','B','B');             
    addColorValue('C','C','C'); addColorValue('D','D','D'); addColorValue('E','E','E');
    addColorValue('F','F','F');                            
		
    for (a = 1; a < colorLevels.length; a++)
		addColor(0,0,a);
    for (a = 1; a < colorLevels.length - 1; a++)
		addColor(a,a,5);

    for (a = 1; a < colorLevels.length; a++)
		addColor(0,a,0);
    for (a = 1; a < colorLevels.length - 1; a++)
		addColor(a,5,a);
		
    for (a = 1; a < colorLevels.length; a++)
		addColor(a,0,0);
    for (a = 1; a < colorLevels.length - 1; a++)
		addColor(5,a,a);
		
		
    for (a = 1; a < colorLevels.length; a++)
		addColor(a,a,0);
    for (a = 1; a < colorLevels.length - 1; a++)
		addColor(5,5,a);
		
    for (a = 1; a < colorLevels.length; a++)
		addColor(0,a,a);
    for (a = 1; a < colorLevels.length - 1; a++)
		addColor(a,5,5);

    for (a = 1; a < colorLevels.length; a++)
		addColor(a,0,a);			
    for (a = 1; a < colorLevels.length - 1; a++)
		addColor(5,a,5);
		
   	return colorArray;
 }
 function getColorTable() {
     var colors = colorArray;
  	 var tableCode = '';
     tableCode += '<table border="0" cellspacing="1" cellpadding="1">';
     for (i = 0; i < colors.length; i++) {
          if (i % perline == 0) { tableCode += '<tr>'; }
          tableCode += '<td bgcolor="#000000"><a style="outline: 1px solid #000000; color:#' 
          	  + colors[i] + '; background:#' + colors[i] + ';font-size: 10px;" title="' 
          	  + colors[i] + '" href="javascript:setColor(\'#' + colors[i] + '\');">&nbsp;&nbsp;&nbsp;</a></td>';
          if (i % perline == perline - 1) { tableCode += '</tr>'; } 
     }
     if (i % perline != 0) { tableCode += '</tr>'; }
     tableCode += '</table>';
  	 return tableCode;
 }
 function relateColor(id, color) {
 	var link = getObj(id);
 	if (color == '') {
     	link.style.background = nocolor;
     	link.style.color = nocolor;
     	color = nocolor;
 	} else {
     	link.style.background = color;
     	link.style.color = color;
    }
    eval(getObj(id + 'field').title);
 }
 function getAbsoluteOffsetTop(obj) {
 	var top = obj.offsetTop;
 	var parent = obj.offsetParent;
 	while (parent != document.body) {
 		top += parent.offsetTop;
 		parent = parent.offsetParent;
 	}
 	return top;
 }
 
 function getAbsoluteOffsetLeft(obj) {
 	var left = obj.offsetLeft;
 	var parent = obj.offsetParent;
 	while (parent != document.body) {
 		left += parent.offsetLeft;
 		parent = parent.offsetParent;
 	}
 	return left-120;
 }