String.prototype.trim = function()
{
	return this.replace(/^\s+|\s+$/g,'');
}

selectboxes = new Array();

jQuery.fn.extend({
	selectbox: function(options) {
		return this.each(function() {
			selectboxes[selectboxes.length] = new jQuery.SelectBox(this, options);
		});
	}
});

jQuery.SelectOption = function(in_text,in_value){
	
	var _this = this;
	
	this.text = String(in_text).trim();
	this.value = String(in_value).trim();
	
	if(this.value == 'undefined' || this.value == ""){
		this.value = this.text;
	}
	
	
		
	this.li = document.createElement('li');
	this.$li = $(this.li);
	this.$li.attr('id',this.value);
	this.$li.append(this.text);
	
	//this.$li.active = false;
	this.$li.activate = function(){
		//this.active = true;
		_this.$li.addClass('active');
	}
	this.$li.deactivate = function(){
		//this.active = false;
		_this.$li.removeClass('active');
	}
		
}

jQuery.SelectBox = function(selectobj, options) {
	var _main = this;
	
	var id = selectobj.id;
	var over = false;
	
	var opt = options || {};
	opt.inputClass = opt.inputClass || "selectbox";
	
	var $selectbox = this.$selectbox = $(selectobj);
	
	var selectedOption = null;
	var selectOptions = getSelectOptions(); // Array met SelectOption Objects
	
	var $container = this.$container = createDiv(id+'_container',opt.inputClass);
	$container.width($selectbox.width());
	
	$container
	.mouseover(function(event){
		over = true;
	})
	.mouseout(function(event){
		over = false;
	});
	
	var $input = this.$input = createTextInput(id+'_input','selectInput');
	$input.width($selectbox.width()-3);
	
	var $wrapper = this.$wrapper = createWrapper(id+'_input','selectWrapper');
	$wrapper.width($selectbox.width()-2);
	$selectbox.hide().before($container);// Verstop de selectbox en zet de container er voor.
	$container.append($input);
	$container.append($wrapper);
	
	closeOptions();
	
	setCurrentOptionByValue(selectedOption.value);
	
	$input.focus(function(){
		//alert(selectboxes[i].id);
		for(i=0;i<selectboxes.length;i++){
			selectboxes[i].closeOptions();
		}
		openOptions();
	});
	$input.blur(function(){
		//$wrapper.hide();
	});
	
	$(document).mousedown(function(event){
		if(!over){
			closeOptions();
		}
	});
	
		
	/* private functions */
	
	function getSelectOptions(parentid) {
		var selectOptions = new Array();
		$selectbox.children('option').each(function() {
			var currentOption = selectOptions[selectOptions.length] = new jQuery.SelectOption($(this).html(),$(this).attr('value'));
			
			selectOptions[selectOptions.length-1].$li
			.mouseover(function(event) {
				jQuery(event.target, $container).addClass('selected');
			})
			.mouseout(function(event) {
				jQuery(event.target, $container).removeClass('selected');
			})
			.click(function(event) {
				setCurrentOptionByValue(jQuery(event.target, $container).attr('id'));
				closeOptions();
			});
			
			if ($(this).is(':selected')) {
				selectedOption = selectOptions[selectOptions.length-1];
			}
		});
		if(selectedOption == null){
			selectedOption = selectOptions[0];
		}
		return selectOptions;
	}
	
	function createDiv(in_id,in_class){
		
		var cdiv = document.createElement("div");
		var $cdiv = $(cdiv);
		$cdiv.attr('id', in_id);
		$cdiv.addClass(in_class);
		return $cdiv;
		
	}
	
	function createTextInput(in_id,in_class){
		
		var cinput = document.createElement("input");
		var $cinput = $(cinput);
		$cinput.attr("id", in_id);
		$cinput.attr("type", "text");
		$cinput.attr("name", in_id);
		$cinput.attr("autocomplete", "off");
		$cinput.attr("readonly", "readonly");
		$cinput.attr("tabIndex", $selectbox.attr("tabindex")); // "I" capital is important for ie
		$cinput.addClass(in_class);
				
		return $cinput;	

	}
	
	function createWrapper(in_id,in_class){
		var cwrapper = document.createElement("div");
		var $cwrapper = $(cwrapper);
		$cwrapper.attr('id', in_id);
		$cwrapper.addClass(in_class);
		
		var ul = document.createElement("ul");
		var $ul = $(ul);
		
		for(i=0;i<selectOptions.length;i++){
			$ul.append(selectOptions[i].$li);
		}
		
		$cwrapper.append($ul);
		
		return $cwrapper;
	}
		
	function setCurrentOptionByValue(value){
		
		for(i=0;i<selectOptions.length;i++){
			selectOptions[i].$li.deactivate();
			if(selectOptions[i].value == value){
				selectedOption = selectOptions[i];
				selectedOption.$li.activate();
			}
		}
		
		$input.val(selectedOption.text);
		
	}
	
	function openOptions(){
		$wrapper.show();
		$wrapper.scrollTo(selectedOption.$li, 0 );
	}
	function closeOptions(){
		$wrapper.hide();
	}
	
	
	
};

/* public functions */

jQuery.SelectBox.prototype.closeOptions = function(){
	this.$wrapper.hide();
}