<html>
<head>
  <title>Color</title>
  <style>
    <%include editor_dialog.css%>
    .colorcell { width: 21px; height: 20px; font-size: 2px };
  </style>
  <script>

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

function mouseoverBorder (obj) {
    obj.style.border = '2px outset buttonface';
    obj.style.padding = '0px';
}
function mouseoutBorder (obj) {
    obj.style.border = '1px solid gray';
    obj.style.padding = '1px';
}
function selectedBorder (obj) {
    obj.style.border = '2px inset buttonface';
    obj.style.padding = '0px';
}

function InitColorPalette() {
    if (document.getElementsByTagName)
        var x = document.getElementsByTagName('TD');
    else if (document.all)
        var x = document.all.tags('TD');

    for (var i=0;i<x.length;i++)  {
        if (x[i].id != 'sample' && x[i].id != 'button' && x[i].id != 'custom') {
            x[i].onmouseover = over;
            x[i].onmouseout = out;
            x[i].onclick = setColor;
            x[i].style.backgroundColor = x[i].style.color = x[i].id;
            mouseoutBorder(x[i]);
        }
    }
    document.getElementById('bok').onclick = returnColor;

    if (opener.dialogWindow.currentColor) {
        var input = document.getElementById('hexcolor');
        input.value = opener.dialogWindow.currentColor;
        setManualColor(input);
    }
}

function over() {
    if (this.id == selectedId) {
        selectedBorder(this);
    }
    else {
        mouseoverBorder(this);
    }
}

function out() {
    if (this.id == selectedId) {
        selectedBorder(this);
    }
    else {
        mouseoutBorder(this);
    }
}

function textKey (event, textbox) {
    if (event.keyCode == 13) {
        textbox.blur();
        return;
    }
    else if (textbox.value.length < 7) {
        return event.keyCode;
    }
}

function setColor() {
    if (selectedId)
        mouseoutBorder(document.getElementById(selectedId));

    selectedId = this.id;
    if (selectedId) {
        color = selectedId;
        selectedBorder(this);
        document.getElementById('source').style.color = color;
        document.getElementById('hexcolor').value = color;
    }
}

function setManualColor (textbox) {
    var newColor = textbox.value.toLowerCase();

    if (colormap[newColor])
        newColor = colormap[newColor];

    newColor = newColor.toUpperCase();

    if (newColor.substring(0, 1) != '#')
        newColor = '#' + newColor;

    // Turn a 3-digit hex color such as '#a62' into the 6 digit equivelant '#aa6622'
    if (/^#[0-9A-F]{3}$/.test(newColor)) {
        newColor = '#' +
            newColor.substring(1,2) + newColor.substring(1,2) +
            newColor.substring(2,3) + newColor.substring(2,3) +
            newColor.substring(3,4) + newColor.substring(3,4);
        alert("newcolor: " + newColor);
    }

    if (!/^#[0-9A-F]{6}$/.test(newColor)) {
        textbox.value = '';
        return;
    }
    else {
        if (selectedId)
            mouseoutBorder(document.getElementById(selectedId));

        var have;
        if (have = document.getElementById(newColor)) {
            selectedBorder(have);
            selectedId = newColor;
        }

        color = newColor;
        document.getElementById('source').style.color = color;
        textbox.value = color;
    }
}

