ColorPicker = function()
{
    
    this.InitWindow = function()
    {
        if (document.layers) 
        {
            document.write("<LAYER name='colorpicker' top=0 left=0 visibility='hide'></LAYER>");
        }
         
        if (document.all) 
        {
            document.write("<div id='colorpicker' class='div_help' style='visibility:hidden;top:0px;left:0px;'>");
            document.write("</div>");
        }
        else if (document.getElementById) 
        {
            document.write("<div id='colorpicker' class='div_help' style='visibility:hidden;top:0px;left:0px;'></div>");
        }
    }
    
    this.AffWindow = function(x, y)
    {
        var contenu = "<table class='window'>";             
        contenu = contenu + "     <tr>";
        contenu = contenu + "       <td class='window_top_left'>&nbsp;&nbsp;</td>";
        contenu = contenu + "       <td class='window_titlebar'>";
        contenu = contenu + "           <div class='window_bts'>";
        contenu = contenu + "               <img class='window_bt' src='/images/wbt_close.png' onmouseover=\"this.src = '/images/wbt_close_over.png';\" onmouseout=\"this.src = '/images/wbt_close.png';\" onclick=\"HideWindow('colorpicker');\" />";
        contenu = contenu + "               <img class='window_bt' src='/images/wbt_min.png' onmouseover=\"this.src = '/images/wbt_min_over.png';\" onmouseout=\"this.src = '/images/wbt_min.png';\" />";
        contenu = contenu + "               <img class='window_bt' src='/images/wbt_max.png' onmouseover=\"this.src = '/images/wbt_max_over.png';\" onmouseout=\"this.src = '/images/wbt_max.png';\" />";
        contenu = contenu + "           </div>";
        contenu = contenu + "           <div class='window_title'>ColorPicker</div>";
        contenu = contenu + "       </td>";
        contenu = contenu + "       <td class='window_top_right'>&nbsp;&nbsp;</td>";
        contenu = contenu + "       </tr>";
        contenu = contenu + "       <tr>";
        contenu = contenu + "           <td colspan='3' class='window_content'>";
        contenu = contenu + "";
        contenu = contenu + "              <div class='colorpicker'>";
        contenu = contenu + "              <table>";
        contenu = contenu + "              	    <tr>";
        contenu = contenu + "                       <td valign='top'>";
        contenu = contenu + "                           <div id='cp1_ColorMap'></div>";
        contenu = contenu + "                       </td>";
        contenu = contenu + "                       <td valign='top'>";
        contenu = contenu + "                           <div id='cp1_ColorBar'></div>";
        contenu = contenu + "                       </td>";
        contenu = contenu + "                       <td valign='top'>";
        contenu = contenu + "                           <table>";
        contenu = contenu + "                               <tr>";
        contenu = contenu + "                                   <td colspan='3'>";
        contenu = contenu + "                                       <div id='cp1_Preview' style='background-color: #fff; width: 60px; height: 60px; padding: 0; margin: 0; border: solid 1px #000;'>";
        contenu = contenu + "                                           <br />";
        contenu = contenu + "                                       </div>";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                               </tr>";
        contenu = contenu + "                               <tr>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='radio' id='cp1_HueRadio' name='cp1_Mode' value='0' />";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <label for='cp1_HueRadio'>H:</label>";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='text' id='cp1_Hue' value='0' style='width: 40px;' /> &deg;";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                               </tr>";
        contenu = contenu + "                               <tr>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='radio' id='cp1_SaturationRadio' name='cp1_Mode' value='1' />";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <label for='cp1_SaturationRadio'>S:</label>";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='text' id='cp1_Saturation' value='100' style='width: 40px;' /> %";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                               </tr>";
        contenu = contenu + "                               <tr>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='radio' id='cp1_BrightnessRadio' name='cp1_Mode' value='2' />";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <label for='cp1_BrightnessRadio'>B:</label>";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='text' id='cp1_Brightness' value='100' style='width: 40px;' /> %";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                               </tr>";
        contenu = contenu + "                               <tr>";
        contenu = contenu + "                                   <td colspan='3' height='5'>";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                               </tr>";
        contenu = contenu + "                               <tr>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='radio' id='cp1_RedRadio' name='cp1_Mode' value='r' />";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <label for='cp1_RedRadio'>R:</label>";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='text' id='cp1_Red' value='255' style='width: 40px;' />";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                               </tr>";
        contenu = contenu + "                               <tr>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='radio' id='cp1_GreenRadio' name='cp1_Mode' value='g' />";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <label for='cp1_GreenRadio'>G:</label>";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='text' id='cp1_Green' value='0' style='width: 40px;' />";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                               </tr>";
        contenu = contenu + "                               <tr>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='radio' id='cp1_BlueRadio' name='cp1_Mode' value='b' />";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <label for='cp1_BlueRadio'>B:</label>";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       <input type='text' id='cp1_Blue' value='0' style='width: 40px;' />";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                               </tr>";
        contenu = contenu + "                               <tr>";
        contenu = contenu + "                                   <td>";
        contenu = contenu + "                                       #:";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                                   <td colspan='2'>";
        contenu = contenu + "                                       <input type='text' id='cp1_Hex' value='FF0000' style='width: 60px;' />";
        contenu = contenu + "                                   </td>";
        contenu = contenu + "                               </tr>";
        contenu = contenu + "                           </table>";
        contenu = contenu + "                       </td>";
        contenu = contenu + "                   </tr>";
        contenu = contenu + "               </table>";
        
        contenu = contenu + "               <div style='display:none;'>";
        contenu = contenu + "                   <img src='/js/colorpicker/images/rangearrows.gif' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/mappoint.gif' alt='' />";
        
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-saturation.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-brightness.png' alt='' />";
        
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-blue-tl.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-blue-tr.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-blue-bl.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-blue-br.png' alt='' />";
        
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-red-tl.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-red-tr.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-red-bl.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-red-br.png' alt='' />"
        
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-green-tl.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-green-tr.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-green-bl.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/bar-green-br.png' alt='' />";
        
        contenu = contenu + "                   <img src='/js/colorpicker/images/map-red-max.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/map-red-min.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/map-green-max.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/map-green-min.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/map-blue-max.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/map-blue-min.png' alt='' />";
        
        contenu = contenu + "                   <img src='/js/colorpicker/images/map-saturation.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/map-saturation-overlay.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/map-brightness.png' alt='' />";
        contenu = contenu + "                   <img src='/js/colorpicker/images/map-hue.png' alt='' />";
        contenu = contenu + "                </div>";
        contenu = contenu + "                </div>";
        
        contenu = contenu + "           </td>";
        contenu = contenu + "       </tr>";
        contenu = contenu + "</table>";
        
        if (document.layers) 
        {
            document.layers["colorpicker"].document.write(contenu);
            document.layers["colorpicker"].document.close();
            document.layers["colorpicker"].top = x + "px";
            document.layers["colorpicker"].left = y + "px";
            document.layers["colorpicker"].visibility="show";
        }

        if (document.all) 
        {
            document.all["colorpicker"].innerHTML=contenu;
            document.all["colorpicker"].style.top= x + "px";
            document.all["colorpicker"].style.left= y + "px";
            document.all["colorpicker"].style.visibility="visible";
        }
        else if (document.getElementById) {
            document.getElementById("colorpicker").innerHTML=contenu;
            document.getElementById("colorpicker").style.top= x + "px";
            document.getElementById("colorpicker").style.left= y + "px";
            document.getElementById("colorpicker").style.visibility="visible";
        }
    }
    
    this.HideWindow = function()
    {
        if (document.layers) 
        {
          document.layers["colorpicker"].visibility="hide";
        }

        if (document.all) 
        {
          document.all["colorpicker"].style.visibility="hidden";
        }
        else if (document.getElementById)
        {
          document.getElementById("colorpicker").style.visibility="hidden";
        }
    }
}

function HideWindow(id)
{
    if (document.layers) 
    {
      document.layers[id].visibility="hide";
    }

    if (document.all) 
    {
      document.all[id].style.visibility="hidden";
    }
    else if (document.getElementById)
    {
      document.getElementById(id).style.visibility="hidden";
    }
}