/**
* @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: {
		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.injectInside($(this.options.container))
		
		if ( this.source ) {
			if (this.source.onchange ) {
				//alert(this.source.onchange )
				this.source.addEvent('change' , this.source.onchange );
			}
		} 
		
		
		this.source.setStyle('display' , 'none')
		
		this.bindEvents()
		
		if ( this.scrollbar)
			makeScrollbar( $( 'box_' +  this.source.id) , $( 'scrollBar_' +  this.source.id)  , $( 'myKnob_' +  this.source.id)  );
	},
	
	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').addClass('SelectBox').set('id', 'box_' +  this.source.id  ).injectInside($(this._select)) //Box
		var t = new Element('div').addClass('optionsContainerTop').injectInside($(this.optionsContainer))
		var o = new Element('div').injectInside($(t))
		var p = new Element('div').injectInside($(o))
		var t = new Element('div').addClass('optionsContainerBottom').injectInside($(this.optionsContainer))
		var o = new Element('div').injectInside($(t))
		var p = new Element('div').injectInside($(o))

		
		this.hiddenInput = new Element('input').setProperties({
			type  : 'hidden',
			name  : this.source.getProperty('name'),
			id    : 'hdn_' + this.source.getProperty('name')				
		}).injectInside($(this.options.container))
			
		if ( $(this.source).getElements('option').length > 7 ) {
			this.scrollbar = new Element('div').addClass('SelectScrollBar').set('id','scrollBar_' + this.source.id  );
			this.scrollbar.setStyles({'position':'absolute' ,'display':'none'}) ; 
			this.knob = new Element('div').addClass('SelectKnob').set('id','myKnob_' + this.source.id ).injectInside($(this.scrollbar ));
		 	this.scrollbar.injectInside($(this._select));	
			
			
		}	
	},
	
	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) )
		
		
	},
	
	//add single option to select
	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)
			})
		}
		
		if ( $defined(option.getProperty('class')) && $chk(option.getProperty('class')) ) 
			o.addClass(option.getProperty('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.setProperty('value',option.value);
			this.source.setProperty('value',this.selected.getProperty('value'));
			
		}
		
		o.set('text' , option.text)		
		o.injectBefore($(this.optionsContainer).getLast())
	},
	
	onDropDown : function( e ) {
			
			if ( this.optionsContainer.getStyle('display') == 'block') {
				this.optionsContainer.setStyle('display','none')
				if(this.scrollbar) this.scrollbar.setStyle('display','none')
			} else {
				this.optionsContainer.setStyle('display','block')
				if(this.scrollbar) this.scrollbar.setStyle('display','block')
				this.selected.addClass('selected')
				
				//needed to fix min-width in ie6
				w1 = this.optionsContainer.getStyle('width').toInt();
				w2 = this._select.getStyle('width').toInt();
				
				var width =  w1 > w2 ? w1 : w2 ;			
				width = width - 17 ;
				this.optionsContainer.setStyle('width', width);
				
				
				e =  this._select; 
				l1 = ( e.getPosition().x > 0 ? e.getPosition().x : 0 ) - 7 ; 
				if( this.scrollbar) {
					 
					var left = String( parseInt(width) - 14 + l1  +'px');
					//left = Browser.Engine.trident ? parseInt(left) - 75 + 'px' : left ;
					//l1 = Browser.Engine.trident ? parseInt(l1) - 75 + 'px' : l1 ;
					this.scrollbar.setStyle('left', left );
					this.optionsContainer.setStyle('left', l1  );
				} else {
				
					this.optionsContainer.setStyle('left', l1  );
				}
				try {
					this.optionsContainer.getFirst().setStyle('width', width);
					this.optionsContainer.getLast().setStyle('width', width);
				} catch (e) {}
			}						
	},
	onOptionClick : function(e) {
		var event = new Event(e)
		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.setProperty('value',this.selected.getProperty('value'));
			this.source.setProperty('value',this.selected.getProperty('value'));
	 	 	this.source.fireEvent("change");

		}
		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);