/**
* @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({
	options: {
		selectBox: false,
		baseClass : 'elSelect Boxes'
	},
	initialize: function(options){
		this.setOptions(options);
		

		this.source = false;
		this.selected = false;
		this._divSelect = false;
		this.current = false;
		this.selectedOption = false;
		this.dropDown = false;
		this.optionsContainer = false;		
		
		if (!this.options.selectBox) return;
		
		this.selected = false;
		this.source = this.options.selectBox;
        this.options.selectBox =$(this.options.selectBox);
		this.options.selectBox.refresh=this._buildFrameWork.bind(this);
        this.options.selectBox.setStyle('display','none');
		this.options.selectBox.set('multiple','multiple');
        this.options.selectBox.setStyle('position','absolute');
		this.options.selectBox.addEvent('click', this.onOptionClick.bind(this));
		this.options.selectBox.addEvent('blur', function(){this.options.selectBox.setStyle('display','none')}.bind(this));
		this._buildFrameWork();
		
		
	},
	
	_buildFrameWork : function() {
	    if(this._divSelect!=false)
	        this._divSelect.dispose();
		this._divSelect = new Element('div').addClass(this.options.baseClass);
		this._divSelect.addClass(this.options.selectBox.get('class'));
		this.current = new Element('div').addClass('selected').injectInside($(this._divSelect));
		this.selectedOption = new Element('div').addClass('selectedOption').injectInside($(this.current));
		this.dropDown = new Element('div').addClass('dropDown').injectInside($(this.current));
		new Element('div').addClass('clear').injectInside($(this._divSelect));
		this.optionsContainer = new Element('div').addClass('optionsContainer').injectInside($(this._divSelect));
        var len = Number(this.options.selectBox.options.length);
       
		this._divSelect.inject(this.options.selectBox,'before');
		var width = this.options.selectBox.getStyle('width').toInt() > this._divSelect.getStyle('width').toInt() ?
													this.options.selectBox.getStyle('width') : this._divSelect.getStyle('width')
													
		this.options.selectBox.setStyle('width', width);
		
		this._bindEvents();
        if(0 < len && len < 9){
            this.options.selectBox.setStyle('height',(len* 17)+4+'px');
        }else{
            this.options.selectBox.setStyle('height',(8* 16)+4+'px');
        }
	},
	
	_bindEvents : function() {
		document.addEvent('click', function() { 
				if (this.optionsContainer.getStyle('display') == 'block') 
					this._toggleVisibilty();
			}.bind(this));
			
		this._divSelect.addEvent('click', function(e) { new Event(e).stop(); } )		
		this.current.addEvent('click', this._toggleVisibilty.bindWithEvent(this) )
		if(this.options.selectBox.options.length>0){
		    this.options.selectBox.selectedIndex=0;
            this._selectOption(this.options.selectBox.options[0]);
        }
		
	},
	
	_toggleVisibilty : function(e) {
			if (this.options.selectBox.getStyle('display') == 'block') {
				this.options.selectBox.setStyle('display','none')
			} else {
				this.options.selectBox.setStyle('display','block');
				this.options.selectBox.focus();
			}	
	},
	onOptionClick       :   function(e) {
		var event = new Event(e);
		this._selectOption(event.target);
	},
	
	_selectOption        :   function(opt){
		opt = $(opt);
		if(opt.get('tag')!= 'option')
		    return;
		this.selected = opt;
		this.selectedOption.set('text',this.selected.innerHTML);
	    
		this.options.selectBox.setStyle('display','none')
	},
	
	onOptionMouseover   :   function(e){
		var event = new Event(e)
		this.selected.removeClass('selected')
		event.target.addClass('selected')
	},
	onOptionMouseout    :   function(e){
		var event = new Event(e)
		event.target.removeClass('selected')
	}
	
});
elSelect.implement(new Events);
elSelect.implement(new Options);

window.addEvent('domready', function(){


	var selects = document.getElementsByTagName('select');
	for(var i=0; i<selects.length;i++){
		var mySelect = new elSelect( {selectBox : selects[i]} );
	};

});