// Usage
// <A HREF='#' onClick="clr_Select(ctl00$MainContent$UserID, ctl00$MainContent$Password);"> test </A>
// <input Type='TextBox' Name="ctl00$MainContent$UserID">
// <input Type='TextBox' Name="ctl00$MainContent$Password">

var fld_Name;
var fld_NameDisplay;
    
function clr_Select(fldName,fldNameDisplay){
    
 fld_Name=fldName;
 fld_NameDisplay=fldNameDisplay;
    
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Windows Property
 var mywin = window.open("about:blank", "wincolor", "width=500, height=100, toolbar=no, location=no,menubar=no,status=no,scrollbars=yes,resizable=no");
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
    
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Generation the Color Table
//         colors = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');

         colors = new Array('0','3','6','9','C','F');
         strColorTable = "<TABLE onclick='assign();' onmouseover='toggleClass();' onmouseout='toggleClass();' WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=0>";
         for(i=0;i<colors.length;i++){
             strColorTable += "<TR>"
             for(j=0;j<colors.length;j++){
                 for(k=0;k<colors.length;k++){
                     strColorTable += "<TD class=col bgcolor=#"+colors[j]+colors[j]+colors[i]+colors[i]+colors[k]+colors[k]+">&nbsp;</TD>";
                 }           
             }
             strColorTable += "</TR>";
         }
         strColorTable += "</TABLE>";

 var myDoc = mywin.document;

 myDoc.open("text/html");
 myDoc.write("<HTML>"+
 "<HEAD>"+
     "<TITLE>"+
     "Color Selection - Click To Assign"+
     "</TITLE>"+
     "<STYLE>"+
     "TD{font-size:8pt;}"+
     ".col{border:solid 1px buttonface;cursor:hand;}"+
     ".colO{cursor:hand;border:solid 1px black;}"+
     "</STYLE>"+
     "<SCR"+"IPT>\n"+
     "<!"+"--\n"+
     "function toggleClass(){\n"+
     "  var el = window.event.srcElement;if(el.className=='col'){el.className='colO'}else if(el.className=='colO'){el.className='col'}\n"+
     "}\n"+
        
     "function assign(){\n"+
     "  var el = window.event.srcElement;\n"+
     "  if(el.className=='col'||el.className=='colO'){"+
     "    window.opener.clr_Assign(el.bgColor);"+
     "  }\n"+
        
        
     "}\n--"+">"+
     "</SCR"+"IPT>"+
 "</HEAD>"+
    
 "</TABLE>"+
 "<BODY bgcolor=buttonface topmargin=2 leftmargin=2 style='border:none;font-family:verdana;font-size:8pt;letter-spacing:-0.5pt' onselectstart='return false'>"+
 strColorTable+
 "</BODY>"+
 "</HTML>");
 myDoc.close();
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
    
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Assign Color
function clr_Assign(newColor){
     fld_Name.value=newColor;
     fld_Name.color=newColor;
    ' fld_NameDisplay.bgcolor=color;';
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
