var CustomSelect = new Class({
	Implements: Events,
	initialize: function(selectArea, styleClass){
		if(!selectArea) { return (false); }
		this.selectArea = selectArea;
		this.styleClass = styleClass;
		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': this.styleClass ,
			'id': this.styleClass
		});
		this.dropArea = new Element('div', {
			'class': 'status'
		});
		this.selectedOption = new Element('div', {
			'class': 'selected'
		});
		this.optionContainer = new Element('div', {
			'class': 'optContainer',
			'html': ''
		});
		this.selectedOption.inject(this.dropArea);
		this.dropArea.inject(this.selectField);
		this.optionContainer.inject(this.selectField);
		this.selectField.inject(this.selectArea, 'top');
	},
	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() {
			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.optionContainer);

	},
	addOption: function(option) {
		newOption = this.returnOption(option);
		newOption.inject(this.optionContainer);
	},
	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.setHTML(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.setText(this.selected.getText());
			this.selectElement.value = event.target.value;
			document.location=this.selectElement.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;
			this.optionContainer.setStyle('display','block');
			this.selectField.setStyle('z-index', 100000);
		}
	},
	hideList: function() {
		if(this.selectOpen == true) {
			this.selectOpen = false;
			this.optionContainer.setStyle('display','none');
			this.selectField.setStyle('z-index', 1);
		}
	}
});


var CustomSelectOther = new Class({
	Implements: Events,
	initialize: function(selectArea, styleClass, id_div){
		if(!selectArea) { return (false); }
		this.selectArea = selectArea;
		this.styleClass = styleClass;
		this.id_div = id_div;
		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': this.styleClass ,
			'id': this.id_div 
			//'id': this.styleClass+'_'+this.id_div 
		});
		this.dropArea = new Element('div', {
			'class': 'status'
		});
		this.selectedOption = new Element('div', {
			'class': 'selected'
		});
		this.optionContainer = new Element('div', {
			'class': 'optContainer',
			'html': '',
			'id':'optContainer'
		});
		this.selectedOption.inject(this.dropArea);
		this.dropArea.inject(this.selectField);
		this.optionContainer.inject(this.selectField);
		this.selectField.inject(this.selectArea, 'top');
	},
	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() {
			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.optionContainer);

	},
	addOption: function(option) {
		newOption = this.returnOption(option);
		newOption.inject(this.optionContainer);
	},
	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.setHTML(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.setText(this.selected.getText());
			this.selectElement.value = event.target.value;
			this.hideList();
			//console.log(this.selected.getParent().getParent().id);
			//alert(this.id_div);
			if (this.id_div == "interne" ) {
				if (this.selectElement.value >0 ) {
					$('did').value = 0;
					var did = $('entree').getFirst().getFirst().setHTML("Difficulté");
					var didplus = $('entree').getChildren();
					var didplus_select = $(didplus[1].id);
					didplus_select.getElements('div.selected').removeClass('selected');
					didplus_select.getFirst().addClass('selected');

					$('cid').value = 0;
					var cid = $('plat').getFirst().getFirst().setHTML("Coût");
					var cidplus = $('plat').getChildren();
					var cidplus_select = $(cidplus[1].id);
					cidplus_select.getElements('div.selected').removeClass('selected');
					cidplus_select.getFirst().addClass('selected');

					$('ptid').value = 0;
					var ptid = $('dessert').getFirst().getFirst().setHTML("Temps");
					var ptidplus = $('dessert').getChildren();
					var ptidplus_select = $(ptidplus[1].id);
					ptidplus_select.getElements('div.selected').removeClass('selected');
					ptidplus_select.getFirst().addClass('selected');
				}	
			}else {
					if (this.selectElement.value >0 ) {
						$('rid').value = 0;
						var rid = $('interne').getFirst().getFirst().setHTML("Choisir");
						var ridplus = $('interne').getChildren();
						var ridplus_select = $(ridplus[1].id);
						ridplus_select.getElements('div.selected').removeClass('selected');
						ridplus_select.getFirst().addClass('selected');
					 }			
			}
		}
		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;
			this.optionContainer.setStyle('display','block');
			this.selectField.setStyle('z-index', 100000);
		}
	},
	hideList: function() {
		if(this.selectOpen == true) {
			this.selectOpen = false;
			this.optionContainer.setStyle('display','none');
			this.selectField.setStyle('z-index', 1);
		}
	}
});