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

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

        //merge passed in options with the defaults
        var opts = $j.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 = $j(document.createElement('div'))
			.css({
			    width: opts.width,
			    backgroundColor: opts.backgroundColor,
			    margin: opts.margin
			})
			.attr('id', "imageSelect_container_" + this.attr('id'))
			.addClass("select-container");

        //create the box the user will see
        var $selectBox = $j(document.createElement('div'))
            .addClass("select-area")
			.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 = $j(document.createElement('div'))
            .addClass("select-current-val")
			.css({ 
				margin: "1 16 1 1",
				padding: "4 0 4 4"
			});
			

        //create a handle to let the user click to show the selection item list
        var $selectHandle = $j(document.createElement('div'))
            .addClass("select-handle")
			.css({
			    float: "right",
			    cursor: "hand"
			});

        var $menuItems = $j(document.createElement('div'))
			.css({
			    position: "absolute",
			    marginTop: "-1px",
			    border: "solid 1px #d9d9d9",
			    backgroundColor: opts.backgroundColor,
                backgroundColor: "#FFFFFF",
			    zIndex: "999",
			    maxHeight: opts.maxHeight,
			    overflow: "auto",
			    cursor: "pointer"
			})
			.addClass("select-options");

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

        $originalSelect.children("option").each(function(i, selected) {
            var $menuItem = $j(document.createElement('div'))
                .addClass("select-option")
				.css("padding", "4px")
				.html(opts.getOption($j(this).val(), $j(this).text()))
				.val($j(this).val())
				.attr({rel: $j(this).attr("value")})
				.click(function(e) {
				    ToggleMenuItems();
				    $originalSelect.val($j(this).val());
				    if($j(this).parent().parent().parent().hasClass("infofor")){
				        $selectedItem.html($j(this).html());
				        window.location = $menuItem.attr("rel");
				    }
				    else if($j(this).parent().parent().parent().parent().hasClass("iwantnav"))
				    {
				            window.location = $menuItem.attr("rel");
				    }
				    else if($j(this).parent().parent().parent().hasClass("health-box"))
				    {
    				    //Set the Selected item.
    				    $selectedItem.html($j(this).html());
				        GetDataFromCategory($j('.specialty .select-health').val());
				    }
				    else if($j(this).parent().parent().parent().hasClass("specialty-box"))
				    {
				        $j(".focus .focus-current-val").val("");  
                        //$selectedItem.html($j(this).html());
                        if($j(this).html().length>53)
				            $selectedItem.html($j(this).html().substring(0,53) + "...");
				        else
				            $selectedItem.html($j(this).html());
                        onChangeHealthSelect();
			        }else{
			            $selectedItem.html($j(this).html());
                    }
                    /*
                    else if($j(this).parent().parent().parent().hasClass("focus"))
			        {
                        $j(".focus .focus-current-val").val(i); 
                        $j(selected).parent().get(0).value = selected.value;
                        $selectedItem.html($j(this).html());
                        onChangeHealthSelect();
			        }
			        else if($j(this).parent().parent().parent().hasClass("other-specialty-box"))
			        {
                        $selectedItem.html($j(this).html());
                        onChangeHealthSelect();
                    }
			        */
				})
				.hover(
					function() {
					    $j(this).css("background-color", "#cee1e5");
					},
					function() {
					    //$j(this).css("background-color", opts.backgroundColor);
					    $j(this).css("background-color", "#ffffff");
					})
				.appendTo($menuItems);
        });

        //preset the selectedItem
        $selectedItem.html(
			$menuItems.children("div:eq(" + $originalSelect[0].selectedIndex + ")").html()
		);
		if($j(this).parent().hasClass("specialty-box")){
		    if($j(this).parent().hasClass("specialty-box"))
				       if($selectedItem.html().length>53)
				            $selectedItem.html($selectedItem.html().substring(0,53) + "...");
		}

        //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();
            } else {
                if($menuItems.parent().parent().hasClass("infofor")){
                    $j($menuItems[0].childNodes[0]).hide();
                }else if($menuItems.parent().parent().parent().hasClass("iwantnav")){
                    $j($menuItems[0].childNodes[0]).hide();
                }else if($menuItems.parent().parent().hasClass("focus")){
                    $j($menuItems[0].childNodes[0]).hide();
                }
                $menuItems.show();
            }
        }

    }

})(jQuery.noConflict());