/***************** Begin ComboBox *****************/
var ComboBox = Class.create();
ComboBox.OBJECTS = new Hash();
ComboBox.SPAN_PADDING_DEFAULT = Prototype.Browser.IE ? 21 : 31;
ComboBox.SELECTED_ITEM_DOWN_ARROW_CHAR = ' <small>&#9660;</small>';

//
// clicking outside a combobox should close it ;
//   the next little bit of js handles that
//
ComboBox.openDropDown = null;
ComboBox.closeDropDown = function(ev) {
    var el = Event.element(ev);
    if (!el.up('.cbx') && ComboBox.openDropDown) {
        ComboBox.openDropDown.closeDropDown();
        ComboBox.openDropDown = null;
    }
};
Event.observe(window, "load", function() {
    // Event.observe(document.body, "click", ComboBox.closeDropDown);
    document.observe("click", ComboBox.closeDropDown);
    document.observe("keypress", function(ev) {
        if (Event.KEY_ESC != ev.keyCode) return;
        ComboBox.closeDropDown(ev);
    });
});
Object.extend(ComboBox.prototype, {
    initialize: function(id, params) {
        this.cbx = $(id);
        this.choice = this.cbx.down('.cbx-choice');
        this.form_field = this.cbx.down('input');
        this.dropdown = this.cbx.down('.cbx-options');
        this.options = this.dropdown.select('li');
        this.spanTags = params.spanTags || false;
        this.spanWidth = false;
        this.downArrowCharEnabled = params.downArrowCharEnabled || this.cbx.hasClassName("cbx-link");
        ComboBox.OBJECTS.set(id, this);
        if (this.options.length > 13) this.cbx.addClassName('overflowed');
        this.value = this.getValue();
        this.onchangetxt = params.onchange || "";
        this.onchange = function() {
            if (typeof (params.onchange) !== "undefined") {
                if (typeof (params.onchange) == "function")
                    params.onchange(this);
                else if (typeof (params.onchange) == "string")
                    eval(params.onchange) || "";
            }
        };
        var delay = 0;
        delay = setInterval(function() {
            clearInterval(delay);
            this.domSensitiveInit();
        } .bind(this), 500);

        //alert("before autosize: cbx width=="+this.cbx.getWidth()+"\r\nchoice width=="+this.choice.getWidth());        
        if (params.autosize || params.autosize_opts || params.autosize_span) {
            maxchars = 0;
            this.options.each(function(li) {
                if (li.innerHTML.strip().length > maxchars) maxchars = li.innerHTML.strip().length;
            });
            var width = 5 * (maxchars + 5) + 25;
            if ((params.maxsize || 0) > 0) width = Math.min(width, params.maxsize);
            width = parseInt(Math.ceil(width));
            if (params.autosize || params.autosize_span) {
                this.cbx.setStyle({ width: width + 'px' });
                if (params.autosize_span) {
                    this.spanWidth = width - ComboBox.SPAN_PADDING_DEFAULT;
                    if (this.spanWidth <= ComboBox.SPAN_PADDING)
                        this.spanWidth = width;
                    this.choice.down('span').setStyle({ width: this.spanWidth + 'px' });
                }
            }
            else if (params.autosize_opts && width > this.cbx.getWidth()) this.dropdown.setStyle({
                width: parseInt(width) + 'px'
            });

            // alert("after autosize: cbx width=="+this.cbx.getWidth()+"\r\nchoice width=="+this.choice.getWidth());
        }
        else {
            var width = this.cbx.style.width;
            if (typeof (width) == "undefined")
                width = params.width || 0;

            width = parseInt(width);
            if (width > 0 && this.spanTags) {
                this.spanWidth = width - ComboBox.SPAN_PADDING_DEFAULT;
                if (this.spanWidth <= ComboBox.SPAN_PADDING)
                    this.spanWidth = width;
                this.choice.down('span').setStyle({ width: this.spanWidth + 'px' });
            }
        }
        if (params.parent) {
            this.parent = params.parent;
        }
    },
    domSensitiveInit: function() {
        Event.observe(this.choice, "click", this.toggleDropDown.bindAsEventListener(this));
        //Event.observe(this.choice, "mouseover", this.choiceHover.bindAsEventListener(this));
        //Event.observe(this.choice, "mouseout", this.choiceHover.bindAsEventListener(this));
        this.options.each(function(li) {
            li.removeClassName('cbxhover');
            li.removeClassName('selected-hover');
            Event.observe(li, "click", this.setValue.bindAsEventListener(this));
            Event.observe(li, "mouseover", this.optionHover.bindAsEventListener(this));
            Event.observe(li, "mouseout", this.optionHover.bindAsEventListener(this));
        } .bind(this));
        this.cbx.addClassName('zIndex10');
        this.choice.innerHTML = this.choice.innerHTML; // +(this.downArrowCharEnabled ? ComboBox.SELECTED_ITEM_DOWN_ARROW_CHAR : "");
        this.cbx.removeClassName('zIndex10');
    },
    setValue: function(ev) {
        var el = Event.element(ev);
        this.form_field.value = this.readValueAttribute(el);
        this.value = this.getValue();
        if (this.spanTags)
            this.choice.innerHTML = "<span" + (this.spanWidth ? " style='width:" + this.spanWidth + "px;' " : '') + ">" + el.innerHTML.strip() + "</span>";
        else
            this.choice.innerHTML = el.innerHTML.strip() + (this.downArrowCharEnabled ? ComboBox.SELECTED_ITEM_DOWN_ARROW_CHAR : "");
        this.options.each(function(li) {
            li.removeClassName("selected");
        });
        el.addClassName("selected").addClassName('selected-hover');
        this.toggleDropDown();
        this.onchange();
    },
    changeValue: function(value) {
        this.options.each(function(li) {
            li.removeClassName("selected");
            if (this.readValueAttribute(li) == value) {
                li.addClassName("selected");
                if (this.spanTags)
                    this.choice.innerHTML = "<span" + (this.spanWidth ? " style='width:" + this.spanWidth + "px;' " : '') + ">" + li.innerHTML.strip() + "</span>";
                else
                    this.choice.innerHTML = li.innerHTML.strip() + (this.downArrowCharEnabled ? ComboBox.SELECTED_ITEM_DOWN_ARROW_CHAR : "");
                this.form_field.value = this.readValueAttribute(li);
                this.value = this.getValue();
            }
        } .bind(this));
    },
    getValue: function() {
        return this.form_field.value;
    },
    readValueAttribute: function(el) {
        if (el.readAttribute("value") && el.readAttribute("value") != "|") return el.readAttribute("value");
        return "";
    },
    optionHover: function(ev) {
        var el = Event.element(ev);
        el.toggleClassName('cbxhover');
        if (el.hasClassName('selected')) el.toggleClassName('selected-hover');
    },
    //choiceHover: function(ev) {
    //    if (!this.disabled()) Event.element(ev).toggleClassName('cbx-hover');
    //},
    toggleDropDown: function() {
        if (this.disabled()) return false;
        if (this != ComboBox.openDropDown && ComboBox.openDropDown != null && ComboBox.openDropDown.visible()) ComboBox.openDropDown.closeDropDown();
        if (this.visible()) this.closeDropDown();
        else {
            this.cbx.addClassName('zIndex10');
            this.dropdown.show();
            ComboBox.openDropDown = this;
        }
    },
    closeDropDown: function() {
        if (this.visible()) {
            this.dropdown.hide();
            this.cbx.removeClassName('zIndex10');
            ComboBox.openDropDown = null;
        }
    },
    visible: function() {
        return this.dropdown.visible();
    },
    disabled: function() {
        return this.cbx.hasClassName('disabled') || this.cbx.hasClassName('btn-s-disabled');
    }
});
/***************** End ComboBox *****************/