window.addEventListener('DOMContentLoaded', () => {
    const slides = document.querySelectorAll(".ncriptech__home--offerings .offerings-card");
    const container = document.querySelector("#panelWrap");
    let dur = 0.5;
    let offsets = [];
    let oldSlide = 0;
    let activeSlide = 2;
    let dots = document.querySelector(".dots");
    let navDots = [];
    let iw = window.innerWidth;
    const mouseAnim = gsap.timeline({
        repeat: -1,
        repeatDelay: 1
    });
    const handAnim = gsap.timeline({
        repeat: -1,
        repeatDelay: 1
    });
    const cursorAnim = gsap.timeline({
        repeat: -1,
        repeatDelay: 1
    });
    const arrowAnim = gsap.timeline({
        repeat: -1,
        repeatDelay: 1
    });
    gsap.set(".dots, .titleWrap", {
        xPercent: -50
    });
    gsap.set(".arrow", {
        yPercent: -50
    });
    gsap.set(".title", {
        y: 30
    });
    const dotAnim = gsap.timeline({
        paused: true
    });
    dotAnim.to(".dot", {
        stagger: {
            each: 1,
            yoyo: true,
            repeat: 1
        },
        scale: 2.1,
        rotation: 0.1,
        ease: "none"
    }, 0.5);
    dotAnim.to(".title", slides.length + 1, {
        y: -(slides.length * 30),
        rotation: 0.01,
        ease: "none"
    }, 0);
    dotAnim.time(1);
    sizeIt();

    function slideAnim(e) {
        oldSlide = activeSlide;
        if (this.id === "dragger") {
            activeSlide = offsets.indexOf(this.endX);
        } else {
            if (gsap.isTweening(container)) {
                return;
            }
            if (this.id === "leftArrow" || this.id === "rightArrow") {
                activeSlide = this.id === "rightArrow" ? (activeSlide += 1) : (activeSlide -= 1);
            } else if (this.className === "dot") {
                activeSlide = this.index;
            } else {
                activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1);
            }
        }
        activeSlide = activeSlide < 0 ? 0 : activeSlide;
        activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide;
        if (oldSlide === activeSlide) {
            return;
        }
        if (this.id != "dragger") {
            gsap.to(container, dur, {
                x: offsets[activeSlide],
                onUpdate: tweenDot,
                scrollTrigger: {
                    trigger: "#masterWrap",
                    pin: true,
                    start: 'top center',
                    end: 'bottom center',
                }
            });
        }
    }

    function sizeIt() {
        offsets = [];
        iw = window.innerWidth;
        gsap.set("#panelWrap", {
            width: slides.length * iw
        });
        gsap.set(slides, {
            width: iw
        });
        for (let i = 0; i < slides.length; i++) {
            offsets.push(-slides[i].offsetLeft);
        }
        gsap.set(container, {
            x: offsets[activeSlide]
        });
    }
    gsap.set(".hideMe", {
        opacity: 1
    });
    window.addEventListener("wheel", slideAnim);
    window.addEventListener("resize", sizeIt);

    function tweenDot() {
        gsap.set(dotAnim, {
            time: Math.abs(gsap.getProperty(container, "x") / iw) + 1
        });
    }
})