//from R,G,B in 0..255 to H in 0..359 and S,L in 0..100
function RGBtoHSL(rgb)
{
    var r = rgb[0] / 255;
    var g = rgb[1] / 255;
    var b = rgb[2] / 255;
    var min = Math.min(r, g, b);
    var max = Math.max(r, g, b);
    
    var hue = 0;
    var sat = 0;
    var lit = 50 * (min+max);
    
    if (max > min)
    {
        if (lit < 50)
        {
            sat = 100 * (max-min) / (max+min)
        }
        else
        {
            sat = 100 * (max-min) / (2-max-min)
        }

        if (r == max)
        {
            hue = 60 * (g-b) / (max-min)
        }
        else if (g == max)
        {
            hue = 120 + 60 * (b-r) / (max-min)
        }
        else
        {
            hue = 240 + 60 * (r-g) / (max-min)
        }

        if (hue < 0)
        {
            hue = hue + 360
        }
    }

    return [Math.round(hue),Math.round(sat),Math.round(lit)]
}

//Helper function for HSLtoRGB
function fromTC(p, q, tc)
{
    if (tc < 0 || tc > 1)
    {
        //alert("tc: " + tc)
    }
    var c;
    if (tc < 1/6)
    {
        c = p + ((q-p) * 6 * tc);
    }
    else if (tc < 1/2)
    {
        c = q;
    }
    else if (tc < 2/3)
    {
        c = p + ((q-p) * 6 * (2/3 - tc))
    }
    else
    {
        c = p
    }
    
    if (c < 0 || c > 1)
    {
        //alert("tc: " + tc + "  c: " + c)
    }
    
    return Math.round(c * 255)
}

//from H in 0..359 and S,L in 0..100 to R,G,B in 0..255
function HSLtoRGB(hsl)
{
    var hue = hsl[0] / 360;
    var sat = hsl[1] / 100;
    var lit = hsl[2] / 100;
    
    var q;
    if (lit < 0.5)
    {
        q = lit*(1+sat);
    }
    else
    {
        q = lit + sat - lit*sat;
    }
    
    var p = 2*lit - q
    
    var tr = hue + 1/3;
    var tg = hue;
    var tb = hue - 1/3;
    
    if (tr > 1)
    {
        tr = tr - 1;
    }
    
    if (tb < 0)
    {
        tb = tb + 1;
    }
    
    return [fromTC(p,q,tr), fromTC(p,q,tg), fromTC(p,q,tb)]
}

function setColor(h, s, l)
{
    $("#hue").val(h);
    $("#sat").val(s);
    $("#lit").val(l);

    updateColorPreview();
}

function setColorSpeed(h, s, l)
{
    $("#hue_speed").val(h);
    $("#sat_speed").val(s);
    $("#lit_speed").val(l);
}

function updateComponent(ctrl)
{
    var valueElement = ctrl.find(".value");
    var value = Number(valueElement.val());
    var speedElement = ctrl.find(".speed");
    var speed = Number(speedElement.val());
    var wrap = ctrl.find(".wrap").val();
    var maxVal = Number(ctrl.attr("maxValue"));
    
    value = value + speed;
    if (wrap == "wrap")
    {
        value = value % maxVal;
        if (value < 0)
        {
            value = value + maxVal;
        }
    }
    else if (wrap == "bounce")
    {
        if (value < 0)
        {
            value = 0;
            speedElement.val(Math.abs(speed));
        }
        else if (value > maxVal)
        {
            value = maxVal;
            speedElement.val(-Math.abs(speed));
        }
    }
    else // "stick"
    {
        if (value < 0)
        {
            value = 0;
        }
        else if (value > maxVal)
        {
            value = maxVal;
        }
    }
    valueElement.val(value);
}

function updateColorPreview()
{
    var hue = $("#hue").val();
    var sat = $("#sat").val();
    var lit = $("#lit").val();
    
    var rgb = HSLtoRGB([hue,sat,lit]);
    $("#color_preview").css("background-color", "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")");
}

function updateColor(context)
{
    var hue = $("#hue_controls");
    var sat = $("#sat_controls");
    var lit = $("#lit_controls");
    var alpha = $("#alpha_controls");
    
    var ctrls = [hue, sat, lit, alpha]
    var hsla = [];
    
    for (var i = 0; i < ctrls.length; i++)
    {
        ctrl = ctrls[i]
        updateComponent(ctrl);
        var jitter = Number(ctrl.find(".jitter").val());
        var value = Number(ctrl.find(".value").val());
        var wrap = ctrl.find(".wrap").val();
        var maxVal = Number(ctrl.attr("maxValue"));
        
        value = Math.floor((Math.random() - 0.5) * 2 * jitter) + value;
        if (wrap == "wrap")
        {
            value = value % maxVal;
            value = value < 0 ? value + maxVal : value;
        }
        else
        {
            value = Math.max(0, Math.min(maxVal, value));
        }
        hsla[i] = value;
    }
    
    updateColorPreview();
    
    rgb = HSLtoRGB(hsla);
    context.strokeStyle = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")";
    context.fillStyle = workingContext.strokeStyle;
    
    context.globalAlpha = hsla[3] / 100;
}

function createColorLink(hue, sat, lit)
{
    rgb = HSLtoRGB([hue,sat,lit]);
    $("#color_links").append('<li><a href="javascript:setColor(' +
    hue+', '+sat+', '+lit+')"><img src="/static/ks/img/transparent.png" height="25" width="25"' + 
    ' style="background: rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')"></a></li>');
}

function saveColor()
{
    var hue = $("#hue").val();
    var sat = $("#sat").val();
    var lit = $("#lit").val();

    createColorLink(hue, sat, lit);
}