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

gsap.registerPlugin(ScrollTrigger);
////////////////////////////////// kv-video //////////////////////////////////
const videosrc = document.querySelector('video.kv-img');
document.querySelector('video.kv-img').src = videosrc.src;
videosrc.onerror = () => {
    document.querySelector('video.kv-img').src = `https://www.gigabyte.com${videosrc.src.replace(window.location.origin, '').replace(window.location.host, '')}`
};
////////////////////////////////// concept //////////////////////////////////
ScrollTrigger.create({
    trigger: '#designconcept',
    // markers: true,
    start: "top center",
    end: "bottom center",
    toggleClass: "active"
});
/*//////////////////////////////////////////////// lcd-btns ////////////////////////////////////////////////*/
let LCDbtns = document.querySelectorAll('.lcd-btns>div');
$('.lcd-btns>div').click(function () {
    $(this).addClass('active').siblings().removeClass('active');
    LcdEffects();
});

function LcdEffects() {
    var index = $('.lcd-btns>div.active').index() + 2
    $('.lcd-img-video:nth-child(' + index + ')').addClass('active').siblings().removeClass('active');
}
/*//////////////////////////////////////////////// modular-btns ////////////////////////////////////////////////*/
let modularbtns = document.querySelectorAll('.modular-btns>div');
$('.modular-btns>div').click(function () {
    $(this).addClass('active').siblings().removeClass('active');
    modularEffects();
});

function modularEffects() {
    var index = $('.modular-btns>div.active').index() + 1
    $(`.modular-img:nth-child(${index})`).addClass('active').siblings().removeClass('active');
}
$(window).resize(function () {
    ($(window).width() / $(window).height()) > 1.9 ? $('.sec2>img').removeAttr('style') : $('.sec2>img').css('width', 'unset')
});
/*//////////////////////////////////////////////// io-btns ////////////////////////////////////////////////*/
let IObtns = document.querySelectorAll('.io-btns>div');
$('.io-btns>div').click(function () {
    $(this).addClass('active').siblings().removeClass('active');
    IOEffect();
});

function IOEffect() {
    var index = $('.io-btns>div.active').index() + 1
    $('.io-imgs>*:nth-child(' + index + ')').addClass('active').siblings().removeClass('active');
    $('.io-paragraph>p:nth-child(' + index + ')').addClass('active').siblings().removeClass('active');
}
let column = 3;
setInterval(() => {
    $(document).width() > 1200 ? column = 3 : column = 1
    $('.io-btn').css('width', 'calc(100% / ' + column + ')');
}, 100)
let paraIndex = 0;
$('.io-btns-left').click(function () {
    paraIndex = paraIndex - 1;
    IOLRbtns();
})
$('.io-btns-right').click(function () {
    paraIndex = paraIndex + 1;
    IOLRbtns();
});

function IOLRbtns() {
    if (paraIndex >= IObtns.length - column + 1) {
        paraIndex = IObtns.length - column
    } else if (paraIndex < 0) {
        paraIndex = 0
    } else {
        $('.io-btn').css('transform', 'translateX(' + paraIndex * -100 + '%)');
    }
    $(IObtns[paraIndex]).addClass('active').siblings().removeClass('active');
    IOEffect();
}
setInterval(() => {
    if (paraIndex == 0) {
        $('.io-btns-left').addClass('transparent');
    } else if (paraIndex == IObtns.length - column) {
        $('.io-btns-right').addClass('transparent');
    } else {
        $('.io-btns-left').removeClass('transparent');
        $('.io-btns-right').removeClass('transparent');
    }
}, 100);

let Ptallest = 0;
let Pwinner = $('.io-paragraph>p');

function Phighest() {
    $('.io-paragraph>p').addClass('crown');
    $('.io-paragraph>p').each(function () {
        let height = $(this).height();
        if (height > Ptallest) {
            Ptallest = height;
            Pwinner = $(this);
        }
    });
    Pwinner.addClass('crown').siblings().removeClass('crown');
}
Phighest()

