"use strict";
let navlinks = document.queryselectorall(".ry_box .ry_nav_link");
let ry_img = document.queryselectorall(".ry_box .ry_img img");
let ry_img_bg = document.queryselectorall(".ry_box .bar");
let maxzindex = navlinks.length;
let easeinoutquart = "cubic-bezier(0.77, 0, 0.175, 1)";
ry_img[0].classlist.add("active");
navlinks[0].classlist.add("active");
navlinks.foreach((navlink, activeindex) => {
    ry_img_bg[activeindex].style.zindex = `${navlinks.length -
        activeindex}`;
    navlink.addeventlistener("click", () => {
        // ry_nav_link
        navlinks.foreach(navlink => navlink.classlist.remove("active"));
        navlink.classlist.add("active");
        // slide
        let currentslide = document.queryselector(".ry_box .ry_img img.active");
        let slidefadeout = currentslide.animate([
            { transform: "translatex(0)", opacity: 1 },
            { transform: "translatex(5%)", opacity: 0 }
        ], {
            duration: 600,
            easing: "ease-in",
            fill: "forwards"
        });
        slidefadeout.onfinish = () => {
            ry_img.foreach(slide => slide.classlist.remove("active"));
            let activeslide = ry_img[activeindex];
            activeslide.classlist.add("active");
            activeslide.animate([
                {
                    transform: "translatex(-5%)",
                    opacity: 0
                },
                {
                    transform: "translatex(0)",
                    opacity: 1
                }
            ], { duration: 600, easing: "ease-out", fill: "forwards" });
        };
        // overlay
        maxzindex += 1;
        let activeoverlay = ry_img_bg[activeindex];
        activeoverlay.style.zindex = `${maxzindex}`;
        activeoverlay.animate([{ transform: "scalex(0)" }, { transform: "scalex(1)" }], { duration: 1200, fill: "forwards", easing: easeinoutquart });
    });
});