// YouTube Background Control on the Top Page
let player;
let isPlaying = true;
let isMuted = true;
$(function () {
    const videoId = $.trim($("#yt-id-bridge").text());
    const $poster = $("#video-poster");
    if (videoId && videoId !== "" && videoId.indexOf('{') === -1) {
        const thumbUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
        $poster.css({
            'background-image': `url(${thumbUrl})`,
            'background-color': '#000'
        });
    }
    player = $(".player").mb_YTPlayer();
    player.on("YTPReady", function () {
        $poster.addClass("is-hidden");
        $(".mbYTP_wrapper").css("pointer-events", "none");
    });
    $("#playPauseBtn").on("click", function () {
        const img = $(this).find("img");
        if (isPlaying) {
            player.YTPPause();
            img.attr("src", "assets/img/play.png");
            isPlaying = false;
        } else {
            player.YTPPlay();
            img.attr("src", "assets/img/pause.png");
            isPlaying = true;
        }
    });
    $("#muteBtn").on("click", function () {
        const img = $(this).find("img");
        if (isMuted) {
            player.YTPUnmute();
            img.attr("src", "assets/img/unmute.png");
            isMuted = false;
        } else {
            player.YTPMute();
            img.attr("src", "assets/img/mute.png");
            isMuted = true;
        }
    });
});
// mouse pointer
$(function () {
    var cursor = $("#cursor");
    var stalker = $("#stalker");
    $(document).on("mousemove", function (e) {
        var x = e.clientX;
        var y = e.clientY;
        cursor.css({
            "opacity": "0.9",
            "top": y + "px",
            "left": x + "px"
        });
        setTimeout(function () {
            stalker.css({
                "opacity": "0.4",
                "top": y + "px",
                "left": x + "px"
            });
        }, 100);
    });
    $("a").on({
        "mouseenter": function () {
            cursor.addClass("active");
            stalker.addClass("active");
        },
        "mouseleave": function () {
            cursor.removeClass("active");
            stalker.removeClass("active");
        }
    });
    $("#contents").on({
        "mouseenter": function () {
            cursor.addClass("is-dark");
            stalker.addClass("is-dark");
        },
        "mouseleave": function () {
            cursor.removeClass("is-dark");
            stalker.removeClass("is-dark");
        }
    });
});
// slider
const sliderClasses = ['.slider', '.slider-mv', '.slider-topics'];
sliderClasses.forEach(function (sliderClass) {
    $(sliderClass).each(function () {
        const $container = $(this).closest('.container');
        let slidesToShow = 3;
        if ($(this).hasClass('slider-topics')) slidesToShow = 2.33;
        if ($(this).hasClass('slider-mv')) slidesToShow = 2;
        let slidesToMobile = 1;
        if ($(this).hasClass('slider-topics') || $(this).hasClass('slider-mv')) {
            slidesToMobile = 1;
        }
        $(this).slick({
            autoplay: true,
            autoplaySpeed: 3000,
            slidesToShow: slidesToShow,
            centerMode: false,
            infinite: true,
            dots: true,
            prevArrow: $container.find('.prev'),
            nextArrow: $container.find('.next'),
            appendDots: $container.find('.dots-container'),
            customPaging: function (slider, i) {
                return '<button type="button"></button>';
            },
            responsive: [
                {
                    breakpoint: 421,
                    settings: {
                        slidesToShow: slidesToMobile
                    }
                }
            ]
        });
    });
});
// This is the source code for the video popup.
$(function () {
    if ($(".js-modal-video").length) {
        $(".js-modal-video").modalVideo({
            channel: "youtube",
            youtube: {
                controls: 0,
            },
        });
    }
});
// hamburger
$(function () {
    var nav = document.getElementById('nav-wrapper');
    var hamburger = document.getElementById('js-hamburger');
    hamburger.addEventListener('click', function () {
        nav.classList.toggle('open');
    });
});
// animation
(function($) {
    $(function () {
        $(".ttl-animation").each(function() {
            const txt = $(this).text();
            $(this).attr("data-text", txt).html(""); 
            for (let i = 0; i < 3; i++) {
                $(this).append($("<span></span>").text(txt));
            }
        });
        setTimeout(() => {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const el = entry.target;
                        if ($(el).hasClass("anime")) {
                            const index = $(".anime").index(el);
                            el.style.transitionDelay = `${index * 0.1}s`;
                            el.classList.add("anime-on");
                        } 
                        else if ($(el).hasClass("ttl-animation")) {
                            el.classList.add("is-active");
                            $(el).find("span").each(function(i) {
                                $(this).css("transition-delay", `${i * 0.1}s`);
                            });
                        }
                        observer.unobserve(el);
                    }
                });
            }, { 
                threshold: 0.1,
                rootMargin: "0px 0px -50px 0px"
            });
            $(".anime, .ttl-animation").each(function() {
                observer.observe(this);
            });
        }, 100);
    });
})(jQuery);