var r = document.getElementById("red");
var g = document.getElementById("green");
var b = document.getElementById("blue");
var color_list = new Array();
var width = parseInt(screen.width * 0.75 / 256);
var height = parseInt(width * 16 / 3);
var block = 15;

function Dec2Hex(Dec) {
  hex = "";

  while (Dec / 16) {
    m = parseInt(Dec / 16);
    n = Dec - m * 16;
    switch (n) {
      case 10: hex = "A" + hex;
               break;
      case 11: hex = "B" + hex;
               break;
      case 12: hex = "C" + hex;
               break;
      case 13: hex = "D" + hex;
               break;
      case 14: hex = "E" + hex;
               break;
      case 15: hex = "F" + hex;
               break;
      default: hex = n + hex;
    }
    Dec = m;
  }

  if (hex == "")
      hex = "0" + hex;
  if (hex.length == 1)
      hex = "0" + hex;

  return hex;
}

function Hex2Dec(Hex) {
  dec = 0;

  for (i = 0; i < Hex.length; i++) {
    switch (Hex.charAt(i).toUpperCase()) {
      case "F": hex = 15;
                break;
      case "E": hex = 14;
                break;
      case "D": hex = 13;
                break;
      case "C": hex = 12;
                break;
      case "B": hex = 11;
                break;
      case "A": hex = 10;
                break;
      default: hex = parseInt(Hex.charAt(i));
    }
    dec = dec * 16 + hex;
  }

  return dec;
}

function viewColor(obj) {
  original_color.bgColor = obj.bgColor;
  original_code.value = obj.bgColor.toUpperCase();

  invert_r = Dec2Hex(255 - Hex2Dec(obj.bgColor.charAt(1) + obj.bgColor.charAt(2)));
  invert_g = Dec2Hex(255 - Hex2Dec(obj.bgColor.charAt(3) + obj.bgColor.charAt(4)));
  invert_b = Dec2Hex(255 - Hex2Dec(obj.bgColor.charAt(5) + obj.bgColor.charAt(6)));
  invert_code.value = "#" + invert_r + invert_g + invert_b;
  invert_color.bgColor = invert_code.value;
}

function clearColor() {
  original_color.bgColor = "";
  original_code.value = "";
  invert_code.value = "";
  invert_color.bgColor = "";
}

function getColor() {
  if (event.button == 1) {
    clip = original_code.createTextRange();
    clip_code.value = original_code.value;
  } else {
    clip = invert_code.createTextRange();
    clip_code.value = invert_code.value;
  }
  clip_color.bgColor = clip_code.value;
  clip.execCommand("Copy");
}

function decideColor(o, id, x, y, z) {
  if (Hex2Dec(o.bgColor.charAt(1) + o.bgColor.charAt(2)))
    x.value = o.bgColor.charAt(1) + o.bgColor.charAt(2);
  else if (Hex2Dec(o.bgColor.charAt(3) + o.bgColor.charAt(4)))
    x.value = o.bgColor.charAt(3) + o.bgColor.charAt(4);
  else if (Hex2Dec(o.bgColor.charAt(5) + o.bgColor.charAt(6)))
    x.value = o.bgColor.charAt(5) + o.bgColor.charAt(6);
  else
    x.value = "00";
  x.value = x.value.toUpperCase();
  
  html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">" + "\n";
  for (i = 0; i < color_list.length; i++) {
    html += "  <tr>" + "\n";
    y.value = color_list[i];
    for (j = 0; j < color_list.length; j++) {
      z.value = color_list[j];
      html += "    <td bgcolor=\"#" + r.value + g.value + b.value + "\" width=\"" + height+ "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\" onMouseOut=\"clearColor()\" onMouseDown=\"getColor()\"></td>" + "\n";
    }
    html += "  </tr>" + "\n";
  }
  html += "</table>" + "\n";
  
  span = document.getElementById(id);
  span.innerHTML = html;
}

