(function ($) {
	$.fn.comboBox = function (options) {
		if (this.length == 0)
			return;

		//define the default options
		var defaults = {
			selectHandleImage: "selectHandle.gif",
			backgroundColor: "#FFFFFF",
			width: "85px",
			maxHeight: "100px",
			getOption: function (value, text) {
				return text;
			}
		};

		//merge passed in options with the defaults
		var opts = $.extend(defaults, options);

		//keep a reference back to the select which is being replaced
		var $originalSelect = this;

		//create a div to contain everything
		var $container = $(document.createElement('div'))
			.css({
				width: opts.width,
				backgroundColor: opts.backgroundColor
			})
			.hover(
				function () {
					$selectBox.css("border-color", "#000000");
				},
				function () {
					if (!$menuItems.is(":visible"))
						$selectBox.css("border-color", "#black");
				})
			.attr('id', "imageSelect_container_" + this.attr('id'));

		//create the box the user will see
		var $selectBox = $(document.createElement('div'))
			.css({
				border: "solid 1px black",
				overflow: "hidden",
				width: "100%",
				backgroundColor: "#E0E0E0"
			})
			.click(function (e) {
				ToggleMenuItems();
			});

		//create a placeholder for the selected item. When the user selects an item, the html will be copied from the menu item
		var $selectedItem = $(document.createElement('div'))
			.css({
				margin: "1 16 1 1",
				padding: "4 0 4 4",
				backgroundColor: "#fff",
				textAlign: "left"
			});

		//create a handle to let the user click to show the selection item list
		var $selectHandle = $(document.createElement('div'))
			.html(" ")
			.css({
				float: "right",
				cursor: "hand",
				width: "16px",
				textAlign: "center",
				background: "url('" + opts.selectHandleImage + "') no-repeat center"
			});

		var $menuItems = $(document.createElement('div'))
			.css({
				position: "absolute",
				marginTop: "-1px",
				textAlign: "left",
				border: "solid 1px #000000",
				backgroundColor: opts.backgroundColor,
				zIndex: "999",
				maxHeight: opts.maxHeight,
				overflow: "auto"
			});

		var $clear = $(document.createElement('div'))
			.css({
				clear: "both",
				height: "1px",
				border: "none",
				margin: 0,
				padding: 0
			})
			.html(" ");

		$originalSelect.children("option").each(function (i, selected) {
			var $menuItem = $(document.createElement('div'))
				.css("padding", "4px")
				.html(opts.getOption(0, { text: $(this).text(), description: $(this).attr("description") ? $(this).attr("description") : '' }))
				.val($(this).val())
				.click(function (e) {
					ToggleMenuItems();
					$originalSelect.val($(this).val());
					$selectedItem.html($(this).html());
				})
				.hover(
					function () {
						$(this).css("background-color", "#81BEF7");
					},
					function () {
						$(this).css("background-color", opts.backgroundColor);
					})
				.appendTo($menuItems);
		});

		//preset the selectedItem
		$selectedItem.html(
			$menuItems.children("div:eq(" + $originalSelect[0].selectedIndex + ")").html()
		);

		//put everything together
		$selectBox.appendTo($container);
		$selectHandle.appendTo($selectBox);
		$selectedItem.appendTo($selectBox);
		$menuItems.appendTo($container);

		//hide the original select and put ours in
		$originalSelect.hide();
		$container.insertBefore($originalSelect);

		//set the width and height of the UI components so everything lines up nicely
		if ($menuItems.height() > parseInt($menuItems.css("maxHeight"))) {
			$menuItems.height($menuItems.css("maxHeight"));
		}
		$selectHandle.height($selectBox.height() - 2);
		$menuItems.width($selectBox.width());
		$menuItems.hide();

		//hack: When inside of a hidden element, widths and heights don't calculate propertly. 
		//apply the widths and heights once on focus until a better solution is found.
		if ($selectBox.width() == 0) {
			$container.one("mouseover", function () {
				$menuItems.width($selectBox.width());
			});
		}

		function ToggleMenuItems() {
			if ($menuItems.is(":visible")) {
				$menuItems.hide();
				$selectBox.css("border", "solid 1px black");
			} else {
				$menuItems.show();
				$selectBox.css("border", "solid 1px #000000");
			}
		}

	}

})(jQuery);