Javascript color selector

Color:
<Input name = "txtcolorvalue" type = "text" id = "txtcolorvalue" class = "inputtext" onclick = "colordialog ()" onblur = "loadcolor () "Style =" width: 120px; "/>
<Input type = "text" class = "inputtext" id = "txtexample" style = "width: 120px; Border: 0px; Background-color: # e0dfe3"/>

<SCRIPT type = "text/JavaScript">
Function loadcolor (){
VaR txtcolorvalue = $ ("# txtcolorvalue ");
If (jquery. Trim (txtcolorvalue. Val (). Length = 0) return;
VaR pattern =/^ # [0-9a-fa-f] {6} $ /;
If (txtcolorvalue. Val (). Match (pattern) = NULL ){
Newalert_top ('invalid color value! ');
Txtcolorvalue. Focus ();
Txtcolorvalue. Val ("");
}
$ ("# Txtexample" ).css ("backgroundcolor", txtcolorvalue. Val ());
}
</SCRIPT>

<Script language = "JavaScript">
<! --

// The "other colors..." function can be used normally only when the "script> </SCRIPT> label is placed in the" body "label.

Document. Write ("<Object ID = 'dlghelper' classid = 'clsid: 3050f819-98b5-11cf-bb82-00aa00bdce0b 'width = '0px 'height = '0px '> </Object> ");
VaR ocolorpopup = Window. createpopup ();
VaR ecolorpopup = NULL;
// Remove the border when you move the mouse away
Function colordialogmouseout (OBJ ){
OBJ. style. bordercolor = "";
OBJ. bgcolor = "";
}
// Add a border for the color when the mouse slides
Function colordialogmouseover (OBJ ){
OBJ. style. bordercolor = "# 0a66ee ";
OBJ. bgcolor = "# eeeeee ";
}
// Triggered when the color is clicked
Function colordialogmousedown (color ){
Ecolorpopup. value = color;
Ocolorpopup.doc ument. Body. Blur ();
$ ("# Txtexample" ).css ("backgroundcolor", color );
Ocolorpopup. Hide ();
}
// Other colors
Function colordialogmore (){
VaR scolor = dlghelper. choosecolordlg (ecolorpopup. value );
Scolor = scolor. tostring (16 );
If (scolor. length <6 ){
VaR stempstring = "000000". substring (0, 6-scolor. Length );
Scolor = stempstring. Concat (scolor );
}
Ecolorpopup. value = "#" + scolor. touppercase ();
// Document. Body. bgcolor = "#" + scolor. touppercase ();
Ocolorpopup.doc ument. Body. Blur ();
$ ("# Txtexample" ).css ("backgroundcolor", "#" + scolor. touppercase ());
}

function colordialog () {
var E = event. srcelement;
E. onkeyup = colordialog;
ecolorpopup = E;
var ocbody;
var opopbody = ocolorpopup.doc ument. body;
var colorlist = new array (40);
opopbody. style. backgroundcolor = "# f9f8f7";
opopbody. style. border = "solid #999999 1px";
opopbody. style. fontsize = "12px";

Colorlist [0] = "#000000"; colorlist [1] = "#993300"; colorlist [2] = "#333300"; colorlist [3] = "#003300 ";
Colorlist [4] = "#003366"; colorlist [5] = "#000080"; colorlist [6] = "#333399"; colorlist [7] = "#333333 ";

Colorlist [8] = "#800000"; colorlist [9] = "# ff6600"; colorlist [10] = "#808000"; colorlist [11] = "#008000 ";
Colorlist [12] = "#008080"; colorlist [13] = "# 0000ff"; colorlist [14] = "#666699"; colorlist [15] = "#808080 ";

Colorlist [16] = "# ff0000"; colorlist [17] = "# ff9900"; colorlist [18] = "#99cc00"; colorlist [19] = "#339966 ";
Colorlist [20] = "#33 CCCC"; colorlist [21] = "# 3366ff"; colorlist [22] = "#800080 "; colorlist [23] = "#999999 ";

Colorlist [24] = "# ff00ff"; colorlist [25] = "# ffcc00"; colorlist [26] = "# FFFF00"; colorlist [27] = "#00ff00 ";
Colorlist [28] = "#00 FFFF"; colorlist [29] = "#00 CCFF"; colorlist [30] = "#993366 "; colorlist [31] = "# cccccc ";

Colorlist [32] = "# ff99cc"; colorlist [33] = "# ffcc99"; colorlist [34] = "# ffff99"; colorlist [35] = "# ccffcc ";
Colorlist [36] = "# ccffff"; colorlist [37] = "#99 CCFF"; colorlist [38] = "# cc99ff "; colorlist [39] = "# ffffff ";

Ocbody = "";
Ocbody + = "<Table cellpadding = 0 cellspacing = 3> ";
Ocbody + = "<tr Height = '20' width = '20'> <TD align = 'center'> <Table Style = 'border: 1px solid #808080; 'width = '12' Height = '12' bgcolor = '+ E. value + '> <tr> <TD> </tr> </table> </TD> <TD bgcolor = 'eeeeee' colspan = '7' style = 'font-size: 12px; 'align = 'center'> current color </TD> </tr> ";
For (VAR I = 0; I <colorlist. length; I ++ ){
If (I % 8 = 0)
Ocbody + = "<tr> ";
Ocbody + = "<TD width = '14' Height = '16' style = 'border: 1px solid; 'onmouseout = 'parent. colordialogmouseout (this); 'onmouseover = 'parent. colordialogmouseover (this); 'onmousedown = parent. colordialogmousedown ('"+ colorlist [I] +"') align = 'center' valign = 'middle'> <Table Style = 'border: 1px solid #808080; 'width = '12' Height = '12' bgcolor = '"+ colorlist [I] +"'> <tr> <TD> </tr> </ table> </TD> ";
If (I % 8 = 7)
Ocbody + = "</tr> ";
}
Ocbody + = "<tr> <TD align = 'center' Height = '22' colspan = '8' onmouseout = 'parent. colordialogmouseout (this); 'onmouseover = 'parent. colordialogmouseover (this); 'style = 'border: 1px solid; font-size: 12px; cursor: default; 'onmousedown = 'parent. colordialogmore () '> other colors... </TD> </tr> ";
Ocbody + = "</table> ";

Opopbody. innerhtml = ocbody;
Ocolorpopup. Show (E. offsetleft + 0, E. offsettop + E. offsetheight + 0,158,147, document. Body );
}
// -->
</SCRIPT>