var CustomSelect = new Class({
	Implements: Events,
	initialize: function(selectArea,introText,level){
		if(!selectArea) { return (false); }
		this.type = selectArea;
		this.selectArea = selectArea;
		this.selectList = false;
		this.selected = false;
		this.selectOpen = false;
		this.level = level;
		this.level!=99 && this.level!=0 && this.level!=999? this.selectArea += ''+this.level:0;
		this.buildContents(this.selectArea,introText);
		this.selectElement = $(this.selectArea).getElement('select');
		this.selectElement.setStyle('display', 'none');
		this.elements = this.selectElement.getChildren().each(function(child) {
			this.addOption(child);
		}.bind(this));
		this.bindEvents();
    },
	buildContents: function(box,introText) {
		this.selectField = new Element('div').setProperty('id', box+'-select').setProperty('class', 'customSelect').injectInside(this.selectArea);
		this.selectedOption = new Element('span').setProperty('id', box+'-selected').setProperty('class', 'selected').injectInside(this.selectField);
		this.selectedOption.appendText(introText);
		
		// part of IE6 dropdown fix 
		if (window.ie6) {
		    this.selectList = new Element('ul').setStyle('visibility','hidden').injectInside(this.selectField);
		} else {
		    this.selectList = new Element('ul').setStyle('display','none').injectInside(this.selectField);
		}
	},
	bindEvents: function() {
		this.selectedOption.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() {
			this.hideList();
		}.bind(this));
	},
	addOption: function(option) {
		newOption = new Element('li').injectInside(this.selectList);
		newOption.appendText(option.text);
		newOption.setProperty("value", option.value);
		newOption.addEvent('click',this.onOptionClick.bindWithEvent(this));
		newOption.addEvent('mouseover',this.onOptionMouseover.bindWithEvent(this));
		newOption.addEvent('mouseout',this.onOptionMouseout.bindWithEvent(this));
	},
	onOptionClick: function(e) {
		var event = new Event(e);
		if(this.selected != event.target ) {
			this.selected = event.target;
			this.selectedOption.setHTML(this.selected.innerHTML);
			this.selectElement.value = event.target.getAttribute('value').toString();
		}
		if(this.level == 999){
			this.selectElement.onchange();
		}
		else{
			if(this.level != 99){
			this.createSelect();
			}
		}
		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() {
		this.selectOpen = true;
		
		// part of IE6 dropdown fix 
		if (window.ie6) {
		    this.selectList.setStyle('visibility','visible');
		} else {
		    this.selectList.setStyle('display','block');
		}
	},
	hideList: function() {
		this.selectOpen = false;
		
		// part of IE6 dropdown fix 
		if (window.ie6) {
		    this.selectList.setStyle('visibility','hidden');
		} else {
		    this.selectList.setStyle('display','none');
		}
	},
	createSelect: function(){
		var previousDropdown = this.type;
		this.level != 0 ? previousDropdown = this.type+""+this.level : 0;
		var newLevel = this.level+1;
		SelectManager.create({id:this.type,text:'SELECT PRODUCT CATEGORY',level:newLevel,isDynamic:true,dynamic:{previous:previousDropdown}});
	}
});