/**
* @file elSelect.js
* @downloaded from http://www.cult-f.net/2007/12/14/elselect/
* @author Sergey Korzhov aka elPas0
* @site  http://www.cult-f.net
* @date December 14, 2007
* 
*/
var elSelect = new Class({
	
	Implements: [Options, Events],
	
	options: {
		container: false,
		baseClass: 'elSelect'
	},
	
	source : false,
	selected : false,
	_select : false,
	current : false,
	selectedOption : false,
	dropDown : false,
	optionsContainer : false,
	hiddenInput : false,
	/*
	pass the options,
	create html and inject into container
	*/
	
	initialize: function(options){
		this.setOptions(options);
		
		if ( !this.options.container ) return;
		
		this.selected = false;
		this.source = $(this.options.container).getElement('select');
		this.buildFrameWork();
		
		this.source.getElements('option').each( this.addOption, this );
		$(this.options.container).set("html", "");
		this._select.inject($(this.options.container), "inside");
		
		this.bindEvents();
		
	},
	
	buildFrameWork : function() {
		this._select = new Element('div', {'class': this.options.baseClass });
		this.current = new Element('div', {'class': 'selected'}).inject(this._select, "inside");
		this.selectedOption = new Element('div', {'class': 'selectedOption'}).inject(this.current, "inside");
		this.dropDown = new Element('div', {'class': 'dropDown'}).injectInside($(this.current));
		new Element('div', {'class': 'clear'}).inject(this._select, "inside");
		this.optionsContainer = new Element('div', {'class': 'optionsContainer'}).inject(this._select, "inside");
		var t = new Element('div', {'class': 'optionsContainerTop'}).inject(this.optionsContainer, "inside");
		var o = new Element('div').inject(t, "inside");
		var p = new Element('div').inject(o, "inside");
		var t = new Element('div', {'class': 'optionsContainerBottom'}).inject(this.optionsContainer, "inside");
		var o = new Element('div').inject(t, "inside");
		var p = new Element('div').inject(o, "inside");

		this.hiddenInput = this.source.inject(this.options.container, "after");
				
	},
	
	bindEvents : function() {
		document.addEvent('click', function() { 
			if ( this.optionsContainer.getStyle('display') == 'block') {
				this.onDropDown();
			}
		}.bind(this));
			
		$(this.options.container).addEvent( 'click', function() { return false; } );		
		this.current.addEvent('click', this.onDropDown.bindWithEvent(this) );
		
	},
	
	//add single option to select
	addOption: function( option ){
    	var o = new Element('div', {'class': "option", value: option.value});
		if ( option.disabled ) {
			o.addClass('disabled');
		} 
		else {
			o.addEvents({
				'click': this.onOptionClick.bindWithEvent(this),
				'mouseout': this.onOptionMouseout.bindWithEvent(this),
				'mouseover': this.onOptionMouseover.bindWithEvent(this)
			});
		}
		
		if ( $defined(option.get('class')) && $chk(option.get('class')) ) {
			o.addClass(option.get('class'));
		}
	
		if ( option.selected ) { 
			if (this.selected) this.selected.removeClass('selected');
			this.selected = o;
			o.addClass('selected');
			this.selectedOption.set("text", option.text);
			this.hiddenInput.set("value", option.value);
		}
		o.set("text", option.text);
		o.inject(this.optionsContainer.getLast(), "before");
	},
	
	onDropDown : function( e ) {
			
			if ( this.optionsContainer.getStyle('display') == 'block') {
				this.optionsContainer.setStyle('display','none');
			} else {
				this.optionsContainer.setStyle('display','block');
				this.selected.addClass('selected');
				//needed to fix min-width in ie6
				var width =  this.optionsContainer.getStyle('width').toInt() > this._select.getStyle('width').toInt() ?
															this.optionsContainer.getStyle('width')
															:
															this._select.getStyle('width');
															
				this.optionsContainer.setStyle('width', width);
				this.optionsContainer.getFirst().setStyle('width', width);
				this.optionsContainer.getLast().setStyle('width', width);
			}						
	},
	onOptionClick : function(event) {
		if ( this.selected != event.target ) {
			this.selected.removeClass('selected');
			event.target.addClass('selected');
			this.selected = event.target;
			this.selectedOption.set("text", this.selected.get("text"));
			this.hiddenInput.set("value", this.selected.get("value"));
			this.hiddenInput.fireEvent("change");
		}
		this.onDropDown();
	},
	onOptionMouseover : function(event){
		this.selected.removeClass('selected');
		event.target.addClass('selected');
	},
	onOptionMouseout : function(event){
		event.target.removeClass('selected');
	}
	
});