gsap.registerPlugin(ScrollTrigger, Flip);
gsap.config({ force3D: false });

var tricksWord = document.getElementsByClassName("title-home");
for (var i = 0; i < tricksWord.length; i++) {
  var wordWrap = tricksWord.item(i);
  wordWrap.innerHTML = wordWrap.innerHTML.replace(
    /(^|<\/?[^>]+>|\s+)([^\s<]+)/g,
    '$1<span class="title-word">$2</span>'
  );
}

$(".title-word").each(function () {
  let newP = $('<p class="title-moveup">');
  newP.text($(this).text());
  newP.appendTo($(".moveup-text-holder"));
});

let matcher = gsap.matchMedia();

matcher.add("(min-width: 768px) and (pointer: fine)", () => {
  var scroller = gsap.to(".page-wrapper", {
    x: () => {
      return "-=" + ($(".page-wrapper").width() - window.innerWidth);
    },
    ease: "none",
    scrollTrigger: {
      trigger: ".scroller",
      pin: true,
      scrub: 1,
      end: () => {
        return (
          "+=" +
          $(".page-wrapper").width() * (window.innerHeight / window.innerWidth)
        );
      },
      invalidateOnRefresh: true,
      pinType: "fixed"
    }
  });

  // gsap.to(".container.is-horizontal.is-home-1", {
  //   scrollTrigger: {
  //     containerAnimation: scroller,
  //     trigger: ".section.is-horizontal.is-home-1",
  //     start: "left left",
  //     end: "right 50%",
  //     scrub: -1
  //   },
  //   x: "+=150vw",
  //   ease: "none"
  // });

  // let startTL = gsap.timeline({
  //   scrollTrigger: {
  //     containerAnimation: scroller,
  //     trigger: ".section.is-horizontal.is-home-1",
  //     start: "left left",
  //     end: "right 50%",
  //     scrub: 1
  //   }
  // });

  // $(".title-moveup").each(function (index, value) {
  //   let height = $(value).height();

  //   startTL.add(
  //     Flip.fit(value, $(".title-word").get(index), {
  //       duration: 1,
  //       absolute: true,
  //       //simple: true,
  //       ease: "power2.out",
  //       props: "lineHeight,fontSize"
  //     })
  //   );

  //   startTL.to(
  //     value,
  //     {
  //       marginTop: 0,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );

  //   startTL.fromTo(
  //     value,
  //     {
  //       top: `+=${height * index}`
  //     },
  //     {
  //       top: 0,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );

  //   startTL.to(
  //     `.title-moveup:nth-child(1n+${index + 1})`,
  //     {
  //       marginTop: `-=${height}`,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );

  //   startTL.to(
  //     value,
  //     {
  //       marginTop: 0,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );
  // });

  gsap.to(".container.is-horizontal.is-home-2", {
    scrollTrigger: {
      containerAnimation: scroller,
      trigger: ".section.is-horizontal.is-logo",
      start: "left left",
      end: "right left",
      scrub: -1
    },
    x: "+=300vw",
    ease: "none"
  });


  let newClip = Array.from(document.querySelector("#clip").childNodes).filter(
    (element) => {
      return element.tagName == "path";
    }
  );
  newClip = newClip.reverse();

  let logoSVGTL = gsap.timeline({
    scrollTrigger: {
      containerAnimation: scroller,
      trigger: ".section.is-horizontal.is-logo",
      start: "left 50%",
      end: "right left",
      scrub: -1
    }
  });


// logoSVGTL.set('#clip', {scale:2, x:`-=${$(".clip").width() / 1.8}`});

logoSVGTL.set('.link-home', {opacity: 0});

  // newClip.forEach((element, index) => {
  //   logoSVGTL.from(
  //     element,
  //     {
  //       y: index % 2 ? "-55vh" : "55vh",
  //       x: () => {
  //         let val = gsap.utils.mapRange(0, newClip.length - 1, -50, 50, index);
  //         return val + "vh";
  //       },
  //       duration: 1.2,
  //       ease: "power2.out"
  //     },
  //     "<.05"
  //   );
  //   logoSVGTL.fromTo(
  //     element,
  //     {
  //       rotateZ: () => {
  //         return "+=" + (index < newClip.length / 2 ? "220" : "-220");
  //       }
  //     },
  //     {
  //       rotateZ: 0,
  //       duration: 1.2
  //     },
  //     "<"
  //   );
  // });

  // logoSVGTL.fromTo(
  //   ".container.is-horizontal.is-home-2",
  //   {
  //     opacity: 0
  //   },
  //   {
  //     opacity: 1,
  //     duration: 0.8,
  //     ease: "power2.out"
  //   },
  //   "<0.4"
  // );

  // logoSVGTL.fromTo(
  //   ".bg-img",
  //   {
  //     opacity: 0
  //   },
  //   {
  //     opacity: 1,
  //     duration: 0.8,
  //     ease: "power2.out"
  //   },
  //   ">"
  // );

  // logoSVGTL.fromTo(
  //   ".bg-img-holder",
  //   {
  //     backgroundColor: "#ffffff"
  //   },
  //   {
  //     backgroundColor: "transparent",
  //     duration: 0.8,
  //     ease: "power2.out"
  //   },
  //   "<"
  // );

  logoSVGTL.addLabel("grow");

  logoSVGTL.to(".clip", {
    width: () => {
      return 49.1 * $(".clip").width();
    },
    height: () => {
      return 49.1 * $(".clip").height();
    },
    duration: 1.2,
    ease: "power4.in"
  });

  logoSVGTL.to(
    ".mask-safari",
    {
      height: "19000vh",
      duration: 1.2,
      ease: "power4.in"
    },
    "<"
  );

  logoSVGTL.to(
    ".link-home",
    {
      opacity: 1,
      duration: 1.2,
      ease: "power4.in"
    },
    "<"
  );

  logoSVGTL.to(
    ".section.is-horizontal.is-logo",
    {
      opacity: 0,
      duration: 0,
      ease: "power2.out"
    },
    ">"
  );

  logoSVGTL.to(
    ".home-case-wrapp",
    {
      opacity: 1,
      pointerEvents: "auto",
      duration: 0,
      ease: "power2.out"
    },
    "<"
  );

  let serviceTL = gsap.timeline({
    scrollTrigger: {
      containerAnimation: scroller,
      trigger: ".home-case-wrapp",
      start: "left left",
      end: "right right",
      scrub: 0
    }
  });

  serviceTL.addLabel("start");
  serviceTL.to(".section.is-home-service", {
    x: "+=200vw",
    duration: 2.7,
    ease: "none"
  });

  serviceTL.to(
    ".section.is-home-service",
    {
      y: `-=${100 * ($(".section.is-home-service").length - 1)}vh`,
      duration: 0.65 * ($(".section.is-home-service").length - 1),
      delay: 0.65,
      ease: "none"
    },
    "<"
  );

  serviceTL.fromTo(
    $(".home-service-text-holder.is-service-2").children(),
    {
      opacity: 0,
      y: 80
    },
    {
      opacity: 1,
      y: 0,
      duration: 0.4,
      ease: "power2.out",
      stagger: 0.1
    },
    "<0.1"
  );

  serviceTL.fromTo(
    $(".home-service-text-holder.is-service-3").children(),
    {
      opacity: 0,
      y: 80
    },
    {
      opacity: 1,
      y: 0,
      duration: 0.4,
      ease: "power2.out",
      stagger: 0.1
    },
    ">.1"
  );

  serviceTL.fromTo(
    $(".home-service-text-holder.is-service-1").children(),
    {
      opacity: 0,
      y: 80
    },
    {
      opacity: 1,
      y: 0,
      duration: 0.4,
      ease: "power2.out",
      stagger: 0.1
    },
    "0.3"
  );

  let loadTL = gsap.timeline({});

  loadTL.fromTo(
    $(".home-shapes-wrapp").children(),
    {
      opacity: 0,
      y: 180
    },
    {
      opacity: 1,
      y: 0,
      duration: 1,
      ease: "power2.out",
      stagger: 0.3
    }
  );
  loadTL.fromTo(
    $(".title-holder"),
    {
      opacity: 0,
      y: 80
    },
    {
      opacity: 1,
      y: 0,
      duration: 1,
      ease: "power2.out",
      stagger: 0.1
    },
    "<0.5"
  );
});

