function launchAnim() {
  document.querySelectorAll(".opacite").forEach((element) => {
    element.style.opacity = 0;
  });

  var ply_btn = document.getElementById("favicon-logo-home");

  ply_btn.style.opacity = 0;

  var tl = anime.timeline({
    easing: "easeOutQuad",
    autoplay: false,
  });

  window.onbeforeunload = function () {
    window.scrollTo(0, 0);
  };

  document.documentElement.style.overflowY = "hidden";

  tl.add({
    targets: ".scroll-enter-container",
    translateY: "-100vh",
    duration: 300,
    easing: "easeOutQuad",
    complete: function () {
      document.querySelector(".scroll-enter-container").style.display = "none";
    },
  })
    .add(
      {
        targets: ply_btn,
        opacity: [1, 1],
        scale: [1, 1],
        duration: 700,
        easing: "easeOutBounce",
      },
      300
    )
    .add(
      {
        targets: ".opacite",
        opacity: [1],
        begin: function () {},
        complete: function () {
          document.documentElement.style.overflowY = "scroll";
          sessionStorage.setItem("shown", true);
        },
        duration: 400,
        easing: "easeOutQuad",
      },
      "-=100"
    )
    .add(
      {
        targets: ".infos-hero",
        translateY: [100, 0],
        duration: 400,
      },
      "-=400"
    )
    .add(
      {
        targets: ".hero-header-container",
        translateY: [-200, 0],
        duration: 400,
        easing: "easeOutQuad",
      },
      "-=400"
    );

  window.addEventListener("load", () => {
    tl.play();
  });
}

if (!sessionStorage.getItem("shown")) {
  launchAnim();
} else {
  document.querySelectorAll(".opacite").forEach((element) => {
    element.style.opacity = 1;
  });
}

function animText(id) {
  const text = document.getElementById(id);

  var letters = text.innerHTML.split("");

  var newInnerText = "";

  letters.forEach((element) => {
    newInnerText +=
      '<span class="toanim" style="display: inline-block" >' +
      element +
      "</span>";
  });

  text.style.display = "inline-flex";
  text.style.flexWrap = "nowrap";
  text.innerHTML = newInnerText;

  const texttoanim = document.querySelectorAll("#" + id + " span.toanim");

  var offset = 0;

  var pos = [5, 20, 8, -15, 3, 18];

  Array.from(texttoanim).forEach((element, index) => {
    offset += Math.random() - 0.5 < 0 ? 10 : -10;
    element.style.transform = "translateY(" + pos[index] + "px)";
  });

  const textanim = anime({
    targets: texttoanim,
    translateY: 0,
    autoplay: false,
    easing: "easeOutQuad",
    duration: 200,
  });

  var firsttimeanim = 0;

  document.getElementById(id).addEventListener("mouseenter", () => {
    document.documentElement.style.cursor = "cell";
    firsttimeanim !== 0 ? textanim.reverse() : (firsttimeanim = 1);
    textanim.play();
  });

  document.getElementById(id).addEventListener("mouseleave", () => {
    document.documentElement.style.cursor = "auto";
    textanim.reverse();
    textanim.play();
  });
}

