(function($) {
	$.fn.spiffySelect = function(settings) {

		var config = {
			'scrollerItems': '5',
			'bgImage' : '',
			'bgPosition' : 'right center',
			'bgRepeat' : 'no-repeat',
			'bgColor' : '#fff',
			'border' : 'solid #aaa',
			'borderWidth' : '1'
		};

		if (settings) $.extend(config, settings);

		// define transferrable css values
		var transferrable = new Array('position', 'float', 'display', 'left', 'right', 'top', 'bottom', 'margin', 'margin-top',
				'margin-right', 'margin-bottom', 'margin-left', 'height', 'width');


		this.each(function() {
			if (this.options == undefined || this.options == null) {
				return;
			}

			// create wrapper and assign css
			wrapper = document.createElement('div');

			for (prop in transferrable) {
				$(wrapper).css(transferrable[prop], $(this).css(transferrable[prop]));
			}

			// display wrapper, hide select
			$(this).wrap(wrapper);
			$(this).hide();

			div = $(this).parent();

			// assign style properties
			if (config.bgImage.length != 0) {
				background = config.bgColor + ' url(' + config.bgImage + ') ' + config.bgRepeat + ' ' + config.bgPosition;
			} else {
				background = config.bgColor
			}
			div.css('background', background).css('line-height', div.css('height'))
				.css('border', config.borderWidth + 'px ' + config.border).css('cursor', 'pointer');

			// if not ready for positioning, make it so
			if (div.css('position') == 'static') {
				div.css('position', 'relative');
			}

			// add scroller container and set it up
			div.append('<div class="spiffyScroller"></div>');
			scroller = div.find('.spiffyScroller').css('max-height', (config.scrollerItems * parseFloat(div.css('height')) + 'px')).css('width', '100%')
				.css('border', config.borderWidth + 'px ' + config.border).css('top', div.css('height')).css('background-color', config.bgColor)
				.css('left', '-' + config.borderWidth + 'px');

			// hello IE6, we <3 you.
			if ($.browser.msi && parseInt($.browser.version) == 6) {
				scroller.css('height', (config.scrollerItems * parseFloat(div.css('height')) + 'px'));
			}

			// add our unique identifier and other stuff
			spiffyRandom = Math.round(Math.random()*999999);
			div.attr('id', 'spiffy-' + spiffyRandom).attr('rel', 'hidden').addClass('spiffyContainer');

			// add hidden input
			div.append('<input type="hidden" name="' + $(this).attr('name') + '" value="" class="spiffyValue" />');

			// add selection options, assign default value
			for (i = 0; i < this.options.length; i++) {
				var item = this.options[i];
				scroller.append('<div class="spiffyItem" rel="' + item.value + '" id="spiffy-' + spiffyRandom + '-' + i + '">' + item.text + '</div>')
				if (i == 0 || item.selected == true) {
					//div.append('<div class="spiffySelected">' + item.text + '</div>');
					div.find('.spiffySelected').remove().end().append('<div class="spiffySelected">' + item.text + '</div>');
					div.find('.spiffyValue').val(item.value);
					div.find('#spiffy-' + spiffyRandom + '-' + i).addClass('spiffyMarked');
				}
			}

			// get rid of ugly select
			$(this).remove();

			// attach events and shiny things

			// hovers for individual items
			scroller.find('.spiffyItem').hover(
				function (e) {
					$(this).addClass('spiffyHovered');
				},
				function (e) {
					$(this).removeClass('spiffyHovered');
				}
			);

			// open the box
			div.click(function (e) {
				if ($(this).attr('rel') == 'hidden') {
					$(this).find('.spiffyScroller').fadeIn(400, function (e) {$(this).parents('.spiffyContainer').attr('rel', 'visible')});
				}
			});

			// item clicked
			div.find('.spiffyScroller .spiffyItem').click(function (e) {
				if ($(this).parents('.spiffyContainer').attr('rel') == 'visible') {
					$(this).parents('.spiffyContainer').find('.spiffyItem').removeClass('spiffyMarked');
					$(this).addClass('spiffyMarked');
					$(this).parents('.spiffyContainer').find('.spiffyValue').val($(this).attr('rel'));
					$(this).parents('.spiffyContainer').find('.spiffySelected').html($(this).html());
					$(this).parents('.spiffyScroller').fadeOut(400, function (e) {
						$(this).parents('.spiffyContainer').attr('rel', 'hidden');
					});
				}
			});

		});

		return this;

	};
})(jQuery);