var CPArray = new Array();

function Color_Picker(inDIV) {
 this.uID = document.uniqueID;
 CPArray[this.uID] = this;
 this.which = null;
 this.oPopup = window.createPopup();
 this.GetMenuColors = function()
 {
  var str = "", i = 0, j = 0, k = 0, tdDisp = 0, totDisp = 0, fDisp = 0, aHex;
  str += "<DIV ID=\"ColorMenu_" + this.uID + "\" STYLE=\"display:none;\">";
  aHex = new Array("00","33","66","99","CC","FF");
  tdDisp = 0;
  totDisp = 0;
  str += "<table id=\"Safe_" + this.uID + "\" cellpadding=\"1\" cellspacing=\"2\" border=\"1\" bordercolor=\"#666666\" style=\"font-family: Verdana; font-size: 7px; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 2px solid; BORDER-TOP: buttonhighlight 1px solid; BORDER-BOTTOM: buttonshadow 1px solid; table-layout; fixed;\" bgcolor=\"buttonface\" width=\"100%\" height=\"100%\">";
  str += "<tr><td align=\"center\" colspan=\"16\" style=\"height:20px;border:1px solid buttonface;font-family: verdana; font-size:12px;\">";
  str += "<font color=\"#FF0000\">Choix de couleurs</font>";
  str += "</td></tr>";
  str += "<tr><td colspan=\"16\" id=\"SafeColor_" + this.uID + "\" style=\"height:20px;font-family: verdana; font-size:12px;\">&nbsp;</td></tr>";
  str += "<tr><td colspan=\"16\" id=\"SafeName_" + this.uID + "\" style=\"height:20px;border: 1px solid buttonface; font-family: verdana; font-size:10px;\" align=\"left\">&nbsp;</td></tr>";
  str += "<tr><td colspan=\"16\" onMouseOver=\"parent.CPArray['" + this.uID + "'].ShowColor(SafeColor_" + this.uID + ", SafeName_" + this.uID + ", this, '');\" style=\"height:20px;font-family: verdana; font-size:10px;cursor: hand;\" align=\"center\" onClick=\"parent.CPArray['" + this.uID + "'].DoColor('');\">Aucune</td></tr>";
  str += "<tr>";
  for (i = 0; i < aHex.length; i++) {
   for (j = 0; j < aHex.length; j++) {
    for (k = 0; k < aHex.length; k++) {
     if (totDisp % 16 == 0 && totDisp != 0) {
      str += "</tr>";
      str += "<tr>";
      tdDisp = 0;
     }
     str += "<td style=\"height:12px;width:12px;cursor: hand;background-color:'#" + aHex[i] + aHex[j] + aHex[k] + "'; font-size: 0px;\"";
     str += " onMouseOver=\"parent.CPArray['" + this.uID + "'].ShowColor(SafeColor_" + this.uID + ", SafeName_" + this.uID + ", this, '');\"";
     str += " onClick=\"parent.CPArray['" + this.uID + "'].DoColor('#" + aHex[i] + aHex[j] + aHex[k] + "');\">" + String.fromCharCode(160) + "</td>";
     tdDisp++;
     totDisp++;
    };
   };
  };
  for (i = tdDisp; i < 16; i++) {
   str += "<td style=\"height:12px;width:12px;border: 1px solid buttonface; background-color:buttonface; font-size: 0px;\"";
   str += " onMouseOver=\"parent.CPArray['" + this.uID + "'].ShowColor(SafeColor_" + this.uID + ", SafeName_" + this.uID + ", this, '');\">" + String.fromCharCode(160) + "</td>";
   totDisp++;
  };
  str += "</tr>";
  str += "<tr>";
  fDisp = totDisp;
  for (i = totDisp; i < (16 * 16); i++) {
   if (i % 16 == 0 && i != fDisp) {
    str += "</tr>";
    str += "<tr>";
   }
   str += "<td style=\"height:12px;width:12px;border: 1px solid buttonface; background-color:buttonface; font-size: 0px;\"";
   str += " onMouseOver=\"parent.CPArray['" + this.uID + "'].ShowColor(SafeColor_" + this.uID + ", SafeName_" + this.uID + ", this, '');\">" + String.fromCharCode(160) + "</td>";
  };
  str += "</tr>";
  str += "</table>";
  str += "</DIV>";
  return str;
 };
 this.ShowColor = function( inTDC, inTDT, inTD, inTXT)
 {
  var str = "";
  if (inTXT != "") {
   inTDT.innerHTML = inTD.style.backgroundColor.toUpperCase() + " " + inTXT;
  } else {
   inTDT.innerHTML = inTD.style.backgroundColor.toUpperCase().replace("BUTTONFACE", "");
  }
  inTDC.style.backgroundColor = inTD.style.backgroundColor;
 };
 this.DoColor = function( inCOLOR )
 {
  document.all[this.which].value = inCOLOR;
  this.which = null;
  this.open = null;
  this.oPopup.hide();
 };
 this.Show = function( inFORM, inPOS )
 {
  this.which = inFORM;
  this.open = inPOS;
  this.ShowMenu('ColorMenu_' + this.uID, 240, 320);
 };
 this.ShowMenu = function( inMENU, inW, inH)
 {
  var oPopBody = this.oPopup.document.body;
  var HTMLContent = eval(inMENU).innerHTML;
  oPopBody.innerHTML = HTMLContent;
  oPopBody.onselectstart = function() {return false;};
  oPopBody.ondragstart = function() {return false;};
  oPopBody.oncontextmenu = function() {return false;};
  if (this.open == "center") {
   var leftPos = (screen.availWidth - inW) / 2;
   var topPos = (screen.availHeight - inH) / 2;
   this.oPopup.show(leftPos, topPos, inW, inH, document.body);
  } else if (this.open == "bottom") {
   var lefter = event.clientX;
   var leftoff = event.offsetX;
   var topper = event.clientY;
   var topoff = event.offsetY;
   this.oPopup.show(lefter - leftoff - 2, topper - topoff + 22, inW, inH, document.body);
  } else if (this.open == "right") {
   var lefter = event.clientX;
   var leftoff = event.offsetX;
   var topper = event.clientY;
   var topoff = event.offsetY;
   this.oPopup.show(lefter - leftoff + 22, topper - topoff - 2, inW, inH, document.body);
  }
  return false;
 };
 this.Init = function()
 {
  var str = document.getElementById(inDIV).innerHTML;
  str += this.GetMenuColors();
  document.getElementById(inDIV).innerHTML = str;
 };
 this.Init();
};