var MAX_SELECTED_COLORS = 3;

/*var width = 18;
var height = 12;*/
var width = 12;
var height = 1;
var selectedColors = new Array();
var colorTable = new Array(
        "ff0000",
        "ff7f00",
        "ffff00",
        "00ff00",
        "00ffff",
        "0000ff",
        "ee82ee",
        "8b00ff",
        "964b00",
        "808080",
        "ffffff",
        "000000"
        );
function invertColor(i) {
    //fix against Shtirlitz effect
    if (colorTable[i] == "808080") {
        return "ffffff";
    }

    var color = 0;
    var inv = "";

    color = parseInt(colorTable[i], 16);
    color = ~color & 0xFFFFFF;
    inv = color.toString(16);

    var s = inv.length;

    switch (s) {
        case 1 : inv += "00000"; break;
        case 2 : inv += "0000"; break;
        case 3 : inv += "000"; break;
        case 4 : inv += "00"; break;
        case 5 : inv += "0"; break;
    }

    return inv;
}

function drawTable() {
    drawSelectedColors();

    var divColorSelect = document.getElementById("colorSelectorDiv");
    var s = "";
    var i = 0;
    for (var h = 0; h < height; h++) {
        for (var w = 0; w < width; w++) {
            i = w * height + h;
            s += "<a class='color_item' onclick='colorClick(" + i + ")' id='color_" + i + "' style='background:#" + colorTable[i] + "'><span class='color_item_inner'>";
            if (isSelectedColorsContains(i) == -1) {
                s += "&nbsp;";
            } else {
                s += "<img src='/images/cross.gif' alt='X'/>";
            }
            s += "</span></a>";
        }
    }
    s += "";
    divColorSelect.innerHTML = s;
}

function isSelectedColorsContains(i) {
    for (var j = 0; j < selectedColors.length; j++) {
        if (selectedColors[j] == i) {
            return j;
        }
    }
    return -1;
}

function colorClick(i) {
    var pos = isSelectedColorsContains(i);
    if (pos != -1) {
        selectedColors.splice(pos, 1);
    } else {
        if (selectedColors.length < MAX_SELECTED_COLORS) {
            selectedColors.push(i);
        } else {
            alert("Cannot select more than " + MAX_SELECTED_COLORS + " colors");
        }
    }
    drawTable();
}

function drawSelectedColors() {

    var searchColorsString = "";
    var selectedColorsDiv = document.getElementById("selectedColorsDiv");
    var s = "";

    if (selectedColors.length > 0) {
        s = "";
        for (var i = 0; i < selectedColors.length; i++) {
            searchColorsString += colorTable[selectedColors[i]];
            if (i < selectedColors.length - 1) {
                searchColorsString += ",";
            }
            s += "<a class='color_item' style='background:#" + colorTable[selectedColors[i]] + "'><span class='color_item_inner'>&nbsp;</span></a>";
        }
    }

    selectedColorsDiv.innerHTML = s;

    //set hidden return param:
    var searchColorsParam = document.getElementById("searchColors");
    searchColorsParam.value = searchColorsString;
}

function flipColorSelector() {

    Effect.toggle('colorSelectorDiv', 'appear', {
        afterUpdate: function() {
            fix_height_for_ie6("blockSearchAdvanced");
        }
    });
    Effect.toggle('color_selector_table', 'appear', {
        afterUpdate: function() {
            fix_height_for_ie6("blockSearchAdvanced");
        },
        afterFinish: function() {
            fix_height_for_ie6("blockSearchAdvanced");
        },
        duration:0.5
    });
    var open = $$("#color_select .open")[0]
    var close = $$("#color_select .close")[0]
     
    open.toggle()
    close.toggle()

}

function findColor(color) {
    for (var i = 0; i < colorTable.length; i++) {
        if (colorTable[i] == color) {
            return i;
        }
    }
    return -1;
}

function initSelectedColors(searchColorsString) {
    if (searchColorsString && searchColorsString.length > 0) {
        var tmp = searchColorsString.split(",");
        selectedColors = new Array();
        for (var i = 0; i < tmp.length && i < MAX_SELECTED_COLORS; i++) {
            var index = findColor(tmp[i]);
            if (index > -1) {
                selectedColors.push(index);
            }
        }
    }
}