(()=>{
    "use strict";
    $((function() {
        var t = 0;
        const e = $(".js-siteHeader")
            , n = $(".js-drawerMenu")
            , o = "is-fixed";
        $(window).on("scroll", (function() {
            $(this).scrollTop() < 500 || $(this).scrollTop() < t || $(this).scrollTop() == t ? (e.removeClass(o),
            n.removeClass(o)) : (e.addClass(o),
            n.addClass(o)),
            t = $(this).scrollTop()
        }
        ))
    }
    ));
    const t = $(".js-drawerMenu")
        , e = document.querySelector('[data-js-drawer="button"]');
    e.addEventListener("click", (()=>{
        const n = window.innerWidth - document.body.clientWidth;
        e.classList.toggle("is-active"),
        t.toggleClass("is-open"),
        e.classList.contains("is-active") ? (document.documentElement.style.paddingRight = `${n}px`,
        document.documentElement.style.overflow = "hidden") : (document.documentElement.style.paddingRight = "",
        document.documentElement.style.overflow = "")
    }
    )),
    $((function() {
        $(".dropdownBtn").hover((function() {
            subHeight = $(this).children(".submenu").height(),
            $(".submenu").removeClass("active"),
            subHeight <= 0 ? $(this).children(".submenu").addClass("active") : $(this).children(".submenu").removeClass("active")
        }
        ))
    }
    )),
    // SNSボタンのリンク先
    $((function() {
        var t;
        $('[data-js-sns-modal="button"]').on("click", (function() {
            const t = $(this).data("jsSnsTarget");
            if(t=='x'){
                location.href = 'https://twitter.com/knb_tv';
            }else if(t=='facebook'){
                location.href = 'https://www.facebook.com/knbtvradio/';
            }else if(t=='youtube'){
                location.href = 'https://www.youtube.com/channel/UCX5d3AvqSXbnvvf12BTlgIA';
            }else if(t=='instagram'){
                location.href = 'https://www.instagram.com/knb_tv/';
            }
        }
        )),
        t = "https://page.line.me/knb-tv.radio?openQrModal=true",
        $(".snsIconWrap li" + ".iconLine").on("click", (function() {
            window.open(t, "_blank")
        }
        ))
    }
    )),
    $(document).ready((function() {
        const t = $(".js-siteHeader").height();
        $('a[href*="#"]').click((function() {
            if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
                var e = $(this.hash);
                if ((e = e.length && e || $('[name=" + this.hash.slice(1) + "]')).length) {
                    var n = e.offset().top - t;
                    return $("html,body").animate({
                        scrollTop: n
                    }, 500),
                    !1
                }
            }
        }
        ))
    }
    )),
    $((function() {
        $(".httpText").each((function() {
            $(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%@-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1" target="_blank">$1</a><i class="fa fa-external-link positionR" style="top:1px;"></i>'))
        }
        ))
    }
    ))
    }
)();

/**
 * ヘッダーをスマートフォンでは下スクロールでヘッダーを非表示、上スクロールで再表示
 */
class ScrollDownHeader {
    constructor() {
        this.didScroll = false;
        this.lastScrollTop = 0;
        this.delta = 5;
        this.headerHeight = document.querySelector('.js-siteHeader').offsetHeight;
        this.init();
    }
    
    init() {
        document.addEventListener('scroll', this.hasScrolled.bind(this));
    }

    hasScrolled() {
        const st = window.scrollY;
    
        if (Math.abs(this.lastScrollTop - st) <= this.delta) {
            return;
        }
    
        if (st > this.lastScrollTop && st > this.headerHeight) {
            // Scroll Down
            document.documentElement.classList.add('is-scrollDown');
        } else {
            // Scroll Up
            if (st + window.innerHeight < document.documentElement.scrollHeight) {
                document.documentElement.classList.remove('is-scrollDown');
            }
        }
    
        this.lastScrollTop = st;
    }
}

window.addEventListener("DOMContentLoaded", () => {
    const scrollDownHeader = new ScrollDownHeader();
})


