var CustomSelect = new Class({
	Implements: Events,
	
	/**
	 * construct
	 *
	 */
	initialize: function(selectArea){
		if(!selectArea) { return (false); }
		this.selectArea = selectArea;
		this.selectList = false;
		this.selected = false;
		this.selectOpen = false;
		this.buildContents();
		this.selectElement = $(selectArea).getElement('select');
		this.selectElement.setStyle('display', 'none');
		this.elements = this.selectElement.getChildren().each(function(child) {
			if(child.get('tag') == 'optgroup') {
				this.addOptionGroup(child);
			} else {
				this.addOption(child);
			}
		}.bind(this));
		this.bindEvents();
    },
	buildContents: function() {
		this.selectField = new Element('div', {
			'class': 'selectField',
			'id': 'selectField'
		});
		this.dropArea = new Element('a', {
			'class': 'status'
		});
		this.selectedOption = new Element('div', {
			'class': 'selected'
		});
		this.optionContainer = new Element('div', {
			'id': this.selectArea + '_opt',
			'class': 'optContainer',
			'html': ''
		});
		this.optionText = new Element('div', {
			'id': this.selectArea + '_text',
			'class': 'text',
			'html': ''
		});
		this.optionMain = new Element('div', {
			'id': this.selectArea + '_main',
			'class': 'optMain',
			'html': ''
		});
		this.selectedOption.inject(this.dropArea);
		this.dropArea.inject(this.selectField);		
		this.selectField.inject(this.selectArea, 'top');
		this.optionMain.inject($('isere_en_live'));
		this.optionContainer.inject(this.optionMain);
		this.optionText.inject(this.optionContainer);
	},
	bindEvents: function() {
		this.dropArea.addEvents({
			'click': function(e){
				if(this.selectOpen == true) {
					this.hideList();
				} else {
					new Event(e).stop();
					this.showList();
				}
			}.bind(this),
			'mouseover': function(e) {
				if(this.selectOpen == false) {
					this.hideList();
				}
			}.bind(this)
		});
		
		document.addEvent('click', function(event) {
			var sClass = event.target.className;
			if ( !sClass.contains('vTrack')
				&& !sClass.contains('vThumb')
				&& !sClass.contains('arrowUp')
				&& !sClass.contains('arrowDown') )
			{
				this.hideList();
			}
			
		}.bind(this));
	},

	addOptionGroup: function(optionGroup) {
		var group = new Element('div').addClass('optGroup');
		var label = new Element('div').addClass('optLabel');
		var optList  = new Element('div').addClass('optList');
		optList.inject(group);
		label.setText(optionGroup.getProperty('label'));
		label.inject(group, 'top');
		optionGroup.getElements('option').each(function(option) {
			newOption = this.returnOption(option);
			newOption.inject(optList);
		}.bind(this));
		group.inject(this.optionText);

	},
	addOption: function(option) {
		newOption = this.returnOption(option);
		newOption.inject(this.optionText);
	},
	returnOption: function(option) {
		var newOption = new Element('div', {
			'class': 'opt',
			'html': option.text
		});
		if($defined(option.getProperty('class')) && $chk(option.getProperty('class'))) {
			newOption.addClass(option.getProperty('class'));
		}
		if(option.disabled) {
			newOption.addClass('disabled')
		} else {
			newOption.addEvents({
				'click': this.onOptionClick.bindWithEvent(this),
				'mouseout': this.onOptionMouseout.bindWithEvent(this),
				'mouseover': this.onOptionMouseover.bindWithEvent(this)
			})
		}
		if(option.selected) {
			if(this.selected) { this.selected.removeClass('selected'); }
			this.selected = newOption;
			newOption.addClass('selected');
			this.selectedOption.innerHTML = option.text;
		}
		newOption.value = option.value;
		return newOption;
	},
	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.innerHTML = this.selected.innerHTML;
			this.selectElement.value = event.target.value;
		}
		this.hideList();
	},
	onOptionMouseover: function(e) {
		var event = new Event(e);
		event.target.addClass('over');
	},
	onOptionMouseout: function(e) {
		var event = new Event(e);
		event.target.removeClass('over');
	},
	showList: function() {
		if(this.selectOpen == false) {
			this.selectOpen = true;
			
			iSizeY = this.selectField.getSize().y;
			iPositionY = iSizeY + $(this.selectArea).getPosition($('isere_en_live')).y;
			
			this.optionMain.setStyle(
				'left', 
				this.selectField.getPosition($('isere_en_live')).x + 'px');
			this.optionMain.setStyle(
				'top',
				iPositionY + 'px');
				
			this.optionMain.setStyle('display','block');
			this.selectField.setStyle('z-index', 100000);
		}
	},
	hideList: function() {
		if(this.selectOpen == true) {
			this.selectOpen = false;
			this.optionMain.setStyle('display','none');
			this.selectField.setStyle('z-index', 1);
		}
	}
});