function SendEvent() {
    if (typeof SendGaEvent !== "undefined") {
        SendGaEvent.apply(null, arguments);
    }
}
globalThis.SendEvent = SendEvent;

(function () {
    var ready, isReady, readyList, completed, fire, detach;
    var addEventListenerSupported;
    isReady = false;
    readyList = [];
    addEventListenerSupported = !!document.addEventListener;
    ready = function (fn) {
        if (isReady) {
            fn();
        } else {
            readyList.push(fn);
        }
    };
    completed = function () {
        if (isReady) return;
        isReady = true;
        detach();
        fire();
    };
    fire = function () {
        var i;
        for (i = 0; i < readyList.length; i++) {
            readyList[i]();
        }
    };
    detach = function () {
        if (addEventListenerSupported) {
            document.removeEventListener("DOMContentLoaded", completed, false);
            window.removeEventListener("load", completed, false);
        } else {
            document.detachEvent("onreadystatechange", completed);
            window.detachEvent("onload", completed);
        }
    };
    isReady = "complete" == document.readyState;
    if (!isReady) {
        if (addEventListenerSupported) {
            document.addEventListener("DOMContentLoaded", completed, false);
            window.addEventListener("load", completed, false);
        } else {
            document.attachEvent("onreadystatechange", completed);
            window.attachEvent("onload", completed);
        }
    }
    return ready;
})()(function () {
    (() => { function res() { let i = window.outerWidth, c = i; const p = 1200; window.addEventListener("resize", () => { c = window.outerWidth; i < p && c > p || i > p && c < p ? location.reload() : void 0 }); }; res(); })();

    gsap.registerPlugin(ScrollTrigger);

    function pg5(dist) {
        let pciediv = [...document.querySelectorAll('.pcie50>div')];
        pciediv.forEach(e => {
            let elemsTL = gsap.timeline().pause()
                .fromTo(e, { y: dist }, { y: -1 * dist }, 0)
            ScrollTrigger.create({
                trigger: e,
                start: "top bottom",
                end: "bottom top",
                scrub: true,
                animation: elemsTL,
                // markers: true,
            })
        })
    };
    window.outerWidth > 1200 ? pg5(100) : pg5(25);

    ScrollTrigger.create({
        trigger: ".UD",
        start: "top top",
        end: "bottom top",
        pin: '.UD .UDBG',
        pinSpacing: false,
        // markers: true,
    });
    let UDcols = [...document.querySelectorAll(".UD .col")];
    UDcols.forEach(element => {
        ScrollTrigger.create({
            trigger: element,
            start: "top 60%",
            end: "bottom 40%",
            onToggle: (self) => {
                self.isActive && element.classList.add('active')
            },
            // markers: true,
        })
    });
    let twoballimgs = [...document.querySelectorAll(".UD .twoball .imgs img")],
        twoballimgdots = [...document.querySelectorAll(".UD .twoball .imgdots>div")];
    twoballimgdots.forEach((el, index) => {
        el.onclick = () => {
            twoballimgs.forEach((e, i) => {
                i == index ? e.classList.add('active') : e.classList.remove('active')
            })
            twoballimgdots.forEach((e, i) => {
                i == index ? e.classList.add('active') : e.classList.remove('active')
            })
        }
    });

    let triggers = [...document.querySelectorAll('.Magnet .spacer>div')],
        flip = [...document.querySelectorAll('.Magnet .camera .flip>img')],
        MagnetTL0 = gsap.timeline().pause(),
        MagnetTL1 = gsap.timeline().pause(),
        MagnetTL2 = gsap.timeline().pause(),
        MagnetTL3 = gsap.timeline().pause();
    MagnetTL0
        .to('.Magnet .camera .plate', { xPercent: 0 })
        .to('.Magnet .camera .cover1', { autoAlpha: 1 })
        .to('.Magnet .camera .cover2', { autoAlpha: 0 });
    MagnetTL1
        .fromTo('.Magnet .camera .plate', { xPercent: 0 }, { xPercent: 0 }, 0)
        .fromTo('.Magnet .camera .cover1', { autoAlpha: 1 }, { autoAlpha: 1, duration: 0 }, 0)
        .fromTo('.Magnet .camera .cover2', { autoAlpha: 0 }, { autoAlpha: 0, duration: 0 }, 0)
        .fromTo('.Magnet .camera .plate', { xPercent: 0 }, { xPercent: 80 }, 1)
        .fromTo('.Magnet .camera .cover1', { autoAlpha: 0 }, { autoAlpha: 0, duration: 0 }, 2);
    for (j = 0; j < flip.length; j++) {
        flip.forEach((e, i) => {
            i == j ? MagnetTL2.add(() => { e.classList.add('active') }, j) : MagnetTL2.add(() => { e.classList.remove('active') }, j)
        })
    };
    MagnetTL3
        .fromTo('.Magnet .camera .cover1', { autoAlpha: 0 }, { autoAlpha: 0, duration: 0 }, 0)
        .fromTo('.Magnet .camera .plate', { xPercent: 80 }, { xPercent: 0 }, 0)
        .fromTo('.Magnet .camera .cover2', { autoAlpha: 0 }, { autoAlpha: 1, duration: 0 }, 0);
    ScrollTrigger.create({
        trigger: '.Magnet',
        start: "top top",
        end: "bottom bottom",
        pin: '.Magnet .camera',
        pinSpacing: false,
        // markers: true,
    });
    ScrollTrigger.create({
        trigger: '.Magnet',
        start: "-100% bottom",
        end: "top top",
        scrub: true,
        animation: MagnetTL0,
        // markers: true,
    });
    ScrollTrigger.create({
        trigger: triggers[0],
        start: "top top",
        end: "bottom top",
        scrub: true,
        animation: MagnetTL1,
        // markers: true,
    });
    ScrollTrigger.create({
        trigger: triggers[1],
        start: "top top",
        end: "bottom bottom",
        scrub: true,
        animation: MagnetTL2,
        // markers: true,
    });
    ScrollTrigger.create({
        trigger: triggers[2],
        start: "top top",
        end: "bottom bottom",
        scrub: true,
        animation: MagnetTL3,
        // markers: true,
    });

    ScrollTrigger.create({
        trigger: "#slidecard",
        start: "top top",
        end: "bottom bottom",
        pin: '#slidecard .camera',
        pinSpacing: false,
        onUpdate: self => {
            let pgs = self.progress,
                slide = document.querySelector('#slidecard .slider'),
                slideImg = slide.querySelector('img'),
                diff = slide.offsetWidth - slideImg.offsetWidth;
            slideImg.style.transform = `translate(${diff * pgs}px, 0)`;
        },
        // markers: true,
    });

    let othcols = [...document.querySelectorAll("#others .col")];
    othcols.forEach(element => {
        ScrollTrigger.create({
            trigger: element,
            start: "top 65%",
            end: "bottom 35%",
            onToggle: (self) => {
                self.isActive && element.classList.add('active')
            },
            onEnter: () => {
                ScrollTrigger.refresh();
            },
            // markers: true,      
        })
    });

    function hrefdots() {
        let dotsa = [...document.querySelectorAll(".dots a")];
        dotsa.forEach((el, i) => {
            let elHREF = document.querySelector(el.getAttribute('href'));
            el.querySelector('p').textContent.trim() == '' ? el.classList.add('hide') : el.classList.remove('hide');
            ScrollTrigger.create({
                trigger: elHREF,
                start: "top center",
                end: "bottom center",
                toggleClass: {
                    targets: el.querySelector('div'),
                    className: "active"
                },
                // markers: true,
            });
            el.addEventListener('click', () => {
                event.preventDefault();
                let heightDiff = window.innerHeight - elHREF.offsetHeight;
                window.scrollTo({
                    top: heightDiff < 0 ? elHREF.offsetTop + 1 : elHREF.offsetTop - heightDiff * .5,
                    behavior: 'smooth'
                });
            });
            let tl = gsap.timeline().pause();
            ![...el.classList].includes('hide') && tl.fromTo(el, { x: el.clientWidth }, { x: 0 }, .1 * i);
            ScrollTrigger.create({
                trigger: dotsa[0].getAttribute('href'),
                endTrigger: dotsa[dotsa.length - 1].getAttribute('href'),
                start: "top center",
                end: "bottom center",
                onToggle: self => {
                    self.isActive ? tl.pause().play() : tl.pause().progress(0);
                },
                // markers: true,
            });
        });
        ScrollTrigger.create({
            trigger: dotsa[0].getAttribute('href'),
            endTrigger: dotsa[dotsa.length - 1].getAttribute('href'),
            start: "top center",
            end: "bottom center",
            toggleClass: {
                targets: '.InnerGIGABYTEContent .dots',
                className: "active"
            },
            // markers: true,
        });
    }
    hrefdots();

    (function () {
        SmoothScroll({
            frameRate: 60,
            animationTime: 800,
            stepSize: 120,
            pulseAlgorithm: 1,
            pulseScale: 4,
            pulseNormalize: 1,
            accelerationDelta: 50,
            accelerationMax: 3,
            keyboardSupport: 1,
            arrowScroll: 50,
            fixedBackground: 0,
        });
    })();
});