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

        //define the default options
        var defaults = {
            selectHandleImage: "/Images/Icons/site-30x30.png",
            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() {
				},
				function() {
				    if (!$menuItems.is(":visible"))
				        $selectBox.css("border-color", "#C0C0C0");
				})
			.attr('id', "imageSelect_container_" + this.attr('id')).attr('class', 'select-wrap ' + this.attr("class"));

        //create the box the user will see
        var $selectBox = $(document.createElement('div'))
			.attr('class', 'select-box')
			.click(function(e) {
			    ToggleMenuItems();
			});
        if ($($originalSelect).hasClass('required')) {
            $($selectBox).addClass('required');
        }
        //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')).addClass('selected-item');

        //create a handle to let the user click to show the selection item list
        var $selectHandle = $(document.createElement('div')).attr('class', 'handle');

        var $menuItems = $(document.createElement('div'))
			.css({maxHeight: opts.maxHeight}).attr('class', 'select-option');

        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'))
				.html(opts.getOption($(this).val(), $(this).text()))
				.val($(this).val())
				.click(function(e) {
				    ToggleMenuItems();
				    $originalSelect.val($(this).val());
				    $selectedItem.html($(this).html());
				})
				.hover(
					function() {
					    $(this).css("background-color", "#eee");
					},
					function() {
					    $(this).css("background-color", "#fff");
					})

				.appendTo($menuItems);
        });

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

        //Remove the selected item from the list
        //$menuItems.children("div:eq(" + $originalSelect[0].selectedIndex + ")").hide();

        //remove the "please select" from the list if its not selected - IMPORTANT this removes the first index fro mthe list, not specifically please select
        if ($menuItems.children("div:eq(0)").html() == "Please select") {
            $menuItems.children("div:eq(0)").hide()
        }

        //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() + 7);
        $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();
            } else {
                $('.select-option').hide();
                $menuItems.show();
            }
        }

    }

})(jQuery);