var ColorHex=new Array('00','33','66','99','CC','FF');
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
var current=null;

function initcolor()
{
var colorTable='';
for (i=0;i<2;i++)
 {
  for (j=0;j<6;j++)
   {
    colorTable=colorTable+'<tr height=12>';
    colorTable=colorTable+'<td width=11 style="background-color:#000000">';
    
    if (i==0){
    colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'} 
    else{
    colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">'} 

    
    colorTable=colorTable+'<td width=11 style="background-color:#000000">';
    for (k=0;k<3;k++)
     {
       for (l=0;l<6;l++)
       {
        colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">';
       }
     }
  }
}
colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
           +'<tr height=30><td colspan=21 bgcolor=#cccccc>'
           +'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
           +'<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
           +'<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td></tr></table></td></table>'
           +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;cursor:pointer" bordercolor="000000" onmouseover="doOver(event)" onmouseout="doOut()" onclick="doClick(event)">'
           +colorTable+'</table>';  
var clrPanel = document.getElementById("colorpanel");        
clrPanel.innerHTML=colorTable;
}

function doOver(event) {
    var DisColor = document.getElementById("DisColor"); 
    var HexColor = document.getElementById("HexColor"); 
    event = event || window.event;    
    var srcElement = event.target || event.srcElement;  
    if ((srcElement.tagName=="TD") && (current!=srcElement)) {
      if (current!=null){current.style.backgroundColor = current._background;}     
      srcElement._background = srcElement.style.backgroundColor;
      DisColor.style.backgroundColor = srcElement.style.backgroundColor;
      HexColor.value = srcElement.style.backgroundColor.toUpperCase();
      srcElement.style.backgroundColor = "white";
      current = srcElement;
    }
}

function doOut() {
    if (current!=null) current.style.backgroundColor = current._background.toUpperCase();
}

function doClick(event) {
    event = event || window.event;    
    var srcElement = event.target || event.srcElement;  
    if (srcElement.tagName == "TD") {
        var clr = srcElement._background;
        clr = clr.toUpperCase(); 
        if (colorSelectHandler) {
            colorSelectHandler(clr);
        }
        displayClrDlg(false);
        return clr;
    }
}

function displayClrDlg(display, left, top) {
    var clrPanel = document.getElementById("colorpanel");
    if (display) {
        clrPanel.style.left = left + "px";
        clrPanel.style.top = top + "px";
        clrPanel.style.display = "block";
    } else {
        clrPanel.style.display = "none";
    }
}

function checkAndInit() {
	var clrPanel = document.getElementById("colorpanel");  
	if (clrPanel == null || clrPanel == undefined){
		clrPanel = document.createElement("div");
		clrPanel.id="colorpanel";
		clrPanel.style.position="absolute";
		clrPanel.style.display="none";
		clrPanel.style.width="253px";
		clrPanel.style.height="177px";
		document.body.appendChild(clrPanel);
		initcolor();
	}
}

var colorSelectHandler = null;

function showPalette(handler, srcEle) {
	checkAndInit();
	colorSelectHandler = handler;
	var display = document.getElementById("colorpanel").style.display == "none";
    displayClrDlg(display, 180, 110);
}

function hidePalette() {
	if (document.getElementById("colorpanel") != null) {
		displayClrDlg(false);
	}
}