var myCustomSelect = new Class({

	initialize: function(item) {
		this.input = $(item);
		this.isOpen = false;
		this.index = -1;
		this.build();
	},

	build: function(){
		var option = this.input.getElementsByTagName("option");
		var active = option[0].childNodes[0].nodeValue;
		for(b = 0; b < option.length; b++) {
			if(option[b].selected == true) {
				var active = option[b].childNodes[0].nodeValue;
			}
		}
		this.input.setStyles({
			'position':'absolute',
			'left':'-9000px'
		});
		this.newSelect = new Element("div")
		.addClass("select")
		.setStyles({
			'width':'303px',
			'z-index':1
		})
		.setProperty('id',"select" + this.input.name)		
		.appendText(active)
		.addEvent('click',this.display.bind(this))
		.injectAfter(this.input);
		$("select" + this.input.name).functie = this.input.onchange;
		this.list = new Element("ul").addClass("dropdown");
		this.fx = new Fx.Tween(this.list,{link:'chain',transition: Fx.Transitions.Expo.easeInOut});
		for(c=0;c<(option.length);c++){
			var listitem = new Element('li').appendText(option[c].text);
			listitem.index = c;
			if(this.input.value==option[c].value){
				listitem.className="selected";	
			}
			listitem.addEvent('mouseover',function(){				
				if(this.className!="selected"){
					this.className = "mouseover";
				}
			});						
			listitem.addEvent('mouseout',function(){
				if(this.className!="selected"){
					this.className = "mouseout";
				}
			});			
			listitem.addEvent('click',this.choose.bind(this, listitem));
			this.list.adopt(listitem);
		};
		var size = window.getScrollSize();					
		var coord = this.newSelect.getCoordinates();
		var y = coord.bottom;					
		var top = this.newSelect.getCoordinates().height-1;
		var width = this.newSelect.getCoordinates().width-(this.newSelect.getStyle('border').toInt()*2);
		this.list.setStyles({
			'position': 'absolute',
			'height': '0px',
			'top': top,
			'width': width
		});
		this.list.setProperty("id","newselect" + this.input.name);
		this.list.injectAfter(this.newSelect);		
	},
	
	choose: function(listitem){
		var input = this.input.id;
		var inputName = this.input.name
		var newSelect = this.newSelect.id;
		this.input.selectedIndex = listitem.index;
		this.newSelect.set('html',listitem.innerHTML);
		this.isOpen = false;		
		$each(this.list.getElementsByTagName("li"),function(opt,index){
			opt.className = "";
		});
		listitem.className = "selected";
		
		this.hide();
		if(this.input.onchange != undefined){
			this.input.onchange();
		}
	},
	
	display: function(){
		if(this.isOpen==false){													
			this.show();
		} else {
			this.hide();
		}
	},
	
	show: function(){
		this.isOpen = true;	
		this.fx.start('height','0px','150px');
		this.list.setStyles({
			'top': this.newSelect.getCoordinates().height
		});
	},
	
	hide: function(){
		this.isOpen = false;
		this.fx.start('height','150px','0px');
		this.list.setStyles({
			'top': this.newSelect.getCoordinates().height-1
		});
	}
	
});