/*
See https://www.greensock.com/splittext/ for details. 
This demo uses SplitText which is a membership benefit of Club GreenSock, https://www.greensock.com/club/
*/

gsap.registerPlugin(SplitText, ScrollTrigger);


//S M O O T H  S C R O L L E R  S T A R T
const scroller = document.querySelector('.scroller');

const bodyScrollBar = Scrollbar.init(scroller, { damping: 0.1, delegateTo: document, alwaysShowTracks: true, plugins: { overscroll : { effect: 'bounce', damping: 0.15, maxOverscroll: 80}} });

ScrollTrigger.scrollerProxy(".scroller", {
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value;
    }
    return bodyScrollBar.scrollTop;
  }
});

bodyScrollBar.addListener(ScrollTrigger.update);

ScrollTrigger.defaults({ scroller: scroller });

//S M O O T H  S C R O L L E R  E N D 


//S P L I T  T E X T  S T A R T
var tl = gsap.timeline(),
  mySplitText = new SplitText("#quote", { type: "words,chars" }),
  chars = mySplitText.chars; //an array of all the divs that wrap each character

gsap.set("#quote", { perspective: 400 });

//S P L I T  T E X T   E N D


//S P L I T  T E X T  2  S T A R T
var t2 = gsap.timeline(),
  mySplitText2 = new SplitText("#quote2", { type: "words" }),
  chars2 = mySplitText2.words; //an array of all the divs that wrap each character

gsap.set("#quote2", { perspective: 400 });

//S P L I T  T E X T  2  E N D

//RED 
t2.from(chars2, {
  duration: 0.8,
  opacity: 0,
  y:-100,

  ease: "Power3.easeOut",
  stagger:1,
  scrollTrigger: {
    trigger: ".red2",
    start: "top top",
    end: "+700",
    scrub: true,
    pin: ".red2",
  }
});


//RED 
tl.from(chars, {
  duration: 0.8,
  opacity: 0,
  y:-100,

  ease: "Power3.easeOut",
  stagger: 0.1,
  scrollTrigger: {
    trigger: ".red",
    start: "-=200",
    end: "+300",
    scrub: true,
    pin: false,
  }
});

//TEXT UP
gsap.from("#quoteUp", {
  duration: 0.8,
  delay:0,
  y: 200,
  opacity:0,
  ease: "Power3.easeOut",
  scrollTrigger: {
    trigger: ".textUp",
    start: "-=200",
    end: "+500",
    scrub: true,
    pin: false,
  }
});

//B A L L  A N I M A T I O N
gsap.from(".blueBallItem", {
  duration: 0.8,
  delay:0,
  left:0,
  
  ease: "Power3.easeOut",
  scrollTrigger: {
    trigger: ".blueBall",
    start: "top top",
    end: "+4500",
    scrub: true,
    pin: false,
  }
});

//S H R I N K I N G  V I D E O 
gsap.from(".video", {
  duration: 0.8,
  delay:1,
  width:"100%",
  ease: "Power3.easeOut",
  scrollTrigger: {
    trigger: ".yellow",
    start: "top top",
    end: "+3200",
    scrub: 1,
    pin: true,
  }
});

//R O T A T I N G  I C O N 
TweenMax.to(".rotateImage", {rotation:"360", duration: 8, ease: 'none', repeat:-1});

//S H R I N K I N G  V I D E O 2
gsap.from(".video2", {
  duration: 0.8,
  delay:1,
  width:"100%",
  ease: "Power3.easeOut",
  scrollTrigger: {
    trigger: ".yellowtwo",
    start: "top top",
    end: "+3200",
    scrub: 1,
    pin: ".yellowtwo",
  }
});



//T I T L E  S E C T I O N
gsap.from(".titleSection", {
      y:200,
      duration: 0.8,      
      rotationX: 75,
      stagger: 0.1,
      transformOrigin: "top center",
      z: 150,
      opacity: 0,
  ease: "Power3.easeOut",
  scrollTrigger: {
    trigger: ".blueBall",


  }
});






const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");

canvas.width = screen.width;
canvas.height = screen.height;

const frameCount = 195;


const currentFrame = (index) => {
    let addedIndex = String(index).padStart(4, "0")

    console.log(addedIndex)
  return `https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/${
    addedIndex  
  
    }.jpg`;
  
}
    
console.log("IMAGE: " + currentFrame)
const images = [];
const seq = {
  frame: 0
};

for (let i = 0; i < frameCount; i++) {
  const img = new Image();
  
  img.src = currentFrame(i);
  
  images.push(img);
}

gsap.to(seq, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none",
  scrollTrigger: {
    trigger: ".canvas-container",
    // start: "-=400",
    start: "top top",
     end: "+=3000",
    pin: false,
    scrub: true,
  },
  onUpdate: render
});

images[0].onload = render;

    x = (canvas.width  - images[0].width ) * 0.5,   // this = image loaded
        y = (canvas.height - images[0].height) * 0.5;

function render() {

  const canvasW = canvas.width
   context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[seq.frame], canvas.width / 2 - images[0].width / 2 , canvas.height / 2 - images[0].height / 2 + 150);

}


// L O A D E R  
function hideLoader() {
  const loaderSection = document.querySelector(".rotateImg")
  loaderSection.classList.add("hidden")
}
const myTimeout = setTimeout(hideLoader, 3000);

// L O A D E R  2  
function hideLoader2() {
  const loaderSection2 = document.querySelector(".loader")
  loaderSection2.classList.add("hidden")
}
const myTimeout2 = setTimeout(hideLoader2, 5500);






var timeline = new TimelineMax();



//BATCH STAGGER
ScrollTrigger.batch(".roundBox", {
    onEnter: elements => {
      gsap.from(elements, {
        autoAlpha: 0,
        y: 60,
        stagger: 0.15
      });
    },
  });



// ************************************************************

const canvas2 = document.getElementById("hero-lightpass2");
const context2 = canvas2.getContext("2d");

canvas2.width = screen.width;
canvas2.height = screen.height;

const frameCount2 = 100;

const currentFrame2 = (index2) =>
  `https://cdn.cuberto.com/fp/img/hero/hero_${
    index2 + 1 
  
    }.jpg`;

const images2 = [];
const seq2 = {
  frame: 0
};

for (let i2 = 0; i2 < frameCount2; i2++) {
  const img2 = new Image();
  
  img2.src = currentFrame2(i2);
  
  images2.push(img2);
}

gsap.to(seq2, {
  frame: frameCount2 - 1,
  snap: "frame",
  ease: "none",
  scrollTrigger: {
    trigger: ".canvas-container2",
    // start: "-=400",
    start: "top top",
     end: "+=3000",
    pin: false,
    scrub: true,
  },
  onUpdate: render2
});

images2[0].onload = render2;

function render2() {
  context2.clearRect(0, 0, canvas2.width, canvas2.height);
  context2.drawImage(images2[seq2.frame], 0, 0);
}


//text up animation

gsap.to("#quoteBlack", {
  duration: 1,
  delay:4.2,
  y:-350,
  ease: "Power3.easeOut",
});