/**
 * スマートフォンサイズの場合、ヘッダー下に表示されるナビゲーションスライダーを現在のページリンクまで移動します。
 */
window.addEventListener("DOMContentLoaded", () => {
    const headerNavigationSp = () => {
        const headerSliderList = document.querySelector('[data-js-header-slider="list"]');
        const headerSliderItem = document.querySelector('[data-js-header-slider="current"]');
        if(headerSliderItem) {
            const width = headerSliderItem.getBoundingClientRect().width;
            const x = headerSliderItem.getBoundingClientRect().left;
            const y = headerSliderItem.getBoundingClientRect().top;
            headerSliderList.scrollLeft += x - width;
        }
    }
    headerNavigationSp();
})

/**
 * SPヘッダー検索開閉
 */
const searchOpen = () => {
    const siteHeader = document.querySelector('.js-siteHeader');
    const searchOpenButton = document.querySelector('[data-js-search-open="button"]');
    const searchOpenBody = document.querySelector('[data-js-search-open="body"]');
    const searchOpenoverlay = document.querySelector('[data-js-search-open="overlay"]');
    const toggleClassName = 'is-active';
    
    searchOpenButton.addEventListener('click', () => {
        searchOpenButton.classList.toggle(toggleClassName);
        searchOpenBody.classList.toggle(toggleClassName);
        searchOpenoverlay.classList.toggle(toggleClassName);
        siteHeader.classList.toggle('is-searchOpen');
    })

    searchOpenoverlay.addEventListener('click', () => {
        searchOpenButton.classList.remove(toggleClassName);
        searchOpenBody.classList.remove(toggleClassName);
        searchOpenoverlay.classList.remove(toggleClassName);
        siteHeader.classList.remove('is-searchOpen');
    })
}

document.addEventListener("DOMContentLoaded", (event) => {
    searchOpen();
})


class DropdownMenu {
    constructor() {
        this.buttons = document.querySelectorAll('.js-headerDropdawnBtn');
        this.menus = document.querySelectorAll('.js-headerDropdawnMenu');
        this.links = document.querySelectorAll('.js-headerDropdawnLink');
        this.init();
    }

    init() {
        this.buttonAction()
        this.menuAction()
    }

    buttonAction() {

        this.buttons.forEach(button => {

            button.addEventListener('mouseover', () => {
                this.menuOpen(button);
            });
            button.addEventListener('focus', () => {
                this.menuOpen(button);
            });

            button.addEventListener('mouseleave', () => {
                this.menuClose(button);
            });
            button.addEventListener('blur', () => {
                this.menuClose(button);
            });
        })

    }

    menuAction() {
        this.menus.forEach(menu => {

            menu.addEventListener('mouseenter', () => {
                const thisMenu = menu;
                this.menuOpen(thisMenu);
            });

            menu.addEventListener('mouseleave', () => {
                const thisMenu = menu;
                this.menuClose(thisMenu);
            });

            this.links.forEach(link => {
                link.addEventListener('focus', () => {
                    const thisMenu = link.closest('.js-headerDropdawnMenu');
                    this.menuOpen(thisMenu);
                });

                link.addEventListener('blur', () => {
                    const thisMenu = link.closest('.js-headerDropdawnMenu');
                    this.menuClose(thisMenu);
                });
            })
        })
    }

    menuOpen(elm) {
        let adjacentElm;
        if(elm.classList.contains('js-headerDropdawnBtn')) {
            adjacentElm = elm.nextElementSibling;
        } else {
            adjacentElm = elm.previousElementSibling;
        }
        elm.classList.add('is-active');
        adjacentElm.classList.add('is-active');

    }

    menuClose(elm) {
        let adjacentElm;
        if(elm.classList.contains('js-headerDropdawnBtn')) {
            adjacentElm = elm.nextElementSibling;
        } else {
            adjacentElm = elm.previousElementSibling;
        }
            elm.classList.remove('is-active');
            adjacentElm.classList.remove('is-active');
    }
}
const dropdownMenu = new DropdownMenu();