<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Color Properties</title>
<style type="text/css">
body { background-color: transparent; margin: 10px; font-family: Verdana; font-size: 7pt; }
div#Colors { float: left; width: 275px; }
div#Views { height: 150px; border: solid 1px; }
div#WebPalette { display: none; }
div#Tabbar { position: relative; left: 0px; top: 0px; }
div#Tabbar div { position: absolute; top: 0px; left: 1px; display: inline; width: 90px; height: 17px; text-align: center; line-height: 16px; cursor: pointer; }
div#Controls { float: right; display: inline; text-align: center; }
div#Preview { height: 35px; width: 85px; border: solid 1px; }
div#PreviewColor { position: relative; left: 0px; width: 85px; height: 25px; margin-bottom: 5px; word-wrap: break-word; }
div#Selected { height: 15px; width: 85px; border: solid 1px; }
div#Controls input { font-family: Verdana; font-size: 7pt; }
div#Controls input#ColorTextBox { margin-top: 2px; width: 82px; }
div#Controls input#ClearButton { margin-top: 2px; width: 87px; }
table { border-collapse: collapse; display: block; margin: 5px; }
td { width: 16px; height: 12px; border: solid 1px black; }
td.emptycell { border: none; }
div#WebPalette td { width: 14px; height: 10px; }
table#UseNamesTable { border-collapse: none; display: block; margin: 5px; }
table#UseNamesTable td { border: none; height: 15px; width: auto; vertical-align: middle; }
</style>
<script type="text/javascript">
function Initialized()
{
return typeof fx == "object";
}
function OnMouseOver(td)
{
if (!Initialized()) return;
var color = ConvertRGBtoHex(td.style.backgroundColor);
if (ShowNamedColors()) color = td.title;
document.getElementById("Preview").style.backgroundColor = color;
document.getElementById("PreviewColor").innerHTML = color;
}
function OnMouseOut(td)
{
if (!Initialized()) return;
document.getElementById("Preview").style.backgroundColor = document.body.style.backgroundColor;
document.getElementById("PreviewColor").innerHTML = "";
}
</script>
</head>
<body>
<form id="form1" action="Color.htm" onsubmit="return false;">
<div>
<div id="Colors">
<div id="Views">
<div id="NamedColors">
<div id="NamedColorsPlaceholder"></div>
<table id="UseNamesTable">
<tr>
<td>
<input type="checkbox" id="UseNames" checked="checked" title="Use color names" onclick="OnUseColorNames(this)" />
</td>
<td>
<span id="UseNamesLabel">Use color names</span>
</td>
</tr>
</table>
</div>
<div id="WebPalette">
<div id="WebPalettePlaceholder"></div>
</div>
</div>
<div id="Tabbar">
<div id="NamedColorsTab" onclick="fx.OnTab(this)"><span>Named Colors</span></div>
<div id="WebPaletteTab" onclick="fx.OnTab(this)" style="left: 93px;"><span>Web Palette</span></div>
</div>
</div>
<div id="Controls">
<div>Preview</div>
<div id="Preview"></div>
<div id="PreviewColor"></div>
<div>Selected</div>
<div id="Selected"></div>
<input id="ColorTextBox" type="text" size="7" onblur="OnColorTextBoxBlur(this)"/><br />
<input id="ClearButton" type="button" value="Clear" onclick="OnClear()" />
</div>
</div>
</form>
</body>
<script type="text/javascript">
var fx = null;
var webPaletteInitialized = false;
String.prototype.trim = function()
{
return this.replace(/^\s+|\s+$/g, '');
}
String.prototype.padLeft = function(ch, num)
{
var re = new RegExp(".{" + num + "}$");
var pad = "";
do
{
pad += ch;
}
while(pad.length < num)
return re.exec(pad + this);
}
function ConvertRGBtoHex(color)
{
try
{
var rgb = color.split(',');
if (rgb.length != 3) return color;
if (rgb[0].toLowerCase().indexOf('rgb(') != 0) return color;
var r = rgb[0].split('(');
r = Number(r[1].trim());
var g = Number(rgb[1].trim());
var fx = Number(rgb[2].split(')')[0].trim());
var hexColor = '#' + r.toString(16).padLeft('0', 2) + g.toString(16).padLeft('0', 2) + fx.toString(16).padLeft('0', 2);
return hexColor;
}
catch(e)
{
return color;
}
}
function ShowNamedColors()
{
if (document.getElementById("NamedColors").style.display == "none") return false;
return document.getElementById("UseNames").checked;
}
function OnColor(td)
{
var color = ConvertRGBtoHex(td.style.backgroundColor);
if (ShowNamedColors()) color = td.title;
document.getElementById("Selected").style.backgroundColor = color;
document.getElementById("ColorTextBox").value = color;
}
function OnColorTextBoxBlur(tb)
{
var color = tb.value;
try
{
document.getElementById("Selected").style.backgroundColor = color;
}
catch(e)
{
OnClear();
}
}
function CreateWebPaletteTable()
{
if (webPaletteInitialized) return;
var webPalette = document.getElementById("WebPalettePlaceholder");
var html = GetWebPaletteColorsTable();
webPalette.innerHTML = html;
webPaletteInitialized = true;
}
function OnBeforeViewChange(viewID)
{
switch (viewID)
{
case "WebPalette" :
CreateWebPaletteTable();
break;
default :
break;
}
}
function GetColorsTable(id, colorsData, hasTitle, numColumns, showEmptyCells)
{
var html = "";
var rows = colorsData.split(';');
titleIndex = 0;
colorIndex = hasTitle ? 1 : 0;
html += '<table id="' + id + '" border="0" cellspacing="0" cellpadding="0">';
for (var i = 0; i < rows.length; i++)
{
html += '<tr>';
var cells = rows[i].split(',');
for (var ii = 0; ii < cells.length; ii++)
{
var cell = cells[ii].split(':');
var title = cell[titleIndex];
var color = cell[colorIndex];
html += "<td style='background-color: " + color + "'; title='" + title + "' onclick='OnColor(this)' onmouseover='OnMouseOver(this)' onmouseout='OnMouseOut(this)'></td>";
}
if (cells.length < numColumns)
{
if (showEmptyCells)
{
for (var iii = cells.length; iii < numColumns; iii++)
html += "<td></td>";
}
else
{
var emptyCount = numColumns - cells.length;
html += "<td class='emptycell' colspan='" + emptyCount + "'></td>";
}
}
html += '</tr>';
}
html += '</table>';
return html;
}
function GetNamedColorsTable()
{
var namedColorsData = "Green:#008000,Lime:#00ff00,Teal:#008080,Aqua:#00ffff,Navy:#000080,Blue:#0000ff,Purple:#800080,Fuchsia:#ff00ff,Maroon:#800000,Red:#ff0000,Olive:#808000,Yellow:#ffff00,White:#ffffff,Silver:#c0c0c0,Gray:#808080,Black:#000000;DarkOliveGreen:#556b2f,DarkGreen:#006400,DarkSlateGray:#2f4f4f,SlateGray:#708090,DarkBlue:#00008b,MidnightBlue:#191970,Indigo:#4b0082,DarkMagenta:#8b008b,Brown:#a52a2a,DarkRed:#8b0000,Sienna:#a0522d,SaddleBrown:#8b4513,DarkGoldenrod:#b8860b,Beige:#f5f5dc,Honeydew:#f0fff0,DimGray:#696969;OliveDrab:#6b8e23,ForestGreen:#228b22,DarkCyan:#008b8b,LightSlateGray:#778899,MediumBlue:#0000cd,DarkSlateBlue:#483d8b,DarkViolet:#9400d3,MediumVioletRed:#c71585,IndianRed:#cd5c5c,Firebrick:#b22222,Chocolate:#d2691e,Peru:#cd853f,Goldenrod:#daa520,LightGoldenrodYellow:#fafad2,MintCream:#f5fffa,DarkGray:#a9a9a9;YellowGreen:#9acd32,SeaGreen:#2e8b57,CadetBlue:#5f9ea0,SteelBlue:#4682b4,RoyalBlue:#4169e1,BlueViolet:#8a2be2,DarkOrchid:#9932cc,DeepPink:#ff1493,RosyBrown:#bc8f8f,Crimson:#dc143c,DarkOrange:#ff8c00,BurlyWood:#deb887,DarkKhaki:#bdb76b,LightYellow:#ffffe0,Azure:#f0ffff,LightGrey:#d3d3d3;LawnGreen:#7cfc00,MediumSeaGreen:#3cb371,LightSeaGreen:#20b2aa,DeepSkyBlue:#00bfff,DodgerBlue:#1e90ff,SlateBlue:#6a5acd,MediumOrchid:#ba55d3,PaleVioletRed:#db7093,Salmon:#fa8072,OrangeRed:#ff4500,SandyBrown:#f4a460,Tan:#d2b48c,Gold:#ffd700,Ivory:#fffff0,GhostWhite:#f8f8ff,Gainsboro:#dcdcdc;Chartreuse:#7fff00,LimeGreen:#32cd32,MediumAquamarine:#66cdaa,DarkTurquoise:#00ced1,CornflowerBlue:#6495ed,MediumSlateBlue:#7b68ee,Orchid:#da70d6,HotPink:#ff69b4,LightCoral:#f08080,Tomato:#ff6347,Orange:#ffa500,Bisque:#ffe4c4,Khaki:#f0e68c,Cornsilk:#fff8dc,Linen:#faf0e6,WhiteSmoke:#f5f5f5;GreenYellow:#adff2f,DarkSeaGreen:#8fbc8b,Turquoise:#40e0d0,MediumTurquoise:#48d1cc,SkyBlue:#87ceeb,MediumPurple:#9370db,Violet:#ee82ee,LightPink:#ffb6c1,DarkSalmon:#e9967a,Coral:#ff7f50,NavajoWhite:#ffdead,BlanchedAlmond:#ffebcd,PaleGoldenrod:#eee8aa,OldLace:#fdf5e6,SeaShell:#fff5ee,GhostWhite:#f8f8ff;PaleGreen:#98fb98,SpringGreen:#00ff7f,Aquamarine:#7fffd4,PowderBlue:#b0e0e6,LightSkyBlue:#87cefa,LightSteelBlue:#b0c4de,Plum:#dda0dd,Pink:#ffc0cb,LightSalmon:#ffa07a,Wheat:#f5deb3,Moccasin:#ffe4b5,AntiqueWhite:#faebd7,LemonChiffon:#fffacd,FloralWhite:#fffaf0,Snow:#fffafa,AliceBlue:#f0f8ff;LightGreen:#90ee90,MediumSpringGreen:#00fa9a,PaleTurquoise:#afeeee,LightCyan:#e0ffff,LightBlue:#add8e6,Lavender:#e6e6fa,Thistle:#d8bfd8,MistyRose:#ffe4e1,PeachPuff:#ffdab9,PapayaWhip:#ffefd5";
var html = GetColorsTable("NamedColorsTable", namedColorsData, true, 16, false);
return html;
}
function GetWebPaletteColorsTable()
{
var webPaletteColorsData = "#000000,#111111,#222222,#333333,#444444,#555555,#666666,#777777,#888888,#999999,#aaaaaa,#bbbbbb,#cccccc,#dddddd,#eeeeee,#ffffff;#000000,#003300,#006600,#009900,#00cc00,#00ff00,#99ff00,#99cc00,#999900,#996600,#993300,#990000,#cc0000,#cc3300,#cc6600,#cc9900,#cccc00,#ccff00;#000033,#003333,#006633,#009933,#00cc33,#00ff33,#99ff33,#99cc33,#999933,#996633,#993333,#990033,#cc0033,#cc3333,#cc6633,#cc9933,#cccc33,#ccff33;#000066,#003366,#006666,#009966,#00cc66,#00ff66,#99ff66,#99cc66,#999966,#996666,#993366,#990066,#cc0066,#cc3366,#cc6666,#cc9966,#cccc66,#ccff66;#000099,#003399,#006699,#009999,#00cc99,#00ff99,#99ff99,#99cc99,#999999,#996699,#993399,#990099,#cc0099,#cc3399,#cc6699,#cc9999,#cccc99,#ccff99;#0000cc,#0033cc,#0066cc,#0099cc,#00cccc,#00ffcc,#99ffcc,#99cccc,#9999cc,#9966cc,#9933cc,#9900cc,#cc00cc,#cc33cc,#cc66cc,#cc99cc,#cccccc,#ccffcc;#0000ff,#0033ff,#0066ff,#0099ff,#00ccff,#00ffff,#99ffff,#99ccff,#9999ff,#9966ff,#9933ff,#9900ff,#cc00ff,#cc33ff,#cc66ff,#cc99ff,#ccccff,#ccffff;#3300ff,#3333ff,#3366ff,#3399ff,#33ccff,#33ffff,#ccffff,#ccccff,#cc99ff,#cc66ff,#cc33ff,#cc00ff,#ff00ff,#ff33ff,#ff66ff,#ff99ff,#ffccff,#ffffff;#3300cc,#3333cc,#3366cc,#3399cc,#33cccc,#33ffcc,#ccffcc,#cccccc,#cc99cc,#cc66cc,#cc33cc,#cc00cc,#ff00cc,#ff33cc,#ff66cc,#ff99cc,#ffcccc,#ffffcc;#330099,#333399,#336699,#339999,#33cc99,#33ff99,#ccff99,#cccc99,#cc9999,#cc6699,#cc3399,#cc0099,#ff0099,#ff3399,#ff6699,#ff9999,#ffcc99,#ffff99;#330066,#333366,#336666,#339966,#33cc66,#33ff66,#ccff66,#cccc66,#cc9966,#cc6666,#cc3366,#cc0066,#ff0066,#ff3366,#ff6666,#ff9966,#ffcc66,#ffff66;#330033,#333333,#336633,#339933,#33cc33,#33ff33,#ccff33,#cccc33,#cc9933,#cc6633,#cc3333,#cc0033,#ff0033,#ff3333,#ff6633,#ff9933,#ffcc33,#ffff33;#330000,#333300,#336600,#339900,#33cc00,#33ff00,#ccff00,#cccc00,#cc9900,#cc6600,#cc3300,#cc0000,#ff0000,#ff3300,#ff6600,#ff9900,#ffcc00,#ffff00";
var html = GetColorsTable("WebPaletteColorsTable", webPaletteColorsData, false, 18, true);
return html;
}
function OnClear()
{
document.getElementById("Selected").style.backgroundColor = "";
document.getElementById("ColorTextBox").value = "";
}
function OnUseColorNames(cb)
{
var useColorNames = cb.checked;
fx.colors.useColorNames = useColorNames;
var tb = document.getElementById("ColorTextBox");
var color = tb.value;
if (color.length > 0)
{
var translatedColor = FindNamedColor(color, useColorNames);
if (translatedColor)
{
tb.value = translatedColor;
document.getElementById("Selected").style.backgroundColor = translatedColor;
}
}
}
function FindNamedColor(color, toNamed)
{
var namedColors = document.getElementById("NamedColorsTable").getElementsByTagName("td");
var findColor = color.trim().toLowerCase();
for (var i = 0; i < namedColors.length; i++)
{
var translatedColor = ConvertRGBtoHex(namedColors[i].style.backgroundColor.toLowerCase());
if (toNamed)
{
if (translatedColor == findColor)
return namedColors[i].title;
}
else
{
if (namedColors[i].title.toLowerCase() == findColor)
return translatedColor;
}
}
return null;
}
function InitializeValues(parentElement)
{
var color = "";
switch (fx.name)
{
case "ForeColor" :
var isFont = fx.IsTagName(parentElement, "font");
color = isFont ? parentElement.color : parentElement.style.color;
break;
case "BackColor" :
color = parentElement.style.backgroundColor;
break;
default :
break;
}
if (color && color.length > 0)
{
var namedColor = FindNamedColor(color, fx.colors.useColorNames);
if (namedColor) color = namedColor;
document.getElementById("Selected").style.backgroundColor = color;
document.getElementById("ColorTextBox").value = color;
}
}
function CreateNamedColorsTable()
{
document.getElementById("NamedColorsPlaceholder").innerHTML = GetNamedColorsTable();
}
function Initialize(frameworkBehavior)
{
CreateNamedColorsTable();
fx = frameworkBehavior;
fx.InitializeDocument();
fx.InitializeViews("Views", "NamedColors,WebPalette");
fx.InitializeTabs("Tabbar", "NamedColorsTab,WebPaletteTab");
if (!fx.isIE)
{
document.getElementById("Controls").style.width = "87px";
document.getElementById("PreviewColor").style.width = "109px";
document.getElementById("PreviewColor").style.left = "-12px";
}
document.getElementById("Preview").style.borderColor = fx.colors.borders;
document.getElementById("Preview").style.borderColor = fx.colors.borders;
document.getElementById("Selected").style.borderColor = fx.colors.borders;
document.getElementById("ColorTextBox").style.borderColor = fx.colors.borders;
document.getElementById("UseNames").checked = fx.colors.useColorNames;
if (fx.isFirefox)
document.getElementById("PreviewColor").style.overflow = "hidden";
var tb = document.getElementById("ColorTextBox");
if (fx.IsParentOnList("font,span"))
{
InitializeValues(fx.context.parentElement);
}
fx.Focus("ColorTextBox");
}
function OnOK()
{
var commandName = "";
switch (fx.name)
{
case "ForeColor" :
commandName = "forecolor";
break;
case "BackColor" :
var commandName = fx.isIE ? 'backcolor' : 'hilitecolor';
break;
default :
return;
}
fx.ExecuteCommand(commandName, document.getElementById("ColorTextBox").value);
}
</script>
</html>