var DropUp = new Class({

	options: {
		optioncontainer_class:'kan-dropup-container',
		optionlist_class: 'kan-dropup-optionlist',
		option_class: 'kan-dropup-option',
		option_hovered_class: 'kan-dropup-option-hover',
		option_trigger_class: 'kan-dropup-trigger',
		option_trigger_active_class: 'kan-dropup-trigger-active',
		direction: 'up'
	},
	
	target: null,
	
	labels: [],
	
	container: null,
	
	options_trigger: null,
	
	options_container: null,
	
	_options_list_shield: null, 
	
	_document_click_event: null,
	
	initialize: function(target, options) {
		this.setOptions(options);
		this.target = $(target);
		this._build();
	},
	
	_build: function() {
		
		var z_index = 800;
		
		this._document_click_event = this._document_clicked.bindWithEvent(this);
		
		this.container = new Element('div');
		this.container.addClass(this.options.optioncontainer_class);
		this.container.setStyles({'position':'relative'});
		
		this._options_list_shield = new Element('iframe');
		
		this.options_container = new Element('div');
		var options_inner_container = new Element('ul');
		this.options_container.addClass(this.options.optionlist_class);
		this.options_container.setStyles({
											'visibility':'hidden', 
											'display':'none',
											'z-index': (++z_index)
										});
		
		var options = this.target.getElements('option');
		for(var i = 0;i < options.length;i++) {
			this._create_option(options[i], i, options[i].get('value')).inject(options_inner_container);
		}
		
		options_inner_container.inject(this.options_container);
		this.options_container.inject(this.container);
		this.container.inject(this.target, 'after');
		
		this.options_trigger = new Element('div');
		this.options_trigger.addClass(this.options.option_trigger_class);
		this.options_trigger.setStyles({'cursor':'pointer', 'z-index': (++z_index), 'position': 'absolute'});
		this.options_trigger.addEvent('click', this._options_trigger_click.bindWithEvent(this));
		
		var options_label = new Element('span');
		options_label.set('text', this.getLabel());
		options_label.inject(this.options_trigger);
		this.options_trigger.inject(this.options_container, 'after');
		
		this.target.setStyles({'visibility':'hidden', 'display':'none'});
		
		//	Dropup fix for IE
		if (Browser.Engine.trident) {
			var wrapperElement = $('main');
			if (wrapperElement) {
				wrapperElement.addEvent('resize', this._resize_function.bindWithEvent(this));
			}
		}
	},
	
	//	Repositioning for IE
	_resize_function: function() {
		this.options_trigger.setStyle('position', 'relative');
		this.options_trigger.setStyle('position', 'absolute');
	},
	
	_create_option: function(option, index, value) {
		
		var new_option = new Element('li');
		var new_option_label = new Element('span');
		
		new_option.addClass(this.options.option_class);
		new_option_label.set('text', option.get('text').trim());
		new_option_label.inject(new_option);

		new_option.addEvent('mouseenter', this._option_hover.bindWithEvent(this, [new_option]));
		new_option.addEvent('mouseleave', this._option_end_hover.bindWithEvent(this, [new_option]));
		new_option.addEvent('click', this._option_click.bindWithEvent(this, [new_option, index]));
		
		return new_option;
	},
	
	_option_hover: function(e, option) {
		option.addClass(this.options.option_hovered_class);
	},
	
	_option_end_hover: function(e, option) {
		option.removeClass(this.options.option_hovered_class);
	},
	
	_option_click: function(e, option, index) {
		var evt = new Event(e).stopPropagation();
		$(this.target[index]).set('selected', 'selected');
		if($chk(this.target.get('onchange')))	{
			this.target.onchange.bind(this.target).call(e);
		}
		this.onChange();
		this.hideOptions();
	},
	
	_options_trigger_click: function(e) {
		var evt = new Event(e).stopPropagation();
		this.showOptions();
	},
	
	_document_clicked: function(e) {
		var evt = new Event(e);
		this.hideOptions();
	},
	
	showOptions: function() {
		this.options_trigger.addClass(this.options.option_trigger_active_class);
		this.options_container.setStyles({
											'visibility': 	'visible', 
											'display': 		'block',
											'position': 	'absolute'
										});
		this.options_container.setStyles({
											'width': 		this.getOptionListSize().x,
											'height': 		this.getOptionListSize().y
										});
		this.options_container.setStyles({
											'left': 		this.getOptionListPosition().x,
											'top': 			this.getOptionListPosition().y
										});
		document.addEvent('click', this._document_click_event);
	},
	
	hideOptions: function() {
		this.options_trigger.removeClass(this.options.option_trigger_active_class);	
		this.options_container.setStyles({'visibility':'hidden', 'display':'none'});
		document.removeEvent('click', this._document_click_event);
	},
	
	onChange: function() {
		this.options_trigger.getFirst().set('text', this.getLabel());
	},
		
	getSelectedIndex: function() {
		return this.target.selectedIndex;
	},
	
	getLabel: function() {
		return this.target[this.getSelectedIndex()].get('text');
	},
	
	getOptionListPosition: function() {
		return {x:this.getOptionListLeft(), y:this.getOptionListTop()}
	},
	
	getOptionListLeft: function() {
		return 0;
	},
	
	getOptionListTop: function() {
		var top = (0 - this.options_container.getScrollSize().y);
		return top;
	},
	
	getOptionListSize: function() {
		return {x:this.options_trigger.getSize().x, y:this.options_container.getSize().y}
	}

});
DropUp.implement(new Options);
DropUp.implement(new Events);

resize_function = function (){
	alert("Thanks for resizing!");
}

// Setup the drop up boxes
var dropups = [];
var setup_drop_ups = function() {
	var candidates = $$('.kan-drop-up');
	for(var i = 0; i < candidates.length; i++) {
		if(candidates[i].get('tag') == "select") { // For now only select box supported
			dropups.push(new DropUp(candidates[i]));
		}
	}
}
window.addEvent('domready', setup_drop_ups);