//Keep the year of the footer up to date
document.addEventListener("DOMContentLoaded", function () {
  // get the the span element
  const yrSpan = document.querySelector("#mission-north-current-year");
  // get the current year
  const currentYr = new Date().getFullYear();
  // set the year span element's text to the current year
  yrSpan.textContent = currentYr;
});

// Anime Home Hero Text
function textAnimationOnload() {
  setTimeout(function () {
    $(".line-animated-intoview").addClass("active");
  }, 1500);
}

window.onload = function afterWebPageLoad() {
  setTimeout(() => {
    typeSplit.revert();
    runSplit();
    ScrollTrigger.refresh();
  }, 150);
};

//gsap animation
gsap.registerPlugin(ScrollTrigger);
var mql = window.matchMedia("(min-width: 992px)");

function textAnimation(e) {
  $(".line").each(function (index) {
    //if it's desktop screen size
    if (e.matches) {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top 97%",
          end: "bottom 98%",
          scrub: 1.35
        }
      });

      tl.set($(this).find(".line-animated"), {
        y: "450%",
        rotate: 70,
        // y: "450%",
        // rotate: 45,
        transformOrigin: "0% 100%"
        // transformOrigin: "0% 100%"
        // rotate: 25
      });

      tl.to($(this).find(".line-animated"), {
        y: "0%",
        rotate: 0,
        // transformOrigin: "0% 100%",
        stagger: 0.04,
        opacity: 1
      });
    } else {
      //if it's tablet, mobile screen size
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top 98%",
          end: "bottom 99%",
          scrub: 1.1
        }
      });

      tl.set($(this).find(".line-animated"), {
        // y: "450%",
        y: "250px",
        rotate: 20,
        transformOrigin: "0% 0%",
        // rotate: 45,
        opacity: 0
      });

      tl.to($(this).find(".line-animated"), {
        y: "0px",
        rotate: 0,
        stagger: 0.04,
        opacity: 1,
        duration: 1
      });
    }
  });
}

/// Break text with class "split-lines" into lines

let typeSplit;
// Split the text up
function runSplit() {
  if (window.innerWidth >= 992) {
    typeSplit = new SplitType(".split-lines", {
      types: "lines"
    });

    // $(".line").append("<div class='line-mask'></div>");
    $(".split-lines")
      .children("div")
      .each(function (e, el) {
        let isIntoView = $(this).parent().attr("class").includes("into-view");
        let classVal = $(this).parent().attr("class");
        if (isIntoView) {
          if (classVal.includes("extra-effect")) {
            $(el).replaceWith(
              "<div class='line-intoview'><div class ='line-animated-intoview'>" +
                "<div class='" +
                classVal +
                "'>" +
                $(this).text() +
                "</div></div></div>"
            );
          } else {
            $(el).replaceWith(
              "<div class='line-intoview'><div class='line-animated-intoview'>" +
                $(this).text() +
                "</div></div>"
            );
          }
        } else {
          if (classVal.includes("extra-effect")) {
            $(el).replaceWith(
              "<div class='line'><div class ='line-animated'>" +
                "<div class='" +
                classVal +
                "'>" +
                $(this).text() +
                "</div></div></div>"
            );
          } else {
            $(el).replaceWith(
              "<div class='line'><div class='line-animated'>" +
                $(this).text() +
                "</div></div>"
            );
          }
        }
      });
    textAnimation(mql);
  }
}
runSplit();

// Update on window resize
let windowWidth = $(window).innerWidth();
window.addEventListener("resize", function () {
  if (windowWidth !== $(window).innerWidth()) {
    windowWidth = $(window).innerWidth();
    typeSplit.revert();
    runSplit();
    $(document).ready(() => {
      $("#home-hero-section").click();
      textAnimationOnload();
    });
  }
});

//NAVIGATION RELATED SCRIPT

//Open navigation window on click of hamburger

//Identify the open nav and close nav click
var hamburgerTimesClicked = -1;

