var SelectboxBase = Class.create({
	initialize: function(e, subcss)
	{
		this.model = $(e);
		if (!this.model) return;
		this.subcss = subcss;  
		this.initview(this.getSelected());
    },

    getSelected: function()
    {},
	
	getListItems: function(c)
	{
		var itemTemp = new Template('<div class="item" value="#{value}" style="display:#{display}">#{text}</div>');
		var listItem = Array();
		var items = this.model.getElementsBySelector(this.litem);
		c.count = items.size();
		items.each(function(e){
			var v = e.getAttribute('v') ? e.getAttribute('v'):e.value;
			var dis = e.getAttribute('display');
			var values = {value: v, text: e.innerHTML, display:dis} ;
			listItem.push(itemTemp.evaluate(values)) ;
		})
		return listItem;		
	},

	initview:function(selected)
	{          
        this.model.control = this;
		this.id = this.model.id+'_dd'
		var css = 'selectbox'
		var c = {count:0};
		var listItem = this.getListItems(c)
		var listcss = null;
		if (c.count>15) listcss = ' scroller'
		var temp = '<div id="#{id}" class="#{css} #{subcss}"><div class="item selected">#{selected}</div><div class="list#{listcss}" style="display:none">#{list}</div></div>'; //<div id="#{overlayid}" class="dd_overlay" style="display:none"/>
		var ddTemp = new Template(temp); 
		//var overlayid = 'overlay_'+this.id;                                
		var data = {id: this.id,css:css, subcss:this.subcss, listcss:listcss, selected:selected.innerHTML, list:listItem.join('')};
		this.model.insert({after:ddTemp.evaluate(data)}).hide();             
		//this.overlay = $(overlayid);
		this.value = this.model.value;
		this.view = this.model.next('.'+css);
		this.drop = false;

        this.clickToHideEvent = this.clickToHide.bindAsEventListener(this);
		this.observeEvent();
	},
	
	observeEvent: function()
	{
		var t = this;
		//t.overlay.observe('click', function(){
		//	t.slideup()
		//})
			
		this.view.down('.selected').observe('click', function(){
			if (t.disable) return
			
			if (t.drop)	t.slideup()
			else t.slidedown()
		})
		
		this.view.getElementsBySelector('.list .item').each(function(e){
			e.observe('click', function(){
				t.itemclick(this)
			})
		})
	},
	
   // :BUG: hoannd006 Use overlay can be bug in IE6,7
    // Solution: use document.click
    clickToHide: function(e)
    {  
        var elm = Event.element(e);
        var isHide = true;
        while (elm != null)
        {                 
            if ($(elm) == $(this.view))
            {
                isHide = false;
                break;
            }

            elm = elm.offsetParent;
        }
        
        if (isHide)
        {
            document.stopObserving('click', this.clickToHideEvent);
            this.slideup();
        }
    },
    
    stopDocumentClick : function()
    {
        document.stopObserving('click', this.clickToHideEvent);
    },
    
	itemclick: function(e)
	{
		this.slideup()
		this.updatevalue(e.getAttribute('value'), e.innerHTML)
	},
	
	updatevalue:function(newvalue, newlabel)
	{
		if (this.model.value != newvalue)
		{                             
			this.view.down('.selected').update(newlabel)
			this.value = this.model.value = this.view.value = newvalue
            if (this.model.fireEvt)
                this.model.fireEvt('change');
            else
            {
                if (this.model.onchange) 
                    this.model.onchange();
                else
                    this.model.fire('change')
            }
		}
	},
	
	slideup:function()
	{
		this.drop = false
		this.view.down('.list').hide()
		this.view.setStyle({zIndex:'',position:''})
		//this.overlay.hide()
	},
	
	slidedown:function()
	{
		this.drop = true
		this.view.setStyle({zIndex:98,position:'relative'})
		this.view.down('.list').show()
        document.observe('click', this.clickToHideEvent);
		//this.overlay.show()
	},
	
	select: function(value)
	{
		if (value == this.value) return

		var selected = $(this.id).down(' .list .item[value="'+value+'"]')
		if (selected) this.updatevalue(value, selected.innerHTML)
	}
})

var Selectbox = Class.create(SelectboxBase, {
	initialize: function($super, e, subcss)
	{
		this.litem = 'option';
        $super(e, subcss);
	},

    getSelected: function()
    {
		return this.model.down(this.litem+':[value="'+this.model.value+'"]');
    }
})

var SelectboxLi = Class.create(SelectboxBase, {
	initialize: function($super, e, subcss)
	{
		this.litem = 'li';
        $super(e, subcss);
	},

    getSelected: function()
    {
		var selected = this.model.down(this.litem+':[selected="selected"]') || this.model.down(this.litem);
		this.model.value = selected.getAttribute('v');
        return selected;
    }
})