window.addEventListener("load", function () {
  let logoMoving = gsap
    .timeline({ repeat: -1, repeatDelay: 0 })
    .to(".logo-grid", {
      x: "-100%",
      ease: "none",
      duration: 30
    })
    .set(".logo-grid", {
      x: "0%"
    });

  //Banner
  let banner_tl_duration = 0.3;
  let expand_width = $(".floating-banner-inner").innerWidth();
  let show_banner_tl = gsap
    .timeline({
      paused: true,
      onStart: () => {
        gsap.set(".floating-banner", {
          pointerEvents: "auto"
        });
      },
      delay: 1,
      ease: "power2.inOut"
    })
    .fromTo(
      ".floating-banner-inner-side.floating",
      {
        y: 50,
        scale: 0,
        opacity: 0
      },
      {
        y: 0,
        scale: 1,
        opacity: 1,
        duration: banner_tl_duration
      }
    )

    .fromTo(
      ".floating-banner-inner-circle-bg._1",
      {
        opacity: 1,
        scale: 1
      },
      {
        opacity: 1,
        scale: 1.5,
        delay: 0.25,
        duration: banner_tl_duration * 1.25
      },
      "<"
    )
    .to(".floating-banner-inner-circle-bg._1", {
      scale: 0,
      delay: 0.5,
      duration: banner_tl_duration * 2
    })
    .to(".floating-banner-inner-side .btn-circle", {
      scale: 1,
      duration: banner_tl_duration
    })
    .to(".floating-banner-inner-circle-bg._2", {
      borderRadius: "0.625rem",
      duration: banner_tl_duration / 2
    })
    .to(".floating-banner-inner-side.floating", {
      width: expand_width,
      paddingLeft: "1.125rem",
      paddingRight: "1.125rem",
      duration: banner_tl_duration * 1.75
    })

    .to(".floating-banner-inner-side.left,.floating-banner-inner-side.right", {
      opacity: 1,
      duration: banner_tl_duration
    })

    .to(".floating-banner", {
      borderColor: "rgba(25, 25, 25, 1)",
      backgroundColor: "white",
      duration: banner_tl_duration
    })
    .to(
      ".floating-banner-inner",
      {
        x: -5,
        y: -5,
        duration: banner_tl_duration
      },
      "<"
    );

  window.addEventListener("scroll", () => {
    if (!show_banner_tl.paused()) return;
    show_banner_tl.play();
  });

  $(".floating-banner")
    .on("mouseenter", function () {
      gsap.to(".floating-banner-inner", {
        x: -5,
        y: 0,
        duration: banner_tl_duration
      });
    })
    .on("mouseleave", function () {
      gsap.to(".floating-banner-inner", {
        x: -5,
        y: -5,
        duration: banner_tl_duration
      });
    });

  //Banner

  //Hero  section
  gsap.to(".home-hero-illustration-top-wrap", {
    delay: 0.75,
    opacity: 1
  });

  let hero_scaling_factor;
  if (windowViewPort == "desktop") {
    hero_scaling_factor = 0.65;
  } else if (windowViewPort === "tablet") {
    hero_scaling_factor = 0.45;
  } else {
    hero_scaling_factor = 0.35;
  }

  let hero_tunnel_top = new NavPhysic({
    container_element_id: "#hero-tunnel-top-layer",
    scaling_factor: hero_scaling_factor,
    physical_factors: {
      frictionAir: 0.14, //Control falling speed
      restitution: 0.5 //Control how bouncy the tags are
    },
    tunnel_mode: true
  });

  let hero_tunnel_bottom = new NavPhysic({
    container_element_id: "#hero-tunnel-bottom-layer",
    scaling_factor: hero_scaling_factor,
    physical_factors: {
      frictionAir: 0.14, //Control falling speed
      restitution: 0.7 //Control how bouncy the tags are
    },
    tunnel_mode: true,
    tunnel_bot_layer: true
  });
  // hero_tunnel_bottom.wall_color = "red";

  if (!hero_tunnel_top.initialized) {
    hero_tunnel_top.init();
  }

  setTimeout(() => {
    if (!hero_tunnel_bottom.initialized) {
      hero_tunnel_bottom.init();
    }
  }, 5500);

  // setTimeout(() => {
  //   hero_tunnel_top.pause();
  //   hero_tunnel_bottom.pause();
  // }, 6500);
  // setTimeout(() => {
  //   hero_tunnel_top.resume();
  //   hero_tunnel_bottom.resume();
  // }, 12000);

  let hero_tube_moving_loop = gsap
    .timeline({
      repeat: -1,
      paused: true
    })
    .to(".home-hero-tube", {
      yPercent: -66.66666,
      duration: 14,
      ease: "none"
    })
    .to(".home-hero-tube", {
      yPercent: 0,
      duration: 0,
      ease: "none"
    });
  let cta_tube_moving_loop = gsap
    .timeline({
      repeat: -1,
      paused: true
    })
    .to(".home-cta-wave", {
      xPercent: -49.51,
      duration: 32,
      ease: "none"
    })
    .to(".home-cta-wave", {
      yPercent: 0,
      duration: 0,
      ease: "none"
    });
  let cta_tags_moving_loop = gsap
    .timeline({
      repeat: -1,
      paused: true
    })
    .to(".home-cta-tag-wrap[tag-side='left']", {
      x: "95em",
      duration: 17,
      ease: "none",
      stagger: {
        from: "random",
        each: 3.5
      }
    })
    .to(
      ".home-cta-tag-wrap[tag-side='right']",
      {
        x: "-95em",
        duration: 17,
        ease: "none",
        stagger: {
          from: "random",
          each: 3.5
        }
      },
      "<"
    );

  let nav_closed = true;
  $(".hamburger_wrap").on("click", function () {
    if (nav_closed) {
      nav_closed = false;
      hero_tube_moving_loop.pause();
      if (hero_tunnel_top.initialized) {
        hero_tunnel_top.pause();
      }
      if (hero_tunnel_bottom.initialized) {
        hero_tunnel_bottom.pause();
      }
    } else {
      setTimeout(() => {
        nav_closed = true;
        hero_tube_moving_loop.play();
        if (hero_tunnel_top.paused) {
          hero_tunnel_top.resume();
        }

        if (hero_tunnel_bottom.paused) {
          hero_tunnel_bottom.resume();
        }
      }, 1500);
    }
  });

  ///Star section
  $(".background-img.home._10").each(function () {
    let triggerElement = $(this);

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top 50%",
        end: "bottom bottom",
        toggleActions: "play none none none"
        // scrub: 1
      }
    });

    tl.to(".background-img.home._11", {
      opacity: 1
    }).to(".background-img.home._10", {
      scale: 1,
      opacity: 1
    });
  });
  $(".home-wormhole-text").each(function () {
    let triggerElement = $(this);

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top 55%",
        end: "bottom bottom",
        // markers: true,
        toggleActions: "play none none none"
        // scrub: 1
      }
    });

    tl.fromTo(
      triggerElement,
      {
        opacity: 0
      },
      {
        opacity: 1
      }
    );
  });
  $("#home-star-section").each(function () {
    let triggerElement = $(this);
    let star_1 = $(this).find(".home-star-svg-icon._1 svg");
    let star_2 = $(this).find(".home-star-svg-icon._2 svg");

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top bottom",
        end: "bottom top",
        toggleActions: "play none none none",
        scrub: 1
      }
    });

    tl.to(star_1, {
      rotation: 1080
    }).to(
      star_2,
      {
        rotation: -1080
      },
      "<"
    );
  });

  /////////////////Spinning labels
  let side_label_spinning, center_label_spinning;
  let big_labels_side = $(
    "[big-label][position='right'],[big-label][position='left']"
  );
  let big_labels_center = $("[big-label][position='center']");

  side_label_spinning = gsap
    .timeline({
      repeat: -1,
      paused: true
    })
    .to(big_labels_side, {
      rotate: "-360deg",
      duration: 5,
      ease: "none"
    })
    .set(big_labels_side, {
      rotate: "0deg"
    })
    .to(big_labels_side, {
      rotate: "-360deg",
      duration: 5,
      ease: "none"
    });
  center_label_spinning = gsap
    .timeline({
      repeat: -1,
      paused: true
    })
    .to(big_labels_center, {
      rotate: "360deg",
      duration: 5 * 2.41,
      ease: "none"
    })
    .set(big_labels_center, {
      rotate: "0deg"
    })
    .to(big_labels_center, {
      rotate: "360deg",
      duration: 5 * 2.41,
      ease: "none"
    });

  //Adjust speed
  side_label_spinning.timeScale(0);
  center_label_spinning.timeScale(0);

  let canvas_space_plane = new Plane_Three_Sketch({
    dom: document.getElementById("canvas-test-embed")
  });

  $(`[label-role="side"],#label-spinning-section a`).on(
    "mouseenter",
    function () {
      side_label_spinning.timeScale(1.25);
      center_label_spinning.timeScale(1.25);
      canvas_space_plane.animating_speed = 1.25;
    }
  );
  $(`[label-role="side"],#label-spinning-section a`).on(
    "mouseleave",
    function () {
      side_label_spinning.timeScale(0);
      center_label_spinning.timeScale(0);
      canvas_space_plane.animating_speed = 1;
    }
  );

  //setup
  $(`[label-role="center"][is-active="true"]`).css({
    opacity: 1,
    pointerEvents: "auto"
  });

  $("[label-role='side']").on("click", function () {
    let side_value = $(this).attr("percent-value");

    let center_label = $("[label-role='center'][is-active='true']");
    let center_value = center_label.attr("percent-value");

    //Update side label
    $(this).find("h3").text(center_value);
    $(this).attr("percent-value", center_value);

    //Remove previous center label and Add new center label
    let prev_center_label = center_label;
    let next_center_label = $(
      `[label-role='center'][percent-value='${side_value}']`
    );
    // console.log(side_value, center_value);
    // console.log(prev_center_label.length, next_center_label.length);

    // return;
    prev_center_label.attr("is-active", "false");
    next_center_label.attr("is-active", "true");

    gsap
      .timeline({
        onStart: () => {
          $(`[label-role="side"]`).css("pointer-events", "none");
        },
        onComplete: () => {
          $(`[label-role="side"]`).css("pointer-events", "auto");
        }
      })
      .to(prev_center_label, {
        opacity: 0,
        scale: 0.95,
        duration: 0.2,
        pointerEvents: "none"
      })

      .fromTo(
        next_center_label,
        {
          opacity: 0,
          scale: 0.95
        },
        {
          opacity: 1,
          duration: 0.2,
          scale: 1,
          pointerEvents: "auto"
        }
      );
  });

  ////Sticky sections --- Piechart
  $(".page-anchor").each(function () {
    let triggerElement = $(this);
    let id = triggerElement.attr("id");
    let target, stage_id;
    let animated_bg =
      windowViewPort === "desktop"
        ? ".link_animated_bg[version='desktop']"
        : ".link_animated_bg[version='tablet']";
    switch (id) {
      case "CUT-CONTENT-WASTE-1":
        target =
          windowViewPort === "desktop"
            ? "#CUT-CONTENT-WASTE-BTN-1"
            : "#CUT-CONTENT-WASTE-BTN-1-TABLET";
        stage_id = 1;

        break;
      case "CUT-CONTENT-WASTE-2":
        target =
          windowViewPort === "desktop"
            ? "#CUT-CONTENT-WASTE-BTN-2"
            : "#CUT-CONTENT-WASTE-BTN-2-TABLET";
        stage_id = 2;

        break;
      case "CUT-CONTENT-WASTE-3":
        stage_id = 3;
        target =
          windowViewPort === "desktop"
            ? "#CUT-CONTENT-WASTE-BTN-3"
            : "#CUT-CONTENT-WASTE-BTN-3-TABLET";

        break;
      default:
    }

    let update_UI_enter_in = () => {
      let currentLink = $(`${target}`);
      // console.log("entering in", stage_id);
      // $("[cut-content-waste-div]").each(function () {
      //   let id = $(this).attr("content-piechart-stage");
      //   console.log(id, $(this).css("opacity"));
      // });
      switch (stage_id) {
        case 1:
          gsap.to($("img[piechart-stage='1']"), {
            opacity: 1
          });

          addPie({
            chart_1: {
              data: stage_1.data,
              backgroundColor: stage_1.background_color.piechart_1
            },
            chart_2: {
              data: stage_1.data,
              backgroundColor: stage_1.background_color.piechart_2
            }
          });

          setTimeout(() => {
            show_tooltip($(`[piechart-tag][piechart-stage='1']`));
            hide_tooltip($(`[piechart-tag][piechart-stage='2']`));
            hide_tooltip($(`[piechart-tag][piechart-stage='3']`));
          }, 450);
          break;
        case 2:
          addPie({
            chart_1: {
              data: stage_2.data,
              backgroundColor: stage_2.background_color.piechart_1
            },
            chart_2: {
              data: stage_2.data,
              backgroundColor: stage_2.background_color.piechart_2
            }
          });

          gsap.timeline().to('[content-piechart-stage="1"]', {
            scale: 0.7,
            opacity: 0
          });
          setTimeout(() => {
            show_tooltip($(`[piechart-tag][piechart-stage='1']`));
            show_tooltip($(`[piechart-tag][piechart-stage='2']`));
            hide_tooltip($(`[piechart-tag][piechart-stage='3']`));
          }, 450);

          break;
        case 3:
          addPie({
            chart_1: {
              data: stage_3.data,
              backgroundColor: stage_3.background_color.piechart_1
            },
            chart_2: {
              data: stage_3.data,
              backgroundColor: stage_3.background_color.piechart_2
            }
          });

          gsap.timeline().to('[content-piechart-stage="2"]', {
            scale: 0.7,
            opacity: 0
          });
          setTimeout(() => {
            show_tooltip($(`[piechart-tag][piechart-stage='1']`));
            show_tooltip($(`[piechart-tag][piechart-stage='2']`));
            show_tooltip($(`[piechart-tag][piechart-stage='3']`));
          }, 450);
          break;
        default:
      }

      setTimeout(() => {
        $("#on-page-nav a").attr("is-active", "false");
        currentLink.attr("is-active", "true");
      }, 250);
    };

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top 10%",
        end: "bottom bottom",
        toggleActions: "play none none reverse",
        onEnter: () => {
          Flip.fit(animated_bg, target, {
            duration: 0.45,
            ease: "power2.inOut",
            absolute: true,
            onStart: update_UI_enter_in
          });
        }
      }
    });
  });
  $(".page-anchor-inner").each(function () {
    let triggerElement = $(this);
    let id = triggerElement.closest(".page-anchor").attr("id");
    let target, stage_id;
    let animated_bg =
      windowViewPort === "desktop"
        ? ".link_animated_bg[version='desktop']"
        : ".link_animated_bg[version='tablet']";
    switch (id) {
      // case "CUT-CONTENT-WASTE-1":
      //   target =
      //     windowViewPort === "desktop"
      //       ? "#CUT-CONTENT-WASTE-BTN-1"
      //       : "#CUT-CONTENT-WASTE-BTN-1-TABLET";
      //   stage_id = 1;

      //   break;
      case "CUT-CONTENT-WASTE-2":
        target =
          windowViewPort === "desktop"
            ? "#CUT-CONTENT-WASTE-BTN-1"
            : "#CUT-CONTENT-WASTE-BTN-1-TABLET";
        stage_id = 1;

        break;
      case "CUT-CONTENT-WASTE-3":
        stage_id = 2;
        target =
          windowViewPort === "desktop"
            ? "#CUT-CONTENT-WASTE-BTN-2"
            : "#CUT-CONTENT-WASTE-BTN-2-TABLET";

        break;
      default:
    }

    let update_UI_leave_back = () => {
      let currentLink = $(`${target}`);
      // console.log("entering back", stage_id, target);
      // $("[cut-content-waste-div]").each(function () {
      //   let id = $(this).attr("content-piechart-stage");
      //   console.log(id, $(this).css("opacity"));
      // });

      switch (stage_id) {
        case 1:
          gsap.to($("img[piechart-stage='1']"), {
            opacity: 1
          });
          gsap.timeline().to('[content-piechart-stage="1"]', {
            scale: 1,
            opacity: 1
          });
          addPie({
            chart_1: {
              data: stage_1.data,
              backgroundColor: stage_1.background_color.piechart_1
            },
            chart_2: {
              data: stage_1.data,
              backgroundColor: stage_1.background_color.piechart_2
            }
          });

          setTimeout(() => {
            show_tooltip($(`[piechart-tag][piechart-stage='1']`));
            hide_tooltip($(`[piechart-tag][piechart-stage='2']`));
            hide_tooltip($(`[piechart-tag][piechart-stage='3']`));
          }, 450);
          break;
        case 2:
          addPie({
            chart_1: {
              data: stage_2.data,
              backgroundColor: stage_2.background_color.piechart_1
            },
            chart_2: {
              data: stage_2.data,
              backgroundColor: stage_2.background_color.piechart_2
            }
          });

          gsap.timeline().to('[content-piechart-stage="2"]', {
            scale: 1,
            opacity: 1
          });
          setTimeout(() => {
            show_tooltip($(`[piechart-tag][piechart-stage='1']`));
            show_tooltip($(`[piechart-tag][piechart-stage='2']`));
            hide_tooltip($(`[piechart-tag][piechart-stage='3']`));
          }, 450);

          break;
        // case 3:
        //   addPie({
        //     chart_1: {
        //       data: stage_3.data,
        //       backgroundColor: stage_3.background_color.piechart_1
        //     },
        //     chart_2: {
        //       data: stage_3.data,
        //       backgroundColor: stage_3.background_color.piechart_2
        //     }
        //   });

        //   gsap.timeline().to('[content-piechart-stage="2"]', {
        //     scale: 1,
        //     opacity: 1
        //   });
        //   setTimeout(() => {
        //     show_tooltip($(`[piechart-tag][piechart-stage='1']`));
        //     show_tooltip($(`[piechart-tag][piechart-stage='2']`));
        //     show_tooltip($(`[piechart-tag][piechart-stage='3']`));
        //   }, 450);
        //   break;
        default:
      }

      setTimeout(() => {
        $("#on-page-nav a").attr("is-active", "false");
        currentLink.attr("is-active", "true");
      }, 250);
    };

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top 20%",
        end: "bottom bottom",
        toggleActions: "play none none reverse",
        // markers: true,
        onLeaveBack: () => {
          // console.log("EnteringBack", target);
          // console.log("EnteringBack", target, $(`${target}`).length);
          update_UI_leave_back();
          Flip.fit(animated_bg, target, {
            duration: 0.45,
            ease: "power2.inOut",
            absolute: true
          });
        }
      }
    });
  });

  // setTimeout(() => {
  $("[section-w-bg-animation]").each(function () {
    let triggerElement = $(this);

    let section_name = $(this).attr("section-w-bg-animation");

    let init_bg_animation = () => {
      switch (section_name) {
        case "hero":
          hero_tube_moving_loop.play();
          if (hero_tunnel_top.paused) {
            // console.log("resuming tunnel top");
            hero_tunnel_top.resume();
          }

          if (hero_tunnel_bottom.paused) {
            // console.log("resuming tunnel bot");
            hero_tunnel_bottom.resume();
          }
          break;
        case "cog":
          canvas_space_plane.play();
          side_label_spinning.play();
          center_label_spinning.play();
          break;
        case "cta":
          cta_tube_moving_loop.play();
          cta_tags_moving_loop.play();
          break;
        default:
      }
    };
    let pause_bg_animation = () => {
      switch (section_name) {
        case "hero":
          hero_tube_moving_loop.pause();
          if (hero_tunnel_top.initialized) {
            hero_tunnel_top.pause();
          }
          if (hero_tunnel_bottom.initialized) {
            hero_tunnel_bottom.pause();
          }
          break;
        case "cog":
          canvas_space_plane.stop();
          side_label_spinning.pause();
          center_label_spinning.pause();
          break;
        case "cta":
          cta_tube_moving_loop.pause();
          cta_tags_moving_loop.pause();
          break;
        default:
      }
    };

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top bottom",
        end: "bottom top",
        toggleActions: "play none none none",
        // markers: true,
        // scrub: 1,
        onEnter: () => {
          // console.log("Entering: ", section_name);
          init_bg_animation();
        },
        onLeave: () => {
          // console.log("Leaving: ", section_name);
          pause_bg_animation();
        },
        onEnterBack: () => {
          init_bg_animation();
          // console.log("Entering back: ", section_name);
        },
        onLeaveBack: () => {
          // console.log("Leaving back: ", section_name);
          pause_bg_animation();
        }
      }
    });
  });
  // }, 1000);
});