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 dsgn() {
        let dsgnAside = [...document.querySelectorAll('.design aside')];
        dsgnAside.forEach(e => {
            let dsgnTL = gsap.timeline().pause(),
                distance = 5,
                compStyles = window.getComputedStyle(e),
                txt = e.querySelector('.text'),
                img = e.querySelector('img');
            if (compStyles.getPropertyValue('flex-direction') == 'row') {
                dsgnTL.fromTo(txt, { xPercent: distance }, { xPercent: 0 }, 0)
                dsgnTL.fromTo(img, { xPercent: distance * -1 }, { xPercent: 0 }, 0)
            } else {
                dsgnTL.fromTo(txt, { xPercent: distance * -1 }, { xPercent: 0 }, 0)
                dsgnTL.fromTo(img, { xPercent: distance }, { xPercent: 0 }, 0)
            }
            ScrollTrigger.create({
                trigger: e,
                start: "top bottom",
                end: "center center",
                scrub: true,
                animation: dsgnTL,
                // markers: true,
            });
        });
    };
    window.outerWidth > 1200 && dsgn();

    function nvslideInit() {
        let sls = [...document.querySelectorAll('.nv-slider')],
            btn = [document.querySelector('.nv-slider-prev-btn'), document.querySelector('.nv-slider-next-btn')],
            ln = sls.length,
            cs, ci;
        function getcur() {
            cs = document.querySelector('.nv-slider.nv-active');
            ci = sls.indexOf(cs);
        }
        function toggle(cls, cd) {
            sls.forEach((e, i) => { i == cd ? e.classList.add(cls) : e.classList.remove(cls) });
        }
        function kfSliderUpdate() {
            getcur();
            toggle('nv-prev', ci == 0 ? ln - 1 : ci - 1);
            toggle('nv-next', ci == ln - 1 ? 0 : ci + 1);
        }
        function kfSliderPrevNext(e) {
            getcur();
            toggle('nv-active', e ? ci == ln - 1 ? 0 : ci + 1 : ci == 0 ? ln - 1 : ci - 1);
            kfSliderUpdate();
        };
        btn.forEach((e, i) => {
            e.onclick = () => { kfSliderPrevNext(i); }
        });
        kfSliderUpdate();
    };
    nvslideInit();

    function wind() {
        ScrollTrigger.create({
            trigger: ".wind",
            pin: '.wind .spacer',
            pinSpacing: false,
            start: "top top",
            end: "bottom top",
            // markers: true,
        });
        let introTL = gsap.timeline().pause().fromTo('.wind .windTL .intro', { autoAlpha: 1 }, { autoAlpha: 0 });
        introTL.progress(1)
        ScrollTrigger.create({
            trigger: '.wind .windTL .intro',
            start: "top top",
            end: "bottom top",
            toggleClass: {
                targets: '.wind .spacer .intro',
                className: 'active'
            },
            scrub: true,
            animation: introTL,
        });
        let fadetgr = [...document.querySelectorAll('.wind .windTL .apart>div')],
            fadetxt = [...document.querySelectorAll('.wind .spacer>section')];
        fadetgr.forEach((e, i) => {
            let fadetl = gsap.timeline().pause()
            fadetl.fromTo(fadetxt[i], { autoAlpha: 0 }, { autoAlpha: 1 }, 0)
                .fromTo(fadetxt[i], { autoAlpha: 1 }, { autoAlpha: 0 }, 1)
            fadetl.progress(1)
            ScrollTrigger.create({
                trigger: e,
                start: "top top",
                end: "bottom top",
                toggleClass: {
                    targets: fadetxt[i],
                    className: 'active'
                },
                scrub: true,
                animation: fadetl,
            });
            ScrollTrigger.create({
                trigger: e,
                start: "top top",
                end: "bottom top",
                toggleClass: {
                    targets: '.wind .spacer .imgs',
                    className: `active${i}`
                },
            });
        });
        gsap.registerPlugin(ScrollTrigger);
        let canvas = document.querySelector('#wind canvas'),
            canvasimg = document.querySelector('#wind canvas img'),
            context = canvas.getContext("2d"),
            imgsrcurl = canvasimg.getAttribute('src').match(/.*\//g),
            images = [],
            frameCount = 15;
        canvas.width = 1920;
        canvas.height = 1080;
        for (let i = 0; i < frameCount; i++) {
            let img = new Image();
            img.onload = function () {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(images[0], 0, 0);
            };
            img.src = `${imgsrcurl + (i).toString().padStart(3, '0')}.jpg`;
            images.push(img);
        };
        ScrollTrigger.create({
            trigger: ".wind .windTL .screen",
            start: "top top",
            end: "bottom bottom",
            onUpdate: self => {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(images[Math.round(self.progress * (frameCount - 1))], 0, 0);
            },
            // markers: true,
        });
        ScrollTrigger.create({
            trigger: ".wind .windTL .screen",
            start: "300% top",
            end: "bottom top",
            onUpdate: () => {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(images[Math.round(frameCount - 1)], 0, 0);
            },
            // markers: true,
        });
    }
    wind()

    ScrollTrigger.matchMedia({
        "(min-width: 1200px)": function () {
            gsap.registerPlugin(ScrollTrigger);
            let canvas = document.getElementById("seq"),
                imgselector = document.querySelector('#seq img'),
                context = canvas.getContext("2d"),
                frameCount = 31,
                images = [],
                imgsrcurl = imgselector.getAttribute('src').match(/.*\//g);
            canvas.width = 2560;
            canvas.height = 880;
            for (let i = 0; i < frameCount; i++) {
                let img = new Image();
                img.onload = function () {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    context.drawImage(images[0], 0, 0);
                };
                img.src = `${imgsrcurl + (i).toString().padStart(3, '0')}.jpg`;
                images.push(img);
            };
            ScrollTrigger.create({
                trigger: ".flip .flipping",
                start: "top top",
                end: "bottom .5%",
                onUpdate: self => {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    context.drawImage(images[Math.round(self.progress * (frameCount - 1))], 0, 0);
                },
                // markers: true,
            });
            ScrollTrigger.create({
                trigger: ".flip",
                pin: '.flip .spacer',
                pinSpacing: false,
                start: "top top",
                end: "bottom bottom",
                // markers: true,
            })
            let flipTL = [...document.querySelectorAll('.flip .flipTL>div')],
                fliptxt = [...document.querySelectorAll('.flip .spacer>section')];
            flipTL.forEach((e, i) => {
                let fliptl = gsap.timeline().pause();
                fliptl.fromTo(fliptxt[i], { autoAlpha: 0 }, { autoAlpha: 1 }, 0)
                    .fromTo(fliptxt[i], { autoAlpha: 1 }, { autoAlpha: 0 }, 1);
                ScrollTrigger.create({
                    trigger: e,
                    start: "top bottom",
                    end: i != flipTL.length - 1 ? "bottom top" : "300% top",
                    scrub: true,
                    animation: fliptl,
                    // markers: true,
                });
                ScrollTrigger.create({
                    trigger: e,
                    start: "top top",
                    end: "bottom top",
                    toggleClass: {
                        targets: fliptxt[i],
                        className: "active"
                    },
                    // markers: true,      
                });
            });
        },
        "(max-width: 1199px)": function () { },
        all: function () { },
    });
    function flipRE() {
        let flip = document.querySelector('.flip'),
            bfo = window.innerHeight * -1 + "px bottom",
            aft = window.innerHeight + "px top";
        function refresh() {
            ScrollTrigger.refresh();
        };
        function setTrigger(tgr, start, end, fn) {
            ScrollTrigger.create({
                trigger: tgr,
                start: start,
                end: end,
                invalidateOnRefresh: true,
                onToggle: self => {
                    self.isActive && fn();
                },
                // markers: true,
            });
        };
        setTrigger(flip, bfo, "top bottom", refresh);
        setTrigger(flip, "bottom top", aft, refresh);
    };
    flipRE();

    function eachAry(ary, idx) {
        ary.forEach((e, i) => {
            i == idx ? e.classList.add('active') : e.classList.remove('active');
        });
    }
    let lcdbtns = [...document.querySelectorAll('.lcd .icons>*')],
        lcdimgs = [...document.querySelectorAll('.lcd .imgs div>*')],
        lcdmodes = [...document.querySelectorAll('.lcd .modes>div')];
    eachAry(lcdbtns, 0);
    eachAry(lcdimgs, 0);
    eachAry(lcdmodes, 0);
    lcdbtns.forEach((el, index) => {
        el.addEventListener('click', () => {
            eachAry(lcdbtns, index);
            eachAry(lcdimgs, index);
            eachAry(lcdmodes, index);
        })
    })
    let rgbbtns = [...document.querySelectorAll('.rgb .icons>*:not(h4)')],
        rgbimgs = [...document.querySelectorAll('.rgb .imgs div>*')],
        rgbmodes = [...document.querySelectorAll('.rgb .icons h4>span')];
    eachAry(rgbbtns, 0);
    eachAry(rgbimgs, 0);
    rgbbtns.forEach((el, index) => {
        el.addEventListener('click', () => {
            eachAry(rgbbtns, index);
            eachAry(rgbimgs, index);
            eachAry(rgbmodes, index);
        })
    });
    let wheelPicker = new iro.ColorPicker("#wheelPicker", {
        width: 100,
        color: "rgb(255, 0, 255)",
        borderWidth: 0,
        borderColor: "#fff0",
        layout: [{
            component: iro.ui.Wheel,
            options: {
                sliderType: 'hue',
                sliderSize: '20'
            }
        },]
    });
    wheelPicker.on(['color:init', 'color:change'], color => {
        document.querySelectorAll('.base-color').forEach(e => {
            e.style['filter'] = `hue-rotate(${color.hue}deg) grayscale(${(100 - color.hsv.s) / 100}) brightness(${Math.pow((color.hsl.l + 50) / 100, 4)})`
        })
    });

    [...document.querySelectorAll(".exlnt .content>div")].forEach(element => {
        let exlnttl = gsap.timeline().pause()
            .fromTo(element, { yPercent: 10, autoAlpha: 0 }, { yPercent: 0, autoAlpha: 1 })
        ScrollTrigger.create({
            trigger: element,
            start: "top bottom",
            end: "center 80%",
            scrub: true,
            animation: exlnttl,
            // markers: true,
        });
    });
    let lside = document.querySelector(".exlnt .lside .move"),
        exlntlsidetl = gsap.timeline().pause()
            .fromTo(lside, { xPercent: -35, yPercent: 8 }, { xPercent: 25, yPercent: -9 })
    ScrollTrigger.create({
        trigger: ".exlnt",
        start: "top bottom",
        end: "bottom top",
        scrub: true,
        animation: exlntlsidetl,
        // markers: true,   
    });
    function exlntbgtl() {
        ScrollTrigger.create({
            trigger: ".exlnt",
            start: "top top",
            end: "bottom top",
            pin: '.exlnt .exlntbg',
            pinSpacing: false,
            // markers: true,
        });
    };
    exlntbgtl();

    let hashtags = ['#kft', '#design', '#nvslide', '#exlnt .title', '#bs', '#psu', '#gcc'],
        selectors = ['.gdl', 'h3', 'h4', 'li', 'p', 'a'];
    function scrollFadeIn(hashtagSet, selectorSet) {
        hashtagSet.forEach(hashtag => {
            selectorSet.forEach(selector => {
                let targets = [...document.querySelectorAll(`${hashtag} ${selector}`)];
                targets.forEach(target => {
                    let tl = gsap.timeline().fromTo(target, { autoAlpha: 0, y: 15 }, { autoAlpha: 1, y: 0 });
                    ScrollTrigger.create({
                        trigger: target,
                        start: "top 85%",
                        end: "bottom 70%",
                        scrub: true,
                        animation: tl,
                        // markers: true,
                    });
                });
            });
        });
    };
    scrollFadeIn(hashtags, selectors);

    let dots = [...document.querySelectorAll(".dots a")],
        dotsdiv = [...document.querySelectorAll(".dots a div")];
    dots.forEach((el, index) => {
        let elHREF = document.querySelector(el.getAttribute('href'));
        ScrollTrigger.create({
            trigger: el.getAttribute('href'),
            start: "top center",
            end: "bottom center",
            toggleClass: {
                targets: el.getAttribute('href'),
                className: "active"
            },
            // markers: true,
        });
        ScrollTrigger.create({
            trigger: el.getAttribute('href'),
            start: "top center",
            end: "bottom center",
            toggleClass: {
                targets: dotsdiv[index],
                className: "active"
            },
            // markers: true,
        });
        el.onclick = () => {
            event.preventDefault();
            let heightDiff = window.innerHeight - elHREF.offsetHeight;
            window.scrollTo({
                top: heightDiff < 0 ? elHREF.offsetTop + 1 : elHREF.offsetTop - heightDiff * .5,
                behavior: 'smooth'
            });
        };
    });
});

/* 
Webpage path fix. 
Update: 2023/03/10
*/
; (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 () { const regWebpage = /^\/webpage/i;[...document.querySelectorAll('a[href]')].forEach(dom => { const href = dom.getAttribute('href'); const isGBT = /gigabyte\.com/i.test(window.location.hostname); const prefix = isGBT ? (window.UrlCountryCode || "") : "https://www.gigabyte.com"; if (regWebpage.test(href)) { dom.setAttribute("href", prefix + href); }; }); });