var perline = 9;
     var divSet = false;
     var curId;
     var colorArray = Array();
     var ie = false;

     if (document.all) { ie = true; }

     function getObj(id) {
		if (ie) { return document.all[id]; }
		else {	return document.getElementById(id);	}
	 }

     function addColor(rgb) {
     	colorArray[colorArray.length] = rgb ;
     }


     function setColor(color) {
     	var link = getObj(curId);
     	var field = getObj(curId + 'field');
     	var picker = getObj('colorpicker');
     	field.value = color;

     	link.style.background = color;
     	link.style.color = color;

     	picker.style.display = 'none';
        eval(getObj(curId + 'field').title);
     }


     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 = '#000000 1px solid';
        elemDiv.style.background = '#FFFFFF';
        elemDiv.innerHTML = '<span style="font-family:Verdana; font-size:11px;">Pick a color:<br>'
        	+ 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;
     	picker.style.left = getAbsoluteOffsetLeft(thelink);
	picker.style.display = 'block';
     }

     
     function genColors() {
               addColor('F8E7AB');
        addColor('F5EE7E');
        addColor('FCE116');
        addColor('FEC81F');
        addColor('E0AA0F');
        addColor('FDAD57');
        addColor('FA6302');
        addColor('FA4025');
        addColor('CF1326');
        addColor('992035');
        addColor('F74A03');
        addColor('D24514');
        addColor('9ABBDF');
        addColor('0073C6');
        addColor('0052BA');
        addColor('003893');
        addColor('002B7F');
        addColor('002754');
        addColor('5E82A3');
        addColor('25557E');
        addColor('60C658');
        addColor('007B5F');
        addColor('008651');
        addColor('4A5929');
        addColor('034A31');
        addColor('629292');
        addColor('5D8672');
        addColor('ABDF96');
        addColor('F94E8F');
        addColor('AC0150');
        addColor('85226C');
        addColor('570C70');
        addColor('FFA0BE');
        addColor('71CFE3');
        addColor('007AA7');
        addColor('008590');
        addColor('A19152');
        addColor('62552C');
        addColor('EED3B5');
        addColor('AB7540');
        addColor('623309');
        addColor('FFFFFF');
        addColor('D5D7D9');
        addColor('B6B2AB');
        addColor('797774');
        addColor('201E1C');
       	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);
     	link.style.background = color;
     	link.style.color = color;
        //alert (id+'field');
        //alert (getObj(id + 'field'));
        //alert (eval(getObj(id + 'field')));
        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;
     }