var elSelect = new Class({
	Implements : [ Options ],
	options: {
		container: false,
		baseClass : 'cust-sel'
	},
	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();
		for (var i=0; i<$(this.source).getElements('option').length;i++){
			this.addOption(($(this.source).getElements('option'))[i],i);
		}
		$(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.current = new Element('div').addClass('selected').injectInside($(this._select));
		this.selectedOption = new Element('div').addClass('selected-option').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('options-container').injectInside($(this._select));
		var t = new Element('div').addClass('options-container-top').injectInside($(this.optionsContainer));
		//var o = new Element('div').injectInside($(t))
		//var p = new Element('div').injectInside($(o))
		var t = new Element('div').addClass('options-container-bottom').injectInside($(this.optionsContainer));
		//var o = new Element('div').injectInside($(t))
		//var p = new Element('div').injectInside($(o))

		this.source.setStyle('display', 'none'); // Hiding the original Select before moving it 
		this.hiddenInput = this.source.injectAfter($(this.options.container)); // Moving the original 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, i){
    	var o = new Element('div',{'id':option.value+'_'+i}).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);
		}
		o.set('text',option.text);		
		o.injectBefore($(this.optionsContainer).getLast());
	},
	
	onDropDown : function( e ) {
			
			if ( this.optionsContainer.getStyle('display') == 'block') {
				this.dropDown.removeClass('dropdown-hover');
				this.optionsContainer.setStyle('display','none')
			} else {
				this.optionsContainer.setStyle('display','block');
				this.dropDown.addClass('dropdown-hover');				
				this.selected.addClass('selected');
				//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'));
		}
		this.onDropDown();
		this.source.selectedIndex = this.selected.getProperty('id').match(/\d+$/)[0];
		this.source.onchange();
	},
	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, new Options);