// ===============================================================
// CBkort version 2.x, copyright Carl Bro GIS&IT, 2006
// ===============================================================
// $Archive: /Products/CBKort2/development/2.5/standard_upgrade_01/wwwroot/js/standard/colorpicker.js $ 
// $Date: 4-08-09 11:41 $
// $Revision: 7 $ 
// $Author: Kpo $
// =============================================================== 
    
colorPicker_default_options = {
    "r_values":"4",
    "g_values":"4",
    "b_values":"4",
    "table_rows":"8",
    "color":"rgb(255,255,0)",
    "silent":"false",
    "autook":"false",
    "title":"",
    "okbuttontext":"",
    "cancelbuttontext":""};

var curcp;
var colorPicker_selectedColor="";

function CreateColorPicker(title,colorPicker_ok,colorPicker_cancel, _colorPicker_options)
{
    curcp = new ColorPicker(title,colorPicker_ok,colorPicker_cancel, _colorPicker_options)
}    

function ColorPicker(title,colorPicker_ok,colorPicker_cancel, _colorPicker_options)
{    
    this.arr = [];
    _colorPicker_options = (!_colorPicker_options ? colorPicker_default_options:_colorPicker_options); 

    this.cpoptions = _colorPicker_options;
    var r = _colorPicker_options.r_values
    var g = _colorPicker_options.g_values
    var b = _colorPicker_options.b_values
    var table_rows = _colorPicker_options.table_rows
    this.title = title;
    this.width= "230px";
    
    this.color = (_colorPicker_options.color || colorPicker_default_options.color);
    
    this.ok = colorPicker_ok;
    this.cancle = colorPicker_cancel;
    
    this.dialog;
    this.addDialog();
    this.create_colorObjs(r, g, b);
    this.calculateNumOfCols(r, g, b, table_rows);
    this.createColorPanel(r, g, b, table_rows);
    this.assignCellBGColor(table_rows, table_cols, numOfColors);
    this.setColor();
}

