// GLIG - color picker
//
// Nice little JavaScript color picker that generates the HTML code
// instantly. Responsive and easy on the bandwidth.

//==============================================================
// Color Picker :: glig.ui.color_picker
//==============================================================

var glig             = (glig ? glig : function() {});
glig.ui              = (glig.ui ? glig.ui : function() {});
glig.ui.color_picker = (glig.ui.color_picker ? glig.ui.color_picker : function() {});

glig.ui.color_picker.draw = function(panel, textarea_id, action_function)
{
    var matrix =
    [
        "fff", "eee", "ddd", "ccc", "999", "666", "000",
        "fee", "fcc", "f66", "f00", "c00", "900", "600",
        "fec", "fc9", "f96", "f90", "f60", "c60", "930",
        "ffa", "fe9", "fd6", "fc6", "fc0", "c93", "960",
        "ffe", "ffc", "ff3", "ff0", "cc0", "990", "660",
        "cfc", "9f9", "6f9", "3f3", "3c0", "090", "060",
        "cff", "9ff", "3ff", "6cc", "0cc", "399", "066",
        "cef", "9cf", "3cf", "06f", "03c", "039", "033",
        "eef", "ccf", "99f", "66c", "63c", "60c", "309",
        "fef", "fcf", "f9f", "c6c", "c3c", "939", "606",
    ];

    str  = "";
    str += "<div class=matrix>";

    for(row = 0; row < 10; ++row)
    {
        for(col = 0; col < 7; ++col)
        {
            var color = "#" + matrix[row * 7 + col];
            color = glig.ui.color_picker.translate_hex(color);
            var js = action_function + "('" + textarea_id + "', '" + color + "')";

            str += "<div class=color style='background-color: " + color + "' onClick=\"" +js + "\" onMouseOver=\"glig.ui.color_picker.update_color('" + color + "')\">";
            str += "</div>";
        }

        str += "<div class=clear></div>";
    }

    str += "</div>";

    str += "<div class=details>";
    str += "<form>";
    str += "<input type=text name=hex class=hex>";
    str += "</form>";
    str += "<span class=sample>sample</span>";
    str += "</div>";

    str += "<div class=clear></div>";

    panel.innerHTML = str;
}

glig.ui.color_picker.translate_hex = function(color)
{
    if(color.length == 4)
    {
        c = "#";

        for(var i = 1; i < color.length; ++i)
            c += color.charAt(i) + color.charAt(i);

        color = c;
    }

    return color;
}

glig.ui.color_picker.update_color = function(color)
{
    var widget = glig.getFirstElementByClass("color_picker_widget", "div");
    var sample = glig.getFirstElementByClass("sample", "span", widget);
    var hex = glig.getFirstElementByClass("hex", "input", widget);

    color = glig.ui.color_picker.translate_hex(color);

    if(sample)
        sample.style.color = color;

    if(hex)
        hex.value = color;
}