jQuery.fn.selectBox = function(o) {
	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.css).css({display:'block'});

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

		jQuery("div",oContainer).css({width: (selectWidth+paddingRight) + 'px', height: selectHeight+ 'px'}).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("div",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(this).click(function() {
				this.selected = true;
			});
			jQuery("ul",oContainer).append('<li>' +  jQuery(this).text() + '</li>');
			jQuery("li:eq(" + i + ")",oContainer).click(function() {
				jQuery(o).click();
				jQuery("div",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('BODY');
			// set ul list position	
			jQuery("ul",oContainer).css({
				left: oOffset.left  + 'px',
				top: oOffset.top + parseInt(oOffset.height) + 'px',
				position: 'absolute',
				width: oOffset.width + 'px'
			});
		};
		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);
	});
};