var CustomSelect = Class.create();
Object.extend(CustomSelect.prototype, {
	initialize: function(select, debug) {
	
		if($('custom_' + select)) { $('custom_' + select).remove(); }
	
		if(debug) this.debug = true;
		this.select = $(select);
		if(this.debug) console.log(this.select.options[this.select.selectedIndex].value);
		this.wrapper = this.select.parentNode;
		if(this.debug) console.log(this.select);
		this.customize();
		this.visible = false;
	},
	customize: function()
	{
		var clazz = "customSelect";
		if(Element.hasClassName(this.select, 'error')) { clazz = "customSelect error"; }
		this.customWrapper = new Element('div', {'id': 'custom_'+this.select.id, 'class': clazz});
			this.customActive = new Element('a', {'id': 'custom_'+this.select.id+'_active', 'class': 'customSelectLink', 'style': 'cursor: pointer;'});
			this.customActive.update(this.select.options[this.select.selectedIndex].text);
			this.customWrapper.insert(this.customActive);
			
			this.customListWrapper = new Element('div', {'id': 'customListWrapper_'+this.select.id, 'class': 'customListWrapper'});
			this.customList = new Element('ul', {'id': 'customList_'+this.select.id});
			
			var li, link;
			for (var i = 0; i<= this.select.options.length - 1; i++) {
				if(this.debug) console.log(this.select.options[i].value, this.select.options[i].text, this.select.options[i].selected);
				li = new Element('li');
				link = new Element('a', {'rel': i, 'style': 'cursor: pointer;', 'href': '#'}).update(this.select.options[i].text);
				li.insert(link)
				this.customList.insert(li);
			}
		
		this.customListWrapper.insert(this.customList);
		this.customWrapper.insert(this.customListWrapper);
		if(this.wrapper) {
			this.wrapper.appendChild(this.customWrapper);
		}
		this.select.hide();
		
		this.showList = this.showList.bindAsEventListener(this);
		Event.observe(this.customActive, 'click', this.showList);
		
		var s = this;
		Event.observe(this.customListWrapper, 'mouseout', function(event) {
			var elm = Event.element(event);
			if(s.visible === true) { s.hideList(0.25); }
		});
		Event.observe(this.customListWrapper, 'mouseover', function(event) {
			var elm = Event.element(event);
			if(s.fx) { s.fx.cancel(); }
		});
		$$('#'+this.customList.id + ' li a').each(function(listLink){
			Event.observe(listLink, 'click', function(event){
				var elm = Event.element(event);
				event.stop();
				s.updateList(elm);
				return false;
			});
		});
	},
	showList: function(event)
	{
		Event.stopObserving(this.customActive, 'click', this.showList);
		
		var elm = Event.element(event);
		var wrapper = elm.next();
		wrapper.setStyle({ display: 'block' });
		wrapper.parentNode.setStyle({ zIndex: 100 });
		if(this.customList.offsetHeight > 100) { this.customList.setStyle({ height: '100px', overflow: 'auto', position: 'relative' }); }
		wrapper.parentNode.parentNode.style.zIndex = 1000;
		this.visible = true;
	},
	updateList: function(active)
	{
		this.customActive.update(active.innerHTML);
		this.select.selectedIndex = active.rel;
		this.select.fire('dCS:'+this.select.id+':change', {selectValue:this.select.options[this.select.selectedIndex]});
		this.hideList(0);
	},
	hideList: function(time)
	{
		this.fx = new Effect.Fade(this.customListWrapper, {
			duration: 0.2, 
			delay: time, 
			afterFinish: function() {
				this.customListWrapper.removeAttribute('style');
				this.customWrapper.removeAttribute('style');
				this.customWrapper.parentNode.removeAttribute('style');
				this.customWrapper.parentNode.parentNode.removeAttribute('style');
				this.visible = false;
				Event.observe(this.customActive, 'click', this.showList);
			}.bind(this)
		});
	}
});

function dbnCustomSelectInit(id) {
	var dbnCustomSelect = new CustomSelect(id);
}

Event.observe(window, 'load', function() {

	$$('select.dbnCustomSelect').each(function(dCS) {
		dbnCustomSelectInit(dCS.id);
	});

});