$(".hamburger-container").on("click", function () {
  hamburgerTimesClicked++;
  if (hamburgerTimesClicked % 2 === 0) {
    /* Open nav window */

    //disable scrolling when nav window is open

    $("body").css("overflow", "hidden");

    $(this).find(".hamburger-dots-contain").toggleClass("spin");
    $(".navigation-window").toggleClass("active");
    setTimeout(() => {
      toggleNavMenuClass();
    }, 900);
    setTimeout(() => {
      $(".nav-submenu").find(".absolute-position").show();
    }, 2500);
  } else {
    /* Close nav window */
    //enable scrolling again when nav window closes

    $("body").css("overflow", "visible");
    $(".nav-submenu").find(".absolute-position").hide();

    toggleNavMenuClass();
    setTimeout(() => {
      $(".navigation-window").toggleClass("active");
    }, 650);
    $(this).find(".hamburger-dots-contain").toggleClass("spin");

    if ($(window).width() < 992) {
      $("#nav-expertise-link-secondary").click();
      // $("#navigation-section-plus-icon").removeClass("spin");
    }
  }
});

//Open navigation window on click of hamburger

//Function to toggle class name of the nav links
function toggleNavMenuClass() {
  //animate the text
  $(".nav-link-contain").find(".link-no-underline").toggleClass("moved");
  $(".nav-link-contain.sub-link")
    .find(".link-no-underline")
    .toggleClass("moved");
  $(".nav-link-contain.s-m-t-20.s-m-b-30")
    .find(".link-no-underline")
    .toggleClass("moved");

  //Make other animations wait a bit
  setTimeout(() => {
    $(".plus-icon").toggleClass("moved");
    $(".navigation-main-side-lower").find(".animated").toggleClass("moved");
  }, 250);
  setTimeout(() => {
    $("#explore-services").toggleClass("active");
    $(".navigation-side.right").find(".animated").toggleClass("moved");
  }, 350);
  setTimeout(() => {
    $(".navigation-blur-bg").toggleClass("moved");
  }, 375);
}

//Set initial state for navigation manu links
setTimeout(() => {
  toggleNavMenuClass();
}, 3000);

//Set hover animation for "regular" nav link items
$(".link-no-underline.regular").on("mouseenter mouseleave", function () {
  $(this).find(".nav-link-overlay").toggleClass("moved");
});

//Set hover animation for "special" nav link items
$(".link-no-underline.special").on("mouseenter", function () {
  $(".nav-link-overlay").removeClass("moved");
  $(this).find(".nav-link-overlay").addClass("moved");
  $(".plus-icon").removeClass("active");
  $(".plus-icon").removeClass("spin");
  $(this).siblings(".plus-icon").toggleClass("active");
  $(this).siblings(".plus-icon").toggleClass("spin");
});

//Home link hovered, open the home menu window
$("#nav-home-link").on("mouseenter", function () {
  $("#nav-expertise-menu-window").removeClass("active");
  setTimeout(() => {
    $("#nav-expertise-menu-window").removeClass("active");
    $("#nav-home-menu-window").addClass("active");
  }, 250);
});

//Expertise link hovered, open the home menu window
if (window.innerWidth >= 992) {
  $("#nav-expertise-link").on("mouseenter", function () {
    $("#nav-home-menu-window").removeClass("active");
    setTimeout(() => {
      $("#nav-home-menu-window").removeClass("active");
      $("#nav-expertise-menu-window").addClass("active");
    }, 250);
  });
}
//Tablet when open expertise window
if (window.innerWidth < 992) {
  $("#navigation-section-plus-icon").on("click", function () {
    $(".nav-sub-window").toggleClass("active");
    $(".relative-nav-side-container").toggleClass("active");
    $(this).toggleClass("active spin");
    $(".plus-icon").not($(this)).toggleClass("spin");
  });
}
$("#nav-expertise-link-secondary").on("click", function () {
  $(".relative-nav-side-container").removeClass("active");

  setTimeout(() => {
    $(".nav-sub-window").removeClass("active");
    $(".plus-icon").removeClass("spin");
  }, 750);
});

