function range_hl_on(col)
{
    $(col + '_1').addClassName('highlight');
    $(col + '_2').addClassName('highlight');
    $(col + '_3').addClassName('highlight');
}


function range_hl_off(col)
{
    $(col + '_1').removeClassName('highlight');
    $(col + '_2').removeClassName('highlight');
    $(col + '_3').removeClassName('highlight');
}

function selectColumn(col)
{
  $$('#colour-navigator .selected').each(function(cell) { cell.removeClassName('selected') });

    $(col + '_1').addClassName('selected');
    $(col + '_2').addClassName('selected');
    $(col + '_3').addClassName('selected');
}


function updateArrow(arrowClass, hsb) {
    var arrow = $$(".palette-cells-block ." + arrowClass)[0];
    if (hsb != "blank") {
        arrow.onclick = function() {set_colour(hsb); return false};
        arrow.style.display = "";
    } else {
        arrow.onclick = function() {return false};
        arrow.style.display = "none";
    }
}


function updatePaletteCell(r, c, product) {
    var cellId = "cell_" + r + "_" + c;
    if (product != "blank") {
        $(cellId).hsb = product.hsb;
        $$("#" + cellId + " .colour_box")[0].style.backgroundColor = "#" + product.rgb;
        // $$("#" + cellId + " .paint_name")[0].innerHTML = product.name + " H" + product.hsb.hue + " S" + product.hsb.saturation + " B" + product.hsb.brightness;

        $$("#" + cellId + " .paint_name")[0].innerHTML = product.name;
        $$("#" + cellId + " .colour_box img")[0].alt = product.name;
        $$("#" + cellId + " .brand_name")[0].innerHTML = product.manufacturer.replace(' and ', ' & ');
        $$("#" + cellId + " .colour_box a")[0].onclick = function() {setPaint(product.id); return false};
        $$("#" + cellId + " .selected-paint-icon")[0].id = 'selected_' + cleanUpForId(product.name + product.manufacturer); // use name + manufacturer combo rather than id - works when changing finish
    } else {
        $(cellId).hsb = hex_to_hsb("ffffff");
        $$("#" + cellId + " .colour_box")[0].style.backgroundColor = "#ffffff";
        $$("#" + cellId + " .paint_name")[0].innerHTML = "";
        $$("#" + cellId + " .brand_name")[0].innerHTML = "";
        $$("#" + cellId + " .colour_box img")[0].alt = "";
        $$("#" + cellId + " .colour_box a")[0].onclick = function() {return false};
        $$("#" + cellId + " .selected-paint-icon")[0].id = '';
    }
}


/**
 * Set the centre colour cell to the closest paint product to the
 * specified colour.  The surrounding cells are set to the closest
 * paint products to surrounding colours in the HSB space. See
 * lib/ajax/colour_picker_set_colour_data.php for the exact colours.
 *
 * The colour navigation arrows are also updated.
 *
 * @param object hsbColour The HSB colour value as {hue:, saturation:, brightness:}
 */
function set_colour(hsbColour)
{
    function parse_response(transport)
    {
        var response = transport.responseText;
        var colourData = eval("(" + response + ")");
        for (var r = 0; r < 3; r++) {
            for (var c = 0; c < 3; c++) {
                updatePaletteCell(r, c, colourData.grid[r][c]);
            }
        }

        updateArrow("arrow-up",    colourData.arrows.up);
        updateArrow("arrow-left",  colourData.arrows.left);
        updateArrow("arrow-right", colourData.arrows.right);
        updateArrow("arrow-down",  colourData.arrows.down);

        setPaint(colourData.grid[1][1].id);

        selectColumn('col_' + colourData.rangeId);
    }

    var applicationId = $("application").value;

    new Ajax.Request(
        "/lib/ajax/colour_picker_set_colour_data.php",
        {
            method: "get",
            parameters: "hue=" + hsbColour.hue  + "&saturation=" + hsbColour.saturation + "&brightness=" + hsbColour.brightness + "&applicationId=" + applicationId,
            onSuccess: parse_response
        }
    );
}

function updateColourChip(r, c, chip)
{
    var cellId = 'col_' + c + '_' + (r + 1);
    $(cellId).setStyle({'backgroundColor': '#' + chip.rgb});
    $$('#' + cellId + ' a')[0].onclick = function() { 
        set_colour(chip.hsb);
        return false;
    };
}

function updateColourNavigator() {
    function parseResponse(transport)
    {
        var response = transport.responseText;
        var colourChips = eval("(" + response + ")");

        colourChips.each(function(row, r) {
            row.each(function(chip, c) {
                updateColourChip(r, c, chip);
            })
        });

    }

    var applicationId = $("application").value;

    new Ajax.Request(
        "/lib/ajax/colour_navigator_data.php",
        {
            method: "get",
            parameters: "applicationId=" + applicationId,
            onSuccess: parseResponse
        }
    );

    set_colour($("cell_1_1").hsb);
}