/*
<div class="select">
	<input type="hidden" name="sorteren" value="{value}" />
	<div class="value">{titel}</div>
	<div class="select_items" style="display: none;">
		<div class="border">
			<div class="select_item" title="{value}">{titel}</div>
		</div>
	</div>
</div>

.select {
	position: relative;
	float: left;
	width: 153px;
	height: 21px;
	line-height: 21px;
	text-indent: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #837b7b;
	background: url(../images/template/selectbox.gif) no-repeat;
	margin-top: 3px;
	margin-bottom: 8px;	
	padding: 0px 5px 0px 5px;	
}

.select .value {
	position: relative;
	float: left;
	width: 159px;
	cursor: pointer;
	font-style: italic;
}

.select .select_items {
	position: absolute;
	left: 0px;
	top: 21px;
	width: 159px;
	border: 1px #d8d8d8 solid;
	border-top: 0px;
}

.select_item {
	background: #FFFFFF;
	cursor: pointer;
}

.select_item.hover
{
	background: #ededed;
}
*/

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;
			titel = $(Item).innerHTML;
			
			inputs = $(selectbox).getElementsBySelector('input');
			values = $(selectbox).getElementsByClassName('value');
			
			$(inputs[0]).value = value;
			$(values[0]).innerHTML = titel;
		});
		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);