$(function () {

    /// <summary>
    /// スクロール時に各要素をポップアップで表示する
    /// </summary>
    let $aosItems = $('.aos-popup');

    $aosItems.attr('data-aos', 'fade-up');
    $aosItems.attr('data-aos-easing', 'ease-in-cubid');
    $aosItems.attr('data-aos-once', true);
    $aosItems.attr('data-aos-duration', '1200');
    $aosItems.attr('data-aos-offset', '300');

    AOS.init();


    /// <summary>
    /// ハンバーガーメニュー内のリンクをクリックした時にメニューを閉じる
    /// </summary>
    let $navbarCollapse = $(".navbar-collapse");
    let $nabvarLink = $(".navbar-nav li a");

    $nabvarLink.click(function (event) {
        $navbarCollapse.collapse('hide');
    });


    /// <summary>
    /// ハンバーガーメニューの範囲外をクリックした時にメニューを閉じる
    /// </summary>
    $(document).click(function (event) {
        let clickover = $(event.target);
        let _opened = $navbarCollapse.hasClass('show');
        if (_opened === true && !clickover.hasClass('navbar-toggle')) {
            $navbarCollapse.collapse('hide');
        }
    })


    /// <summary>
    /// ウィンドウサイズが変更された時にハンバーガーメニューを閉じる
    /// </summary>
    let innerWidth = window.innerWidth;
    window.addEventListener('resize', () => {
        if (innerWidth === window.innerWidth) {
            return;
        }

        innerWidth = window.innerWidth;

        let _opened = $navbarCollapse.hasClass('show');
        if (_opened === true) {
            $navbarCollapse.collapse('hide');
        }
    });

    // 動画をスライド切り替えできるようにする
    $('.sample-video-container').slick();

    let $iframes = $('.youtube-video');
    $iframes.each(function () {
        // 初期状態はサムネ画像を代わりに表示する
        let $iframe = $(this);
        let id = $iframe.attr('data-src');
        let $thumb = $('<img class="sample-video-thumbnail" src="./img/thumb/' + id + '_thumb.png" />');

        // 動画の上に表示される再生ボタン
        let $videoPlayButton = $('<img class="video-play-icon" src="./img/video-play-icon.svg">');
        $iframe.before($thumb).remove();
        $thumb.after($videoPlayButton);

        // 再生ボタンがクリックされると、動画埋め込みに差し替わる
        $videoPlayButton.on('click', function () {
            $player = $('<div class="youtube"><iframe class="video-playing" style="aspect-ratio:16/9;" src="https://www.youtube.com/embed/' + id + '?enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe></div>');
            $thumb.after($player).remove();
            $(this).remove();
        });
    });

    // 次の動画、前の動画ボタンをクリックされたら全ての動画の再生を止める
    $('.slick-next,.slick-prev').on('click', function () {
        let $playingVideo = $('.video-playing');
        if ($playingVideo.length == 0) {
            return;
        }

        for (let i = 0; i < $playingVideo.length; i++) {
            let $contentWindow = $playingVideo[i].contentWindow;
            $contentWindow.postMessage(
                '{"event":"command","func":"pauseVideo","args":""}',
                "*"
            );
        }
    });
});