/**
* @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
* 
* @mod jQuery adoptation (M.Saulis)
* 
*/
var elSelect = Class.create({
	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.options.container = "#"+options.container;
		//if ( !this.options.container ) return;
		
		this.selected = false;
		this.source = $(this.options.container).find('select');
		this.buildFrameWork();

		var temp = this;
		$(this.source).find('option').each( function(index,domele){ temp.addOption(domele) } );
		$(this.options.container).html('');
		this._select.appendTo($(this.options.container));
		
		this.bindEvents();
		
	},
	
	buildFrameWork : function() {
		
		this._select = $(document.createElement('div')).addClass(this.options.baseClass);
		this.current = $(document.createElement('div')).addClass('selected').appendTo($(this._select));
		this.selectedOption = $(document.createElement('div')).addClass('selectedOption').appendTo($(this.current));
		this.dropDown = $(document.createElement('div')).addClass('dropDown').appendTo($(this.current));
		$(document.createElement('div')).addClass('clear').appendTo($(this._select));
		this.optionsContainer = $(document.createElement('div')).addClass('optionsContainer').appendTo($(this._select));
		
		var t = $(document.createElement('div')).addClass('optionsContainerTop').appendTo($(this.optionsContainer));
		var o = $(document.createElement('div')).appendTo($(t));
		var p = $(document.createElement('div')).appendTo($(o));
		
		var t = $(document.createElement('div')).addClass('optionsContainerBottom').appendTo($(this.optionsContainer));
		var o = $(document.createElement('div')).appendTo($(t));
		var p = $(document.createElement('div')).appendTo($(o));
		
		this.hiddenInput = $(document.createElement('input')).attr({"type":"hidden","name":this.source.attr('name')}).addClass('referencefilter').appendTo($(this.optionsContainer));
	},
	
	bindEvents : function() {
		this.optionsContainer.bind('click', function() {
				if ( this.optionsContainer.css('display') == 'block') 
					this.onDropDown()
			});
			
		$(this.options.container).bind( 'click', function(e) { e.stopPropagation(); } )
		var temp = this;
		this.current.bind('click', function(e){ temp.onDropDown(e); } )
	},
	
	//add single option to select
	addOption: function( option ){
    	var o = $(document.createElement('div'));
		o.addClass('option').val(option.value);
		if ( option.disabled ) { o.addClass('disabled') } else {
			var temp = this;
			o.bind('click',function(e){ temp.onOptionClick(e); });
			o.bind('mouseout',function(e){ temp.onOptionMouseout(e); });
			o.bind('mouseover',function(e){ temp.onOptionMouseover(e); });
		}
		
		if ( $(option).attr('class') && $(option).attr('class') != "" ) 
			o.addClass(option.attr('class'))
	
		if ( option.selected ) { 
			if ( this.selected) this.selected.removeClass('selected');
			this.selected = o
			o.addClass('selected')
			this.selectedOption.text(option.text);
			this.hiddenInput.val(option.value);
		}
		o.text(option.text);
		o.appendTo($(this.optionsContainer))
	},
	
	onDropDown : function( e ) {
			
			if ( this.optionsContainer.css('display') == 'block'){
				this.optionsContainer.hide();
				this.optionsContainer.parent().removeClass('elSelect-opened');
			} else {
				this.optionsContainer.show();
				this.optionsContainer.parent().addClass('elSelect-opened');
				this.selected.addClass('selected');
				//needed to fix min-width in ie6
				var width = this.optionsContainer.css('width') > this._select.css('width') ?
															this.optionsContainer.css('width')
															:
															this._select.css('width')
				if(this.optionsContainer.parent().css('width') + 33 > width) width = this.optionsContainer.parent().css('width') + 33;
				
				this.optionsContainer.css({'width':width});
				this.optionsContainer.find(":first").css({'width':width});
				this.optionsContainer.find(":last").css({'width':width});
			}						
	},
	onOptionClick : function(e) {
		if ( this.selected[0] != e.target ) {
			this.selected.removeClass('selected')
			$(e.target).addClass('selected')
			this.selected = e.target;
			this.selectedOption.text($(this.selected).text());
			this.hiddenInput.val($(this.selected).val());
		}
		// fire event to submit the filter form
		$(this.hiddenInput).trigger('change');
		this.onDropDown()
	},
	onOptionMouseover : function(e){
		this.selected.removeClass('selected')
		$(e.target).addClass('selected')
	},
	onOptionMouseout : function(e){
		$(e.target).removeClass('selected')
	}
	
});