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(''), overlayid:overlayid}
		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.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)
			})
		})
	},
	
	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
            this.model.fireEvt('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()
		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;
    }
})