(() => { 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);

let pciediv = [...document.querySelectorAll('.pcie50>div')];
pciediv.forEach(e => {
    let elemsTL = gsap.timeline().pause()
        .fromTo(e, { y: 100 }, { y: -100 }, 0)
    ScrollTrigger.create({
        trigger: e,
        start: "top bottom",
        end: "bottom top",
        // markers: true,
        onUpdate: self => {
            elemsTL.progress(self.progress)
        },
    })
})
let pciebg = [...document.querySelectorAll('.pcie50>img')];
pciebg.forEach(e => {
    let elemsTL = gsap.timeline().pause()
        .fromTo(e, { y: 10 }, { y: -10 }, 0)
    ScrollTrigger.create({
        trigger: e,
        start: "top bottom",
        end: "bottom top",
        // markers: true,
        onUpdate: self => {
            elemsTL.progress(self.progress)
        },
    })
})

ScrollTrigger.create({
    trigger: ".UD",
    start: "top top",
    end: "bottom bottom",
    pin: '.UDBG',
    pinSpacing: false,
    onUpdate: self => {
        document.querySelector('.UDBG img').style = `transform:rotate(${self.progress * -10}deg) scale(${.1 * self.progress + 1})`
    },
    // 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') : void 0
        },
        // markers: true,
    })
})
let twoballimgs = [...document.querySelectorAll(".twoball .imgs img")];
let twoballimgdots = [...document.querySelectorAll(".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')
        })
    }
})

ScrollTrigger.create({
    trigger: "#slidecard",
    start: "top top",
    end: "bottom bottom",
    pin: '#slidecard .camera',
    pinSpacing: false,
    onUpdate: self => {
        let pgs = self.progress;
        document.querySelector('#slidecard .camera>img').style.transform = `skewX(${pgs * 5}deg)`;
        document.querySelector('#slidecard .slider>img').style.transform = `translate(${(document.querySelector('#slidecard .slider').offsetWidth - document.querySelector('#slidecard .slider>img').offsetWidth) * self.progress}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') : void 0
        },
        // markers: true,      
    })
})
// let othele = [document.querySelector('#others .col .img1'), document.querySelector('#others .col .img2')];
// othele.forEach(e => {
//     let elemsTL = gsap.timeline().pause()
//         .fromTo(e, { y: 60 }, { y: -60 }, 0)
//     ScrollTrigger.create({
//         trigger: e,
//         start: "top bottom",
//         end: "bottom top",
//         // markers: true,
//         onUpdate: self => {
//             elemsTL.progress(self.progress)
//         },
//     })
// })

let dots = [...document.querySelectorAll(".dots a")];
let 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"
        },
        onToggle: self => { self.isActive ? ScrollTrigger.refresh() : void 0 },
        // markers: true,
    })
    el.onclick = () => {
        event.preventDefault()
        window.scrollTo({
            top: document.querySelector(el.getAttribute('href')).offsetTop + 1,
            behavior: 'smooth'
        });
    }
})