gsap.registerPlugin(Observer);

let current = 0;
let index = 0;
let animating = false;

// create array with all sections
const sections = gsap.utils.toArray("section");

// since the sections are positioned absolute, we will need to set them in the correct place first
gsap.set(sections, { yPercent: (i) => 100 * i, xPercent: (i) => 50 * i * -1 });

// create observer
// since we want to move the sections up when we mouse-wheel-scroll down
// but down when we touch- or pointer-drag down, we will need to 'invert' the logic for certain events
// easiest by setting the wheelSpeed to -1 and inverting the direction argument for the change() function
Observer.create({
  target: window,
  type: "wheel,touch,pointer",
  wheelSpeed: -1,
  onUp: () => change(1),
  onDown: () => change(-1)
});

function change(direction) {
  // check to only do things if we are not already animating
  if (!animating) {
    // check to only do things so we don't end up beyond the first or last section
    if (
      !(current === 0 && direction === -1) &&
      !(current === sections.length - 1 && direction === 1)
    ) {
      console.log("start tweening");

      animating = true;

      // set up the timeline to animate things
      const tl = gsap.timeline({
        // onComplete of the timeline update the current variable
        onComplete: function () {
          current += direction;
          animating = false;
          console.log("end tweening");
        }
      });

      tl.to(sections, { scale: 0.9 });
      tl.to(
        sections,
        { yPercent: "-=" + direction * 100, xPercent: "+=" + direction * 50 },
        "<+=0.4"
      );
      tl.to(sections, { scale: 1 }, "<+=0.4");
    } else {
      console.log("nowhere to go");
    }
  }
}
/*****************************************************************/
const dots = document.querySelectorAll('.dot-indicator  a');
Array.from(dots).forEach(function(dot) {
    dot.addEventListener('click', function() {
        index = this.getAttribute("index");
        console.log("index:" + index + "current :" + current);
        direction = index - current;
        change(direction);
    });
});

// Dot Indicator
window.addEventListener("DOMContentLoaded", () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      const id = entry.target.getAttribute("id");
      if (entry.intersectionRatio > 0) {
        document
          .querySelector(`.dot-indicator li a[data="#${id}"]`)
          .parentElement.classList.add("active");
      } else {
        document
          .querySelector(`.dot-indicator li a[data="#${id}"]`)
          .parentElement.classList.remove("active");
      }
    });
  });

  // Track all sections that have an `id` applied
  document.querySelectorAll("section[id]").forEach((section) => {
    observer.observe(section);
  });
});