/**
* @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
* 
* UPDATE - Nate Steiner
* 01/07/09
* Adding support for MooTools 1.2
* 01/16/09
* Making the script exclude IE (bottom 2 lines)
* 
*
*/

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){
		var optsToDestroy = $(document.body).getElements('option[rel=firstOp]');
				 		 if (optsToDestroy){
				 		 		 optsToDestroy.dispose();
				 		 }
		
		this.setOptions(options);
		
		if ( !this.options.container ) return;
		
		// Added by Jason per Nate for conatct form fix
		if ( $(this.options.container).hasClass('dontStyle')) 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));
		
		this.bindEvents();
		
	},
	
	buildFrameWork : function() {
		this._select = new Element('div').addClass( this.options.baseClass ); 
		this._select.id = this.options.container; // sets this div to the original ID. 2009.04.04 - tbb
		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 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 looks like it should make the replace selects send data, but it doesn't quite. 
		 * see pvh.js for the added bit of magic that makes it send data.
		 * untested in IE. - tbb
		 */
		
		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) );
	},
	
	//add single option to select
	addOption: function( option ){
    	var o = new Element('div').addClass('option').setProperty('value',option.value);
		
		/* add an ID to every element that
		   takes the option text, 
		   removes spaces and makes it lowercase - tbb
		*/
		o.setProperty('id', 'x_'+option.text.replace(/\s/gi, '').toLowerCase());
		
		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);
		}
		o.set('text',option.text);	
		o.injectBefore($(this.optionsContainer).getLast());
	},
		
	
	onDropDown : function( e ) {
			window.acmns.closeOthers(this.options.container);	
		
			if (this.optionsContainer.getStyle('display') == 'block') {
				this.optionsContainer.setStyle('display','none');
				
				if(this.optionsContainer.getStyle('display') == 'none'){
					// open class is for appearance. has nothing to do
					// with functionality.
					this.selected.parentNode.parentNode.removeClass('open');
					
				} 
				
				
				// checks the elSelect wrapper div to see if this is a solo pulldown
				if( this.selected.parentNode.parentNode.parentNode.getProperty('class').match(/solopulldown/gi) ){
					window.acmns.relocateLoc(this.selected); // if so, relocate to this location.
				}
				
			} else {
				
				this.optionsContainer.setStyle('display','block');
	 			this.selected.addClass('selected');
			
				// adds an open class to the open menu for styling. 
				// only affects appearance. not functionality.
				this.selected.parentNode.parentNode.addClass('open'); 

				//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(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'));
	
			// checks to see if the wrapper div has a class of "open" - tbb
			// only affects appearance. not functionality.
			if( this.selected.parentNode.parentNode.getProperty('class').match(/open/i) ){
				this.selected.parentNode.parentNode.removeClass('open');
			} 
		}
		// close the option dropDown menu after it's selected.
		// this.selected.parentNode.style.display = 'none'; 
		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');
	}
	
});

if (Browser.Engine.trident != true && Browser.Engine.webkit525 != true) {
	elSelect.implement(new Events);
	elSelect.implement(new Options);
}