/*
SelectBox object
Drop in replacement for native html select and option tags

This is pre-Generic code modified to work as a behavior.  It needs some cleaning and simplification.
*/


var BehaviorSelectBox = GenericBehavior.create('BehaviorSelectBox', {
    SelectBox_seq: 0,
        
	onAttach: function(event, elem, args) {
		this.tellSuper('onAttach', event, elem, args);
        this.snapshot();
        this.addToSet(args.set);
                
        var id = this._id = this.e.id;
        var elem = this._elem = this.e;
        
        this.name = args.name || elem.name;
        this.fieldid = args.fieldid;

        this.onchange = args.onchange;
        
        this._seqnum = this.SelectBox_seq++;
        this._iswinie = document.all ? true : false;
        
        this.options = args.options;
        
        this.maxlength = this.args.maxlength || 5;
        
        this._build();
        
        return true;
    },
    onDraw: function(evt) {
        this.setOptions(this.options);
        this._elem.visibility = 'visible';
        if (!this.args.delay_items_draw) {
            this._finish_draw();
        }        
    },
    

    doupdate: function() {
        this.setSelectedIndex(this.selectedIndex);
    },

    _build: function() {
 
        var elem_dims = EL.getDimensions(this._elem);
    
        var parent = document.createElement('div');
        var all = new Object();
 
        var brow_class = this._iswinie ? 'ie' : 'moz';
        parent.innerHTML = '<div id="holder" class="selectbox_holder"><input id="field" type="hidden" name="" value=""><div id="control" class="selectbox_control"><div id="arrow" class="selectbox_control_arrow '+brow_class+'"></div><div id="value" class="selectbox_control_value"></div></div>'
        + (this._iswinie ? '' : '<br clear="all">') + 
        '<div id="menuholder" class="selectbox_menuholder"><div id="menu" class="selectbox_menu"><div id="item" class="selectbox_menu_item"></div></div></div></div>';
        
        EL.eachChild(parent, function(child) {
           all[child.id] = child;
        });
        
        // keep track of ids so we can find element again
        var ids = this._ids = new Object();
        var seq = this._seqnum;
        
        for (var name in all) {
            all[name].id = ids[name] = 'SelectBox_'+seq+'_'+name;
        }
        
        all.field.name = this.name;
        all.field.id = this.fieldid;
        all.menu.style.display = 'none';
    
        this._elem.appendChild(parent);
    
        all.control.style.width = this._elem.style.width;
        //all.control.style.height = EL.getDimensions(this._elem).height + 'px';
        //all.value.style.width = (elem_dims.width - 28) + 'px';
        //this._value_width = (elem_dims.width - 10) + 'px';
        //all.value.style.clip = 'rect(0,'+this._value_width+', auto, 0)';
        
        all.menu.onmousedown = all.menu.onselectstart = function() { return false; }
        this._holder_onmousedown = all.control.onselectstart = function() { return false; }
        all.holder.onmousedown = this._holder_onmousedown;
        this._holder_onclick = this._menu_control_onclick(this);
        all.holder.onclick = this._holder_onclick;
        
        this._all = all;
        
        // Attach menu options builder
        var me = this;
        this.menu_looper = el(this._all.menu).addBehavior(BehaviorLooper, {
            data: new Array(),
            repeat: el(this._all.item),
            action: function (a) {
                var item = a.node;
                var option = a.value;
                var index = a.index;
                option.value = option.VALUE;
                item.innerHTML = option.LABEL;
                item.onmouseover = me._menu_item_onmouseover(me);
                item.onmouseout = me._menu_item_onmouseout(me);
                item.onclick = me._menu_item_onclick(me, index);
                me._menuItems[index] = item;
            }
        });
    },
    _finish_draw: function() {
        var me = this;
        if (!me._menu_drawn) {
            me.menu_looper.onDraw({});
    
            // make menu displayable again, and explicity set size
            me._all.menu.style.width = 'auto';
            var menu_dims = EL.getDimensions(me._all.menu);
            var elem_dims = EL.getDimensions(me._all.value);
            me._menuwidth = menu_dims.width > elem_dims.width ?
                menu_dims.width : elem_dims.width;
            me._menuheight = menu_dims.height;
        
            me._all.menu.style.display = 'none';
            me._all.menuholder.style.overflow = 'visible';
            
            me._all.menu.style.width = me._menuwidth + 'px';
            me._all.menu.style.height = me._menuheight + 'px';
            
            if (me.options.length > me.maxlength) {
                me._all.menu.style.height = '65px';
                if (me._menuwidth > 2) {
                    me._all.menu.style.width = (me._menuwidth+24)+'px';
                }
                me._all.menu.style.overflow = 'auto';
            }
            
            me._menu_drawn = 1;
        }        
    },
    setOptions: function(options) {
        this.options = options;
        var me = this;
        this._menuItems = new Array();
        
        // trick to get browser to render the menu invisbly so we can grab its size
        //this._all.menuholder.style.overflow = 'hidden';
        //this._all.menuholder.style.height = '0px';
        //this._all.menu.style.display = 'block';
        
        this.menu_looper.args.data = options;

        this.selectedIndex = this.options.indexWhen(function(item) {
            return (item.SELECTED == 1);
        });
        if (this.selectedIndex < 0) { this.selectedIndex = 0; }
        
        this.setSelectedIndex(this.selectedIndex);
        
    },

    setSelectedIndex: function(index) {
        var option = this._selectedOption = this.options[index];
        this.selectedIndex = index;
        
        this._all.value.innerHTML = option.LABEL;
        //this._all.value.style.clip = 'rect(0,'+this._value_width+', auto, 0)';
        this.value = this._all.field.value = option.VALUE;
        this.e.value = this.value;
    },
    
    selectedOption: function() {
        return this._selectedOption;
    },
    
    setSelectedValue: function(value) {
        for (var i=0; i < this.options.length; i++) {
            if (this.options[i].VALUE == value) {
                this.setSelectedIndex(i);
            }
        }
    },
    
    closeMenu: function() {
        var me = this;
        me._all.menu.style.display = 'none';
        me._all.holder.onmousedown = me._holder_onmousedown;
        me._all.holder.onclick = me._holder_onclick;
    },
    
    // Event handler generators
    
    // Shows the menu
    _menu_control_onclick: function(me) { return function() {

        me._finish_draw();
        me.tellSet(this.set, 'closeMenu');

        me._all.holder.onmousedown = null;
        me._all.holder.onclick = null;
        
        for (var item in me._menuItems) {
            if (me._menuItems[item].className != 'selectbox_menu_item') {
                me._menuItems[item].className = 'selectbox_menu_item';
            }
        }
        me._menuItems[me.selectedIndex].className = 'selectbox_menu_item_hover';
        me._hoveredItem = me._menuItems[me.selectedIndex];
        me._all.menu.style.display = me._all.menu.style.display == 'none' ?
            'block' : 'none';
        
        // close menu on clicks outside the menu
        var document_observer = function(e) {
            var clickinbox = (Event.element(e).id.indexOf('SelectBox_'+me._seqnum) == 0);
            if (!clickinbox) { 
                me.closeMenu();  
                Event.stopObserving(document, 'click', document_observer, false);
            }
            return !clickinbox;
        };    
        Event.observe(document, 'click', document_observer, false);

    }},
    
    // Selects an item
    _menu_item_onclick: function(me, index) { return function() {
        me.setSelectedIndex(index);
        me._all.menu.style.display = 'none';
        this.className = 'selectbox_menu_item';
        if (me.onchange) me.onchange(me);
        window.setTimeout(function() {
			me._all.holder.onmousedown = me._holder_onmousedown;
			me._all.holder.onclick = me._holder_onclick;
		}, 1);
    }},
    // Item rollovers
    _menu_item_onmouseover: function(me) { return function() {
        if (me._hoveredItem) {
            me._hoveredItem.className = 'selectbox_menu_item';
            me._hoveredItem = null;
        }
        this.className = 'selectbox_menu_item_hover';
    }},
    _menu_item_onmouseout: function(me) { return function() {
        this.className = 'selectbox_menu_item';
    }}
 
});