var SelectboxActive;

var Selectbox = Class.create();

Selectbox.prototype = {

	initialize: function() {	
		this.loadSelectboxes();
	},
	
	loadSelectboxes: function()	{
		var elements = $$('#container .select');
		
		for (var i=0; i<elements.length; i++){
			this.observeSelectbox(elements[i]);
		}
	},
	
	observeSelectbox: function(selectbox) {
		selectbox.observe('click', function(action){
			if(!SelectboxActive)
			{
				$(selectbox).down('.select_items').show();	
				var items = $(selectbox).getElementsByClassName('select_item');
				
				for (var i=0; i<items.length; i++){
					mySelectbox.observeItem(selectbox, items[i]);
				}
				
				SelectboxActive = selectbox;
				setTimeout("Event.observe(document.body, 'click', mySelectbox.closeSelectbox)",100);
			}
		});	
	},
	
	observeItem: function(selectbox, Item) {
		Item.observe('click', function(action){
			value = $(Item).title;
			waarde = $(Item).innerHTML;
			
			inputs = $(selectbox).getElementsBySelector('input');
			values = $(selectbox).getElementsByClassName('value');
			
			$(inputs[0]).value = value;
			$(values[0]).innerHTML = waarde;
		});
		Item.observe('mouseover', function(action){
			$(Item).addClassName('hover');
		});
		Item.observe('mouseout', function(action){
			$(Item).removeClassName('hover');
		});
	},
	
	closeSelectbox: function() {
		$(SelectboxActive).down('.select_items').hide();
		SelectboxActive = '';
		Event.stopObserving(document.body, 'click', mySelectbox.closeSelectbox);
	}
}

function initSelectbox() { mySelectbox = new Selectbox(); }

Event.observe(window, 'load', initSelectbox);