// JavaScript Document
var HtmlSelect = new Class({
	Implements: [Events, Options],
	options:{
		buttonIcon:null,
		type:'select',
		auto:false,
		btnPadding:2
	},
	initialize:function(container, options){
		this.setOptions(options || {});
		if ($(container)&&!this.options.auto){
			this.container = $(container);
			this.toCreate(null);
		}
		if (this.options.auto)
		{
			$$('SELECT[type='+this.options.type+']').each(function(el){this.toCreate(el)}.bind(this));
		}
	},
	toCreate:function(el){
		switch(this.options.type){
			case 'select':
				this.setSel(el);
			break;
			default:
				this.setSel(el);
			break;
		}
	},
	setSel:function(el)
	{
		var coords = el.getCoordinates();
		var _n = el.get('name');
		var _v = el.get('value');
		var _html = el.options[el.selectedIndex].innerHTML;
		this.valInp = new Element('input',{'name':_n, 'type':'hidden', 'value':_v}).injectBefore(el);
		var selContainer = new Element('SPAN', {'class':'es_container'});
		selContainer.setStyles({
			width:coords.width - 5
		});
		selContainer.injectBefore(el);
		coords = selContainer.getCoordinates();
		this.textBox = new Element('DIV', {'id':'textBox', 'html':_html}).inject(selContainer);
		this.textBox.setStyles({
			width:coords.width - 20,
			heigth:coords.height
		});
		this.textBox.addEvent('click', function(){
			listDiv.setStyles({
					top:coords.bottom,
					left:coords.left,
					width:coords.width
				});
				$$('DIV[id=list]').setStyles({visibility:'hidden'});
				if ('false' == listDiv.getProperty('show')){
					listDiv.setStyles({visibility:'visible'});
					listDiv.setProperty('show', true);
				}
				else{
					listDiv.setStyles({visibility:'hidden'});
					listDiv.setProperty('show', false);
				}
				return false;
		});
		 
		var listDiv = this.createList(coords, el);
		var href = new Element('A', {'href':'javascript:;'}).adopt(new Element('IMG', {'src':this.options.buttonIcon, 'border':'0'}));
		href.addEvent(
			'click',function(){
				listDiv.setStyles({
					top:coords.bottom,
					left:coords.left,
					width:coords.width
				});
				$$('DIV[id=list]').setStyles({visibility:'hidden'});
				if ('false' == listDiv.getProperty('show')){
					listDiv.setStyles({visibility:'visible'});
					listDiv.setProperty('show', true);
				}
				else{
					listDiv.setStyles({visibility:'hidden'});
					listDiv.setProperty('show', false);
				}
				return false;
		});
		selContainer.adopt(href);
		el.dispose();
		
	},
	createList:function(coords, selElement){
		var listDiv = new Element('DIV', {'id':'list'});
		listDiv.setStyles({
			zIndex:1000,
			visibility:'hidden'
		});
		listDiv.setProperty('show', false);
		var ul = new Element('UL');
		for(var i = 0, l = selElement.options.length; i < l; i++){
			var _html = selElement.options[i].innerHTML?selElement.options[i].innerHTML:'&nbsp;';
			var itemHref = new Element('A', {'html':_html, 'value':selElement.options[i].value, 'href':'javascript:;'});
			var li = new Element('LI').adopt(itemHref);
			ul.adopt(li);
			var textBox = this.textBox;
			var valInp = this.valInp;
			itemHref.addEvent('click',function(){
				valInp.set('value', this.get('value'));
				textBox.set('html', this.get('html'));
				listDiv.setStyles({visibility:'hidden'});
				listDiv.setProperty('show', false);
			});
		}
		listDiv.adopt(ul);
		listDiv.inject($(document.body));
		$(document.body).addEvent('click', function(){
			listDiv.setStyles({visibility:'hidden'});
			listDiv.setProperty('show', false);
		});
		return listDiv;
	}
});