var CPArray = new Array();

var CP_NAMED =
[
 ["#FF0000", "red"],
 ["#FFFF00", "yellow"],
 ["#00FF00", "lime"],
 ["#00FFFF", "cyan"],
 ["#0000FF", "blue"],
 ["#FF00FF", "magenta"],
 ["#FFFFFF", "white"],
 ["#F5F5F5", "whitesmoke"],
 ["#DCDCDC", "gainsboro"],
 ["#D3D3D3", "lightgrey"],
 ["#C0C0C0", "silver"],
 ["#A9A9A9", "darkgray"],
 ["#808080", "gray"],
 ["#696969", "dimgray"],
 ["#000000", "black"],
 ["#2F4F4F", "darkslategray"],
 ["#708090", "slategray"],
 ["#778899", "lightslategray"],
 ["#4682B4", "steelblue"],
 ["#4169E1", "royalblue"],
 ["#6495ED", "cornflowerblue"],
 ["#B0C4DE", "lightsteelblue"],
 ["#7B68EE", "mediumslateblue"],
 ["#6A5ACD", "slateblue"],
 ["#483D8B", "darkslateblue"],
 ["#191970", "midnightblue"],
 ["#000080", "navy"],
 ["#00008B", "darkblue"],
 ["#0000CD", "mediumblue"],
 ["#1E90FF", "dodgerblue"],
 ["#00BFFF", "deepskyblue"],
 ["#87CEFA", "lightskyblue"],
 ["#87CEEB", "skyblue"],
 ["#ADD8E6", "lightblue"],
 ["#B0E0E6", "powderblue"],
 ["#F0FFFF", "azure"],
 ["#E0FFFF", "lightcyan"],
 ["#AFEEEE", "paleturquoise"],
 ["#48D1CC", "mediumturquoise"],
 ["#20B2AA", "lightseagreen"],
 ["#008B8B", "darkcyan"],
 ["#008080", "teal"],
 ["#5F9EA0", "cadetblue"],
 ["#00CED1", "darkturquoise"],
 ["#00FFFF", "aqua"],
 ["#40E0D0", "turquoise"],
 ["#7FFFD4", "aquamarine"],
 ["#66CDAA", "mediumaquamarine"],
 ["#8FBC8F", "darkseagreen"],
 ["#3CB371", "mediumseagreen"],
 ["#2E8B57", "seagreen"],
 ["#006400", "darkgreen"],
 ["#008000", "green"],
 ["#228B22", "forestgreen"],
 ["#32CD32", "limegreen"],
 ["#00FF00", "lime"],
 ["#7FFF00", "chartreuse"],
 ["#7CFC00", "lawngreen"],
 ["#ADFF2F", "greenyellow"],
 ["#98FB98", "palegreen"],
 ["#90EE90", "lightgreen"],
 ["#00FF7F", "springgreen"],
 ["#00FA9A", "mediumspringgreen"],
 ["#556B2F", "darkolivegreen"],
 ["#6B8E23", "olivedrab"],
 ["#808000", "olive"],
 ["#BDB76B", "darkkhaki"],
 ["#B8860B", "darkgoldenrod"],
 ["#DAA520", "goldenrod"],
 ["#FFD700", "gold"],
 ["#F0E68C", "khaki"],
 ["#EEE8AA", "palegoldenrod"],
 ["#FFEBCD", "blanchedalmond"],
 ["#FFE4B5", "moccasin"],
 ["#F5DEB3", "wheat"],
 ["#FFDEAD", "navajowhite"],
 ["#DEB887", "burlywood"],
 ["#D2B48C", "tan"],
 ["#BC8F8F", "rosybrown"],
 ["#A0522D", "sienna"],
 ["#8B4513", "saddlebrown"],
 ["#D2691E", "chocolate"],
 ["#CD853F", "peru"],
 ["#F4A460", "sandybrown"],
 ["#8B0000", "darkred"],
 ["#800000", "maroon"],
 ["#A52A2A", "brown"],
 ["#B22222", "firebrick"],
 ["#CD5C5C", "indianred"],
 ["#F08080", "lightcoral"],
 ["#FA8072", "salmon"],
 ["#E9967A", "darksalmon"],
 ["#FFA07A", "lightsalmon"],
 ["#FF7F50", "coral"],
 ["#FF6347", "tomato"],
 ["#FF8C00", "darkorange"],
 ["#FFA500", "orange"],
 ["#FF4500", "orangered"],
 ["#DC143C", "crimson"],
 ["#FF0000", "red"],
 ["#FF1493", "deeppink"],
 ["#FF00FF", "fuchsia"],
 ["#FF69B4", "hotpink"],
 ["#FFB6C1", "lightpink"],
 ["#FFC0CB", "pink"],
 ["#DB7093", "palevioletred"],
 ["#C71585", "mediumvioletred"],
 ["#800080", "purple"],
 ["#8B008B", "darkmagenta"],
 ["#9370DB", "mediumpurple"],
 ["#8A2BE2", "blueviolet"],
 ["#4B0082", "indigo"],
 ["#9400D3", "darkviolet"],
 ["#9932CC", "darkorchid"],
 ["#BA55D3", "mediumorchid"],
 ["#DA70D6", "orchid"],
 ["#EE82EE", "violet"],
 ["#DDA0DD", "plum"],
 ["#D8BFD8", "thistle"],
 ["#E6E6FA", "lavender"],
 ["#F8F8FF", "ghostwhite"],
 ["#F0F8FF", "aliceblue"],
 ["#F5FFFA", "mintcream"],
 ["#F0FFF0", "honeydew"],
 ["#FAFAD2", "lightgoldenrodyellow"],
 ["#FFFACD", "lemonchiffon"],
 ["#FFF8DC", "cornsilk"],
 ["#FFFFE0", "lightyellow"],
 ["#FFFFF0", "ivory"],
 ["#FFFAF0", "floralwhite"],
 ["#FAF0E6", "linen"],
 ["#FDF5E6", "oldlace"],
 ["#FAEBD7", "antiquewhite"],
 ["#FFE4C4", "bisque"],
 ["#FFDAB9", "peachpuff"],
 ["#FFEFD5", "papayawhip"],
 ["#FFF5EE", "seashell"],
 ["#FFF0F5", "lavenderblush"],
 ["#FFE4E1", "mistyrose"],
 ["#FFFAFA", "snow"]
];

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;\">";
  str += "<table id=\"Named_" + 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\">Named</font> - ";
  str += "<a style=\"cursor:hand;\" onClick=\"javascript:parent.CPArray['" + this.uID + "'].ToggleColor(Gray_" + this.uID + ", Named_" + this.uID + ", Safe_" + this.uID + ");\">GrayScale</a> - ";
  str += "<a style=\"cursor:hand;\" onClick=\"javascript:parent.CPArray['" + this.uID + "'].ToggleColor(Safe_" + this.uID + ", Named_" + this.uID + ", Gray_" + this.uID + ");\">Safety</a>";
  str += "</td></tr>";
  str += "<tr><td colspan=\"16\" id=\"NamedColor_" + this.uID + "\" style=\"height: 20px;font-family: verdana; font-size:12px;\">&nbsp;</td></tr>";
  str += "<tr><td width=\"100%\" colspan=\"16\" id=\"NamedName_" + this.uID + "\" style=\"height: 20px;border: 1px solid buttonface; font-family: verdana; font-size:9px;\" align=\"left\">&nbsp;</td>";
  str += "</tr>";
  str += "<tr><td colspan=\"16\" onMouseOver=\"parent.CPArray['" + this.uID + "'].ShowColor(NamedColor_" + this.uID + ", NamedName_" + 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 < CP_NAMED.length; i++) {
   if (i % 16 == 0 && i != 0) {
    str += "</tr>";
    str += "<tr>";
    tdDisp = 0;
   }
   str += "<td style=\"height:12px;width:12px;cursor: hand;background-color:'" + CP_NAMED[i][0] + "'; font-size: 0px;\"";
   str += " onMouseOver=\"parent.CPArray['" + this.uID + "'].ShowColor(NamedColor_" + this.uID + ", NamedName_" + this.uID + ", this, '" + CP_NAMED[i][1] + "');\"";
   str += " onClick=\"parent.CPArray['" + this.uID + "'].DoColor('" + CP_NAMED[i][0] + "');\">" + 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(NamedColor_" + this.uID + ", NamedName_" + 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(NamedColor_" + this.uID + ", NamedName_" + this.uID + ", this, '');\">" + String.fromCharCode(160) + "</td>";
  };
  str += "</tr>";
  str += "</table>";
  aHex = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
  str += "<table id=\"Gray_" + 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;display: none;\" 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 += "<a style=\"cursor:hand;\" onClick=\"javascript:parent.CPArray['" + this.uID + "'].ToggleColor(Named_" + this.uID + ", Gray_" + this.uID + ", Safe_" + this.uID + ");\">Named</a> - ";
  str += "<font color=\"#FF0000\">GrayScale</font> - ";
  str += "<a style=\"cursor:hand;\" onClick=\"javascript:parent.CPArray['" + this.uID + "'].ToggleColor(Safe_" + this.uID + ", Named_" + this.uID + ", Gray_" + this.uID + ");\">Safety</a>";
  str += "</td></tr>";
  str += "<tr><td colspan=\"16\" id=\"GrayColor_" + this.uID + "\" style=\"height:20px;font-family: verdana; font-size:12px;\">&nbsp;</td></tr>";
  str += "<tr><td colspan=\"16\" id=\"GrayName_" + this.uID + "\" style=\"height:20px;border: 1px solid buttonface; font-family: verdana; font-size:10px;\" align=\"left\">&nbsp;</td></tr>";
  str += "<tr><td onMouseOver=\"parent.CPArray['" + this.uID + "'].ShowColor(GrayColor_" + this.uID + ", GrayName_" + this.uID + ", this, '');\" colspan=\"16\" 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++) {
    str += "<td style=\"height:12px;width:12px;cursor: hand;background-color:'#" + aHex[i] + aHex[j] + aHex[i] + aHex[j] + aHex[i] + aHex[j] + "'; font-size: 0px;\"";
    str += " onMouseOver=\"parent.CPArray['" + this.uID + "'].ShowColor(GrayColor_" + this.uID + ", GrayName_" + this.uID + ", this, '');\"";
    str += " onClick=\"parent.CPArray['" + this.uID + "'].DoColor('#" + aHex[i] + aHex[j] + aHex[i] + aHex[j] + aHex[i] + aHex[j] + "');\">" + String.fromCharCode(160) + "</td>";
   };
   if (i < aHex.length - 1) {
     str += "</tr>";
     str += "<tr>";
   }
  };
  str += "</tr>";
  str += "</table>";
  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;display: none;\" 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 += "<a style=\"cursor:hand;\" onClick=\"javascript:parent.CPArray['" + this.uID + "'].ToggleColor(Named_" + this.uID + ", Gray_" + this.uID + ", Safe_" + this.uID + ");\">Named</a> - ";
  str += "<a style=\"cursor:hand;\" onClick=\"javascript:parent.CPArray['" + this.uID + "'].ToggleColor(Gray_" + this.uID + ", Named_" + this.uID + ", Safe_" + this.uID + ");\">GrayScale</a> - ";
  str += "<font color=\"#FF0000\">Safety</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.ToggleColor = function( inCOLORON, inCOLOROFF, inCOLOROFF_2 )
 {
  inCOLORON.style.display = "";
  inCOLOROFF.style.display = "none";
  inCOLOROFF_2.style.display = "none";
 };
 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();
};