function sequence(id) {
  html_r = "";
  html_rg = "";
  html_rb = "";
  html_g = "";
  html_gb = "";
  html_b = "";
  html_gray = "";

  for (i = 0; i < 256; i++) {
    cd = Dec2Hex(i);
    html_r += "    <td bgcolor=\"#" + cd + "0000\" width=\"" + width + "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\" onMouseOut=\"clearColor()\" onMouseDown=\"getColor()\"></td>" + "\n";
    html_rg += "    <td bgcolor=\"#" + cd + cd + "00\" width=\"" + width + "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\" onMouseOut=\"clearColor()\" onMouseDown=\"getColor()\"></td>" + "\n";
    html_rb += "    <td bgcolor=\"#" + cd + "00" + cd + "\" width=\"" + width + "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\" onMouseOut=\"clearColor()\" onMouseDown=\"getColor()\"></td>" + "\n";
    html_g += "    <td bgcolor=\"#00" + cd + "00\" width=\"" + width + "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\" onMouseOut=\"clearColor()\" onMouseDown=\"getColor()\"></td>" + "\n";
    html_gb += "    <td bgcolor=\"#00" + cd + cd + "\" width=\"" + width + "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\" onMouseOut=\"clearColor()\" onMouseDown=\"getColor()\"></td>" + "\n";
    html_b += "    <td bgcolor=\"#0000" + cd + "\" width=\"" + width + "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\" onMouseOut=\"clearColor()\" onMouseDown=\"getColor()\"></td>" + "\n";
    html_gray += "    <td bgcolor=\"#" + cd + cd + cd + "\" width=\"" + width + "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\" onMouseOut=\"clearColor()\" onMouseDown=\"getColor()\"></td>" + "\n";
  }
  
  html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">" + "\n" +
         "  <tr>" + "\n" +
         "    <td colspan=\"256\">" + "\n" +
         "      <font color=\"#FF0000\">Red</font>" + "\n" +
         "    </td>" +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         html_r +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         "    <td colspan=\"256\">" + "\n" +
         "      <font color=\"#FF0000\">Red</font> + <font color=\"#00FF00\">Green</font>" + "\n" +
         "    </td>" + "\n" +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         html_rg +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         "    <td colspan=\"256\">" +
         "      <font color=\"#FF0000\">Red</font> + <font color=\"#0000FF\">Blue</font>" + "\n" +
         "    </td>" + "\n" +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         html_rb +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         "    <td colspan=\"256\">" + "\n" +
         "      <font color=\"#00FF00\">Green</font>" + "\n" +
         "    </td>" + "\n" +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         html_g +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         "    <td colspan=\"256\">" + "\n" +
         "      <font color=\"#00FF00\">Green</font> + <font color=\"#0000FF\">Blue</font>" + "\n" +
         "    </td>" + "\n" +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         html_gb +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         "    <td colspan=\"256\">" + "\n" +
         "      <font color=\"#0000FF\">Blue</font>" + "\n" +
         "    </td>" + "\n" +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         html_b +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         "    <td colspan=\"256\">" + "\n" +
         "      <font color=\"#999999\">Gray</font>" + "\n" +
         "    </td>" + "\n" +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         html_gray +
         "  </tr>" + "\n" +
         "</table>" + "\n";

  span = document.getElementById(id);
  span.innerHTML = html;
}

function mixture(id) {
  html_r = "";
  html_g = "";
  html_b = "";

  for (i = 0; i < 256; i++) {
    cd = Dec2Hex(i);
    html_r += "    <td bgcolor=\"#" + cd + "0000\" width=\"" + width + "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\"  onMouseOut=\"clearColor()\" onClick=\"decideColor(this, 'area', r, g, b)\"></td>" + "\n";
    html_g += "    <td bgcolor=\"#00" + cd + "00\" width=\"" + width + "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\"  onMouseOut=\"clearColor()\" onClick=\"decideColor(this, 'area', g, b, r)\"></td>" + "\n";
    html_b += "    <td bgcolor=\"#0000" + cd + "\" width=\"" + width + "\" height=\"" + height + "\" onMouseOver=\"viewColor(this)\"  onMouseOut=\"clearColor()\" onClick=\"decideColor(this, 'area', b, r, g)\"></td>" + "\n";
  }
  
  for (i = 0; i < 256; i += block) color_list[i/block] = Dec2Hex(i);
  
  html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">" + "\n" +
         "  <tr>" + "\n" +
         "    <td colspan=\"256\">" + "\n" +
         "      <font color=\"#FF0000\">Red</font>" + "\n" +
         "    </td>" + "\n" +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         html_r +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         "    <td colspan=\"256\">" + "\n" +
         "      <font color=\"#00FF00\">Green</font>" + "\n" +
         "    </td>" + "\n" +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         html_g +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         "    <td colspan=\"256\">" + "\n" +
         "      <font color=\"#0000FF\">Blue</font>" + "\n" +
         "    </td>" + "\n" +
         "  </tr>" + "\n" +
         "  <tr>" + "\n" +
         html_b +
         "  </tr>" + "\n" +
         "</table>" + "\n" +
         "<br />" + "\n" +
         "<span id=\"area\"></span>" + "\n";

  span = document.getElementById(id);
  span.innerHTML = html;
}