/**
* @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',
		submit : false,
		/*** BROCELIA ***/
		scrollbar : false,
		scrollsize : 5,
		scrolldivsize : 21,
		optionwidth : '180px',
		restrictedBrowsers: [Browser.Platform.ipod]
		/*** /BROCELIA ***/
	},
	source : false,
	selected : false,
	_select : false,
	current : false,
	selectedOption : false,
	dropDown : false,
	optionsContainer : false,
	hiddenInput : false,

	submitting : false,
	inputHidden: false,
	/*** BROCELIA ***/
	scrollbar : null,
	/*** /BROCELIA ***/
	/*
	pass the options,
	create html and inject into container
	*/
	initialize: function(options){
		if (this.options.restrictedBrowsers.contains(true)) {
            return
        }
		this.setOptions(options)
		if ( !this.options.container ) return


		this.selected = false
		this.hover = false;
		this.source = $(this.options.container).getElement('select')
		this.buildFrameWork()
		$(this.source).getElements('option').each( this.addOption, this )

	//small tweak	chu@brocelia
		this.submitting = this.options.submit;
		this.inputHidden = $(this.options.container).getElement('input');
		this.inputHidden.set('id',this.inputHidden.get('name'));
	// end small tweak	chu@brocelia

		$(this.options.container).set('html','')
		this._select.injectInside($(this.options.container))

	//small tweak chu@brocelia
		this.inputHidden.injectInside($(this.options.container));
	//end

		this.bindEvents()

		/*** BROCELIA ***/
		if ( this.options.scrollbar ){
			this.optionsContainer.setStyle('height', this.options.scrollsize * this.options.scrolldivsize  + 'px' );
			this.optionsContainer.setStyle('display', 'block');
			if ( this._select.getElements('.option').length > this.options.scrollsize ){
				this.scrollbar = new MooScroll({selector:'.'+this.options.container+'_scroll', scrollControlsYClass : 'scrollControlsYList'});
				var containerBottom = this._select.getElement('.optionsContainerBottom');
				containerBottom.inject(this._select.getElement('.optionsContainer'));
				containerBottom.setStyle('top', this.options.scrollsize * this.options.scrolldivsize + 'px');
				this.optionsContainer.setStyle('height', this.options.scrollsize * this.options.scrolldivsize + 9 + 'px' );
				var size = this._select.getElement('.scrollControlsYList').getSize();
				this._select.getElement('.scrollControlsYList').setStyle('height', size.y - 9 + 'px');

			}
			this.optionsContainer.setStyle('display', 'none');
		}
		/*** /BROECLIA ***/

	},

	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(this.options.container+'_scroll').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')
		}).injectInside($(this.options.container))

	},

	bindEvents : function() {
			document.addEvent('click', function() {
				if ( this.optionsContainer.getStyle('display') == 'block')
					this.onDropDown()
			}.bind(this));
			document.addEvent('moomousewheel', function() {
				if ( this.optionsContainer.getStyle('display') == 'block' && !this.hover)
					this.onDropDown()
			}.bind(this));
			this.optionsContainer.addEvent('mouseover', function(){
				this.hover = true;
			}.bind(this));
			this.optionsContainer.addEvent('mouseout', function(){
				this.hover = false;
			}.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 ( this.options.scrollbar )
    			o.setStyle('width', this.options.optionwidth);
		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.optionsContainer.setStyle('display','none')
				if ( this.scrollbar )
					this.scrollbar.mooScrollAreas[0].scrollBar.getElement('.scrollHandle').setStyle('top', 0);
			} else {
				this.optionsContainer.setStyle('display','block')
				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)
				if ( !this.options.scrollbar )
					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'));
		}


		//small tweak	chu@brocelia
		if ($('adminForm') && (this.submitting==true))
		{
			$('adminForm').submit();
		}
		//end small tweak

		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);

