(function() {
  'use strict';

  window.utils = window.utils || {};

  window.utils.modal = function(modal) {
    var overlay = document.createElement('div');
    var closer = document.createElement('div');
    var trigger = document.querySelector(modal.dataset.trigger);
    var origParent = modal.parentNode;

    function open(event) {
      // disable modals for narrow screens
      if (window.innerWidth < 768) return true;
      if (event) {
        event.preventDefault();
      }
      modal.classList.add('modal--open');
      overlay.classList.add('modal__overlay');
      document.body.insertBefore(modal, null);
      document.body.insertBefore(overlay, modal);
      overlay.classList.add('modal__overlay--open');
      toggleScroll(false);

      if (modal.dataset.closeable === 'true') {
        closer.classList.add('modal__closer');
        modal.insertBefore(closer, null);
        closer.addEventListener('click', close, false);
        overlay.addEventListener('click', close, false);
      }
    }

    // open this modal with an event:
    // document.dispatchEvent(new CustomEvent('modal-open', { dateils: {for: 'modal-13'}}))
    function openOnEvent(event) {
      if (event.detail.for === modal.getAttribute('id')) {
        open();
      }
    }

    function close(event) {
      if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
        overlay.remove();
        origParent.insertBefore(modal, null);
        modal.classList.remove('modal--open');
        toggleScroll(true);
        closer.removeEventListener('click', close, false);
      }
    };

    function setup() {
      // every modal can be openend via document-wide event, see openOnEvent
      document.addEventListener('modal-open', openOnEvent, false);
      // if modal has trigger assigned to it open modal on click
      if (trigger) {
        trigger.classList.add('modal__trigger');
        trigger.addEventListener('click', open, false);
      }
      // if there is no content specified for the modal we assume that
      // the content is supposed to be the page the trigger links to.
      // so we check if the trigger has a href-attribute, fetch that page
      // and replace the modal content with the response
      var replaceMe = modal.querySelector('.replace-me');
      var replaceWith = trigger ? trigger.getAttribute('href') : '';
      if (replaceMe) {
        replaceMe.classList.remove('replace-me');
        replaceMe.innerText = '...loading';
        if (replaceWith.length > 0) {
          fetch(replaceWith, {
            credentials: 'same-origin'
          }).then(function(response) {
            return response.text();
          }).then(function(body) {
            var modalContent = document.createElement('div');
            modalContent.innerHTML = body;
            var main = modalContent.querySelector('.main__content');
            if (main) {
              replaceMe.innerText = '';
              replaceMe.insertBefore(main, null);
            } else {
              replaceMe.innerHTML = body;
            }
          });
        }
      }
      // tell further modals, that this one already got initialized
      modal.classList.add('js-modal-initialized');
    }
    setup();
  };

  // make sure document doesn't scroll when modal is active
  function toggleScroll(scrollable) {
    document.body.classList.toggle('no-scroll', !scrollable);
  }
})();

document.addEventListener('DOMContentLoaded', function() {

  Array.from(document.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
    new utils.modal(modal);
  });

}, false);