if (! Photon ){ var Photon = {}; }

Photon.ColorPallet = Class.create();
Photon.ColorPallet.prototype = {
    initialize : function(pallet_id) {
        this.pallet_id  = pallet_id || 'ColorPallet';
        this.col        = 9;
        this.colors     = [
            'ff6600','ff323e','cd0000','ff32ff','990099','964bff','0041e4','ffffff','999999',
            '3273ff','00a46d','32d69f','00723b','a3cd00','d5ff00','cd7400','ffff00','000000'
        ];
    },
    showPallet : function(node_id) {
        div = document.createElement('div');
        div.id = this.pallet_id;
        var pallet = '<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n';
        i = 0;
        this.colors.each(function(color){
            if ((i + 1) % this.col == 1) {
                 pallet += '<tr>\n';
            }
            pallet += '<td><img src="/img/search/' + color + '.gif" width="15" height="12" border="0" onclick="changeColor(\'' + node_id + '\',\'' + color + '\');" id="' + node_id + '_' + color + '" /></td>\n';
            if ((i + 1) % this.col == 0) {
                pallet += '</tr>\n';
            }
            i++;
        }.bind(this));
        pallet += '</table>\n';
        div.innerHTML = pallet;
        var node = $(node_id).parentNode;
        node.appendChild(div);

        if ($(node_id) && $(node_id).value) {
            $(node_id + '_' + $(node_id).value).src = '/img/search/' + $(node_id).value + '_f2.gif';
            pallets[node_id] = $(node_id).value;
         }
	 this.node_id = node_id;
    },
    clear: function() {
        this.colors.each(function(color) {
	    $(this.node_id + '_' + color).src = '/img/search/' + color + '.gif';
	}.bind(this) );
        $(this.node_id).value = '';
    }
}

pallet = new Photon.ColorPallet();

var pallets = $H();
function changeColor(node_id, color) {
    var prev_color = pallets[node_id];
    if (prev_color) {
        if ( (prev_color == color) && ($(node_id).value != '') ) {
            $(node_id + '_' + color).src = '/img/search/' + color + '.gif';
            $(node_id).value = '';
        } else {
            $(node_id + '_' + prev_color).src = '/img/search/' + prev_color + '.gif';
            $(node_id + '_' + color).src = '/img/search/' + color + '_f2.gif';
            $(node_id).value = color;
        }
    } else {
        $(node_id + '_' + color).src = '/img/search/' + color + '_f2.gif';
        $(node_id).value = color;
    }
    pallets[node_id] = color;
}