window.addEventListener("load", function () {
  let slidersAutoPlayState = "playing";
  ///////// Timeline
  let chosenEvent;
  let chosenRangeSlide;
  let eventList = [
    "Invention of candlestick",
    "Dow Theory",
    "Creation of The RSI",
    "Tradestation platform launch",
    "Mesa Software by John Ehlhers",
    "Jurik Research by Mark Jurik",
    "Multicharts",
    "TradingView",
    "TradingView App Store",
    "Lux Algo",
    "Lux Algo Premium becomes the most ever used premium indicator in history"
  ];
  let eventPositionList = [0, 66, 114, 136, 184, 220, 238, 264, 274, 300, 318];
  //slider
  var flkty = new Flickity(".timeline-event-contain", {
    cellAlign: "center",
    contain: true,
    freeScroll: true,
    // percentPosition: true,
    pageDots: false,
    wrapAround: true,
    // autoPlay: 3000,
    prevNextButtons: false,
    pauseAutoPlayOnHover: false,
    draggable: false
  });
  var flktyIconSlide;
  if (windowViewPort === "mobile") {
    flktyIconSlide = new Flickity(".about-hero-icons-contain-mobile", {
      cellAlign: "center",
      contain: true,
      freeScroll: true,
      // percentPosition: true,
      pageDots: false,
      wrapAround: true,
      // autoPlay: 1000,
      prevNextButtons: false,
      pauseAutoPlayOnHover: false,
      draggable: false
    });
  }

  var rangeSlider = document.getElementById("range-slider");

  noUiSlider.create(rangeSlider, {
    range: {
      min: 0,
      max: 320
    },
    step: 1,
    start: 0,
    connect: "lower",
    // Move handle on tap, bars are draggable
    behaviour: "tap-drag",
    // tooltips: true,

    format: {
      to: function (value) {
        return value;
      },
      from: function (value) {
        return value.replace("", "");
      }
    }
  });
  setTimeout(() => {
    $(".noUi-touch-area").append($(".range-slider-arrows"));
  }, 300);

  let previousSlide = 0;
  let slideDirection;
  // let iconContainerSlideRange = [2, 3, 4, 5];
  let visibleIconsList = [7, 8, 0, 1, 2, 3];

  flkty.on("change", function (index) {
    let slideIndex = index;
    let previousIndex;

    if (slideIndex === 0) {
      previousIndex = 9;
    } else {
      previousIndex = slideIndex - 1;
    }
    // console.log("Current slide", index);
    // console.log("Previous slide: " + previousIndex);
    let rangeSliderYear = $(".range-slider-year");
    rangeSliderYear.css("color", "rgba(255, 255, 255, 0.5)");
    rangeSliderYear.eq(slideIndex).css("color", "white");
    let totaljumps = slideIndex - previousSlide;
    if (totaljumps === 0) {
      slideDirection = "not moving";
    } else if (totaljumps > 0) {
      slideDirection = "next";
    } else {
      slideDirection = "prev";
    }

    // console.log(totaljumps, slideDirection);
    previousSlide = index;
    if (slidersAutoPlayState === "playing") {
      rangeSlider.noUiSlider.set(eventPositionList[index]);
    }

    switch (slideIndex) {
      case 0:
        visibleIconsList = [7, 8, 0, 1, 2, 3];
        break;
      case 1:
        visibleIconsList = [8, 0, 1, 2, 3, 4];
        break;
      case 2:
        visibleIconsList = [0, 1, 2, 3, 4, 5];
        break;
      case 3:
        visibleIconsList = [1, 2, 3, 4, 5, 6];
        break;
      case 4:
        visibleIconsList = [2, 3, 4, 5, 6, 7];
        break;
      case 5:
        visibleIconsList = [3, 4, 5, 6, 7, 8];
        break;
      case 6:
        visibleIconsList = [4, 5, 6, 7, 8, 9];
        break;
      case 7:
        visibleIconsList = [5, 6, 7, 8, 9, 10];
        break;
      case 8:
        visibleIconsList = [6, 7, 8, 9, 10, 11];
        break;
      case 9:
        visibleIconsList = [7, 8, 9, 10, 11, 12];
        break;
      case 10:
        visibleIconsList = [7, 8, 9, 10, 11, 12];
        break;

      default:

      // code block
    }

    if (windowViewPort !== "mobile") {
      // console.log(visibleIconsList);
      $(".timeline-icon").each(function () {
        let iconIndex = parseInt($(this).attr("order"), 10);
        if (!visibleIconsList.includes(iconIndex)) {
          gsap.to(`.timeline-icon._${iconIndex}`, {
            opacity: 0,
            scale: 0,
            duration: previousIndex === 9 ? 0 : 1
          });
          setTimeout(() => {
            Flip.fit(
              `.timeline-icon._${iconIndex}`,
              `.invisible-icon-container`,
              {
                scale: true,
                duration: previousIndex === 9 ? 0 : 1
              }
            );
          }, 350);
        } else {
          gsap.to(`.timeline-icon._${iconIndex}`, {
            opacity: 0.3,
            duration: 0
          });
          Flip.fit(
            `.timeline-icon._${iconIndex}`,
            `.about-hero-icon-box._${visibleIconsList.indexOf(iconIndex)}`,
            {
              scale: true,
              stagger: 0.3,
              // duration: 0.55,
              duration: previousIndex === 9 ? 0.00000000001 : 0.55,
              ease: "sine.inOut",
              opacity: iconIndex === slideIndex && slideIndex < 9 ? 1 : 0.3
            }
          );
        }
      });
      // }
      if (slideIndex === 9 || slideIndex === 10) {
        gsap.to(".lux-algo-icon", {
          opacity: 1,
          scale: 1,
          duration: 0.5,
          ease: "sine.inOut"
        });
      } else {
        gsap.to(".lux-algo-icon", {
          opacity: 0.3,
          scale: 0.75,
          duration: 0.5,
          ease: "sine.inOut"
        });
      }
    } else {
      // For mobile view
      if (slideIndex !== 9 && slideIndex !== 10) {
        flktyIconSlide.select(slideIndex);
        $(".mobile-icon-slide").each(function () {
          let currentSlideIcon = $(this).find(".about-hero-icon-mobile");
          let iconIndex = parseInt($(this).attr("order"), 10);
          if (iconIndex === slideIndex) {
            gsap
              .timeline()
              .to($(this), {
                opacity: 1,
                duration: 0.5,
                ease: "power1.inOut"
              })
              .to(
                currentSlideIcon,
                {
                  duration: 0.5,
                  y: "2rem",
                  ease: "power1.inOut"
                },
                "<"
              );
          } else if (
            iconIndex === slideIndex - 1 ||
            iconIndex === slideIndex + 1 ||
            slideIndex === 8 ||
            slideIndex === 9 ||
            slideIndex === 0
          ) {
            gsap
              .timeline()
              .to($(this), {
                opacity: 0.3,
                duration: 0.5,
                ease: "power1.inOut"
              })
              .to(
                currentSlideIcon,
                {
                  duration: 0.5,
                  y: "-0.5rem",
                  ease: "power1.inOut"
                },
                "<"
              );
          } else {
            gsap.to(currentSlideIcon, {
              duration: 0.5,
              y: "-3rem",
              ease: "power1.inOut"
            });
          }
        });
        gsap.to(".lux-algo-icon", {
          opacity: 0.3,
          scale: 0.75,
          duration: 0.5,
          ease: "sine.inOut"
        });
      } else {
        gsap.to(".lux-algo-icon", {
          opacity: 0.75,
          scale: 1,
          duration: 0.5,
          ease: "sine.inOut"
        });
      }
    }
  });
  flkty.select(0);

  $(".timeline-event").on("click", function () {
    let slideIndex = $(this).index();
    flkty.select(slideIndex);
  });
  ////Animate things when range slider changes
  function updateRangeSlider(
    values,
    handle,
    unencoded,
    tap,
    positions,
    noUiSlider
  ) {
    let currentRangeValue = values[0];

    switch (true) {
      case currentRangeValue >= 0 && currentRangeValue < 62:
        chosenRangeSlide = eventList[0];
        break;
      case currentRangeValue >= 62 && currentRangeValue < 110:
        chosenRangeSlide = eventList[1];
        break;
      case currentRangeValue >= 110 && currentRangeValue < 132:
        chosenRangeSlide = eventList[2];
        break;
      case currentRangeValue >= 132 && currentRangeValue < 180:
        chosenRangeSlide = eventList[3];
        break;
      case currentRangeValue >= 180 && currentRangeValue < 216:
        chosenRangeSlide = eventList[4];
        break;
      case currentRangeValue >= 216 && currentRangeValue < 234:
        chosenRangeSlide = eventList[5];
        break;
      case currentRangeValue >= 234 && currentRangeValue < 260:
        chosenRangeSlide = eventList[6];
        break;
      case currentRangeValue >= 260 && currentRangeValue < 270:
        chosenRangeSlide = eventList[7];
        break;
      case currentRangeValue >= 270 && currentRangeValue < 296:
        chosenRangeSlide = eventList[8];
        break;
      case currentRangeValue >= 296 && currentRangeValue <= 314:
        chosenRangeSlide = eventList[9];
        break;
      case currentRangeValue >= 314 && currentRangeValue <= 326:
        chosenRangeSlide = eventList[10];
        break;
      default:

      // code block
    }
    // console.log(chosenRangeSlide, eventList.indexOf(chosenRangeSlide));
    if (chosenRangeSlide !== undefined && chosenRangeSlide !== chosenEvent) {
      chosenEvent = chosenRangeSlide;
    }

    let chosenSlideIndex = eventList.indexOf(chosenEvent);
    flkty.select(chosenSlideIndex);
    // setTimeout(() => {
    //   flkty.playPlayer();
    //   slidersAutoPlayState = "playing";
    // }, 1500);
  }

  // Binding signature

  $(".noUi-handle").on("touchstart mousedown", function () {
    if (slidersAutoPlayState === "playing") {
      flkty.stopPlayer();
      slidersAutoPlayState = "stopped";
    }
  });
  rangeSlider.noUiSlider.on("update", updateRangeSlider);

  ///////////// Gradients

  let GradientContainer = $(".about-hero-gradient-group > .position-relative");
  let Gradient1 = $(".abstract-gradient._1");
  let Gradient2 = $(".abstract-gradient._2");
  let Gradient3 = $(".abstract-gradient._3");

  let gradientsMoving = gsap.timeline({
    repeat: -1,
    repeatDelay: 0,
    paused: true
  });
  gradientsMoving
    .set(Gradient2, {
      opacity: 0
    })
    .set(Gradient3, {
      opacity: 0
    })
    .to(GradientContainer, {
      rotateZ: 360,
      duration: 45
    });

  let gradientsPulsing = gsap
    .timeline({ repeat: -1, repeatDelay: 0, paused: true })
    .to(
      Gradient1,
      {
        opacity: 0,
        duration: 4
      },
      0
    )
    .to(
      Gradient2,
      {
        opacity: 1,
        duration: 4
      },
      0
    )
    .to(
      Gradient2,
      {
        opacity: 0,
        duration: 4
      },
      4
    )
    .to(
      Gradient3,
      {
        opacity: 1,
        duration: 4
      },
      4
    )
    .to(
      Gradient3,
      {
        opacity: 0,
        duration: 4
      },
      8
    )
    .to(
      Gradient1,
      {
        opacity: 1,
        duration: 4
      },
      8
    );
  gradientsMoving.play();
  gradientsPulsing.play();

  // let eventList = [
  //   { name: "Invention of candlestick", year: 1700 },
  //   { name: "Dow Theory", year: 1932 },
  //   { name: "Creation of The RSI", year: 1978 },
  //   { name: "Tradestation platform launch", year: 1982 },
  //   { name: "Mesa Software by John Ehlhers", year: 1992 },
  //   { name: "Jurik Research by Mark Jurik", year: 2000 },
  //   { name: "Multicharts", year: 2004 },
  //   { name: "TradingView", year: 2011 },
  //   { name: "TradingView App Store", year: 2013 },
  //   { name: "Lux Algo", year: 2020 }
  // ];

  if (windowViewPort !== "mobile") {
    gsap
      .timeline({
        onComplete: () => {
          // console.log("Hero animation finished!");
          flkty.playPlayer();
          gsap.to(".timeline-icon._0", {
            opacity: 1,
            duration: 0.55
          });
        }
      })
      .set(".about-hero-icon-box", {
        opacity: 1
      })
      .to(".about-hero-icon-box .timeline-icon", {
        opacity: 1,
        duration: 1.5,
        ease: "power2.inOut",
        // ease: "sine.inOut",
        stagger: 0.15
      })
      .to(
        ".lux-algo-icon.luc-algo",
        {
          opacity: 1,
          duration: 1,
          ease: "power2.inOut"
        },
        ">-0.3"
      )

      .to(
        ".about-hero-icon-box .timeline-icon,.lux-algo-icon.luc-algo",
        {
          opacity: 0.3
        },
        "<"
      )
      .to(
        ".timeline-indicator",
        {
          opacity: 1
        },
        ">0.1"
      );
  }
  // , .about-us-hero .heading-xxl, .timeline-indicatork

  if (windowViewPort === "mobile") {
    gsap
      .timeline({
        onComplete: () => {
          // console.log("Hero animation finished!");
          flkty.playPlayer();
        }
      })
      .to(
        ".lux-algo-icon.luc-algo",
        {
          opacity: 1,
          duration: 1,
          ease: "power2.inOut"
        },
        ">-0.3"
      )

      .to(
        ".about-hero-icons-contain-mobile",
        {
          opacity: 1,
          duration: 0.5
        },
        "<"
      )
      .to(
        ".about-hero-icon-box .timeline-icon,.lux-algo-icon.luc-algo",
        {
          opacity: 0.3
        },
        "<"
      )
      .to(
        ".timeline-indicator",
        {
          opacity: 1
        },
        ">0.1"
      );
  }

  // if (windowViewPort === "desktop") {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color("#131722");
  // scene.background = new THREE.Color(0xcccccc);
  // Material
  const particlesMaterial = new THREE.PointsMaterial({
    size: 0.02,
    sizeAttenuation: true
  });
  // Geometry
  const particlesGeometry = new THREE.BufferGeometry();
  const count = 500;

  const positions = new Float32Array(count * 3); // Multiply by 3 because each position is composed of 3 values (x, y, z)

  for (
    let i = 0;
    i < count * 3;
    i++ // Multiply by 3 for same reason
  ) {
    positions[i] = (Math.random() - 0.5) * 10; // Math.random() - 0.5 to have a random value between -0.5 and +0.5
  }

  particlesGeometry.setAttribute(
    "position",
    new THREE.BufferAttribute(positions, 3)
  ); // Create the Three.js BufferAttribute and specify that each information is composed of 3 values

  // Points
  const particles = new THREE.Points(particlesGeometry, particlesMaterial);
  scene.add(particles);

  ////////////////////
  const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
  };
  const camera = new THREE.PerspectiveCamera(
    75,
    sizes.width / sizes.height,
    1,
    1000
  );

  camera.position.z = 5;

  scene.add(camera);

  const canvas = document.querySelector("canvas.webgl");
  const controls = new THREE.OrbitControls(camera, canvas);
  controls.enableDamping = true;
  controls.dampingFactor = 0.05;
  controls.screenSpacePanning = false;

  controls.minDistance = 3;
  controls.maxDistance = 50;

  // controls.maxPolarAngle = Math.PI / 2;
  const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(sizes.width, sizes.height);

  renderer.render(scene, camera);
  let clock = new THREE.Clock();
  const tick = () => {
    let elapsedTime = clock.getElapsedTime();
    // camera.lookAt(particles.position);
    particles.rotation.y = elapsedTime * 0.2;
    // camera.rotation.y += 0.01;
    renderer.render(scene, camera);
    controls.update();
    window.requestAnimationFrame(tick);
  };

  tick();
  ///When Window resize
  window.addEventListener("resize", () => {
    // Update sizes
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;
    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();
    renderer.setSize(sizes.width, sizes.height);
  });
  // }

  // $(".luxalgo-img._6,.luxalgo-img._7,.luxalgo-img._8").each(function (index) {
  //   let triggerElement = $(this);

  //   let tl = gsap.timeline({
  //     scrollTrigger: {
  //       trigger: triggerElement,
  //       start: "top 25%",
  //       end: "top 75%",
  //       toggleActions: "play none none reverse",
  //       srub: 1
  //       // once: true
  //     }
  //   });
  //   tl.from(triggerElement, {
  //     y: "8.5rem",
  //     scale: 0.75,
  //     opacity: 0,
  //     duration: 0.5
  //   });
  // });

  //////////Coins

  function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
    if (arguments.length === 2) {
      x = y = 0;
      w = ctx.canvas.width;
      h = ctx.canvas.height;
    }
    offsetX = typeof offsetX === "number" ? offsetX : 0.5;
    offsetY = typeof offsetY === "number" ? offsetY : 0.5;
    if (offsetX < 0) offsetX = 0;
    if (offsetY < 0) offsetY = 0;
    if (offsetX > 1) offsetX = 1;
    if (offsetY > 1) offsetY = 1;
    var iw = img.width,
      ih = img.height,
      r = Math.min(w / iw, h / ih),
      nw = iw * r,
      nh = ih * r,
      cx,
      cy,
      cw,
      ch,
      ar = 1;
    if (nw < w) ar = w / nw;
    if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated
    nw *= ar;
    nh *= ar;
    cw = iw / (nw / w);
    ch = ih / (nh / h);
    cx = (iw - cw) * offsetX;
    cy = (ih - ch) * offsetY;
    if (cx < 0) cx = 0;
    if (cy < 0) cy = 0;
    if (cw > iw) cw = iw;
    if (ch > ih) ch = ih;
    ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
  }

  // Apply interaction to all elements with this class
  if (windowViewPort === "desktop") {
    $(".scrub-section").each(function (index) {
      const canvas = $(this).find("canvas")[0];
      const embed = $(this).find(".embed")[0];
      const context = canvas.getContext("2d");
      function setCanvasSize() {
        canvas.width = embed.offsetWidth;
        canvas.height = embed.offsetHeight;
      }
      setCanvasSize();
      const frameCount = $(this).attr("total-frames");
      const urlStart = $(this).attr("url-start");
      const urlEnd = $(this).attr("url-end");
      const floatingZeros = $(this).attr("floating-zeros");
      const currentFrame = (index) =>
        `${urlStart}${(index + 1)
          .toString()
          .padStart(floatingZeros, "0")}${urlEnd}`;
      const images = [];
      const imageFrames = {
        frame: 0
      };
      for (let i = 0; i < frameCount; i++) {
        const img = new Image();
        img.src = currentFrame(i);
        images.push(img);
      }
      gsap.to(imageFrames, {
        frame: frameCount - 1,
        snap: "frame",
        ease: "none",
        scrollTrigger: {
          trigger: $(this),
          start: $(this).attr("scroll-start"),
          end: $(this).attr("scroll-end"),
          scrub: 0
        },
        onUpdate: render
      });
      images[0].onload = render;
      function render() {
        context.clearRect(0, 0, embed.offsetWidth, embed.offsetHeight);
        drawImageProp(
          context,
          images[imageFrames.frame],
          0,
          0,
          embed.offsetWidth,
          embed.offsetHeight,
          0.5,
          0.5
        );
        // requestAnimationFrame(render); ////// Might help to improve performance
      }

      // Update canvas size & animation state
      let iOS = !!navigator.platform.match(/iPhone|iPod|iPad/);
      let resizeTimer;
      $(window).on("resize", function (e) {
        if (iOS) {
          clearTimeout(resizeTimer);
          resizeTimer = setTimeout(function () {
            setCanvasSize();
            render();
          }, 250);
        } else {
          setCanvasSize();
          render();
        }
      });
      setTimeout(() => {
        ScrollTrigger.refresh();
      }, 300);
    });
  }
});