jQuery.fn.selectbox = function() {
	var o = {
		className:'select'
	}
	return this.each(function() {
		var oThis = this;
		var oSelected = null;
		var state = 'closed';
		var iSelectedIndex = 0;
		var paddingRight = 20;
		var oSelectOffset = jQuery(this).offset('BODY');
		var selectWidth = jQuery(this).width();
		var selectHeight = jQuery(this).height();

		jQuery(this).wrap('<div></div>').css({top:'-1000px',left:'-1000px',position: 'absolute'})//hide();
		var oContainer = jQuery(this).parent().addClass(o.className).css({display:'block'});

		// append html inside the container
		oContainer.append('<div><p></p></div><a href="#"></a><ul></ul>');
		// assign toggle action

		jQuery("div",oContainer).css({width: (selectWidth+paddingRight) + 'px'});
		jQuery("a",oContainer).toggle(function() {
		
			positionListElement();
			jQuery("ul",oContainer).slideDown('fast');
			jQuery("li",oContainer).removeClass('active');
			if(oSelected == null) {
				jQuery("li:eq(0)",oContainer).addClass('active');	
				oSelected = jQuery("li:eq(0)",oContainer);
			} else {
				oSelected.addClass('active');
			}
			state = 'opened';
			setFocus();
		},function() {
			jQuery("ul",oContainer).slideUp('fast');
			state = 'closed';
			setBlur();
		});
		// assign click outside dropdown.
		jQuery().click(function() {
			if(state == 'opened') {
				jQuery("a",oContainer).trigger("click");
			}
		});
		
		// get values from the option elements and set them in the ul list.
		jQuery(this).keyup(function() {
			setValue();
		}).focus(function() { setFocus(); }).blur(function() { setBlur();});

		oContainer.keyup(function(e) {
			
				var key = getKey(e);
				if(key == 'enter') {
					if(state == 'opened') {
						jQuery("div",oContainer).trigger("click");
						
					}
				}
		});
		jQuery('option',this).each(function(i) {
			var o = this;
			jQuery(o).click(function() {
				jQuery(this).attr('selected',true);
			});
			jQuery("ul",oContainer).append('<li>' +  jQuery(this).text() + '</li>');
			jQuery("li:eq(" + i + ")",oContainer).click(function() {
				jQuery(o).trigger('click');
				jQuery("a",oContainer).trigger("click");
				jQuery("div p",oContainer).html(jQuery(o).text())
				oSelected = $(this)
			}).mouseover(function() {
				jQuery(this).addClass('active');
				setFocus();
			}).mouseout(function() {
				jQuery(this).removeClass('active');
				setBlur();
			});
		});
		// set ul list position	
		jQuery("ul",oContainer).hide();

		var positionListElement = function() {
			var oOffset = jQuery("div",oContainer).offset();
			var selectHeight = jQuery("div",oContainer).height();
			// set ul list position	
			jQuery("ul",oContainer).css({
				left: oOffset.left,
				top: parseInt(oOffset.top) + selectHeight,
				position: 'absolute',
				width: oOffset.width
			});
		};
		var setValue = function() {
			var val = jQuery(":selected",oThis).text();
			jQuery("div p",oContainer).html(val);
			oSelected = jQuery("li:eq(" + jQuery(oThis)[0].selectedIndex + ")",oContainer);
			jQuery("li",oContainer).removeClass('active');
			oSelected.addClass('active');
		};
		var setFocus = function() {
			jQuery(oThis)[0].focus();
			jQuery("div",oContainer).addClass("focus");
		};

		var setBlur = function() {
			jQuery(oThis)[0].blur();
			jQuery("div",oContainer).removeClass("focus");
		};
		var getKey = function(e) {
			var key = '';
			switch(e.keyCode) {
				case 13: // return
					key = 'enter';
					break;
				case 27:  // esc
					key = 'escape';
					break;
			}
			return key;
		};

		setValue();
				
		jQuery(window).resize(positionListElement);
	});
};