var ocolorPopup = document.createElement('div');
 
 var ecolorPopup=null;var ecolorImage=null;
 function colordialogmouseout(obj)
 {    obj.style.borderColor="";  
 
   obj.bgColor="";}
   function colordialogmouseover(obj)
   {    obj.style.borderColor="#0A66EE";    obj.bgColor="#EEEEEE";}
   function colordialogmousedown(color){    ecolorPopup.value=color;    ecolorImage.style.backgroundColor=color;    ocolorPopup.style.display='none';}   function colordialog(box,img){    var e=document.getElementById(box);    e.onkeyup=colordialog;   ecolorPopup=e;    ecolorImage=document.getElementById(img);   
    var ocbody;    var oPopBody = ocolorPopup;    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]='#33CCCC';colorlist[21]='#3366FF';colorlist[22]='#800080';colorlist[23]='#999999';
                 colorlist[24]='#FF00FF';colorlist[25]='#FFCC00';colorlist[26]='#FFFF00';colorlist[27]='#00FF00'; colorlist[28]='#00FFFF';colorlist[29]='#00CCFF';colorlist[30]='#993366';colorlist[31]='#CCCCCC'; 
                  colorlist[32]='#FF99CC';colorlist[33]='#FFCC99';colorlist[34]='#FFFF99';colorlist[35]='#CCFFCC';  colorlist[36]='#CCFFFF';colorlist[37]='#99CCFF';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></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></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:pointer;\" onmousedown=\"parent.colordialogmore();\">Other colors</td></tr>"; ocbody += "</table>";
                     oPopBody.innerHTML=ocbody;   
                      ocolorPopup.style.top=(getOffSet(ecolorImage,'top')+ecolorImage.offsetHeight+4)+'px'; 
                      ocolorPopup.style.left=(getOffSet(ecolorImage,'left')-60)+'px';ocolorPopup.style.width='158px';
                      ocolorPopup.style.height='156px';ocolorPopup.style.position='absolute';ocolorPopup.style.display='block'; 
                      if (ecolorImage.parentNode.lastChild!=ocolorPopup) ecolorImage.parentNode.appendChild(ocolorPopup,ecolorImage);} 



 function getOffSet(o,pos)
           {
            var top=0;
          var offsetParent = o;
         while (offsetParent!=null && offsetParent!=document.body) 
        {switch(pos.toUpperCase())
         { case 'TOP':
         top+=offsetParent.offsetTop;
         break;
         case 'LEFT':
         top+= offsetParent.offsetLeft;
         break;
         }
        offsetParent=offsetParent.offsetParent;
       }
     return top;
           }
 function colordialogmore(){  try{  var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value);}catch(e){return colordialogmoreFF();}    sColor = sColor.toString(16);    if (sColor.length < 6) {        var sTempString = '000000'.substring(0,6-sColor.length); sColor = sTempString.concat(sColor);    }    ecolorPopup.value='#'+sColor.toUpperCase();    ecolorImage.style.backgroundColor=ecolorPopup.value;ocolorPopup.style.display='none';    }   var color1=null;
 //firefox
 function colordialogmoreFF(){var colorWindow=window.open('',null,'directories=0,menubar=0,left=300,top=300,resizable =0,status=1,width=254px,height=177px,titlebar=0,toolbar=0,scrollbars=0,location=0');   colorWindow.document.open('text/html','');   colorWindow.document.write("<html><head><title>color picker</title><script>function rgbToHex(aa){if (aa.indexOf('rgb')==-1) return aa; aa=aa.replace('rgb(','');aa=aa.replace(')','');aa=aa.split(',');r=parseInt(aa[0]);g=parseInt(aa[1]);b=parseInt(aa[2]);r = r.toString(16);if (r.length == 1){r = '0' + r;}g = g.toString(16);if (g.length == 1){g = '0' + g;}b = b.toString(16);if (b.length == 1){b = '0' + b;}return ('#' + r + g + b).toUpperCase();}  var ColorHex=new Array('00','33','66','99','CC','FF') ; var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');var current=null;function intocolor(){var colorTable='';for (i=0;i<2;i++){for (j=0;j<6;j++){colorTable=colorTable+'<tr height=12>';colorTable=colorTable+'<td onmouseover=\"doOver(this)\" onmouseout=\"doOut()\" onclick=\"doclick(this)\" width=11 style=\"background-color:#000000\">' ;if (i==0){colorTable=colorTable+'<td onmouseover=\"doOver(this)\" onmouseout=\"doOut()\" onclick=\"doclick(this)\" width=11 style=\"background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'\">'}    else{colorTable=colorTable+'<td onmouseover=\"doOver(this)\" onmouseout=\"doOut()\" onclick=\"doclick(this)\" width=11 style=\"background-color:#'+SpColorHex[j]+'\">'} colorTable=colorTable+'<td width=11 style=\"background-color:#000000\">' ; for (k=0;k<3;k++){for (l=0;l<6;l++){colorTable=colorTable+'<td onmouseover=\"doOver(this)\" onmouseout=\"doOut()\" onclick=\"doclick(this)\" width=11 onmouseover=\"doOver(this)\" onmouseout=\"doOut()\" onclick=\"doclick(this)\" style=\"background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'\">';}}}}colorTable='<table width=253 border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"border:1px #000000 solid;border-bottom:none;border-collapse: collapse\" bordercolor=\"000000\">'+'<tr height=30><td colspan=21 bgcolor=#cccccc>'+'<table cellpadding=\"0\" cellspacing=\"1\" border=\"0\" style=\"border-collapse: collapse\">'+'<tr><td width=\"3\"><td><input type=\"text\" id=\"DisColor\" size=\"6\" disabled style=\"border:solid 1px #000000;background-color:#ffff00\"></td>'+'<td width=\"3\"><td><input type=\"text\" id=\"HexColor\" size=\"7\" style=\"border:inset 1px;font-family:Arial;\" value=\"#000000\"></td></tr></table></td></table>'+'<table border=\"1\" cellspacing=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\" bordercolor=\"000000\"  style=\"cursor:pointer;\">'+colorTable+'</table>'; document.getElementById('colorpanel').innerHTML=colorTable}  window.onload=intocolor;function doOver(e)  { var srcElement=e;  if ((srcElement.tagName==\"TD\") && (current!=srcElement)) {if (current!=null){current.style.backgroundColor = current._background} srcElement._background = srcElement.style.backgroundColor ;DisColor.style.backgroundColor = srcElement.style.backgroundColor;HexColor.value = rgbToHex(srcElement.style.backgroundColor);srcElement.style.backgroundColor = \"white\";current = srcElement;}}function doOut() {if (current!=null) current.style.backgroundColor = current._background;}function doclick(e){ var srcElement=e; if (typeof(srcElement)!='undefined'&&srcElement.tagName==\"TD\"){window.opener.color1=rgbToHex(srcElement._background); window.close();}} window.onunload=function(){window.opener.focus();}<\/SCRIPT></head><body  topmargin=\"0\" leftmargin=\"0\" scroll=\"no\"><div id=\"colorpanel\"  style=\"position: absolute;\"></div></body></html> ");   colorWindow.document.close();   window.onfocus=doalert;function doalert(){try{ if(colorWindow&&colorWindow.open&&color1==null) colorWindow.focus();}catch(e){}  if(color1){ecolorPopup.value=color1;    ecolorImage.style.backgroundColor=ecolorPopup.value;    ocolorPopup.style.display='none'; color1=null; }}}// -->