var CustomSelects = Class.create({
	current: undefined,
	onChange: undefined,
	maxHeight: 200,
	hasNextFocus: undefined,
	hasFocus: undefined,
	previousInput: undefined,
	nextInput: undefined,
	initialize: function(options) {
		if (options) {
			if (options.onChange) this.onChange = options.onChange;
			if (options.maxHeight) this.maxHeight = options.maxHeight;
		}
		
		this.hasNextFocus = false;
		this.hasFocus = false;
	
		// step backwards through count for proper z-index stacking
		var selects = $$('.select_menu');
		var count = selects.length;
		$$('.select_menu').each((function(x) {
			x.setStyle({ zIndex: count });
			count--;
			
			// if there's a previous input element, capture the tab key
			/*if (x.up('.form_group').previous('.form_group')) {
				this.previousInput = x.up('.form_group').previous('.form_group').down('input');
				this.previousInput.observe('focus', (function() { this.hasNextFocus = true }).bind(this));
				this.previousInput.observe('blur', (function() { this.hasNextFocus = false }).bind(this));
			}
			if (x.up('.form_group').next('.form_group')) {
				this.nextInput = x.up('.form_group').next('.form_group').down('input');
			}
			
			document.observe('keypress', (function(event) {
				// put focus on the select control
				if (event.keyCode == Event.KEY_TAB && this.hasNextFocus){
					this.current = this.previousInput.up('.form_group').next('.form_group').down('.select_menu');
					this.current.addClassName('select_menu_highlight');
					this.current.down('ul').show();
					if (this.nextInput) this.nextInput.blur();
					this.hasNextFocus = false;
					this.hasFocus = true;
				} else if (this.hasFocus && this.nextInput) this.nextInput.focus();
			}).bindAsEventListener(this));*/
		}).bind(this));
		this.loadListItems();
		document.observe('click', (function(event) {
			var element = event.findElement('.select_menu');
			if (element) { // clicking inside 
				if (this.current) {
					this.current.removeClassName('select_menu_highlight');
					this.current.down('ul').hide();
					if (this.current != element) {
						this.current = element;
						this.current.down('ul').show();
					} else this.current = undefined;
				} else {
					this.current = element;
					this.current.addClassName('select_menu_highlight');
					this.current.down('ul').show();
				}
			} else if (this.current) {
				this.current.removeClassName('select_menu_highlight');
				this.current.down('ul').hide();
				this.current = undefined;
			}
		}).bind(this));
	},
	loadListItems: function() {
		$$('.select_menu ul li').each((function(li) {
			li.observe('mouseover', function(event) { this.addClassName('hover'); });
			li.observe('mouseout', function(event) { this.removeClassName('hover'); });
			li.onclick = (function(li) { 
				li.up('ul').hide();
				li.up().previous('span').update(li.innerHTML);
				li.siblings().each(function(el) { el.removeClassName('selected'); });
				li.addClassName('selected');
				if (li.readAttribute('val') != '' && li.up().previous('input[type=hidden]')) {
					li.up().previous('input[type=hidden]').value = li.readAttribute('val');
				}
				if (this.onChange) this.onChange(li);
				this.loadListItems();
			}).bind(this, li);
		}).bind(this));
		$$('.select_menu ul').each((function(ul) {
			if (ul.getHeight() > this.maxHeight) {
				ul.setStyle({ height: this.maxHeight + 'px', overflow: 'auto' });
			}
		}).bind(this));
	}
});