(function ($) {
    $.fn.skinDropDownList = function (options) {
        var settings = { skinTop: true, skinBottom: true, defaultItem: "" };
        return this.each(function () {
            if(options)
                $.extend(settings, options);

            var ddl = $(this);
			if(ddl.attr("data-skinned")) { 
				// prevent this from being loaded twice... no idea why it's happening
				console.log("attempted to load skinDropDownList twice");
				return;
			}
			ddl.attr("data-skinned", "true");
            ddl.hide();
            var wrapper = $("<div></div>");
            wrapper.addClass("mySelect");

            var selection = $("<div />");
            selection
            .addClass("mySelection")
            .attr("tabindex", 0);
            wrapper.append(selection);

            var itemListWrapper = $("<div></div>");
            itemListWrapper.addClass("myOptions");
            var itemList = $("<ul></ul>");
            itemList.addClass("myOptionsList");
            itemListWrapper.append("<div class='myOptions-top'></div>");
            itemListWrapper.append(itemList);
            itemListWrapper.append("<div class='myOptions-bottom'></div>");
            wrapper.append(itemListWrapper);

            if($("optgroup", ddl).length) {
                $("optgroup", ddl).each(function () {
                    var optgroup = $("<li>" + $(this).attr("label") + "</li>");
                    var childList = $("<ul />");
                    optgroup.addClass("optgroup").append(childList);
                    $(this).children().each(function () {
                        var item = $("<li><a href='#" + $(this).val() + "'>" + $(this).text() + "</a></li>");
                        $("a", item)
                        .attr("title", $(this).text())
                        .attr("data-itemvalue", $(this).val());
                        childList.append(item);
                    });
                    itemList.append(optgroup);
                });
            }
            else {
                $("option", ddl).each(function() {
                    var item = $("<li><a href='#" + $(this).val() + "'>" + $(this).text() + "</a></li>");
					$("a", item)
						.attr("title", $(this).text())
						.attr("data-itemvalue", $(this).val());
					itemList.append(item);
                });
            }
            if(settings.defaultItem)
                itemList.prepend("<li class='all'><a href='#' title='" + settings.defaultItem + "' data-itemvalue=''>" + settings.defaultItem + "</a></li>");

            ddl.before(wrapper);

            var isListActive = false;
            var showItemList = function () {
                itemListWrapper.show();
                selection.addClass("mySelection-active");
                isListActive = true;
            };
            var hideItemList = function () {
                itemListWrapper.hide();
                selection.removeClass("mySelection-active");
                isListActive = false;
            };
            var toggleItemList = function () {
                itemListWrapper.toggle();
                selection.toggleClass("mySelection-active");
                isListActive = !isListActive;
            };
            var ddlMakeSelection = function (selItem) {
                selection.text(selItem.text());
                $("option", ddl).attr("selected", false);
                var itemvalue = selItem.attr("data-itemvalue");
                ddl.val(itemvalue);
                $("option[value='" + itemvalue + "']").attr('selected', true);
                $("#<%=hfFilter.ClientID %>").val(itemvalue);

                $("a", itemList).removeClass("selected");
                selItem.addClass("selected");
            };

            $("a", itemList).bind("click", function () { ddlMakeSelection($(this)); hideItemList(); return false; });
            $("a[data-itemvalue=" + $("option:selected", ddl).val() + "]").click();

            selection
            .bind("click", function () { toggleItemList(); })
            .bind("keydown", function (e) {
                var currentOpt = $("option:selected", ddl);
                var allOpts = $("option", ddl);
                var currentOptIndex = allOpts.index(currentOpt);
                var nextOptIndex = currentOptIndex;
				if (e.which == 40)
					nextOptIndex++;
				else if (e.which == 38)
					nextOptIndex--;
				else if (e.which == 13) {
					hideItemList();
					return false;
				}
				else {
					return;
				}
                if (nextOptIndex >= allOpts.length)
                    nextOptIndex = 0;
                var nextOpt = $(allOpts.get(nextOptIndex));
				showItemList();
                ddlMakeSelection($("a[data-itemvalue=" + nextOpt.val() + "]"));
                return false;
            });

            $("body")
            .click(function (e) {
                if (!wrapper.find(e.target).length && isListActive) {
                    hideItemList();
                }
            })
            .keyup(function (e) {
                if (e.which == 27) {
                    hideItemList();
                }
            });
        });
    }
})(jQuery);