ColorPicker.prototype.setColor = function(color)
{
    if(color)
        this.color = color;
    var h = this.color.replace(/#/g,'');
    if(this.color.substring(0,1)!='#')
    {
        if(this.color.substring(0,3)=='rgb')
        {
            var c = this.color.substring(4,this.color.length-1);
            var rgb = c.split(',');
            h = rgb2hex(rgb[0])+ '' +rgb2hex(rgb[1])+ '' +rgb2hex(rgb[2]);
        }
    }
    this.cell_clicked = cell_clicked(h);
}

ColorPicker.prototype.addDialog = function()
{
    this.dialog = new Dialog(this.title,colorPicker_cancel,'colorpickerdialog');
    this.dialog.setDialogWidth(this.width);
    this.dialog.setDialogTitle(this.title);
    var html = '';
    html +='<table>' +
           '  <tr>' +
           '    <td valign="top">' +
           '      <div id="colorPicker_colorPanel" class="cp" style="width:100%;"/>' +
           '    </td>' +
           '    <td valign="top">' +
           '      <table border="0" style="width:50%;">' +
           '        <tr><td>'+cbInfo.getString('standard.color.red')+'</td><td><input class="cpInput" onkeyup="colorBox_hex_update(this.id,event)" type="text" id="colorBox_r" value="" /></td></tr>' +
           '        <tr><td>'+cbInfo.getString('standard.color.green')+'</td><td><input class="cpInput" onkeyup="colorBox_hex_update(this.id,event)" type="text" id="colorBox_g" value="" /></td></tr>' +
           '        <tr><td>'+cbInfo.getString('standard.color.blue')+'</td><td><input class="cpInput" onkeyup="colorBox_hex_update(this.id,event)" type="text" id="colorBox_b" value="" /></td></tr>' +
           '        <tr>' +
           '          <td>Hex&nbsp;#</td>' +
           '          <td><input class="cpInputUppercase" onkeyup="colorBox_hex_onkeyup(this)" type="text" id="colorBox_hex" value="" /></td>' +
           '        </tr>' +
           '      </table>' +
           '    </td>' +
           '  </tr>' +
           '  <tr>' +
           '    <td><input class="cp_selectedcolor" type="text" id="colorBox_rgb" readonly /></td>' +
           '    <td align="right">' +
           '      <input type="button" class="menubutton" id="colorPicker_ok" onclick="curcp.colorPicker_ok()" value="'+this.cpoptions.okbuttontext+'" />' +
           '      <input type="button" class="menubutton" id="curcp.colorPicker_cancel" onclick="curcp.colorPicker_cancel()" value="'+this.cpoptions.cancelbuttontext+'" />' +
           '    </td>' +
           '  </tr>'; +
           '</table>';

    this.dialog.addContentHTML(html);
    this.dialog.showDialog();
    this.dialog.setDialogPosition(cbKort.mapX+220+'px', cbKort.mapY+10+'px');
}

ColorPicker.prototype.create_colorObjs = function(r_values, g_values, b_values)
{
    var i,j,k;
    for (i = 0; i < r_values; i++)
    {
        var r = getRGB(i, r_values);
        for (j = 0; j < g_values; j++)
        {
            var g = getRGB(j, g_values);
            for (k = 0; k < b_values; k++)
            {
                var b = getRGB(k, b_values);
                var rgb = new Object;
                rgb.r = r;
                rgb.g = g;
                rgb.b = b;
                this.arr.push(rgb);
            }
        }
     }
}    

ColorPicker.prototype.calculateNumOfCols = function (r_values, g_values, b_values, table_rows)
{
    // calculate number of cols  
    numOfColors = r_values*g_values*b_values;
    table_cols = 0;
    if(table_rows <= 1)
    {
        table_rows = 1;
        table_cols = numOfColors;
    }
    else if(table_rows >= numOfColors)
    {
        table_cols = 1;
    }        
    else
    {
        table_cols = (r_values*g_values*b_values)/table_rows;
        if(Math.abs(table_cols) != table_cols)
        {
            table_cols = Math.round(1+(r_values*g_values*b_values)/table_rows);
        }
    }
    return table_cols;
}        

ColorPicker.prototype.createColorPanel = function(r_values, g_values, b_values, table_rows)
{
    var i=0;
    var j=0;
    var  cell_counter =0;
    var tbl = "";
    tbl ='<table class="cpTable" border="0" id="color_tabel">';
     
    // creating all cells
    for (j = 0; j < table_rows; j++) 
    {
        tbl +='<tr>';
        for (i = 0; i < table_cols; i++)
        {
            if(cell_counter < numOfColors)
            {                  
                var r_hex = rgb2hex(this.arr[cell_counter].r);
                var g_hex = rgb2hex(this.arr[cell_counter].g);
                var b_hex = rgb2hex(this.arr[cell_counter].b);                                
                var cell_id= r_hex+g_hex+b_hex;                                                    
                tbl += '<td class="cpTD" id="'+ cell_id +'" onclick="cell_clicked(this.id)"></td>';                    
                cell_counter++;
            }
        }
        tbl +='</tr>';
    }
    tbl +='</table>';
    getElement("colorPicker_colorPanel").innerHTML=tbl;    
}      

ColorPicker.prototype.assignCellBGColor = function(table_rows, table_cols, numOfColors)
{
    // assign cell backgroundColors
    var cell_counter =0;
    var i,j;
    for (j = 0; j < table_rows; j++) 
    {
        var row = getElement("color_tabel").rows[j];
      for (i = 0; i < table_cols; i++)
        {
            if(cell_counter < numOfColors)
            {                  
                row.cells[i].style.backgroundColor = 'rgb('+this.arr[cell_counter].r +","+this.arr[cell_counter].g +","+ this.arr[cell_counter].b+')';
                cell_counter++;
            }
         }
    }
}

ColorPicker.prototype.colorPicker_ok = function()  
{
    this.color = getElement("colorBox_rgb").style.backgroundColor;
    colorPicker_selectedColor=this.color;
    this.ok(this.color);
    this.dialog.closeDialog();
    return colorPicker_selectedColor;
}

ColorPicker.prototype.colorPicker_cancel = function()      
{
    this.dialog.closeDialog();
}

function cell_clicked(colorBox_rgb)
{    
    if(!colorBox_rgb) {colorBox_rgb="000000";}
    getElement("colorBox_hex").value = colorBox_rgb;
    var colorBox_rgb_arr = hex2rgb(colorBox_rgb);
    getElement("colorBox_r").value = colorBox_rgb_arr[0];
    getElement("colorBox_g").value = colorBox_rgb_arr[1];
    getElement("colorBox_b").value = colorBox_rgb_arr[2];
    getElement("colorBox_rgb").style.backgroundColor = "#".concat(colorBox_rgb);
}

function colorBox_hex_onkeyup(colorBox_hex)
{
    colorBox_hex.value.toUpperCase();
    var colorBox_rgb =colorBox_hex.value;
    if(!colorBox_rgb) {colorBox_rgb="000000";}
    
    var colorBox_rgb_arr = hex2rgb(colorBox_rgb);
    
    // test valid RGB values before updateing
    var valid_hex_value = 1;
    for(var i=0; i < colorBox_rgb_arr.length; i++)
    {
        if(colorBox_rgb_arr[i] < 0 || colorBox_rgb_arr[i] > 255)
        {valid_hex_value ++;}
    }
    
    if(valid_hex_value == 1)
    {
        getElement("colorBox_r").value = colorBox_rgb_arr[0];
        getElement("colorBox_g").value = colorBox_rgb_arr[1];
        getElement("colorBox_b").value = colorBox_rgb_arr[2];
        getElement("colorBox_rgb").style.backgroundColor = "#"+rgb2hex(getElement("colorBox_r").value)+rgb2hex(getElement("colorBox_g").value)+rgb2hex(getElement("colorBox_b").value);
        //getElement("colorBox_rgb").style.backgroundColor =  'rgb('+ colorBox_rgb_arr[0] +","+ colorBox_rgb_arr[1] +","+ colorBox_rgb_arr[2] +')';;
    }
}
    
function colorBox_hex_update(tb_id, event)
{
    var    r = rgb2hex(getElement("colorBox_r").value);    
    var    g = rgb2hex(getElement("colorBox_g").value);    
    var    b = rgb2hex(getElement("colorBox_b").value);    
    
    
    // avoid updating when TAB
    if(event.keyCode||event.which != 9)
    {
        switch(tb_id)
        {
            case "colorBox_r":
                r = rgb2hex(getElement("colorBox_r").value);    
            break;
            case "colorBox_g":
                g = rgb2hex(getElement("colorBox_g").value);    
            break;
            case "colorBox_b":
                b = rgb2hex(getElement("colorBox_b").value);    
            break;
        }
        getElement("colorBox_hex").value= r.concat(g,b);
        getElement("colorBox_rgb").style.backgroundColor = "#"+getElement("colorBox_hex").value;
    }    
}
    
function getRGB(n, color_values)
{
    var c=0;
    var cur_color = color_values - n;    
    switch(cur_color)
    {
        case color_values:
            c = 0;
            break;    
        case 1:
            c = 255;
            break;    
        default:
            c = Math.round(255*(n/color_values));
            break;    
    }
    return c;
}

function colorPicker_cancel()      
{
    curcp = null;
}

var hexchars = "0123456789ABCDEF";
//from yahoo's color.js
//*************************************************     
function rgb2hex(n)
{
    n = n || 0;
    n = parseInt(n, 10);
    if (isNaN(n)) n = 0;
    n = Math.round(Math.min(Math.max(0, n), 255));
    return hexchars.charAt((n - n % 16) / 16) + hexchars.charAt(n % 16);
}

function toDec(hexchar) 
{
    return hexchars.indexOf(hexchar.toUpperCase())
}
           
function hex2rgb(str) { 
    var rgb = [];
    rgb[0] = (toDec(str.substr(0, 1)) * 16) + toDec(str.substr(1, 1));
    rgb[1] = (toDec(str.substr(2, 1)) * 16) + toDec(str.substr(3, 1));
    rgb[2] = (toDec(str.substr(4, 1)) * 16) + toDec(str.substr(5, 1));
    return rgb;
}
//***************************************************