var _ytTabInited = []
$(function () {
    $("[data-tabname][data-target]:not([data-tabrole='child'])").each(function (index, value) {
        let tabName = $(value).data("tabname");
        if (_ytTabInited.indexOf(tabName) == -1) { 
            var ytTab = new YTTab({ tabName: tabName })     
            _ytTabInited.push(tabName);
        }
    })
})

class YTTab {
    constructor(option = {}) {
        this.tabName = option.tabName ?? null;
    }

    init();

    init() {
        $(`[data-tabname=${this.tabName}][data-target][data-tabrole='child']`).css("display", "none");
        $(`[data-tabname=${this.tabName}][data-target][data-tabrole='child']`).first().show();

        this.event();
    }

    event() {
        // custom tab
        // example : 
        // <button id="test" data-target="#okDiv" data-tabname="tab1"></button>
        // <div id="okDiv" data-tabrole="child" data-tabname="tab1"></div>
        $("body").on("click", `[data-tabname=${this.tabName}][data-target]`, function () {
            let target = $(this).data("target");
            let obj = this;
            let tabName = $(target).data("tabname");
            if (tabName) {
                if ($(target).data("tabrole") == "child") {
                    $(obj).trigger("yt:tab:show");
                    $(`[data-tabname='${tabName}'][data-tabrole='child']`).css("opacity", 0).hide();
                    $(target).show().animate({ opacity: 1 }, 200, function () {
                        $(obj).trigger("yt:tab:shown");
                    });
                }
            }
        })
    }
}