(function($){  
		
		$.fn.dbselects = function(options) {
			
			var defaults = {
					width                : 'get',
					maxWidth             : 200,
					maxItemsBeforeScroll : 10,
					showNullValues       : false
			};
			
			var options = $.extend(defaults, options);
			
			var z = 2100;
			
			return this.each(function() {
				if ( $.browser.msie && $.browser.version=="6.0" ) {
					return;
				}
				
				// get the current select box
				targetSelect = $(this);
				
				// hide the current select box
				targetSelect.hide();
				
				// insert the target div. this is where the new list will appear
				targetSelect.after('<div class="dbselect"></div>');
				
				// get the new target div
				var targetDiv = targetSelect.next('.dbselect');
				
				// insert the new foundation markup
				targetDiv.append('<dl class="dropdown"><dt><a class="dropdown_toggle" href="#"></a></dt><dd><div class="listOptions"><ul></ul></div></dd></dl>');
				
				// set the z-index, then decrease to allow multiple dbselects to overlap properly
				targetDiv.find('.dropdown').css('zIndex', z);
				z = z - 10;
				
				// parse all options within the current select and set indices
				var i = 0;
				var optionsList = '';
				targetSelect.find('option').each(function() {
					var temp_img_data = '';
					if ( $(this).attr('data-image') != undefined && $(this).attr('data-image').length ) {
						temp_img_data = '<img class="data_image" src="' + $(this).attr('data-image') + '" alt="">';
					}
					var temp_active_class = '';
					if($(this).attr('selected') == true) {
						temp_active_class = 'active';
					}
					if(options.showNullValues == false) {
						if($(this).val() != "") {
							optionsList += '<li><a href="#" class="' + temp_active_class + '"><span class="value">' + temp_img_data + $.trim($(this).text()) + '</span><span class="hidden index">' + i + '</span></a></li>';
						}
					} else {
						optionsList += '<li><a href="#" class="' + temp_active_class + '"><span class="value">' + temp_img_data + $.trim($(this).text()) + '</span><span class="hidden index">' + i + '</span></a></li>';
					}

                    var temp_img_data_text = temp_img_data + '<span class="data_value">' + $(this).text() + '</span>';

					if($(this).attr('selected') == true) {
						targetDiv
							.find('a.dropdown_toggle')
								.addClass('active')
								.append('<div class="arrow"></div>')
								.append('<div class="corner_left"></div>')
								.append('<div class="corner_right"></div>')
								.append('<span></span>')
								.find('span')
									.html(temp_img_data_text);
					}
                    
					i++;
				});
				targetDiv
					.find('.listOptions')
						.append('<div class="corner_border_left"></div>')
						.append('<div class="corner_border_right"></div>')
						.append('<div class="corner_border_top"></div>')
						.append('<div class="corner_border_bottom"></div>')
						.append('<div class="corner_top_left"></div>')
						.append('<div class="corner_top_right"></div>')
						.append('<div class="corner_bottom_left"></div>')
						.append('<div class="corner_bottom_right"></div>')
					.find('UL')
						.append(optionsList);
				
				// set the height of the options list, based on options.maxItemsBeforeScroll
				var optionsLength = optionsLength = targetDiv.find('.listOptions li').length;
				var optionItemHeight = targetDiv.find('DIV.listOptions UL LI:eq(0)').height();

				var optionMargin = 0;
				var optionPadding = 0;
				
				if ( targetSelect.find('option:eq(0)').css('margin-top') != NaN && targetSelect.find('option:eq(0)').css('margin-top') != undefined ) {
					optionMargin += Math.abs(parseInt(targetSelect.find('option:eq(0)').css('margin-top')));
				}
				if ( targetDiv.find('.listOptions').css('padding-top') != NaN && targetDiv.find('.listOptions').css('padding-top') != undefined ) {
					optionPadding += Math.abs(parseInt(targetDiv.find('.listOptions').css('padding-top')));
				}
				if ( targetDiv.find('.listOptions').css('padding-bottom') != NaN && targetDiv.find('.listOptions').css('padding-bottom') != undefined ) {
					optionPadding += Math.abs(parseInt(targetDiv.find('.listOptions').css('padding-bottom')));
				}
				
				optionItemHeight += optionMargin;
				
				if(optionsLength > options.maxItemsBeforeScroll) {
					targetDiv.find('.listOptions').css('height', (optionItemHeight * options.maxItemsBeforeScroll) + optionPadding);
					targetDiv.find('.listOptions').find('.corner_border_bottom, .corner_bottom_left, .corner_bottom_right').remove();
				} else {					
					targetDiv.find('.listOptions').css('height', (optionItemHeight * optionsLength) + optionPadding).css('overflow','hidden');
				}
				
				// set the width
				if(options.width == 'auto') {
					// if
					
					// find the width of the widest element
					var allWidths = new Array();
					var padding = parseInt(targetDiv.find('a.dropdown_toggle').css('paddingRight'));
					allWidths.push(targetDiv.find('a.dropdown_toggle SPAN').width());
					var liWidth = 0;
					targetDiv.find('.listOptions li').each(function() {
						liWidth = $(this).find('span.value').width() + $(this).find('span.index').width() + padding;
						allWidths.push(liWidth);
					});
					allWidths = allWidths.sort(function(a, b){
					    return a - b;
					});
					
					var biggestWidth = allWidths[(allWidths.length - 1)] + padding;
					var newWidth = 0;
					
					if(biggestWidth >= options.maxWidth) {
						newWidth = options.maxWidth;
					} else {
						newWidth = biggestWidth;
					}
				} else if(options.width == 'get') {
					newWidth = parseInt(targetSelect.css('width'));
				} else {
					newWidth = options.width;
				}
				
				targetDiv.css('width', newWidth + 'px');
				targetDiv.find('.listOptions').css('width', newWidth + 'px');
				targetDiv.find('.dropdown').css('width', newWidth + 'px');
				if ( $.browser.msie && $.browser.version=="6.0" ) {
					targetDiv.find('.dropdown_toggle').css('width', (newWidth-30) + 'px');
				}
				
				// hide the options for now
				targetDiv.find('.listOptions').hide();
				
				// bind listeners to all the links
				targetDiv.find('.dropdown a.dropdown_toggle').unbind('click');
				targetDiv.find('.dropdown a.dropdown_toggle').bind('click', function() {
					var optionSet = $(this).parent().parent().find('.listOptions');
					if(optionSet.css('display') == 'block') {
						$('.activedropdown').removeClass('activedropdown');
						optionSet.hide();
					} else {
						optionSet.parent().parent().addClass('activedropdown');
						optionSet.show();
					}
					return false;
				});

				$('.listOptions a').unbind('click');
				$('.listOptions a').bind('click', function() {
					var thisDiv = $(this).parents('.dbselect');
					$('.listOptions').hide();
					var realSelect = thisDiv.prev();
					if ( realSelect.attr('generated') == 'true' && realSelect.hasClass('error') ) {
						realSelect = thisDiv.prev().prev();
					}
					realSelect[0].selectedIndex = $(this).find('span.index').text();
					realSelect.trigger('change');
					thisDiv.find('.listOptions a').removeClass('active');
					$(this).addClass('active');
					thisDiv
						.find('.dropdown_toggle')
							.empty()
							.addClass('active')
							.append('<div class="arrow"></div>')
							.append('<div class="corner_left"></div>')
							.append('<div class="corner_right"></div>')
							.append('<span></span>')
								.find('span')
									.text($(this)
									.find('span.value')
										.text());
					return false;
				});
				
				$('body').bind('mousedown', function(event) {
					if ($(event.target).parents('.activedropdown').length === 0) {
						$('.activedropdown').removeClass('activedropdown');
						$('.listOptions').hide();
					}
				});
			});
		};  	
	})(jQuery);