// prototype 1.6.0 needed

var SelectBox = Class.create({
	initialize: function(element) {
		element = $(element);

		this.opening = false;
		this.select_element = element;
		this.select_div = new Element('div', { 'class': element.className }).addClassName('selectbox');
		this.select_div.observe('click', this.toggle.bindAsEventListener(this));

		this.value_div = new Element('div', { 'class': 'value' }).update(element.options[Math.max(0, element.options.selectedIndex)].text);
		this.select_div.insert(this.value_div);

		this.options_div = new Element('div', { 'class': 'options' });
		this.select_div.insert(this.options_div);

		for(var i = 0; i < element.options.length; i++) {
			var option = new Element('a', { 'class': 'option', href: '#', value: element.options[i].value }).update(element.options[i].text);
			if(i == element.options.selectedIndex)
				option.addClassName('selected');
			option.onclick = function(event, index) {
				this.selectIndex(index);
				return false;
			}.bindAsEventListener(this, i);
			this.options_div.insert({ bottom: option });
		}

		Element.observe(document, 'click', function() {
			if(!this.opening)
				this.close();
			this.opening = false;
		}.bindAsEventListener(this));

		element.insert({ after: this.select_div });
		element.setStyle({ display: 'none' });
	},

	selectIndex: function(index) {
		var option = this.options_div.select('.option')[index];
		this.value_div.update(option.innerHTML);
		this.options_div.select('.selected').each(function(e) {
			e.removeClassName('selected');
		});
		option.addClassName('selected');
		this.select_element.selectedIndex = index;
		if(typeof this.select_element.onchange == 'function')
			this.select_element.onchange();
	},

	open: function() {
		this.opening = true;
		this.select_div.addClassName('open');

		var offset = this.select_div.positionedOffset();
		this.options_div.setStyle({
			display:  'block',
			position: 'absolute',
			top:      offset.top + this.select_div.getHeight() + 'px',
			left:     offset.left + 'px',
			width:    -2 + this.select_div.getWidth() + 'px',
			zIndex:   9999
		});
	},

	close: function() {
		this.select_div.removeClassName('open');
		this.options_div.setStyle({ display: 'none' });
	},

	toggle: function() {
		if(this.select_div.hasClassName('open'))
			this.close();
		else
			this.open();
	}
});

Element.observe(document, 'dom:loaded', function() {
	$$('select.selectbox').each(function(e) {
		new SelectBox(e);
	});
});