Event.observe(window, 'load', function() {
	var dropdowns = $$('div.dropdown');
	dropdowns.each(function(dropdown) {
		Event.observe(dropdown.down('div.selection'), 'click', toggleDropdown);
		dropdown.down('ul').setOpacity(0.9);
		var items = dropdown.select('li');
		items.each(function(item) {
			Event.observe(item, 'click', selectDropdown);
		});
	});
});

if (navigator.userAgent.indexOf('KHTML') == -1) {
	Event.observe(document, 'click', function(event) {
		var dropdowns = $$('div.dropdown');
		dropdowns.each(function(dropdown) {
			list = dropdown.down('ul');
			if (!Position.within(dropdown, Event.pointerX(event), Event.pointerY(event)) &&
				!list.hasClassName('hidden'))
				list.addClassName('hidden');
		});
	});
}

function toggleDropdown(event)
{
	var list = Event.element(event).up('div.dropdown').down('ul');
	if (list.hasClassName('hidden'))
		list.removeClassName('hidden');
	else
		list.addClassName('hidden');
}

function selectDropdown(event)
{
	var element = Event.element(event);
	var dropdown = element.up('div.dropdown');

	// alter input field
	var input = dropdown.down('input');
	input.writeAttribute('value', element.down('span.hidden').innerHTML);

	// alter selected item
	var selected = dropdown.down('div.selected');
	selected.innerHTML = element.innerHTML;

	// do submit
	if (dropdown.hasClassName('submit')) {
		var form = element.up('form');
		form.submit();
	}
}