const init = () => {
  if (!mobile) {
    animText("texttoanim");
    animText("texttoanim2");
  }

  function controlskey(e) {
    if (e.key === " ") {
      paused ? videoPlay() : videoPause();
    }
  }

  document.querySelector(".svg-arrow").addEventListener("click", () => {
    var arr = document.querySelector(".svg-arrow");
    document.documentElement.style.overflowY = "hidden";

    if (vimeo !== null) {
      vimeo.setCurrentTime(0);
      vimeo.play();
    }

    anime({
      targets: arr,
      scale: 30,
      duration: 350,
      begin: function () {
        arr.style.zIndex = "9999";
      },
      easing: "easeOutQuad",
      complete: function () {
        document.querySelector(".showreel-big").style.display = "flex";
      },
    });

    document.addEventListener("keypress", controlskey);
  });

  document
    .getElementById("showreel-btn-return-no")
    .addEventListener("click", () => {
      var arr = document.querySelector(".svg-arrow");
      document.documentElement.style.overflowY = "scroll";

      if (vimeo !== null) {
        vimeo.pause();
      }

      anime({
        targets: arr,
        scale: 1,
        duration: 250,
        easing: "easeOutQuad",
        begin: function () {
          document.querySelector(".showreel-big").style.display = "none";
        },
        complete: function () {
          arr.style.zIndex = "0";
        },
      });

      document.removeEventListener("keypress", controlskey);
    });

  ////////////////////////////////////////////////

  const logonav = document.querySelector(".header-logo-container"),
    btnnav = document.querySelector(".nav-menu-btn svg .st0"),
    textnav = document.getElementById("nav-text-menu");

  var projet_container = document.querySelector(".projets-view-container"),
    projet_overflow = document.querySelector(".view-overflow"),
    projet_view = document.querySelector(".projets-view"),
    percent = 0,
    translate = 0,
    horizontalAnim = anime({
      duration: 1000,
      easing: "linear",
      targets: projet_view,
      translateX: "-500vw",
      elasticity: 200,
      autoplay: false,
    });

  window.addEventListener("scroll", () => {
    var box = document
        .querySelector(".projets-container")
        .getBoundingClientRect(),
      windowHeight = window.innerHeight,
      svgsBtnRdv = document.querySelectorAll(".svg-btn-rdv"),
      backToTopContainer = document.querySelector(".back_to_top_container");

    if (box.top < 0 && box.bottom - windowHeight > 0) {
      if (!logonav.classList.contains("white")) {
        logonav.classList.add("white");
      }
    } else {
      logonav.classList.contains("white")
        ? (logonav.classList.remove("white"), (textnav.style.color = "#000000"))
        : "";
    }

    if (box.top < 0 && box.bottom - windowHeight * 1.5 - 150 > 0) {
      btnnav.style.stroke !== "#ffffff"
        ? ((btnnav.style.stroke = "#ffffff"), (textnav.style.color = "#ffffff"))
        : "";
    } else {
      btnnav.style.stroke !== "#000000"
        ? ((btnnav.style.stroke = "#000000"), (textnav.style.color = "#000000"))
        : "";
    }

    if (
      box.top + 40 - windowHeight < 0 &&
      box.bottom - windowHeight * 1.5 - 150 > 0
    ) {
      if (svgsBtnRdv[0].style.fill !== "white") {
        svgsBtnRdv.forEach((btn) => {
          btn
            .querySelectorAll(".phone-rdv")
            .forEach((phone) => (phone.style.fill = "white"));
          btn.style.fill = "white";
        });
      }
    } else {
      if (svgsBtnRdv[0].style.fill !== "black") {
        svgsBtnRdv.forEach((btn) => {
          btn
            .querySelectorAll(".phone-rdv")
            .forEach((phone) => (phone.style.fill = "black"));
          btn.style.fill = "black";
        });
      }
    }

    if (window.pageYOffset + windowHeight > document.body.clientHeight - 300) {
      backToTopContainer.style.opacity = 1;
      backToTopContainer.style.pointerEvents = "auto";
    } else {
      backToTopContainer.style.opacity = 0;
      backToTopContainer.style.pointerEvents = "none";
    }

    percent =
      (projet_overflow.offsetTop /
        (projet_container.clientHeight - projet_overflow.clientHeight)) *
      100;
  });

  document.querySelector(".back_to_top").addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth",
    });
  });

  document.getElementById("btn-contact").addEventListener("click", () => {
    window.scrollTo({
      bottom: 0,
      left: 0,
      behavior: "smooth",
    });
  });

  //////////////////////////////////////////////////

  const lerp = (a, b, t) => {
    return (1 - t) * a + t * b;
  };

  const render = () => {
    translate = lerp(translate, percent, 0.2);
    //projet_view.style.transform = "translate3d(-" + translate * 4 + "vw, 0, 0)";
    horizontalAnim.seek(horizontalAnim.duration * (translate / 100));

    window.requestAnimationFrame(render);
  };

  render();

  ///////////////////////////////////////////////////

  if (!mobile) {
    const cursor = document.querySelector(".cursorprojets");
    const image = cursor.children[0];

    image.style.transform = "scale(0.2)";
    image.style.transformOrigin = "center";

    var cursorposition = "";

    var cursorint = {
      cursoropacity: 0,
      cursorscale: 0.2,
    };

    const cursorenter = anime({
      targets: cursorint,
      cursoropacity: 1,
      cursorscale: 1,
      update: function () {
        image.style.transform = "scale(" + cursorint.cursorscale + ")";
        cursor.style.opacity = cursorint.cursoropacity;
      },
      easing: "easeOutBounce",
      duration: 300,
      autoplay: false,
    });

    const cursorexit = anime({
      targets: cursorint,
      cursoropacity: 0,
      cursorscale: 0.2,
      duration: 200,
      update: function () {
        image.style.transform = "scale(" + cursorint.cursorscale + ")";
        cursor.style.opacity = cursorint.cursoropacity;
      },
      easing: "easeOutQuad",
      autoplay: false,
    });

    var cursorin = false;

    const projectView = document.querySelector(".projets-view");

    const allInfosTitre = document.querySelectorAll(
      ".projets-view .infos-titre"
    );

    document
      .querySelector(".projets-view")
      .addEventListener("mousemove", (e) => {
        var pos = {
          x: e.clientX - window.innerWidth / 2,
          y:
            e.clientY -
            window.innerHeight / 2 -
            projectView.getBoundingClientRect().top,
        };
        cursorposition = "translate3d(" + pos.x + "px," + pos.y + "px, 0)";
        cursor.style.transform = cursorposition;
        if (e.target.classList.contains("image-projet")) {
          if (!cursorin) {
            cursorenter.play();
            document.body.style.cursor = "none";
            cursorin = true;
          }
          if (
            !e.target.parentElement.parentElement.parentElement
              .querySelector(".infos-titre")
              .classList.contains("active")
          ) {
            allInfosTitre.forEach((element) => {
              element.classList.remove("active");
            });
            e.target.parentElement.parentElement.parentElement
              .querySelector(".infos-titre")
              .classList.add("active");
          }
        } else {
          if (cursorin) {
            cursorexit.play();
            document.body.style.cursor = "auto";
            cursorin = false;
            allInfosTitre.forEach((element) => {
              element.classList.remove("active");
            });
          }
        }
      });

    document
      .querySelector(".projets-view")
      .addEventListener("mouseleave", () => {
        cursorexit.play();
        document.body.style.cursor = "auto";
        cursorin = false;
      });
  }

  const form = document.getElementById("wf-form-contact-tempo-agence");

  form.addEventListener("focus", OnFocusInForm, true);
  form.addEventListener("blur", OnFocusOutForm, true);

  function OnFocusInForm(event) {
    if (event.target.classList.contains("textinputformcontact")) {
      event.target.parentElement.classList.add("active");
    }
  }

  function OnFocusOutForm(event) {
    if (event.target.classList.contains("textinputformcontact")) {
      event.target.parentElement.classList.remove("active");
    }
  }

  var checkboxes = document.querySelectorAll("input[type=checkbox]");

  checkboxes.forEach((element) => {
    element.addEventListener("change", () => {
      if (element.checked) {
        element.parentElement.classList.add("active");
      } else {
        element.parentElement.classList.remove("active");
      }
    });
  });

  const input_progress = document.getElementById("showreel_progress");
  var duration;

  function getminfromsec(sec) {
    var minutes = Math.floor(sec / 60);
    var seconds = Math.floor(sec - minutes * 60);
    return { min: minutes, sec: seconds < 10 ? "0" + seconds : seconds };
  }

  if (vimeo !== null) {
    vimeo.getDuration().then(function (sectotal) {
      duration = sectotal;

      var durationMS = getminfromsec(duration);

      document.getElementById("showreel-duration").innerText =
        durationMS.min + ":" + durationMS.sec;

      vimeo.on("timeupdate", function (event) {
        document.querySelector(".video-time-timer").style.width =
          event.percent * 100 + "%";
        input_progress.value = event.percent * 100;
        var timestampMS = getminfromsec(event.seconds);
        document.getElementById("showreel-timestamp").innerText =
          timestampMS.min + ":" + timestampMS.sec;
      });

      input_progress.addEventListener("input", function () {
        vimeo.setCurrentTime(duration * (input_progress.value / 100));
      });
    });

    const play_pause = document.getElementById(
      "showreel_control_play_container"
    );
    const image_play_pause = document.getElementById(
      "showreel-image-button-play"
    );

    var paused = true;

    vimeo.on("play", function () {
      image_play_pause.src =
        "https://uploads-ssl.webflow.com/6241bd6e8913322f2134ffc4/62a1f6cd71bb4c6a1803d315_Favicon_button_play.png";
      play_pause.classList.remove("active");
      paused = false;
    });

    vimeo.on("pause", function () {
      image_play_pause.src =
        "https://uploads-ssl.webflow.com/6241bd6e8913322f2134ffc4/62a1f6bf90fe382dee36e7a4_ButtonPause_Low.png";
      play_pause.classList.add("active");
      paused = true;
    });

    play_pause.addEventListener("click", function () {
      paused ? videoPlay() : videoPause();
    });

    document
      .getElementById("video-element-click")
      .addEventListener("click", () => {
        if (vimeo) {
          vimeo.getPaused().then((paused) => {
            paused ? videoPlay() : videoPause();
          });
        }
      });

    function videoPause() {
      vimeo.pause();
    }

    function videoPlay() {
      vimeo.play();
    }
  }
};

window.addEventListener("load", () => {
  init();
});

const developer = () => {
  let string = "-",
    i = 0;

  function animation() {
    console.log(string);
    var sin = Math.floor(Math.sin(i / 20) * 10) + 10;
    string = "";
    for (var j = 0; j < sin; j++) {
      string += "-";
    }
    i++;

    window.requestAnimationFrame(animation);
  }

  animation();
};