var colCount = 20;
	var jsTrigger;
	var aHiddenSelects;

	// Preload images
	image1 = new Image();
	image1.src = "images/spacer.gif";
	image1 = new Image();
	image1.src = "images/ico_color_close.gif";	

	document.onclick=closePicker;

	function showColorPicker(refElID, triggerJS){
		var picker = document.getElementById('colorPicker');
		var refEl = document.getElementById(refElID);
		var leftPos = 0;
		var topPos = 0;

		if(typeof(document.getElementById('colorPicker').built) == 'undefined'){
			buildPicker();
		}

		jsTrigger = triggerJS;
		
		var tag = refEl;
		while(tag.tagName.toUpperCase() != "BODY"){
			leftPos += tag.offsetLeft;
			topPos += tag.offsetTop - tag.scrollTop;
			tag = tag.offsetParent;
		}				

		picker.style.left = leftPos + refEl.offsetWidth + 'px';
		picker.style.top = topPos + 'px';	
		hideSelects(picker,null);
		picker.style.visibility = '';
	}

	function cpHover(colorEl, over){
		var cords = colorEl.id.split('_');
		var col = Math.abs(cords[1]);
		var row = Math.abs(cords[2]);

		if(over){
			if(row == 1){
				if(col == 1){
					colorEl.className = 'clscpHover clsColorTopHover';
					// Highlight the border of the color to the right
					document.getElementById('c_2_1').className = 'clsColor clsColorTop clsColorLeftHover';
				}
				else if(col == colCount){
					colorEl.className = 'clsColor clscpHover clsColorTopHover clsColorRightHover';
				}				
				else{
					colorEl.className = 'clscpHover clsColorTopHover';
					// Highlight the border of the color to the right
					document.getElementById('c_' + (col+1) + '_1').className = 'clsColor clsColorTop clsColorLeftHover';
				}
			}
			else{
				if(col == 1){
					colorEl.className = 'clsColor clscpHover';
					// Highlight the border of the color above
					if(row == 2){
						document.getElementById('c_1_' + (row-1)).className = 'clsColor clsColorTop clsColorBottomHover';
					}
					else{
						document.getElementById('c_1_' + (row-1)).className = 'clsColor clsColorBottomHover';
					}
					// Highlight the border of the color to the right
					document.getElementById('c_2_' + row).className = 'clsColor clsColorLeftHover';					
				}
				else if(col == colCount){
					colorEl.className = 'clsColor clscpHover clsColorRightHover';
					// Highlight the border of the color above
					if(row == 2){
						document.getElementById('c_' + colCount + '_' + (row-1)).className = 'clsColor clsColorRight clsColorTop clsColorBottomHover';
					}
					else{
						document.getElementById('c_' + colCount + '_' + (row-1)).className = 'clsColor clsColorRight clsColorBottomHover';
					}
				}				
				else{
					colorEl.className = 'clsColor clscpHover';
					// Highlight the border of the color above
					if(row == 2){
						document.getElementById('c_' + col + '_' + (row-1)).className = 'clsColor clsColorTop clsColorBottomHover';
					}
					else{
						document.getElementById('c_' + col + '_' + (row-1)).className = 'clsColor clsColorBottomHover';
					}
					// Highlight the border of the color to the right
					document.getElementById('c_' + (col+1) + '_' + row).className = 'clsColor clsColorLeftHover';	
				}
			}
		}
		else{
			if(row == 1){
				if(col == 1){
					colorEl.className = 'clsColor clsColorTop';
					// Highlight the border of the color to the right
					document.getElementById('c_2_1').className = 'clsColor clsColorTop';
				}
				else if(col == colCount){
					colorEl.className = 'clsColor clsColorTop clsColorRight';
				}				
				else{
					colorEl.className = 'clsColor clsColorTop';
					// Highlight the border of the color to the right
					document.getElementById('c_' + (col+1) + '_1').className = 'clsColor clsColorTop';
				}
			}
			else{
				if(col == 1){
					colorEl.className = 'clsColor';
					// Highlight the border of the color above
					if(row == 2){
						document.getElementById('c_1_' + (row-1)).className = 'clsColor clsColorTop';
					}
					else{
						document.getElementById('c_1_' + (row-1)).className = 'clsColor';
					}
					// Highlight the border of the color to the right
					document.getElementById('c_2_' + row).className = 'clsColor';					
				}
				else if(col == colCount){
					colorEl.className = 'clsColor clsColorRight';
					// Highlight the border of the color above
					if(row == 2){
						document.getElementById('c_' + colCount + '_' + (row-1)).className = 'clsColor clsColorRight clsColorTop';
					}
					else{
						document.getElementById('c_' + colCount + '_' + (row-1)).className = 'clsColor clsColorRight';
					}					
				}				
				else{
					colorEl.className = 'clsColor';
					// Highlight the border of the color above
					if(row == 2){
						document.getElementById('c_' + col + '_' + (row-1)).className = 'clsColor clsColorTop';
					}
					else{
						document.getElementById('c_' + col + '_' + (row-1)).className = 'clsColor';
					}
					// Highlight the border of the color to the right
					document.getElementById('c_' + (col+1) + '_' + row).className = 'clsColor';	
				}
			}
		}

		document.getElementById('ColorPreview').style.backgroundColor = MozRGBtoHEX(colorEl.style.backgroundColor);
		document.getElementById('ColorHex').value = MozRGBtoHEX(colorEl.style.backgroundColor);		
	}
	
	function cpSelect(colorEl){
		eval(jsTrigger.replace('color',MozRGBtoHEX(colorEl.style.backgroundColor).substr(1,7)));
		closePicker();
	}
	
	function noColor(){
		eval(jsTrigger.replace('color',''));
		closePicker();
	}
	
	function closePicker(){
		document.getElementById('colorPicker').style.visibility = 'hidden';
		showSelects();
	}

	function buildPicker(){
		var picker = document.getElementById('colorPicker');
		var output;
		var className;

		output = '<table border="0" cellpadding="0" cellspacing="0"><tr>';
		
		// Build the dynamic part of the pallet
		for(var c=1; c<=18; c++){
			output += '<td>';
			for(var r=1; r<=12; r++){
				if(r==1){
					if(c==18){className = 'clsColor clsColorTop';}
					else{className = 'clsColor clsColorTop';}					
				}
				else{
					if(c==18){className = 'clsColor';}
					else{className = 'clsColor';}
				}
				
				output += '<div class="' + className + '" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_' + c + '_' + r + '"><img src="images/spacer.gif" height="8"></div>';
			}
			output += '</td>';
		}
		
		// Build the spacer column
		output += '<td>';
		for(var r=1; r<=12; r++){
			if(r==1){
				output += '<div class="clsColor clsColorTop" style="background-color:#000000;cursor:default;" id="c_19_1"><img src="images/spacer.gif" height="8"></div>';
			}
			else{
				output += '<div class="clsColor" style="background-color:#000000;cursor:default;" id="c_19_' + r + '"><img src="images/spacer.gif" height="8"></div>';
			}
		}
		output += '</td>';		
		
		// Build the basic pallet
		output += '<td><div class="clsColor clsColorTop clsColorRight" style="background-color:#000000" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_1"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#333333" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_2"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#666666" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_3"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#999999" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_4"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#CCCCCC" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_5"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#FFFFFF" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_6"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#FF0000" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_7"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#00FF00" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_8"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#0000FF" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_9"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#FFFF00" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_10"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#00FFFF" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_11"><img src="images/spacer.gif" height="8"></div>' +
					'<div class="clsColor clsColorRight" style="background-color:#FF00FF" onMouseOver="cpHover(this,1);" onMouseOut="cpHover(this,0);" onClick="cpSelect(this);" id="c_20_12"><img src="images/spacer.gif" height="8"></div></td>';
		
		output += '</tr></table>';
	
		// Add preview row
		output += '<table border="0" cellpadding="0" cellspacing="0" width="100%" id="PreviewRow"><tr>' +
			'<td><div id="ColorPreview">&nbsp;</div></td>' +
			'<td><input type="text" id="ColorHex" size="4" NAME="ColorHex"></td>' +
			'<td class="clsPickerText"><a href="javascript:noColor(\'c\');">No Color</a>&nbsp;&nbsp;</td>' +
			'<td class="clsPickerText" align="right"><a href="javascript:closePicker(\'c\');" width="0"><img src="images/ico_color_close.gif" border="0" width="14" height="13"></a></td></tr></table>';

		picker.innerHTML = output;
		buildPallet();
		picker.built = true;
	}
	
	function buildPallet(){
		var R;
		var G;
		var B;
		var dir;
		var col;

		for(var grp=1; grp<=3; grp++){
			col=0;
			for(var c=(6*grp)-5; c<=(grp*6); c++){
				dir=1;
				col++;
				G = 255;		
				for(var r=1; r<=12; r++){
					if(grp==1){
						R = 255 - (dir*51);
						B = 255 - ((col-1)*51);
					}
					else if(grp==2){
						R = 153 - (dir*51);
						B = 0 + ((col-1)*51);
					}
					else{
						R = 0 + (dir*51);
						B = 255 - ((col-1)*51);
					}		
								
					document.getElementById('c_' + c + '_' + r).style.backgroundColor = RGBtoHex(R,G,B);

					if(dir== 1){
						G -= 51;
					}
					else{
						G += 51;
					}					
					if(G<0){
						dir=0;
						G=0;
					}
				}
			}
		}
	}

	function RGBtoHex(R,G,B){
        var nRGB= (R<<16) | (G<<8) | B;
        var sHex= nRGB.toString(16);
        
        while ( sHex.length < 6 ) {
                sHex= "0"+sHex;
        }

		return sHex;
	}
	
	function hideSelects(overDiv, fieldObj){
		var picker = document.getElementById('colorPicker');
		var aTags = document.getElementsByTagName('SELECT');
		
		aHiddenSelects = new Array();

		for (i = 0; i < aTags.length; i++){
			obj = aTags[i];
			if (!obj || !obj.offsetParent){
				continue;
			}

			// Find the element's offsetTop and offsetLeft relative to the BODY tag.
			objLeft   = obj.offsetLeft;
			objTop    = obj.offsetTop - obj.scrollTop;
			objParent = obj.offsetParent;
				
			while(objParent.tagName.toUpperCase() != "BODY"){
				objLeft  += objParent.offsetLeft;
				objTop   += objParent.offsetTop - objParent.scrollTop;
				objParent = objParent.offsetParent;
			}
			
			objHeight = obj.offsetHeight;
			objWidth = obj.offsetWidth;

			if ((overDiv.offsetLeft + overDiv.offsetWidth) <= objLeft);
			else if ((overDiv.offsetTop + overDiv.offsetHeight) <= objTop );
			else if (overDiv.offsetTop >= (objTop + objHeight));
			else if (overDiv.offsetLeft >= (objLeft + objWidth));
			else
			{	
				if (obj != fieldObj){
					obj.style.visibility = "hidden";
					aHiddenSelects[aHiddenSelects.length] = obj;
				}
			}
		}
		
	}
		
	function showSelects(){
		if (aHiddenSelects == null) return;
		for (i = 0; i < aHiddenSelects.length; i++){
			aHiddenSelects[i].style.visibility = '';
		}
	}	
	
	function MozRGBtoHEX(val)
	{
		if(val.indexOf('rgb(') > -1){
			colors = val.replace('rgb(','').replace(')','').split(',');
			return "#" + RGBtoHex(colors[0],colors[1],colors[2]);
		}
		else{
			return val;
		}
	}
	
	function getR(RGB){
		return (RGB & 0x00ff0000) >> 16;
	}
	
	function getG(RGB){
		return (nRGB & 0x0000ff00) >> 8;
	}
	
	function getB(RGB){
		return (nRGB & 0x000000ff);
	}