var FancyDropdown = Class.create();
FancyDropdown.prototype = {
	initialize: function(element)
	{
		var Engine = {
			detect: function() {
				var UA = navigator.userAgent;
				this.isKHTML = /Konqueror|Safari|KHTML/.test(UA);
				this.isGecko = (/Gecko/.test(UA) && !this.isKHTML);
				this.isMSIE  = (/MSIE/.test(UA) && !this.isOpera);
				this.isMSIE7 = this.isMSIE && !(/MSIE 6\./.test(UA) && !this.isOpera);
			}
		}
		Engine.detect();
		
		if (Engine.isMSIE) {
			return false;
		}
		
		this._el = $(element);
		
		// container for list
		var cont = document.createElement('div');
		cont.className = 'gfw_dropdown_wrap';
		
		Element.setStyle(cont, {position:'relative'});
		
		// button at top and current element
		var dropdown = document.createElement('div');
		dropdown.className = 'gfw_dropdown';
		dropdown.onclick = function() { this._list.show(); return false; }.bind(this);
		
		this._selected = document.createElement('div');
		this._selected.innerHTML = this._el.options[this._el.selectedIndex].text;
		
		dropdown.appendChild(this._selected);
		cont.appendChild(dropdown);
		
		// list
		this._list = document.createElement('div');
		
		Element.setStyle(this._list, {position:'absolute', zIndex:'999', display:'none'})
		
		// append original elements to new list
		for (var i = 0; i < this._el.options.length; i++)
		{
			var item = document.createElement('div');
			item.className = 'gfw_dropdown_list_item';
			
			var link = document.createElement('a');
			
			link.value = i; //this._el.options[i].value;
			link.href = '#'
			
			Event.observe(link, 'click', function(e) {
				var target = Event.element(e);
				Event.stop(e);
				this.handleClick(target.value, target.innerHTML);
			}.bindAsEventListener(this));
			link.appendChild(document.createTextNode(this._el.options[i].text))
			item.appendChild(link);
			this._list.appendChild(item);
		}

		// add list to container
		cont.appendChild(this._list);

		// hide original element
		this._el.hide();
		
		// place container before original element
		this._el.parentNode.insertBefore(cont, this._el);
		
	},
	
	handleClick: function(val, text)
	{
		this._list.hide();
		this._selected.innerHTML = text;
		this._el.selectedIndex = val;
		
		// fire the change event of the original element
		var evObj = document.createEvent('HTMLEvents');
		evObj.initEvent( 'change', true, true );
		this._el.dispatchEvent(evObj);
	}
}