let imgurl = $('img.certifi-img').attr('src').match(/.*\//g)

function imgrwd() {
    $(window).width() >= 768 ?
        $('img.certifi-img').attr('src', `${imgurl}/io-img-3.png`) :
        $('img.certifi-img').attr('src', `${imgurl}/io-img-3-rwd.png`);
    $(window).width() >= 768 ?
        $('img.cables').attr('src', `${imgurl}/modular-img-2.png`) :
        $('img.cables').attr('src', `${imgurl}/modular-img-2-rwd.png`);
}
imgrwd()

setInterval(() => {
    imgrwd()
    Phighest()
}, 1000);

$(window).resize(function () {
    imgrwd()
    Phighest()
})

////////////////////// EXCELLENCE //////////////////////
ScrollTrigger.create({
    trigger: '.sec4',
    // markers: true,
    start: "top center",
    end: "bottom center",
    onLeave: () => {
        $('.lightbox').removeClass('active')
    },
    onLeaveBack: () => {
        $('.lightbox').removeClass('active')
    }
});
$('.col-imgs img').click(function () {
    $('.lightbox').addClass('active')
})
$('.lightbox').click(function () {
    $('.lightbox').removeClass('active')
})
$('.lightbox .closebtn').click(function () {
    $('.lightbox').removeClass('active')
})
let colimgs = document.querySelectorAll('.col-imgs img');
let colimgsIndex = 0;
colimgs.forEach(element => {
    $(element).click(function () {
        $('.lightbox img').attr('src', $(element).attr('src'))
    })
})
let seccols = [...document.querySelectorAll('.sec4-cols>div')];
let secdots = [...document.querySelectorAll('.sec4-dots>div')];
seccols.forEach((el, index) => {
    el.onclick = () => {
        seccols.forEach((e) => {
            window.outerWidth > 1200 ? e.style['transform'] = `translateX(calc(${index * -100}% - ${index * 20}px))` : void (0);
        })
        for (let i in seccols) {
            seccols[i].classList.remove('active');
            secdots[i].classList.remove('active');
        }
        seccols[index].classList.add('active');
        secdots[index].classList.add('active');
    }
})
secdots.forEach((el, index) => {
    el.onclick = () => {
        seccols.forEach((e) => {
            window.outerWidth > 1200 ? e.style['transform'] = `translateX(calc(${index * -100}% - ${index * 20}px))` : void (0);
        })
        for (let i in seccols) {
            seccols[i].classList.remove('active');
            secdots[i].classList.remove('active');
        }
        seccols[index].classList.add('active');
        secdots[index].classList.add('active');
    }
})
/*/////////////////////////////////////////////// RGB ///////////////////////////////////////////////*/
$('.rgb-btns div:nth-child(1)').addClass('active').siblings().removeClass('active');
$('.rgb-bgs>*:nth-child(1)').addClass('active').siblings().removeClass('active');
$('.rgb-btns div').click(function () {
    let rgbbtns = document.querySelectorAll('.rgb-btns div');
    let rgbbgs = document.querySelectorAll('.rgb-bgs>*');
    let curbtn = $(this).index();
    for (i = 0; i < rgbbtns.length; i++) {
        rgbbtns[i].classList.remove('active');
        rgbbgs[i].classList.remove('active');
    }
    rgbbtns[curbtn].classList.add('active');
    rgbbgs[curbtn].classList.add('active');
});

var wheelPicker = new iro.ColorPicker("#wheelPicker", {
    width: $(window).width() > 900 ? 100 : 300,
    color: "rgb(255, 0, 255)",
    borderWidth: 0,
    borderColor: "#fff0",
    layout: [{
        component: $(window).width() > 900 ? iro.ui.Wheel : iro.ui.Slider,
        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)})`
    })
});

let InitWidth = $(window).width();
let CurrentWidth = $(window).width();
let QueryWidth = 900;
$(window).resize(function () {
    CurrentWidth = $(window).width();
    if (InitWidth < QueryWidth && CurrentWidth > QueryWidth) {
        location.reload()
    } else if (InitWidth > QueryWidth && CurrentWidth < QueryWidth) {
        location.reload()
    }
});
/////////////////////////////////////////////////// support-link //////////////////////////////////////////////////
$('#support-link').attr('href', window.location.pathname + '/support');
/*/////////////////////////////////////////////// dots ///////////////////////////////////////////////*/
let dots = [...document.querySelectorAll(".dots a")],
    dotsdiv = [...document.querySelectorAll(".dots a div")];
dots.forEach((el, index) => {
    ScrollTrigger.create({
        trigger: el.getAttribute('href'),
        start: "top center",
        end: "bottom center",
        toggleClass: {
            targets: dotsdiv[index],
            className: "active"
        },
        // markers: true,
    })
    el.addEventListener('click', () => {
        event.preventDefault();
        let heightDiff = window.innerHeight - document.querySelector(el.getAttribute('href')).offsetHeight;
        window.scrollTo({
            top: heightDiff < 0 ? document.querySelector(el.getAttribute('href')).offsetTop + 1 : document.querySelector(el.getAttribute('href')).offsetTop - heightDiff * .5,
            behavior: 'smooth'
        });
    });
});

$(function () {
    function scrollifyonoff() {
        $(window).width() > 1200 ? $.scrollify.enable() : $.scrollify.disable();
    }
    $.scrollify({
        section: ".InnerGIGABYTEContent .wheel-scroll",
        sectionName: "",
        interstitialSection: $(window).scrollTop() == 0 ? "#PageMainContent,.scroll-style,.illustration-announce,footer" : "#model-header,.scroll-style,.illustration-announce,footer",
        easing: "easeInOutCubic",
        scrollSpeed: 100,
        offset: 0,
        scrollbars: true,
        standardScrollElements: "",
        setHeights: false,
        overflowScroll: false,
        updateHash: true,
        touchScroll: false,
        before: () => { },
        after: () => { },
        afterResize: scrollifyonoff(),
        afterRender: scrollifyonoff(),
    })
    setInterval(() => { $(document).scrollTop() == 0 ? $.scrollify.update() : void 0 }, 1000);
});