matcher.add("(min-width: 768px) and (not (pointer: fine))", () => {
  let startTL = gsap.timeline({
    scrollTrigger: {
      horizontal: true,
      scroller: ".page-wrapper",
      trigger: ".section.is-horizontal.is-home-1",
      start: "left left",
      end: "right right",
      scrub: 1
    }
  });

  // $(".title-moveup").each(function (index, value) {
  //   let height = $(value).height();

  //   startTL.add(
  //     Flip.fit(value, $(".title-word").get(index), {
  //       duration: 1,
  //       absolute: true,
  //       //simple: true,
  //       ease: "power2.out",
  //       props: "lineHeight,fontSize"
  //     })
  //   );

  //   startTL.to(
  //     value,
  //     {
  //       marginTop: 0,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );

  //   startTL.fromTo(
  //     value,
  //     {
  //       top: `+=${height * index}`
  //     },
  //     {
  //       top: 0,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );

  //   startTL.to(
  //     `.title-moveup:nth-child(1n+${index + 1})`,
  //     {
  //       marginTop: `-=${height}`,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );

  //   startTL.to(
  //     value,
  //     {
  //       marginTop: 0,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );
  // });

  let newClip = Array.from(document.querySelector("#clip").childNodes).filter(
    (element) => {
      return element.tagName == "path";
    }
  );
  newClip = newClip.reverse();

  let logoSVGTL = gsap.timeline({
    scrollTrigger: {
      horizontal: true,
      scroller: ".page-wrapper",
      trigger: ".section.is-horizontal.is-logo",
      start: "left 50%",
      end: "right right",
      scrub: 0
    }
  });

  // newClip.forEach((element, index) => {
  //   logoSVGTL.from(
  //     element,
  //     {
  //       y: index % 2 ? "-55vh" : "55vh",
  //       x: () => {
  //         let val = gsap.utils.mapRange(0, newClip.length - 1, -50, 50, index);
  //         return val + "vh";
  //       },
  //       duration: 1.2,
  //       ease: "power2.out"
  //     },
  //     "<.05"
  //   );
  //   logoSVGTL.fromTo(
  //     element,
  //     {
  //       rotateZ: () => {
  //         return "+=" + (index < newClip.length / 2 ? "220" : "-220");
  //       }
  //     },
  //     {
  //       rotateZ: 0,
  //       duration: 1.2
  //     },
  //     "<"
  //   );
  // });

  // logoSVGTL.fromTo(
  //   ".bg-img",
  //   {
  //     opacity: 0
  //   },
  //   {
  //     opacity: 1,
  //     duration: 0.8,
  //     ease: "power2.out"
  //   },
  //   ">"
  // );

  // logoSVGTL.fromTo(
  //   ".bg-img-holder",
  //   {
  //     backgroundColor: "#ffffff"
  //   },
  //   {
  //     backgroundColor: "transparent",
  //     duration: 0.8,
  //     ease: "power2.out"
  //   },
  //   "<"
  // );

  logoSVGTL.addLabel("grow");

  logoSVGTL.to(".clip", {
    width: () => {
      return 49.1 * $(".clip").width();
    },
    height: () => {
      return 49.1 * $(".clip").height();
    },
    duration: 1.2,
    ease: "power4.in"
  });

  logoSVGTL.to(
    ".section.is-horizontal.is-logo",
    {
      opacity: 0,
      duration: 0,
      ease: "power2.out"
    },
    ">"
  );

  logoSVGTL.to(
    ".home-case-wrapp",
    {
      opacity: 1,
      pointerEvents: "auto",
      duration: 0,
      ease: "power2.out"
    },
    "<"
  );

  $(".home-case-wrapp")
    .children()
    .each((index, value) => {
      gsap.fromTo(
        $(value).find(".home-service-text-holder").children(),
        {
          opacity: 0,
          y: 80
        },
        {
          scrollTrigger: {
            scroller: ".page-wrapper",
            trigger: value,
            horizontal: true,
            start: "left left"
          },
          opacity: 1,
          y: 0,
          duration: 0.4,
          ease: "power2.out",
          stagger: 0.1
        }
      );
    });

  let loadTL = gsap.timeline({});

  loadTL.fromTo(
    $(".home-shapes-wrapp").children(),
    {
      opacity: 0,
      y: 180
    },
    {
      opacity: 1,
      y: 0,
      duration: 1,
      ease: "power2.out",
      stagger: 0.3
    }
  );
  loadTL.fromTo(
    $(".title-holder"),
    {
      opacity: 0,
      y: 80
    },
    {
      opacity: 1,
      y: 0,
      duration: 1,
      ease: "power2.out",
      stagger: 0.1
    },
    "<0.5"
  );
});

