(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);


