/**
* @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
*
* @modified by Konstantin Konovalov
* @site http://clproject.info
* @date August 10, 2008
*
*/
var elSelect = new Class({
	options: {
		container: false,
		baseClass : 'elSelect',
		hiddenInput : false
	},
	source : false,
	selected : false,
	_select : false,
	current : false,
	selectedOption : false,
	dropDown : false,
	optionsContainer : false,
	hiddenInput : false,

	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).setProperty('html','');
		this._select.injectInside($(this.options.container));

		this.bindEvents();
	},

	buildFrameWork : function() {
		this._select=new Element('div').addClass(this.options.baseClass);
		this.current=new Element('div').addClass('selected').injectInside($(this._select));
		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._select));
		this.optionsContainer=new Element('div').addClass('optionsContainer').injectInside($(this._select));
		var t = new Element('div').addClass('optionsContainerTop').injectInside($(this.optionsContainer));
		var t = new Element('div').addClass('optionsContainerBottom').injectInside($(this.optionsContainer));

		if (this.options.hiddenInput!=false) {
			this.hiddenInput = $(this.options.hiddenInput);
		} else {
			this.hiddenInput = new Element('input').setProperties({
				type: 'hidden',
				name: this.source.getProperty('name')
			}).injectInside($(this.options.container));
		}
	},

	bindEvents : function() {
		document.addEvent('click',function() {
			if(this.optionsContainer.getStyle('display')=='block')
			   this.onDropDown();
			}.bind(this));

		$(this.options.container).addEvent('click',function(e) {
         new Event(e).stop();
      });
		this.current.addEvent('click',this.onDropDown.bindWithEvent(this));
	},

	addOption: function(option) {
    	var o=new Element('div').addClass('option').setProperty('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)
			});
		}

		var _class='';
		if($defined(option.getProperty('class')) && $chk(option.getProperty('class')))
         _class=option.getProperty('class');
		o.addClass(_class);

		if(option.selected) {
			if(this.selected)
			   this.selected.removeClass('selected');
			this.selected=o;
			o.addClass('selected');
			this.selectedOption.setProperty('html',option.text);
			this.selectedOption.addClass(_class);
			this.hiddenInput.setProperty('value',option.value);
		}

		o.setProperty('html',option.text);
		o.injectBefore($(this.optionsContainer).getLast());
	},

	onDropDown: function( e ) {
		if(this.optionsContainer.getStyle('display')=='block') {
			this.optionsContainer.setStyle('display','none');
		} else {
			this.optionsContainer.setStyle('display','block');
			this.selected.addClass('selected');

			var width=this._select.getStyle('width');
			this.optionsContainer.setStyle('width',width);
			this.optionsContainer.getFirst().setStyle('width',width);
			this.optionsContainer.getLast().setStyle('width',width);
		}
	},

	onOptionClick: function(e) {
		var event=new Event(e);
		if (event.target.tagName!='DIV') {
			event.target=$(document.body.getElements('.option')[0]);
		}
		if(this.selected!=event.target) {
			this.selected.removeClass('selected');
			event.target.addClass('selected');
			this.selected=event.target;

			var _class=this.selected.getProperty('class');
			_class=_class.replace('option','').replace('selected','').trim();
			this.selectedOption.setProperty('class','selectedOption');
			this.selectedOption.setProperty('html',this.selected.getProperty('html'));
			this.selectedOption.addClass(_class);

			this.hiddenInput.setProperty('value',this.selected.getProperty('value'));
		}
		this.onDropDown();
	},

	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);