var Form = { }
Form.Dropdown = Class.create({
	initialize: function(select, element, options) {
		this.select = $(select);
		this.parent = this.select.parentNode;
		this.elementName = element;
		this.opened = false;
		this.opener = null;
		this.openerLink = null;
		this.element = null;
		this.items = new Array();
		
		this.options = options || { };
		this.options.height = this.options.height || 'auto';
		
		// hide select field
		this.select.hide();
		
		// add list
		var elem = document.createElement('ul');
		elem.setAttribute('id',this.elementName);
		elem.setAttribute('class','select');
		this.element = this.parent.appendChild(elem);
		
		// add opener
		var elem = document.createElement('li');
		this.opener = this.element.appendChild(elem);
		var elem = document.createElement('a');
		this.openerLink = this.opener.appendChild(elem);

		// add item container
		var elem = document.createElement('ul');
		this.items = this.opener.appendChild(elem);
		Element.hide(this.items);
		this.items.style.position = 'absolute';
		this.items.style.height = this.options.height;
		this.items.style.overflow = 'auto';
		
		// loop options
		var select_options = this.select.getElementsByTagName('option');
		
		for(var i=0;i<select_options.length;i++){
			if(i==0){
				var opener_text = document.createTextNode(select_options[i].innerHTML);
				this.openerLink.appendChild(opener_text);
			}
			
			var elem = document.createElement('li');
			var item_child = this.items.appendChild(elem);
			var elem = document.createElement('a');
			elem.setAttribute('name',select_options[i].value);
			var item_child_link = item_child.appendChild(elem);
			var item_child_text = document.createTextNode(select_options[i].innerHTML);
			item_child_link.appendChild(item_child_text);
			
			Event.observe(item_child_link, 'click', this.onItemSelected.bindAsEventListener(this));
		}
		
		// remove select and add hidden input
		var elem = document.createElement('input');
		elem.setAttribute('type','hidden');
		elem.setAttribute('name',this.select.name);
		elem.setAttribute('id',this.select.name);
		elem.setAttribute('value',select_options[0].value);
		this.parent.removeChild(this.select);
		this.select = this.parent.appendChild(elem);

		// add observers
		Event.observe(this.opener, 'click', this.onClickOpener.bindAsEventListener(this));
    	Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));
		Event.observe(this.openerLink, 'blur', this.onBlur.bindAsEventListener(this));
	},
	
	show: function() {
		Effect.Appear(this.items,{duration:0.15});
	},
	
	hide: function() {
		Effect.Fade(this.items,{duration:0.15});
	},
		
	onKeyPress: function(event) {
		if(this.opened){
			switch(event.keyCode) {
				case Event.KEY_ESC:
         			this.opened = false;
					this.hide();
					return;
			}
		}
	
	},
	
	onBlur: function(event) {
		this.opened = false;
		setTimeout(this.hide.bind(this), 250);
	},
	
	onClickOpener: function(event) {
		if(this.opened){
			this.opened = false;
			this.hide();
		}else{
			this.opened = true;
			this.show();
		}
	},
	
	onItemSelected: function(event){
		this.openerLink.innerHTML = event.target.innerHTML;
		this.select.value = event.target.name;
	}
});