function returnColor() {
    if (color) {
        opener.dialogWindow.returnFunc(color);
        window.close();
    }
}
</script>
</head>
<body class="body" onLoad="InitColorPalette()">
<table border="1" cellpadding="1" cellspacing="1" align="center">
  <tr>
    <td class="colorcell" id="#FFFFFF">&nbsp;</td>
    <td class="colorcell" id="#FFBFBF">&nbsp;</td>
    <td class="colorcell" id="#FFDFBF">&nbsp;</td>
    <td class="colorcell" id="#FFFFBF">&nbsp;</td>
    <td class="colorcell" id="#EFFFBF">&nbsp;</td>
    <td class="colorcell" id="#BFFFBF">&nbsp;</td>
    <td class="colorcell" id="#BFFFEF">&nbsp;</td>
    <td class="colorcell" id="#BFFFFF">&nbsp;</td>
    <td class="colorcell" id="#BFDFFF">&nbsp;</td>
    <td class="colorcell" id="#BFBFFF">&nbsp;</td>
    <td class="colorcell" id="#DFBFFF">&nbsp;</td>
    <td class="colorcell" id="#FFBFFF">&nbsp;</td>
    <td class="colorcell" id="#FFBFDF">&nbsp;</td>
  </tr>
  <tr>
    <td class="colorcell" id="#E0E0E0">&nbsp;</td>
    <td class="colorcell" id="#FF8080">&nbsp;</td>
    <td class="colorcell" id="#FFBF80">&nbsp;</td>
    <td class="colorcell" id="#FFFF80">&nbsp;</td>
    <td class="colorcell" id="#CFFF80">&nbsp;</td>
    <td class="colorcell" id="#80FF80">&nbsp;</td>
    <td class="colorcell" id="#80FFCF">&nbsp;</td>
    <td class="colorcell" id="#80FFFF">&nbsp;</td>
    <td class="colorcell" id="#80BFFF">&nbsp;</td>
    <td class="colorcell" id="#8080FF">&nbsp;</td>
    <td class="colorcell" id="#BF80FF">&nbsp;</td>
    <td class="colorcell" id="#FF80FF">&nbsp;</td>
    <td class="colorcell" id="#FF80BF">&nbsp;</td>
  </tr>
  <tr>
    <td class="colorcell" id="#C0C0C0">&nbsp;</td>
    <td class="colorcell" id="#FF4040">&nbsp;</td>
    <td class="colorcell" id="#FFA040">&nbsp;</td>
    <td class="colorcell" id="#FFFF40">&nbsp;</td>
    <td class="colorcell" id="#B0FF40">&nbsp;</td>
    <td class="colorcell" id="#40FF40">&nbsp;</td>
    <td class="colorcell" id="#40FFB0">&nbsp;</td>
    <td class="colorcell" id="#40FFFF">&nbsp;</td>
    <td class="colorcell" id="#40A0FF">&nbsp;</td>
    <td class="colorcell" id="#4040FF">&nbsp;</td>
    <td class="colorcell" id="#A040FF">&nbsp;</td>
    <td class="colorcell" id="#FF40FF">&nbsp;</td>
    <td class="colorcell" id="#FF40A0">&nbsp;</td>
  </tr>
  <tr>
    <td class="colorcell" id="#808080">&nbsp;</td>
    <td class="colorcell" id="#FF0000">&nbsp;</td>
    <td class="colorcell" id="#FF8000">&nbsp;</td>
    <td class="colorcell" id="#FFFF00">&nbsp;</td>
    <td class="colorcell" id="#80FF00">&nbsp;</td>
    <td class="colorcell" id="#00FF00">&nbsp;</td>
    <td class="colorcell" id="#00FF80">&nbsp;</td>
    <td class="colorcell" id="#00FFFF">&nbsp;</td>
    <td class="colorcell" id="#0080FF">&nbsp;</td>
    <td class="colorcell" id="#0000FF">&nbsp;</td>
    <td class="colorcell" id="#8000FF">&nbsp;</td>
    <td class="colorcell" id="#FF00FF">&nbsp;</td>
    <td class="colorcell" id="#FF0080">&nbsp;</td>
  </tr>
  <tr>
    <td class="colorcell" id="#646464">&nbsp;</td>
    <td class="colorcell" id="#BF0000">&nbsp;</td>
    <td class="colorcell" id="#BF6000">&nbsp;</td>
    <td class="colorcell" id="#BFBF00">&nbsp;</td>
    <td class="colorcell" id="#80BF00">&nbsp;</td>
    <td class="colorcell" id="#00BF00">&nbsp;</td>
    <td class="colorcell" id="#00BF80">&nbsp;</td>
    <td class="colorcell" id="#00BFBF">&nbsp;</td>
    <td class="colorcell" id="#0060BF">&nbsp;</td>
    <td class="colorcell" id="#0000BF">&nbsp;</td>
    <td class="colorcell" id="#6000BF">&nbsp;</td>
    <td class="colorcell" id="#BF00BF">&nbsp;</td>
    <td class="colorcell" id="#BF0060">&nbsp;</td>
  </tr>
  <tr>
    <td class="colorcell" id="#484848">&nbsp;</td>
    <td class="colorcell" id="#800000">&nbsp;</td>
    <td class="colorcell" id="#804000">&nbsp;</td>
    <td class="colorcell" id="#808000">&nbsp;</td>
    <td class="colorcell" id="#588000">&nbsp;</td>
    <td class="colorcell" id="#008000">&nbsp;</td>
    <td class="colorcell" id="#008058">&nbsp;</td>
    <td class="colorcell" id="#008080">&nbsp;</td>
    <td class="colorcell" id="#004080">&nbsp;</td>
    <td class="colorcell" id="#000080">&nbsp;</td>
    <td class="colorcell" id="#400080">&nbsp;</td>
    <td class="colorcell" id="#800080">&nbsp;</td>
    <td class="colorcell" id="#800040">&nbsp;</td>
  </tr>
  <tr>
    <td class="colorcell" id="#000000">&nbsp;</td>
    <td class="colorcell" id="#500000">&nbsp;</td>
    <td class="colorcell" id="#502800">&nbsp;</td>
    <td class="colorcell" id="#505000">&nbsp;</td>
    <td class="colorcell" id="#385000">&nbsp;</td>
    <td class="colorcell" id="#005000">&nbsp;</td>
    <td class="colorcell" id="#005028">&nbsp;</td>
    <td class="colorcell" id="#005050">&nbsp;</td>
    <td class="colorcell" id="#002850">&nbsp;</td>
    <td class="colorcell" id="#000050">&nbsp;</td>
    <td class="colorcell" id="#280050">&nbsp;</td>
    <td class="colorcell" id="#500050">&nbsp;</td>
    <td class="colorcell" id="#500028">&nbsp;</td>
  </tr>
</table>
<hr>
<table cellpadding="1" cellspacing="1" border="0" width="100%">
  <tr>
    <td id="sample" class="body" width="80">
      <div id="source" style="width: 80px; border: 1px solid #000000; background: #ffffff" align="center">Sample</div>
    </td>
    <td id="custom" width="80">
      <input type="text" id="hexcolor" maxlength="20" onchange="setManualColor(this)" onkeydown="textKey(event, this)" style="width: 80px" title="Enter a custom color (e.g. '#FF0000' or 'red') here">
    </td>
    <td align="right" id="button" style="padding-right: 3px">
      <nobr>
      <input type="button" id="bok" class="button" value=" Ok ">
      <input type="button" class="button" value="Cancel" onclick="window.close()">
      </nobr>
    </td>
  </tr>
</table>
</body>
</html>
