document.addEventListener('DOMContentLoaded', function () {
    // ページトップボタン
    // topボタンスクール上下の表示、非表示
    var height = 500;
    var pageTop = $('#pageTop').hide();

    var shown = false; // 現在の表示状態
    var previousPos = 0;

    $(window).scroll(function () {
        var currentPos = $(this).scrollTop();
        // 正：下方向／負：上方向
        var direction = currentPos - previousPos;
        // 表示条件
        var conditionIfShow = (direction <= 0 && currentPos >= height);

        if (!shown && conditionIfShow) {
            pageTop.stop().fadeIn();
            shown = true;
        } else if (shown && !conditionIfShow) {
            pageTop.stop().fadeOut();
            shown = false;
        }

        previousPos = currentPos;
    });

    pageTop.click(function () {
        $('body, html').animate({
            scrollTop: 0
        }, 500, 'swing');

        return false;
    });

    /*
    var pageTop = $('#pageTop');
    var startPos = 0, winScrollTop = 0;

    $(window).scroll(function () {
        winScrollTop = $(this).scrollTop();

        if ((winScrollTop > 300) && (winScrollTop < startPos)) {
            pageTop.fadeIn();
        } else {
            pageTop.fadeOut();
        }

        startPos = winScrollTop;
    });

    pageTop.click(function () {
        $('body, html').animate({
            scrollTop: 0
        }, 500, 'swing');

        return false;
    });
    */

    // タブの切り替え
    const tabLists = document.querySelectorAll('.el_tabList');

    tabLists.forEach(tabList => {
        tabList.addEventListener('click', (event) => {
            if (event.target.classList.contains('el_tabItem')) {
                const tabItem = event.currentTarget.querySelectorAll('.el_tabItem');
                const tabContents = event.currentTarget.parentNode.parentNode.querySelectorAll('.el_tabContents');

                for (let i = 0; i < tabItem.length; i++) {
                    if (tabItem[i].classList.contains('active') && tabContents[i]) {
                        tabItem[i].classList.remove('active');
                        tabContents[i].classList.remove('active');
                    }
                }

                const arrTabs = Array.prototype.slice.call(tabItem);

                const index = arrTabs.indexOf(event.target);
                tabContents[index].classList.add('active');
                tabItem[index].classList.add('active');

                if (tabItem[index].parentNode.parentNode.parentNode.querySelector('.bl_info_search_head')) {
                    if (tabItem[index].textContent.replace(/\s+|　+/g, '') === 'パチンコ') {
                        tabItem[index].parentNode.parentNode.parentNode.querySelector('.bl_info_search_head img').src = '/component/img/kishu_kensaku_pachinko.png';
                        tabItem[index].parentNode.parentNode.parentNode.querySelector('.bl_info_search_head_sp span').textContent = 'パチンコ機種検索';
                        tabItem[index].parentNode.parentNode.parentNode.querySelector('[name="c"]').value = 'p';
                        console.log(tabItem[index].parentNode.parentNode.parentNode.querySelector('[name="c"]'));
                    } else {
                        tabItem[index].parentNode.parentNode.parentNode.querySelector('.bl_info_search_head img').src = '/component/img/kishu_kensaku_slot.png';
                        tabItem[index].parentNode.parentNode.parentNode.querySelector('.bl_info_search_head_sp span').textContent = 'パチスロ機種検索';
                        tabItem[index].parentNode.parentNode.parentNode.querySelector('[name="c"]').value = 's';
                    }
                }
            }
        });
    })

    // ヘッダーメニューの開閉
    const menuLists = document.querySelectorAll('.bl_menu_item_head img');

    menuLists.forEach(menuList => {
        menuList.addEventListener('click', (event) => {
            const subMenus = document.querySelectorAll('.bl_menu_subMenuBox');
            const subMenu = event.currentTarget.parentNode.parentNode.querySelector('.bl_menu_subMenuBox');
            const isOpen = subMenu && subMenu.style.display === 'block' ? true : false;

            if (subMenus) {
                for (let i = 0; i < subMenus.length; i++) {
                    subMenus[i].style.display = null;
                }
            }

            if (subMenu) {
                subMenu.style.display = isOpen ? null : 'block';
            }
        });
    })

    // 機種メニューのポップアップ
    const popupMenu = document.querySelector('.popupMenu');
    const popupMenuBtn = document.querySelector('.popupMenuBtn');
    const machineMenu = document.querySelector('.bl_outline_menu_wrapper');

    if (popupMenu && popupMenuBtn) {
        popupMenuBtn.addEventListener('click', (event) => {
            document.body.style.overflow = 'hidden';
            popupMenu.style.display = 'block';
            popupMenuBtn.style.display = 'none';
        });
    }

    if (popupMenu && machineMenu) {
        const suisokuBanner = document.querySelector('[href*="/suisoku/"]');

        if (suisokuBanner) {
            popupMenu.querySelector('.popupMenu_banner').querySelector('a').href = suisokuBanner.href;
        } else {
            popupMenu.querySelector('.popupMenu_banner').style.display = 'none';
        }

        popupMenu.querySelector('.popupMenu_itemList').innerHTML = machineMenu.parentNode.innerHTML;

        const mokujiAnker = popupMenu.querySelectorAll('.popupMenu_mokuji a');

        for (let i = 0, count = mokujiAnker.length; i < count; i++) {
            mokujiAnker[i].addEventListener('click', (event) => {
                document.body.style.overflow = null;
                popupMenu.style.display = 'none';
                popupMenuBtn.style.display = 'block';
            });
        }

        popupMenu.querySelector('.popupMenu_closeBtn').addEventListener('click', (event) => {
            document.body.style.overflow = null;
            popupMenu.style.display = 'none';
            popupMenuBtn.style.display = 'block';
        });

        popupMenu.addEventListener('click', (event) => {
            if (event.target.classList.contains('popupMenu')) {
                document.body.style.overflow = null;
                popupMenu.style.display = 'none';
                popupMenuBtn.style.display = 'block';
            }
        });
    }

    const mokujiBtn = document.querySelector('.mokujiBtn');

    if (mokujiBtn) {
        mokujiBtn.addEventListener('click', (event) => {
            document.body.style.overflow = 'hidden';
            popupMenu.style.display = 'block';
            popupMenuBtn.style.display = 'none';
            document.querySelector('#popupMenuMokujiBlock').scrollIntoView();
        });
    }

    // ハンバーガーメニュー
    $(function () {
        $('.menu-trigger.close').on('click', function () {
            $('nav.drawer-nav').removeClass('open');
            $('.drawer-overlay').removeClass('open');


            $('html').css('overflow', 'auto');
            $('body').css('overflow', 'auto');

            setTimeout(function () {
                document.getElementsByClassName('drawer-nav')[0].scrollTop = 0;
            }, 500);
        });

        $('.el_hamburgerBox.open').on('click', function () {
            document.getElementsByClassName('drawer-nav')[0].style.margin = document.getElementsByTagName('body')[0].style.padding;
            document.getElementsByClassName('drawer-nav')[0].style.paddingBottom = document.getElementsByTagName('body')[0].style.padding.replace(/^(\d+px).*$/, '$1');

            $('.drawer-overlay').addClass('open');
            $('nav.drawer-nav').addClass('open');

            $('html').css('overflow', 'hidden');
            $('body').css('overflow', 'hidden');
        });

        $('.menu-trigger.open').on('click', function () {
            document.getElementsByClassName('drawer-nav')[0].style.margin = document.getElementsByTagName('body')[0].style.padding;
            document.getElementsByClassName('drawer-nav')[0].style.paddingBottom = document.getElementsByTagName('body')[0].style.padding.replace(/^(\d+px).*$/, '$1');

            $('.drawer-overlay').addClass('open');
            $('nav.drawer-nav').addClass('open');

            $('html').css('overflow', 'hidden');
            $('body').css('overflow', 'hidden');
        });

        $('.drawer-overlay').on('click', function () {
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $('.el_hamburgerBox').removeClass('active');
                $('nav.drawer-nav').removeClass('open');

                $('html').css('overflow', 'auto');
                $('body').css('overflow', 'auto');

                setTimeout(function () {
                    document.getElementsByClassName('drawer-nav')[0].scrollTop = 0;
                }, 500);
            }
        });
    });

    // 広告
    const adElement = document.querySelectorAll('.nt_ad_image');

    for (let i = 0, count = adElement.length; i < count; i++) {
        adElement[i].addEventListener('click', (event) => {
            const target = event.currentTarget;

            $.ajax({
                async: true,
                cache: false,
                timeout: 1000 * 60 * 60,
                type: 'GET',
                url: 'https://admin.nana-press.com/ad/api.php?q=click&hash=' + target.dataset.adHash + '&image_id=' + target.dataset.imageId + '&referrer=' + encodeURI(document.referrer) + '&ua=' + navigator.userAgent,
                dataType: 'text',
                success: function (successData, textStatus, XMLHttpRequest) {

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {

                },
                complete: function (XMLHttpRequest, textStatus) {
                    location.href = target.dataset.pageUrl;
                }
            });
        });
    }

    // 確認用で背景画像を一時的に任意変更
    /*
    if (location.href.match(/mode=bgchange/)) {
        const bgElement = document.querySelector('.bl_ad_background');

        if (bgElement) {
            bgElement.style.backgroundImage = 'url(https://image.nana-press.com/test/ge_nana_haikei_1920_1080.jpg)';
        }
    }
    */

    // ポップアップ表示　共通化用
    const popupOpenBtn = document.querySelectorAll('.contentVideoBlock');

    if (popupOpenBtn) {
        const popupAddFormElems = document.querySelectorAll('.el_popup_detailBox');
        const popupArea = document.querySelectorAll('.popupArea');

        for (let i = 0; i < popupOpenBtn.length; i++) {
            popupOpenBtn[i].addEventListener('click', function (e) {
                e.stopPropagation();
                popupArea[i].classList.add('active');
                document.body.style.overflow = 'hidden';
                playVideos(videoWrappers);
            })

            if (popupOpenBtn[i].querySelector('.el_popup_content')) {
                popupOpenBtn[i].querySelector('.el_popup_content').addEventListener('scroll', function () {
                    playVideos(videoWrappers);
                }, false);
            }
        }

        // ポップアップの枠以外か×マークを押したら閉じるをクリックしたら閉じる  
        for (let i = 0; i < popupAddFormElems.length; i++) {
            popupAddFormElems[i].addEventListener('click', function (e) {
                if (e.currentTarget.classList.contains('active')) {
                    if ((e.target.closest('.el_popup_detail') === null) || (e.target.classList.contains('el_popup_detail_xmark')) || (e.target.id === 'batsu_mark')) {
                        resetVideos(videoWrappers);
                        e.currentTarget.classList.remove('active');
                        document.body.style.overflow = null;
                        e.stopPropagation();
                    }
                }
            })
        }
    }

    const windowHeight = window.innerHeight;
    const videoWrappers = document.querySelectorAll('.editorMenu14Preview');
    let popupContentsTop = 0;
    let popupContentsBottom = 0;
    let popupContentsHeader = 0;

    window.addEventListener('load', function () {
        if (videoWrappers.length) {
            for (let i = 0, count = videoWrappers.length; i < count; i++) {
                videoWrappers[i].querySelector('video').pause();
            }
        }
    });

    function playVideos(videoWrappers) {
        if (!popupContentsTop || !popupContentsBottom || !popupContentsHeader) {
            popupContentsTop = (windowHeight - document.querySelector('.el_popup_detailBox.active .el_popup_detail').offsetHeight) / 2;
            popupContentsBottom = windowHeight - popupContentsTop;
            popupContentsHeader = document.querySelector('.el_popup_detailBox.active .el_popup_head').offsetHeight;
        }

        for (let i = 0; i < videoWrappers.length; i++) {
            const rect = videoWrappers[i].getBoundingClientRect();
            const isInView = (rect.top >= popupContentsTop + popupContentsHeader) && (rect.bottom <= popupContentsBottom) ? true : false;

            const video = videoWrappers[i].querySelector('video');

            if (isInView) {
                var playPromise = video.play();

                if (playPromise !== undefined) {
                    for (let j = 0; j < videoWrappers.length; j++) {
                        if (j !== i) {
                            videoWrappers[j].querySelector('video').pause();
                        }
                    }
                }

                break;
            } else {
                video.pause();
            }
        }
    }

    function resetVideos(videoWrappers) {
        for (let i = 0; i < videoWrappers.length; i++) {
            videoWrappers[i].querySelector('video').pause();
            videoWrappers[i].querySelector('video').currentTime = 0;
        }
    }
});