(function (Drupal, $, once) {
  Drupal.behaviors.greensock_bhn_story = {
    // This js is for all the bhn stories as of 20230213
    attach(context) {
      $(once('greensock_bhn_story', 'html', context).forEach(() => {
      // START GREENSOCK CODE
      gsap.registerPlugin(ScrollTrigger);
      // gsap.registerPlugin(utils);
      ScrollTrigger.matchMedia({
        "(min-width: 880px)": function() {
          const leftStories = gsap.utils.toArray('.bhn-anim-left .bhn-story-content');
          leftStories.forEach(leftStory => {
            gsap.from(leftStory, {
              xPercent: -100,
              duration: 3,
              opacity: 0,
              ease: "power4",
              scrollTrigger: {
                trigger: leftStory,
                start: 'top 85%',
                end: 'top 20%',
                // end: 'bottom 90%',
                scrub: true,
                // markers: true,
                id: 'scrub-left'
              }
            });
          });
          const rightStories = gsap.utils.toArray('.bhn-anim-right .bhn-story-content');
          rightStories.forEach(rightStory => {
            gsap.from(rightStory, {
              xPercent: 100,
              duration: 3,
              opacity: 0,
              ease: "power4",
              scrollTrigger: {
                trigger: rightStory,
                start: 'top 85%',
                end: 'top 20%',
                // end: 'bottom 90%',
                scrub: true,
                // markers: true,
                id: 'scrub-right'
              }
            })
          });
          const borders = gsap.utils.toArray('.bhn-grid-content');
          borders.forEach(border => {
            gsap.from(border, {
              opacity: 0,
              ease: "power4",
              duration: 3,
              scrollTrigger: {
                trigger: border,
                start: 'top 75%',
                end: 'top 10%',
                scrub: true,
                // markers: true,
                id: 'scrub-border'
              }
            });
          });
        },
        "(max-width: 879px)": function() {
          const leftStories = gsap.utils.toArray('.bhn-anim-left .bhn-story-content');
          leftStories.forEach(leftStory => {
            gsap.from(leftStory, {
              xPercent: -100,
              duration: 3,
              opacity: 0,
              ease: "power4",
              scrollTrigger: {
                trigger: leftStory,
                start: 'top 95%',
                end: 'top 10%',
                // end: 'bottom 90%',
                scrub: true,
                // markers: true,
                id: 'scrub-left'
              }
            });
          });
          const rightStories = gsap.utils.toArray('.bhn-anim-right .bhn-story-content');
          rightStories.forEach(rightStory => {
            gsap.from(rightStory, {
              xPercent: 100,
              duration: 3,
              opacity: 0,
              ease: "power4",
              scrollTrigger: {
                trigger: rightStory,
                start: 'top 95%',
                end: 'top 30%',
                // end: 'bottom 90%',
                scrub: true,
                // markers: true,
                id: 'scrub-right'
              }
            })
          });
          const borders = gsap.utils.toArray('.bhn-grid-content');
          borders.forEach(border => {
            gsap.from(border, {
              opacity: 0,
              ease: "power4",
              duration: 3,
              scrollTrigger: {
                trigger: border,
                start: 'top 75%',
                end: 'top 10%',
                scrub: true,
                // markers: true,
                id: 'scrub-border'
              }
            });
          });
        }
      });
    }))
    }
  };
}(Drupal, jQuery, once));