if (!LFP) { error("LFP not loaded > hero_background_video"); }
if (!LFP.MODULES.videoHero) {
  LFP.MODULES.videoHero = function() {
    let videoBackgrounds = document.querySelectorAll('.video-hero');
     //console.log(videoBackgrounds);
  
    videoBackgrounds.forEach(vid => {
      // play-pause button on the video hero
      var isPlaying = true;
      var debounceID = 0;
      var resizeState = 0;
      let sectionName = vid.dataset.section;
      console.log("Processing video backgound ["+sectionName+"]");
      let changeButton = document.getElementById("playButton"+sectionName);
      changeButton.addEventListener("click",function(){playPause();});
  
      function playPause() {
        if (isPlaying) {
          vid.pause();
          document.querySelectorAll('video').forEach(vid => vid.pause());
          changeButton.innerHTML = "<i class=\"play\"><\/i>Play";
          changeButton.setAttribute("aria-pressed", "true");
          changeButton.classList.add("paused");
        } else {
          vid.play();
          document.querySelectorAll('video').forEach(vid => vid.play());
          changeButton.innerHTML = "<i class=\"pause\"><\/i> Pause";
          changeButton.setAttribute("aria-pressed", "false");
          changeButton.classList.remove("paused");
        }
        isPlaying = !isPlaying;
      }

      var mobile = window.matchMedia("(max-width: 480px)");
      var desktop = window.matchMedia("(max-width: 1680px)");
      var sourceMP4 = document.createElement("source");

      var load = vid.dataset.mp4;
      var loadSquare = vid.dataset.mp4Square;
      var loadWide = vid.dataset.mp4Wide;

      var sourceWebM = document.createElement("source");
      var webmLoad = vid.dataset.webm;
      var webmLoadSquare = vid.dataset.webmSquare;
      var webmLoadWide = vid.dataset.webmWide;

      sourceMP4.id = "mp4";
      sourceMP4.setAttribute("type", "video/mp4");
      vid.appendChild(sourceMP4);
      var sourceWebM = document.createElement("source");
      sourceWebM.id = "webm";
      sourceWebM.setAttribute("type", "video/webm");
      vid.appendChild(sourceWebM);

      function setSources() {
        if (mobile.matches && loadSquare!=='') {  
          if (resizeState==1) {return;}
          resizeState = 1;
          sourceMP4.setAttribute("src", loadSquare);
          sourceWebM.setAttribute("src", webmLoadSquare);
          vid.load();
          if (!isPlaying) {vid.pause();}
        } else if (!desktop.matches && loadWide!=='') {
          if (resizeState==2) {return;}
          resizeState = 2;
          sourceMP4.setAttribute("src", loadWide);
          sourceWebM.setAttribute("src", webmLoadWide);
          vid.load();
          if (!isPlaying) {vid.pause();}
        } else {
          if (resizeState==3) {return;}
          resizeState = 3;
          sourceMP4.setAttribute("src", load);
          sourceWebM.setAttribute("src", webmLoad);
          vid.load();
          if (!isPlaying) {vid.pause();}
        }
      }

      function resizeDone() {
        //vid.load();
        //vid.play();
      }

      window.addEventListener("resize", function(){
        mobile = window.matchMedia("(max-width: 480px)");
        desktop = window.matchMedia("(max-width: 1680px)");
        setSources();
        clearTimeout(debounceID);
        debounceID = setTimeout(resizeDone, 200);
      });

      setSources();
      vid.play();
    });
  }
}
LFP.MODULES.videoHero();