matcher.add("(max-width: 767px)", () => {
  let loadTL = gsap.timeline({});

  // loadTL.fromTo(
  //   $(".home-shapes-wrapp").children(),
  //   {
  //     opacity: 0,
  //     y: 100
  //   },
  //   {
  //     opacity: 1,
  //     y: 0,
  //     duration: 1,
  //     ease: "power2.out",
  //     stagger: 0.3
  //   }
  // );
  // loadTL.fromTo(
  //   $(".title-holder"),
  //   {
  //     opacity: 0,
  //     y: 50
  //   },
  //   {
  //     opacity: 1,
  //     y: 0,
  //     duration: 1,
  //     ease: "power2.out",
  //     stagger: 0.1
  //   },
  //   "<0.5"
  // );

  let startTL = gsap.timeline({
    scrollTrigger: {
      trigger: ".section.is-horizontal.is-home-1",
      start: "top top",
      end: "bottom bottom",
      scrub: 1
    }
  });

  // $(".title-moveup").each(function (index, value) {
  //   let height = $(value).height();

  //   startTL.add(
  //     Flip.fit(value, $(".title-word").get(index), {
  //       duration: 1,
  //       absolute: true,
  //       //simple: true,
  //       ease: "power2.out",
  //       props: "lineHeight,fontSize"
  //     })
  //   );

  //   startTL.to(
  //     value,
  //     {
  //       marginTop: 0,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );

  //   startTL.fromTo(
  //     value,
  //     {
  //       top: `+=${height * index}`
  //     },
  //     {
  //       top: 0,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );

  //   startTL.to(
  //     `.title-moveup:nth-child(1n+${index + 1})`,
  //     {
  //       marginTop: `-=${height}`,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );

  //   startTL.to(
  //     value,
  //     {
  //       marginTop: 0,
  //       duration: 1,
  //       ease: "power2.out"
  //     },
  //     "<"
  //   );
  // });

  let newClip = Array.from(document.querySelector("#clip").childNodes).filter(
    (element) => {
      return element.tagName == "path";
    }
  );
  newClip = newClip.reverse();

  gsap.set('.link-home', {opacity: 0});
  gsap.set('.burger-holder', {opacity: 0});

  let logoSVGTL = gsap.timeline({
    scrollTrigger: {
      trigger: ".section.is-horizontal.is-logo",
      start: "top top",
      end: "bottom bottom",
      scrub: 0
    }
  });
  

  // newClip.forEach((element, index) => {
  //   logoSVGTL.from(
  //     element,
  //     {
  //       y: index % 2 ? "-55vh" : "55vh",
  //       x: () => {
  //         let val = gsap.utils.mapRange(0, newClip.length - 1, -50, 50, index);
  //         return val + "vh";
  //       },
  //       duration: 1.2,
  //       ease: "power2.out"
  //     },
  //     "<.05"
  //   );
  //   logoSVGTL.fromTo(
  //     element,
  //     {
  //       rotateZ: () => {
  //         return "+=" + (index < newClip.length / 2 ? "220" : "-220");
  //       }
  //     },
  //     {
  //       rotateZ: 0,
  //       duration: 1.2
  //     },
  //     "<"
  //   );
  // });

  // logoSVGTL.fromTo(
  //   ".bg-img",
  //   {
  //     opacity: 0
  //   },
  //   {
  //     opacity: 1,
  //     duration: 0.8,
  //     ease: "power2.out"
  //   },
  //   ">"
  // );

  // logoSVGTL.fromTo(
  //   ".bg-img-holder",
  //   {
  //     backgroundColor: "#ffffff"
  //   },
  //   {
  //     backgroundColor: "transparent",
  //     duration: 0.8,
  //     ease: "power2.out"
  //   },
  //   "<"
  // );


  logoSVGTL.addLabel("grow");

  logoSVGTL.to(".clip", {
    width: () => {
      return 15 * $(".clip").width();
    },
    height: () => {
      return 15 * $(".clip").height();
    },
    duration: 1.2,
    ease: "power4.in"
  });
  
  logoSVGTL.to(
    ".mask-safari",
    {
      height: "19000vh",
      duration: 1.2,
      ease: "power4.in"
    },
    "<"
  );


  logoSVGTL.to(
    ".link-home, .burger-holder",
    {
      opacity: 1,
      duration: 1.2,
      ease: "power4.in"
    },
    "<"
  );

  logoSVGTL.to(
    ".section.is-horizontal.is-logo",
    {
      opacity: 0,
      duration: 0,
      ease: "power2.out"
    },
    ">"
  );

  logoSVGTL.to(
    ".home-case-wrapp",
    {
      opacity: 1,
      pointerEvents: "auto",
      duration: 0,
      ease: "power2.out"
    },
    "<"
  );

  $(".home-case-wrapp")
    .children()
    .each((index, value) => {
      gsap.fromTo(
        $(value).find(".home-service-text-holder").children(),
        {
          opacity: 0,
          y: 80
        },
        {
          scrollTrigger: {
            trigger: value,
            start: "top top"
          },
          opacity: 1,
          y: 0,
          duration: 0.4,
          ease: "power2.out",
          stagger: 0.1
        }
      );
    });
});

var isSafari = window.safari !== undefined;
if (isSafari) console.log("Safari, yeah!");
if (isSafari) $(".home-service-vid.is-in-mask").css("display", "none");

// $("a:not([href*='#']").on("click", function () {
//   $(".body").css("background-color", "blue");
//   alert("test");
// });