var cp_grid = [["ffffff", "ffcccc", "ffcc99", "ffff99", "ffffcc", "99ff99", "99ffff", "ccffff", "ccccff", "ffccff"], ["cccccc", "ff6666", "ff9966", "ffff66", "ffff33", "66ff99", "33ffff", "66ffff", "9999ff", "ff99ff"], ["c0c0c0", "ff0000", "ff9900", "ffcc66", "ffff00", "33ff33", "66cccc", "33ccff", "6666cc", "cc66cc"], ["999999", "cc0000", "ff6600", "ffcc33", "ffcc00", "33cc00", "00cccc", "3366ff", "6633ff", "cc33cc"], ["666666", "990000", "cc6600", "cc9933", "999900", "009900", "339999", "3333ff", "6600cc", "993399"], ["333333", "660000", "993300", "996633", "666600", "006600", "336666", "000099", "333399", "663366"], ["000000", "330000", "663300", "663333", "333300", "003300", "003333", "000066", "330099", "330033"]];
 var cp_dom = null;
 var cp_caller = null;
 var cp_defaultcolour = 'ffffff';
 var cp_closePID = null;
 function cp_init(id){
  var obj = document.getElementById(id);
  if (!obj) {
   alert("Colour picker can't find '" + id + "'");
   return;
  }
  obj.onclick = new Function("cp_open(this)");
  obj.onmouseover = cp_cancelclose;
  obj.onmouseout = cp_closesoon;
 }

 function cp_open(caller){
  if (cp_dom) {
   cp_close();
   return;
  }
  cp_caller = caller;
  cp_defaultcolour = document.getElementById(caller.name + "Value").value;
  var posX = 0;
  var posY = caller.offsetHeight;
  while (caller) {
   posX += caller.offsetLeft;
   posY += caller.offsetTop;
   caller = caller.offsetParent;
  }
  cp_dom = document.createElement("div");
  var table = document.createElement("table");
  table.setAttribute("border", "1");
  table.style.backgroundColor = "#808080";
  table.onmouseover = cp_cancelclose;
  table.onmouseout = cp_closesoon;
  var tbody = document.createElement("tbody");
  var row, cell;
  for (var y = 0; y < cp_grid.length; y++) {
   row = document.createElement("tr");
   tbody.appendChild(row);
   for (var x = 0; x < cp_grid[y].length; x++) {
    cell = document.createElement("td");
    row.appendChild(cell);
    cell.style.backgroundColor = "#" + cp_grid[y][x];
    cell.value = cp_grid[y][x];
    cell.style.border = "solid 1px #" + cell.value;
    cell.style.height = "12px";
    cell.style.width = "12px";
    cell.onmouseover = cp_onmouseover;
    cell.onmouseout = cp_onmouseout;
    cell.onclick = cp_onclick;
    if (cp_defaultcolour.toLowerCase() == cp_grid[y][x].toLowerCase()) {
     cell.onmouseover();
     cell.onmouseout();
    }
   }
  }
  table.appendChild(tbody);
  cp_dom.appendChild(table);
  cp_dom.style.position = "absolute";
  cp_dom.style.left = "0px";
  cp_dom.style.top = "0px";
  cp_dom.style.visibility = "hidden";
  document.body.appendChild(cp_dom);
  if (posX + cp_dom.offsetWidth > document.body.offsetWidth)
   posX = document.body.offsetWidth - cp_dom.offsetWidth;
  cp_dom.style.left = posX + "px";
  cp_dom.style.top = posY + "px";
  cp_dom.style.visibility = "visible";
 }

 function cp_close(){
  cp_cancelclose();
  if (cp_dom)
   document.body.removeChild(cp_dom);
  cp_dom = null;
  cp_caller = null;
 }

 function cp_closesoon(){
  cp_closePID = window.setTimeout("cp_close()", 250);
 }

 function cp_cancelclose(){
  if (cp_closePID)
   window.clearTimeout(cp_closePID);
 }

 function cp_onclick(){
  cp_caller.style.backgroundColor = "#" + this.value;
  var input = document.getElementById(cp_caller.name + "Value");
  input.value = this.value;
  NeedsUpdate = true;
  UpdatePreview();
  cp_close();
  if (input.onchange)
   input.onchange();
 }

 function cp_onmouseover(){
  this.style.borderStyle = "dotted";
  var rgb = cp_hex2rgb(this.value);
  if (rgb[0] + rgb[1] + rgb[2] > 255 * 3 / 2)
   this.style.borderColor = "black";
  else
   this.style.borderColor = "white";
 }

 function cp_onmouseout(){
  if (this.value == cp_defaultcolour)
   this.style.borderStyle = "outset";
  else
   this.style.border = "solid 1px #" + this.value;
 }

 function cp_hex2rgb(hexcode){
  var m = hexcode.match(/^([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])$/);
  if (m) {
   var r = parseInt(m[1], 16);
   var g = parseInt(m[2], 16);
   var b = parseInt(m[3], 16);
   return [r, g, b];
  }
  else {
   return null;
  }
 }