(function($){
	$.fn.customSelect=function(options){
		if (this.length > 1) return this.each(function(){$(this).customSelect(options)});
		var options=$.extend({
				boxOptions:{},
				boxWidth:0,//0 for autosize
				boxHeight:0,//0 for autosize
				scrollBarWidth:20,
				selectWidth:0//0 for autosize
			}, options);
		var $select=$(this);
		var $box=$('<div class="cselect" />');
		var $input=$('<input type="hidden" />');
		var $span=$('<span class="cselect" />').css({'display':'inline-block','position':'relative'});
		var $text=$('<span class="text" />').css({'display':'inline-block','overflow':'hidden'});
		var $arrow=$('<span class="arrow" />').css({'display':'block','position':'absolute','right':0,'top':0});
		var optMaxWidth=0;
		var optMaxOuterWidth=0;
		
		this.initialize=function(){
			$input.attr('name',$select.attr('name')).attr('id',$select.attr('id')).val($select.val());
			$span.append($input).append($text).append($arrow).append($box);
			$span.insertBefore($select);
			$select.find('option').each(function(){
				var $option=$(this);
				$('<div />')
					.attr('val', $option.val())
					.html($option.html()?$option.html():'&nbsp;')
					.css('overflow', 'hidden')
					.appendTo($box);
				$text.html($option.html());
				optMaxWidth=Math.max(optMaxWidth,$text.width());
			});
			optMaxOuterWidth=optMaxWidth+$text.outerWidth()-$text.width();
			selVal=$select.find('option:selected').html();
			$text.html(selVal?selVal:'&nbsp;');
			$select.replaceWith($span);
			$arrow.width(options.scrollBarWidth);
			$arrow.height($span.height());
			$span.width(options.selectWidth?(options.selectWidth-options.scrollBarWidth):optMaxOuterWidth);
			$span.css('padding-right',options.scrollBarWidth);
			$text.width(options.selectWidth?(options.selectWidth-options.scrollBarWidth):optMaxWidth);
			$box.width(options.boxWidth?options.boxWidth:(optMaxOuterWidth+options.scrollBarWidth));
			$box.find('div').width($box.width()-options.scrollBarWidth);
			$box.scrollBox($.extend({
				boxSize:(options.boxHeight?options.boxHeight:$box.height()),
				scrollBarWidth:options.scrollBarWidth
			},options.boxOptions)).hide();
			setEvents();
		}
		function setEvents(){
			$span.click(function(){
				var isvisible=$box.is(':visible');
				$('div.cselect:visible').hide().css('z-index', 0);
				$box.toggle(!isvisible).css('z-index', 100);
				return false;
			});
			$box.find('.content div').click(function(e){
				$input.val($(this).attr('val'));
				$input.change();
				$text.html($(this).html());
				$box.hide();
				return false;
			}).hover(function(){$(this).toggleClass('hover')});
		}
		this.initialize();
		$(document).click(function(){$('div.cselect:visible').hide();});
		return this;
	}
})(jQuery);