/** Custom Select **/

var CustomSelect = Class.create({
	element : null, //<select>
	optionList : [], //all <option>
	selectedIndex : 0,
	container : null, //
	selectedLabel : null,
	list : null,
	options : { 
		selectClassName : 'default',
		animation : false
	},
	
	initialize : function(element,options){
		if(typeof(element) == 'string') this.element = $(element);
		else if(typeof(element) == 'object') this.element = element;
		
		Object.extend(this.options, options);
		this.element.childElements().each(function(option){
			this.optionList.push(option);
		}.bind(this));
		this.selectedIndex = this.element.selectedIndex;
		this.createSelectBox();
		
		document.observe('click', function(e){
			if(this.list.getStyle('display') != 'none'){
				this.closeList();
				if(this.element.readAttribute("onblur")) eval(this.element.readAttribute("onblur").replace(/this/g,"this.element"));
			}
		}.bindAsEventListener(this));
	},
	
	createSelectBox : function(){
		this.element.hide();
		this.container = new Element('div',{
			'class' : 'customselect '+this.options.selectClassName
		});
		this.selectedLabel = new Element('span');
		this.list = new Element('ul',{
			style : 'display:none;'
		});
		this.optionList.each(function(option, index){
			var li = new Element('li').update(option.innerHTML);
			if(index == this.selectedIndex)
				this.selectedLabel.update(option.innerHTML);
			this.list.insert(li);
			
			li.observe('click',this.choseOption.bindAsEventListener(this, index));
			li.observe('mouseover',this.highlight.bindAsEventListener(this,index));
		}.bind(this));
		this.container.insert(this.selectedLabel);
		this.container.insert(this.list);
		this.element.insert({after : this.container});
		
		
		this.container.observe('click',function(e){
			this.toggleList(e);
			if(this.element.readAttribute("onclick")) eval(this.element.readAttribute("onclick").replace(/this/g,"this.element"));
		}.bindAsEventListener(this));
	},
	
	toggleList : function(e){
		if(this.list.getStyle('display') == 'none'){
			this.openList();
			Event.stop(e);
		}
		else{
			this.closeList();
			Event.stop(e);
		}
		this.highlight(e,this.element.selectedIndex);
	},
	openList : function(e){
		if(typeof(Effect) != 'undefined' && this.options.animation){
			Effect.BlindDown(this.list, {
				duration: 0.25,
				afterFinish : function(){
					this.list.setStyle({overflow:'auto'});
					var currentLargest = 306;
					this.list.childElements().each(function(child){
						if (child.getWidth() > currentLargest) {
							currentLargest = child.getWidth();
						}
					});
					if (this.list.getWidth()<currentLargest) {
						this.list.morph('width:'+currentLargest+'px;');
					}
				}.bindAsEventListener(this)
			});
		}
		else{
			this.list.show();
		}
		
		if(this.element.attributes.onfocus) eval(this.element.readAttribute("onfocus").replace(/this/g,"this.element"));
	},
	
	closeList : function(e){
		if(typeof(Effect) != 'undefined' && this.options.animation){
			Effect.BlindUp(this.list, {duration: 0.25});
		}
		else{
			this.list.hide();
		}
	},
	
	choseOption : function(e){
		var index = $A(arguments)[1];
		this.element.selectedIndex = index;
		this.selectedLabel.update(this.optionList[index].innerHTML);
		this.toggleList(e);
		if(this.element.attributes.onchange) { 
			//alert(this.element.attributes.onchange);
			eval(this.element.readAttribute("onchange").replace(/this/g,"this.element"));
			//this.element.readAttribute("onchange").replace(/this/g,this.element);
		}
		if(this.element.attributes.onclick) { 
			eval(this.element.readAttribute("onclick").replace(/this/g,"this.element"));
		}
	},
	
	highlight : function(e){
		var index = $A(arguments)[1];
		this.list.select('li').each(function(li, indexli){
			if(index == indexli) li.addClassName('hover');
			else li.removeClassName('hover');
		});
	}
});