(function($) {
	$.fn.selectbox = function(settings) {
		
		var config = {
			changeWidth: 0,
			minWidth: 0
		};
 		if (settings) $.extend(config, settings);
		
		var container = this;
		
		this.each(function() {
			var select = $(this);
			var width = Math.max(config.minWidth, select.width() + config.changeWidth);
			var value = $('option[value=' + select.val() + ']', select).text();
		
			// create html
			select.wrap('<div class="selectbox" />').before('<div />');
			
			// set widths of surrounding box and select
			select.width(width);
			select.prev().width(width);
			
			// hide selectbox
			select.css('opacity', 0);
			
			// set default value
			select.prev().text( value );
			
			// add events
			select.change(function(){
				value = $('option[value=' + select.val() + ']', select).text();
				select.prev().text( value );
			});
			select.closest('form').bind('reset', function(){
				select.prev().text( value );
			});
		});

		return this;
	};
})(jQuery);

