var $ButtonGroups = $(".button-group");
var $DropDownLists = $(".drop-down-group");

// -- Button Groups
$(function () {
    $ButtonGroups.children().on("click", function () {
        var $this = $(this);
        var $parent = $this.parent();

        if ($this.attr("disabled")) return;
        $parent.children().removeClass("active");
        $this.addClass("active");
    });
});

// -- Drop Down Groups
$DropDownLists.each(function () {
    var $this = $(this);
    var $label = $this.find("label span").html("");
    var $select = $this.find("select").empty();
    var $dropDownTrigger = $select.siblings(".drop-down-trigger");
    var $dropDownList = $("<ul/>");

    $select.siblings("ul").remove();
    $dropDownList.insertAfter($dropDownTrigger);

    var SetValue = function (val) {
        $select.val(val);
        $select.trigger("change");
    };
    
    $this.on("change", function () {
        $label.text($select.find("option:selected").val());
        $dropDownList
            .find("li")
            .removeClass("selected")
            .siblings("[data-value='" + $select.val() + "']")
            .addClass("selected");
    });
    $this.get(0).bind = function (source) {
        $label.html("");
        $select.empty();
        $dropDownList.empty();

        if (!source || source.length <= 0) return;
        for (var i = 0; i < source.length; i++) {
            $("<option/>").attr("value", source[i].value).text(source[i].text).appendTo($select);
            $("<li/>").attr("data-value", source[i].value).text(source[i].text).appendTo($dropDownList);
        }

        SetValue(source[0].value);
        $dropDownList.find("li").on("click", function () {
            SetValue($(this).attr("data-value"));
            $dropDownList.scrollTop(0);
        });
    };

    $dropDownTrigger.on("click", function (e) {
        if ($dropDownTrigger.attr("disabled")) {
            $dropDownTrigger.removeClass("active");
            return;
        }
        $dropDownTrigger.toggleClass("active"); e.stopPropagation();
    });
});

// -- Bootstrap Tabs
$(function () {
    $(".nav.nav-tabs").each(function () {
        var $nav = $(this);
        var $items = $nav.find(".nav-link");
        $items.on("click", function () {
            var $item = $(this);
            $items.removeClass("active");
            $item.addClass("active");
        });
    });
});

$(document).on("click", function () {
    $DropDownLists.find(".drop-down-trigger").removeClass("active");
});