// When the grids with imagery hovered in, zoom in effect
function CardZoomingAnimation() {
  $(".grid-zoom-animation").on("mouseenter", function () {
    $(this).addClass("active");
    $(this).find(".grid-bg-image").addClass("active");
    $(this).find(".home--misison__dispatch_lower-image").addClass("active");
  });
  $(".grid-zoom-animation").on("mouseleave", function () {
    $(this).removeClass("active");
    $(this).find(".grid-bg-image").removeClass("active");
    $(this).find(".home--misison__dispatch_lower-image").removeClass("active");
  });
}
setTimeout(() => {
  CardZoomingAnimation();
}, 800);

///The sub menu on hover animation
$(".menu-text-tray").on("mouseenter mouseleave", function () {
  $(this).toggleClass("is--active");
});

$(".nav-submenu .nav-link-contain.sub-link").on("mouseenter", function () {
  $(".nav-submenu .nav-link-contain.sub-link").addClass("faded");
  $(this).removeClass("faded");
});

$(".nav-submenu").on("mouseleave", function () {
  $(".nav-submenu .faded").removeClass("faded");
});

function dispatchPostOnHover() {
  $(".dispatch-single-post").on("mouseenter", function () {
    $(this)
      .find(".dispatch-single-post-thumbnail")
      .addClass("thumbnail-is-active");
  });
  $(".dispatch-single-post").on("mouseleave", function () {
    $(this)
      .find(".dispatch-single-post-thumbnail")
      .removeClass("thumbnail-is-active");
  });
}

setTimeout(() => {
  dispatchPostOnHover();
}, 1500);

function OnScrollEffects() {
  $(".faded-up-animation").each(function (index) {
    let triggerElement = $(this);

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        // trigger element - viewport
        // markers: true,
        start: "top 130%",
        end: "bottom bottom",
        scrub: 1.2
      }
    });
    tl.from($(this), {
      y: "200%",
      stagger: 0.5,
      opacity: 0
    });
  });
  $(".faded-up-animation-absolute").each(function (index) {
    let triggerElement = $(this);

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        // trigger element - viewport
        // markers: true,
        start: "top 105%",
        end: "bottom bottom",
        scrub: 1.2
      }
    });
    if (window.innerWidth > 992) {
      tl.from($(this), {
        y: "10rem",
        stagger: 0.5,
        opacity: 0
      });
    } else {
      tl.from($(this), {
        y: "5rem",
        stagger: 0.5,
        opacity: 0
      });
    }
  });
  $(".fade-in-left-animation-absolute").each(function (index) {
    let triggerElement = $(this);

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        // trigger element - viewport
        // markers: true,
        start: "top 75%",
        end: "bottom bottom",
        scrub: 1.2
      }
    });
    tl.from($(this), {
      x: "-5rem",
      opacity: 0,
      stagger: 0.5
    });
  });
}

setTimeout(() => {
  OnScrollEffects();
}, 500);

var browserName = (function (agent) {
  switch (true) {
    case agent.indexOf("edge") > -1:
      return "MS Edge";
    case agent.indexOf("edg/") > -1:
      return "Edge ( chromium based)";
    case agent.indexOf("opr") > -1 && !!window.opr:
      return "Opera";
    case agent.indexOf("chrome") > -1 && !!window.chrome:
      return "Chrome";
    case agent.indexOf("trident") > -1:
      return "MS IE";
    case agent.indexOf("firefox") > -1:
      return "Mozilla Firefox";
    case agent.indexOf("safari") > -1:
      return "Safari";
    default:
      return "other";
  }
})(window.navigator.userAgent.toLowerCase());

console.log(browserName);

var params = new URLSearchParams(window.location.search);

if (params.has("section")) {
  setTimeout(() => {
    $("html, body").animate(
      {
        scrollTop: $("#" + params.get("section")).offset().top
      },
      2500
    );
  }, 250);
}