// A javascript based color-chooser.
// 
// Created: 31.07.2008
// 
// (c) 2008 ServiceHome
// 
// Web : http://www.servicehome.net
// Mail: info@servicehome.net
// 
// based on: 
//  - Prototype 1.6.0.2 (http://www.prototypejs.org/)
////////////////////////////////////////////////////////////////////////////////

/**
 * The color-chooser.
 */
var SH_ColorChooser = Class.create({
    
    /**
     * Create a new colorchooser.
     */
    initialize: function(main_container_id) {
        this.main_container_id = main_container_id;
        
        this.color_sets = new Hash();
        this.COLORSET_CONTAINER_CLASS = 'color_container';
        this.COLORSET_ELEMENT_CLASS = 'color_element';
        
        this.COLORSET_ELEMENT_HEIGHT = 15;
        
        this.COLORSET_MAX_COLS = 4;
        
        this.COLORCHOOSER_CHANGE_FUNC = 'sh_set_changed';
        this.COLORCHOOSER_NAME = 'myname';
        
        this.COLOR_CHANGED = 'sh_color_changed';
        
        this.color_changed_listener = new Array();
    },
    
    registerColorChangedListener: function (listener) {
        this.color_changed_listener.push(listener);  
    },
    
    fireColorChangedEvent: function (new_color_code) {
        for (var i=0,max = this.color_changed_listener.size(); i < max; i++) {
            var listener = this.color_changed_listener[i];
            listener(new_color_code);
        }
    },
    
    addNewColorSet: function (color_set) {
        this.color_sets.set(color_set.getName(), color_set);
    },
    
    removeAllColorSets: function () {
        this.color_sets = new Hash();
    },
    
    _getColorSetByName: function (color_set_name) {
        var colorset = this.color_sets.get(color_set_name);
        return(colorset);
    },
    
    displayColorSetByName: function (color_set_name) {
        this.color_sets.each(function (item) {
            var colorset = item.value;
            var colorset_name = item.key;
            var visibility = '';
            if (colorset.getName() == color_set_name) {
                visibility = 'block';
            } else {
                visibility = 'none';
            } 
            $(colorset_name).style.display = visibility;
        });
    },
    
    createHTML: function () {
        var html_output = '';
        
        var keys = this.color_sets.keys();
        var max_keys = keys.size();
        for (var i=0; i < max_keys; i++) {
            var colorset = this.color_sets.get(keys[i]);
            var colors = colorset.getColorsArray();
            var max_colors = colors.size();
            var max_rows = Math.ceil(max_colors / this.COLORSET_MAX_COLS);
            var container_height = this.COLORSET_ELEMENT_HEIGHT * max_rows + (4 * max_rows); // 2 pixel padding oben und unten
            var display = "display: none;"; // display: none;

            html_output += '<div id="' + colorset.getName() + '" style="clear: both; '+display+' height: '+container_height+'px;" class="'+this.COLORSET_CONTAINER_CLASS+'">';
            for (var innercounter = 0; innercounter < max_colors; innercounter++) {
                var color = colors[innercounter].toUpperCase();
                
                var line_break = innercounter % this.COLORSET_MAX_COLS;
                var break_line = (line_break == 0) ? true : false;
                if (break_line) {
                    html_output += '<div style="clear: both; height: 0px;"></div>';
                }

                html_output += '<div id="'+colorset.getName()+'_'+color+'" class="'+this.COLORSET_ELEMENT_CLASS+'" style="background-color: #'+color+';" title="#'+color+'" onclick="'+this.COLOR_CHANGED+'(\''+color+'\');"></div>';
            }
            html_output += '</div>';
        }
        return(html_output);
    },
    
    createChooserElement: function () {
        var html_output = '';
        
        html_output += '<select id="'+this.COLORCHOOSER_NAME+'" onchange="'+this.COLORCHOOSER_CHANGE_FUNC+'();">';
        this.color_sets.each(function (item) {
            var colorset = item.value;
            html_output += '<option value="'+colorset.getName()+'">'+colorset.getName()+'</option>';
        });
            
        html_output += '</select>';
        return(html_output);
    }
});


/**
 * A Set of colors.
 */
var SH_ColorSet = Class.create ({
    
    /**
     * Create a new color-set.
     * 
     * @param name the name of the colorset. 
     *        This name can be used in a drop-down field to let 
     *        the user select a set.
     * @param color_codes_array an array over the colorcodes.
     *        e.g. #FF0000 for the color red
     *        $colors[]
     */
    initialize: function(name, color_codes_array) {
        this.name = name;
        this.color_codes = color_codes_array;
    },
    
    getName: function () {
        return(this.name);
    },
    
    getColorsArray: function () {
        return(this.color_codes);
    }
});