/**
* @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,
		where : '',
		baseClass : 'elSelect',
		baseId : 'selected',
		tagContainer : 'p',
		tagElements : 'a',
		width : 0,
		fieldToBeUpdate : '',
		pathToBeUpdate : '',
		widthToBeUpdate : 152
	},
	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(this.options.tagContainer)
		this.buildFrameWork()
		
		$(this.source).getElements(this.options.tagElements).each( this.addOption, this )
		$(this.options.container).set('HTML', '')
		if (this.options.where=='') 
			this._select.injectInside($(this.options.container))
		else
			this._select.injectInside($(this.options.where))
		this.bindEvents()
		
	},
	
	buildFrameWork : function() {
		this._select = new Element('div').addClass( this.options.baseClass )
		if (this.options.width > 0) this._select.setStyle('width',this.options.width);
		this.current = new Element('div').addClass('selected').injectInside($(this._select));
		this.current.id=this.options.baseId;
		this.selectedOption = new Element('div').addClass('selectedOption').injectInside($(this.current))
		if (this.options.width > 0) this.selectedOption.setStyle('width',this.options.width-18-14);
		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.hiddenInput = new Element('input').setProperties({
			type  : 'hidden',
			name  : this.source.getProperty('name')+"_copy"				
		}).injectInside($(this.options.container))
		/*
		optionsBaseId = this.current.id;
		document.body.addEvents({'click': function(){  
			if ($(optionsBaseId)) {
				$(optionsBaseId).removeClass('hover');
			}
		}});		
		*/	
	},
	
	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');
    	if (this.options.tagElements=='a')
    		o.addEvent('click', function(e) {window.location=option.href;});
    	else
    		o.setProperty('value',option.value);
		if (option.title=="hidden"){
			o.addClass('hidden') 
		}
		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 (this.options.tagElements!='a')
			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.hiddenInput.setProperty('value',option.title);
			}
		
		if (option.className == "hidden") {
			o.addClass('hidden')
			if ( this.selected) this.selected.removeClass('selected');
			this.selected = o;
			o.addClass('selected');
			this.selectedOption.set('text', option.get('text'));
		}
		o.set('text', option.get('text'));		
		o.injectBefore($(this.optionsContainer).getLast());
	},
	
	allHide : function() {
		ListOptionsContainer = $$('.optionsContainer');
		ListOptionsContainer.each(function(item, index){
			if ( item.getStyle('display') == 'block')
				item.setStyle('display','none');
		}); 
	},
	
	onDropDown : function( e ) {

			if ( this.optionsContainer.getStyle('display') == 'block') {
				this.allHide();
				this.optionsContainer.setStyle('display','none');
				$(this.options.baseId).removeClass('hover');
			} else {
				this.allHide();
				this.optionsContainer.setStyle('display','block');
				//this.selected.addClass('selected');
				$(this.options.baseId).addClass('hover');
				//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
			if (this.options.tagElements!='a') {
				this.selectedOption.set('text', this.selected.get('text'));
				//this.hiddenInput.setProperty('value',this.selected.getProperty('value'));
				Select_Value_Set(this.source.getProperty('name'),this.selected.getProperty('value'));
				this.hiddenInput.setProperty('value',Select_Title_Set(this.source.getProperty('name'),this.selected.getProperty('value')));
			}
			if (this.options.fieldToBeUpdate!='' && this.options.pathToBeUpdate!='') {
				reloadSelect(this.options.fieldToBeUpdate, this.options.pathToBeUpdate+"?ajax=true&"+this.source.getProperty('name')+"="+this.selected.getProperty('value'), this.options.widthToBeUpdate);
			}
			if (this.options.container == "regATContainer"){
				loadFormAT(1);
			}			
			if (this.options.container == "provATContainer"){
				loadFormAT(2);
			}	
			if (this.options.container == "cityATContainer"){
				loadFormAT(3);
			}	
			if (this.options.container == "zipATContainer"){
				loadFormAT(4);
			}
		}
		this.onDropDown()
		//if (this.selected.getProperty('value').search(".html") > -1 && this.selected.getProperty('value')!="")
		//	window.location=this.selected.getProperty('value');
	},
	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);

function Select_Value_Set(SelectName, Value) {
	SelectObject = $(SelectName);
	for(index = 0; index < SelectObject.length; index++) {
		if (SelectObject[index].value == Value) {
			SelectObject[index].selected = true;
		}
	}
}

function Select_Title_Set(SelectName, Value) {
	SelectObject = $(SelectName);
	for(index = 0; index < SelectObject.length; index++) {
		if (SelectObject[index].value == Value) {
			return SelectObject[index].title;
		}
	}
}