(function () {
  'use strict';

  function bindVideoTile(tile) {
    var video = tile.querySelector('.video-tile-player');
    var playBtn = tile.querySelector('.video-tile-play');

    if (!video || !playBtn) {
      return;
    }

    playBtn.addEventListener('click', function () {
      if (video.paused) {
        video.play();
        playBtn.innerHTML = '<i class="lni-pause"></i>';
        tile.classList.remove('is-paused');
      } else {
        video.pause();
        playBtn.innerHTML = '<i class="lni-play"></i>';
        tile.classList.add('is-paused');
      }
    });

    video.addEventListener('ended', function () {
      video.pause();
      playBtn.innerHTML = '<i class="lni-play"></i>';
      tile.classList.add('is-paused');
    });
  }

  function initVideoTiles() {
    var tiles = document.querySelectorAll('[data-video-tile]');

    tiles.forEach(function (tile) {
      if (tile.getAttribute('data-video-bound') === 'true') {
        return;
      }

      tile.setAttribute('data-video-bound', 'true');
      bindVideoTile(tile);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initVideoTiles);
  } else {
    initVideoTiles();
  }

  document.addEventListener('site-config-loaded', initVideoTiles);
})();