var OM_mooCustomSelect = new Class({
	Implements: [Options, Events],
	options: {
		validation: null
	},
	initialize: function(options,id){
		this.setOptions(options);
		this.dropdown = id;
		window.addEvent('domready', this.domReady.bind(this));
	},
	domReady: function(){
		this.dropdown = $(this.dropdown);
		if($defined(this.dropdown)){
			this.createSelect();
		};
	},
	createSelect: function(){
		// Store original properties
		this.properties = this.dropdown.getProperties('id','name');
		this.copy = this.dropdown.clone(true,true);
		this.opts = this.copy.getElements('option');
		this.value = this.getPlaceholderText(this.copy);
		
		// Create dropdown container
		this.container = new Element('div',{
			'class': 'om-select-holder'
		}).inject(this.dropdown,'after');

		// Create selected option container
		this.selectedOption = new Element('div', { 'class': 'selected-option' }).inject(this.container)
			
		// Create new hidden input
		this.input = new Element('input', {
			'type': 'hidden',
			'name': this.properties.name,
			'id': this.properties.id,
			'value': '',
			'accept': this.options.validation
		}).cloneEvents(this.dropdown).inject(this.selectedOption);
		
		// Remove original select from DOM
		this.dropdown.destroy();
		
		// Create dropdown label & arrow
		this.label = new Element('div', { 'class': 'label', 'html': this.value }).inject(this.selectedOption);
		new Element('div', { 'class': 'arrow', 'html': ' ' }).inject(this.selectedOption);
		
		// Create dropdown list containers
		this.ddContainer = new Element('div', { 'class': 'dd-container' }).inject(this.container).hide();
		this.ddHolder = new Element('div', { 'class': 'dd-holder' }).inject(this.ddContainer);
		this.ddUL = new Element('ul').inject(this.ddHolder);
		
		// Create dropdown options
		this.createDropdownOptions(this.ddUL,this.opts);
		
		// Attach events
		this.attachEvents();
	},
	attachEvents: function(){
		var that = this;
		
		// Bind dropdown toggle on selected option area
		this.selectedOption.addEvent('click', function(event){
			that.toggleSelect();
		});
		
		// Bind close dropdown events (click outside & escape key)
		document.addEvents({
			'click': function(event){
				if(that.ddContainer.isDisplayed()){
					if(!event.target || !$(event.target).getParents().contains(that.container)){
						that.toggleSelect();
					};
				};
			},
			'keydown': function(event){
				if(event.key == 'esc' && that.ddContainer.isDisplayed()){
					that.toggleSelect();
				};
			}
		});
	},
	createDropdownOptions: function(ul,opts){
		var that = this;
		opts.each(function(item,index){
			if(index>0){
				this.li = new Element('li').inject(ul);
				new Element('a', { 'href': '#', 'rel': item.get('value'), 'text': item.get('text') })
					.inject(this.li)
					.addEvent('click', function(event){
						event.stop();
						that.selectOption(this,true);
					});
				
				if(item.get('selected')){
					this.selectOption(this.li.getElement('a'),false);
				};
			};
			
		},this);
	},
	selectOption: function(a,toggle){
		this.input.set('value', a.get('rel'));
		this.label.set('text', a.get('text'));
		if(toggle) this.toggleSelect();
		this.input.fireEvent('change');
	},
	getPlaceholderText: function(el){
		var placeholderText;
		var opts = el.getElements('option');
		if(opts.length>0){
			placeholderText = opts[0].get('text');
		};
		return placeholderText;
	},
	toggleSelect: function(){
		// Simple dropdown display toggle
		this.ddContainer.toggle();
	}
});

/*--------------------------------------------------------------------

	Features to add :
		* Animate dropdown
		* Allow keyboard navigation (arrow up & down)
		
		
	Generated markup example :
	
		<div class="om-select-holder">
			<div class="selected-option">
				<input type="hidden" name="ddl_Color" id="ddl_Color" value="Choisir une couleur" readonly="readonly" />
				<div class="label">Choisir une couleur</div>
				<div class="arrow">&nbsp;</div>
			</div>
			<div class="dd-container">
				<div class="dd-holder">
					<ul>
						<li><a href="#" rel="1">Rouge</a></li>
						<li><a href="#" rel="1">Bleu</a></li>
						<li><a href="#" rel="1">Vert</a></li>
						<li><a href="#" rel="1">Rose / blanc</a></li>
						<li><a href="#" rel="1">Jaune / vert</a></li>
						<li><a href="#" rel="1">Rouge / blanc / vert</a></li>
					</ul>
				</div>
			</div>
		</div>
		
--------------------------------------------------------------------*/