var selectedValues = { categorie: "alles", sorteer: "beide" };

var SkinnedSelect = new Class({ 
	options: {
		className: 'skinSelect',
		showDelay: 100,
		hideDelay: 100,
		parentDiv:'',
		onShow: function(el){
			el.setStyle('visibility', 'visible');
		},
		onHide: function(el){
			el.setStyle('visibility', 'hidden');
		},
		onOver: function(el){
			el.addClass(this.options.className + "-option_over");
		},
		onOut: function(el){
			el.removeClass (this.options.className + "-option_over");
		},
		onSelectItem:function(el){
			
		}
	},
	
	initialize: function(elements, options){
		this.setOptions(options);
		$$(elements).each(this.buildSelect, this);
		if (this.options.initialize) this.options.initialize.call(this);
	},
	
	buildSelect: function(el){
		this.selectContainer = new Element('div', {
			'id': el.id+'Opt',
			'class': this.options.className + '-container',
			'styles': {
				'display':'inline',
				'position': 'absolute',
				'cursor': 'pointer',
				'overflow':'hidden',
				'z-index': el.getStyle('z-index')
			}
		}).injectBefore(el);
		this.selectContainer.refSelect=el
		this.selectContainer.refClass=this
		this.position(el)
		
		window.addListener('resize',this.handleResizeEvent.bind(this.selectContainer));
		
		this.selectedTitleHolder = new Element('div', {'class': this.options.className + '-selected'}).inject(this.selectContainer)
		
		this.selectedTitleHolderLeft	= new Element('div', {'class': this.options.className + '-selected-left'}).inject(this.selectedTitleHolder).setHTML(" ")
		this.selectedTitleHolderRight 	= new Element('div', {'class': this.options.className + '-selected-right'}).inject(this.selectedTitleHolder).setHTML(" ")
		this.selectedTitleHolderCenter 	= new Element('div', {'class': this.options.className + '-selected-center'}).inject(this.selectedTitleHolder)
	
		this.wrapper = new Element('div', {'class': this.options.className + '-panel'}).inject(this.selectContainer);

		for(var j=0; j < el.options.length; j++) {
			var title = new Element('div', {'class': this.options.className + '-option'}).inject(this.wrapper);
			title.refSelect = el;
			title.refOption = el.options[j];
			title.setHTML(el.options[j].text);
			if(el.options[j].selected == true){
				this.selectedTitleHolderCenter.setHTML(el.options[j].text);
			}
			title.addEvent('mouseenter', 	function(event){this.fireEvent('onOver', 		[event.target])}.bind(this));
			title.addEvent('mouseleave', 	function(event){this.fireEvent('onOut', 		[event.target])}.bind(this));
			title.addEvent('click',			function(event){var ev = event.target?event.target:event.srcElement; this.fireEvent('onSelectItem', [ev]);this.SelectItem(ev)}.bind(this));
			//title.addEvent('click',			function(event){this.printEvent(event)}.bind(this));
		}
		
		this.panelHeight = this.wrapper.scrollHeight;
		
		this.wrapper.setStyles({'height':0})
		el.setStyles({
			'visibility': 'hidden'
		});
		
		this.selectedTitleHolder.addEvent('mouseenter', function(event){
			this.start(this.wrapper);
		}.bind(this));
		
		this.selectContainer.addEvent('mouseleave', function(event){
			this.end(this.wrapper);
		}.bind(this));
		
	},
	
	handleResizeEvent:function(e){
		this.refClass.position(this.refSelect)
	},
	
	position: function(element){
		var pos = element.getPosition();
		/*this.selectContainer.setStyles({
			'left': pos.x,
			'top': pos.y
		});*/
	},
	
	update: function(el){
		//this.selectContainer.empty();
		this.wrapper.empty();
		//this.wrapper = new Element('div', {'class': this.options.className + '-panel'}).inject(this.selectContainer);

		for(var j=0; j < el.options.length; j++) {
			var title = new Element('div', {'class': this.options.className + '-option'}).inject(this.wrapper);
			title.refSelect = el;
			title.refOption = el.options[j];
			title.setHTML(el.options[j].text);
			if(el.options[j].selected == true){
				this.selectedTitleHolderCenter.setHTML(el.options[j].text);
			}
			title.addEvent('mouseenter', 	function(event){this.fireEvent('onOver', 		[event.target])}.bind(this));
			title.addEvent('mouseleave', 	function(event){this.fireEvent('onOut', 		[event.target])}.bind(this));
			title.addEvent('click',			function(event){var ev = event.target?event.target:event.srcElement; this.fireEvent('onSelectItem', [ev]);this.SelectItem(ev)}.bind(this));
			//title.addEvent('click',			function(event){this.printEvent(event)}.bind(this));
		}
		
		this.panelHeight = this.wrapper.scrollHeight;
		this.wrapper.setStyles({'height':0})
		//alert("heelahola");	
	},
	
	start: function(el){
		$clear(this.timer);
		this.timer = this.show.delay(this.options.showDelay, this,[el]);
	},

	end: function(el){
		$clear(this.timer);
		this.timer = this.hide.delay(this.options.hideDelay, this,[el]);
	},
	
	show: function(el){
		if (this.options.timeout) this.timer = this.hide.delay(this.options.timeout, this);
		this.fireEvent('onShow', [el]);
	},

	hide: function(el){
		this.fireEvent('onHide', [el]);
	},
	
	SelectItem: function(el){
		for(var j = 0; j < el.refSelect.options.length; j++) {
			if(el.refSelect.options[j]==el.refOption) {
				el.refSelect.options[j].selected = "selected";
				this.selectedTitleHolderCenter.setHTML(el.refOption.text);
				// Ajax: Pagina laden:
				
				if (el.refSelect.name == "categorie") {
					selectedValues.categorie = el.refOption.value;
				}
				if (el.refSelect.name == "sorteer") {
					selectedValues.sorteer = el.refOption.value;
				}
				
				// Kijken of dit nederlands of engels is:
				/*
				var loc = window.location.toString();
				loc = loc.replace('http://', '');
				var a = loc.split('/');
				var code = a[1];
				if(code!='nl'||code!='en') { code = 'nl'; }  // Voor de zekerheid.
				*/
				var code = jQuery("meta[name=language]").attr("content");
				if(code=='') { code = 'nl'; }  // Voor de zekerheid.
				
				jQuery("div#content").load("/" + code + "/ajax_publicaties.html?categorie=" + selectedValues.categorie + "&sorteer=" + selectedValues.sorteer, function(){
					jQuery("div#content a.paginator_link").each(function(){
						var href = jQuery(this).attr("href");	
						if(code=='nl') {
							jQuery(this).attr("href", href.replace("ajax_publicaties.html", "organisatie/columns-en-publicaties.html"));
						} else {
							jQuery(this).attr("href", href.replace("ajax_publicaties.html", "organisation/columns-and-publications.html"));
						}
					});
				});
			}
			else {
				el.refSelect.options[j].selected = "";
			}
		}
		this.end(this.wrapper);
	}
});

SkinnedSelect.implement(new Events, new Options);