window.addEvent("domready",function(){				
	$$("select").each(function(select){
		select.setStyles({"margin-left":"-9999px","position":"absolute"});					
		var newSelect = new Element("div").addClass("select").setStyle("width",select.getCoordinates().width).set("title",select.options[select.selectedIndex].text).store("open","false").injectAfter(select);
		var textSelect = new Element("p").set("html",select.options[select.selectedIndex].text).setStyle("width",select.getCoordinates().width-15).inject(newSelect);
		if(select.hasClass("margin"))
			newSelect.setStyle("margin-left",3);
			newSelect.addEvents({
			"mouseenter":function(){
				newSelect.setStyle("border-color","#133D7E");
			},
			"mouseleave":function(){
				if(newSelect.retrieve("open")=="false")
					newSelect.setStyle("border-color","");
			},
			"click":function(e){						
				e.stop();
				$$(".selectContainer").each(function(container){
					var prev = container.getPrevious("div");
					if(prev!=newSelect){
						container.getPrevious("div").store("open","false");
						container.destroy();
					}
				});						
				if(newSelect.retrieve("open")=="false"){							
					newSelect.store("open","true");							
					var container = new Element("div").setStyles({
						"overflow":"hidden",
						"border":"1px solid #133D7E",
						"background":"#fff",
						"height":0
					});	
					container.set("tween",{
						transition:Fx.Transitions.Expo.easeOut,
						onComplete:function(){
							
						}
					});
					container.addClass("selectContainer").setStyles({						
						"position":"absolute",
						"top":newSelect.getCoordinates().top + newSelect.getCoordinates().height,
						"left":newSelect.getCoordinates($("wrapper")).left
					}).inject(newSelect,'after');
					select.getElements("option").each(function(option,index){						
						var span = new Element("span").set("html",option.get("text"))
						.addEvents({
							"mouseenter":function(){
								this.addClass("over");
							},
							"mouseleave":function(){
								this.removeClass("over");
							},
							"click":function(){
								textSelect.set("html",this.get("html"));
								newSelect.set("title",this.get("html"));
								container.destroy();
								newSelect.store("open","false");
								select.selectedIndex = index;
								newSelect.setStyle("border-color","#0078C8");
								
								if (select.name == 'ligplaats') {
									var query='';
									var url = new URI(window.location.href);
									if ( url.getData('subject') == null ) {
										query = query + '&subject=pagina&keuze=onze_vloot'
									} else {
										query = '&subject=' + url.getData('subject') + '&keuze=' + url.getData('keuze');
									}
									query = 'ligplaatsindex=' + index + query
									url.set('query', query);
									window.location.href= url.toString();
								}
								if (select.name == 'schip') {
									var query='';
									var url = new URI(window.location.href);
									if ( url.getData('subject') == null ) {
										query = '&subject=pagina&keuze=onze_vloot'
									} else {
										query = '&subject=' + url.getData('subject') + '&keuze=' + url.getData('keuze');
									}
									query = query + '&ligplaatsindex=' + url.getData('ligplaatsindex');
									query = 'schipindex=' + (index) + query;
									url.set('query', query);
									window.location.href= url.toString();
								}
								
							}
						})
						.inject(container);
						if(option.get("text")==select.options[select.selectedIndex].text) {
							span.addClass("selected");								
						}
					});
					if(container.getCoordinates().width < newSelect.getCoordinates().width)
						container.setStyle("width",newSelect.getCoordinates().width-2);
					container.tween("height",container.getScrollSize().y);
				} else {
					newSelect.store("open","false");
					var el = newSelect.getNext("div");
					el.set("tween",{
						transition:Fx.Transitions.Expo.easeOut,
						onComplete:function(){
							el.destroy();
							newSelect.setStyle("border-color","#0078C8");
						}
					});
					el.tween("height",0);
				}
			}
		});
	});
	document.body.addEvent("click",function(e){
		var el = e.target;					
		if(!$(el).hasClass("select")){
			$$(".selectContainer").each(function(container){
				container.getPrevious("div").store("open","false");
				container.set("tween",{
					transition:Fx.Transitions.Expo.easeOut,
					onComplete:function(){
						container.getPrevious("div").setStyle("border-color","#0078C8");
						container.destroy();						
					}
				});
				container.tween("height",0);
			});
		}
	});
});