jQuery(function($) {
    /**
     * フォトライブラリ用のpopupのためのHTMLをセット
     */
    $(document).ready(function() {
        const photosCustom = $('.item-page.photos-custom');
        if (photosCustom[0]) {
            let photosCustomHtml = '';
            photosCustomHtml += '<div id="photo-popup-wrapper">';
            photosCustomHtml += '<div id="photo-popup">';
            photosCustomHtml += '<img id="photo-popup-img" src="" alt="">';
            photosCustomHtml += '</div>';
            photosCustomHtml += '<a id="photo-popup-close" class="popup-button" href="#">×</a>';
            photosCustomHtml += '<a id="photo-popup-pre" class="popup-button" href="#"><</a>';
            photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>';
            photosCustomHtml += '<div id="photo-popup-under">';
            photosCustomHtml += '</div>';
            photosCustomHtml += '</div>';
            photosCustom.append(photosCustomHtml);
        }
        // 自動生成されたp要素を削除
        let $imgWrppers = $('.item-page.photos-custom > div p');
        for (let i = 0; i < $imgWrppers.length; i++) {
            // 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない)
            if ($imgWrppers[i]['children'].length === 0) {
                $('.item-page.photos-custom > div p').eq(i).remove();
            }
        }
    });

    /**
     * 画面サイズが4:3より縦長の場合は、写真を画面幅いっぱいに表示する。
     */
    function setPopup() {
        const winW = $(window).innerWidth();
        const winH = $(window).innerHeight();
        // 画面表示領域のアスペクト比を取得
        const asp = winH / winW;
        if (asp < 0.75) {
            $('#photo-popup').removeClass('horizontal');
            $('#photo-popup').addClass('Vertical');
        } else {
            $('#photo-popup').removeClass('Vertical');
            $('#photo-popup').addClass('horizontal');
        }
    }

    /**
     * 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
     * popupの制御を行う関数の実行。
     */
    $('.item-page.photos-custom > div p').on('click', function() {
        // クリックされた画像のインデックス番号を取得
        let index = $('.item-page.photos-custom > div p').index(this);
        // 画像の数を取得
        const imagesLength = $('.item-page.photos-custom > div p').length;
        changePopup(index, imagesLength);
        // popupで表示させる画像URLを取得
        const src = $(this).children('img').attr('src');
        const $img = $('#photo-popup-img');
        // popupに画像URLをセット
        $img.attr('src', src);
        setPopup();
        $(window).resize(function () {
            setPopup();
        });
        setTimeout(function () {
            // popupの表示
            $('#photo-popup-wrapper').fadeIn();
            // popupのみスクロール可とする。
            $('body').css('overflow','hidden');
        }, 50);
        setTimeout(function () {
            popupScrollSet($img);
        }, 100);
    });

    /**
     * ポップアップの状態の制御
     * ･ 画像の切り替え
     * ･ ポップアップの表示、非表示
     *
     * @param {*} index クリックされた画像の親要素の中での順番
     * @param {*} imagesLength 画像のインデックス番号の最大値を取得
     */
    function changePopup(index, imagesLength) {
        $('#photo-popup-pre').off('click').on('click', function() {
            const $img = $('#photo-popup-img');
            let src = '';
            // 透明にする
            $img.css('opacity',0);
            if (index === 0) {
                index = imagesLength - 1;
                src = $('.item-page.photos-custom > div p').eq(imagesLength).children('img').attr('src');
            } else {
                index--;
                src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
            }
            setTimeout(function () {
                // transitionで透明になりきった時点で画像の差し替えを実行
                $img.attr('src', src);
            }, 400);
            setTimeout(function () {
                popupScrollSet($img);
            }, 500);
            setTimeout(function () {
                $('#photo-popup').css('display','');
                $img.css('opacity','');
            }, 600);
        });

        $('#photo-popup-next').off('click').on('click', function() {
            const $img = $('#photo-popup-img');
            let src = '';
            // 透明にする
            $('#photo-popup-img').css('opacity',0);
            if (index === imagesLength - 1) {
                index = 0;
                src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
            } else {
                index++;
                src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
            }
            setTimeout(function () {
                // transitionで透明になりきった時点で画像の差し替えを実行
                $img.attr('src', src);
            }, 400);
            setTimeout(function () {
                popupScrollSet($img);
            }, 500);
            setTimeout(function () {
                $('#photo-popup').css('display','');
                $img.css('opacity','');
            }, 600);
        });

        $('#photo-popup-close').off('click').on('click', function() {
            $('#photo-popup-wrapper').fadeOut();
            $('body').css('overflow','');
        });

        $('#photo-popup-under').off('click').on('click', function() {
            $('#photo-popup-wrapper').fadeOut();
            $('body').css('overflow','');
        });
    }

    /**
     * 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。
     * @param {*} $img ポップアップに表示している画像
     */
    function popupScrollSet($img) {
        const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ
        const imgWidth = $img[0].naturalWidth; // 画像の本来の幅
        if (imgHeight > imgWidth) {
            const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅
            const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率
            const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%)
            $('#photo-popup').scrollTop(scrollTop);
            console.log('test');
        }
    }
});