(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;
    var closeBound;
    var self = this;
    var lastOverlayTouch = 0;

    this.open = function openFn(event) {
      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', closeBound, false);
        overlay.addEventListener('click', closeBound, false);
      }
    };

    this.openOnEvent = function openOnEventFn(event) {
      if (event.detail.for === modal.getAttribute('id')) {
        self.open();
      }
    };
    this.close = function closeFn(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', closeBound, false);
      }
    };

    document.addEventListener('modal-open', self.openOnEvent, false);
    closeBound = self.close;
    if (trigger) {
      trigger.classList.add('modal__trigger');
      trigger.addEventListener('click', self.open, false);
    }
    modal.classList.add('js-modal-initialized');
  };

  function toggleScroll(scrollable) {
    if (!scrollable) {
      // document.addEventListener('scroll', catchScroll, false);
      disableScroll();
    } else {
      enableScroll();
    }
  }


 // following from here: https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
  var keys = {37: 1, 38: 1, 39: 1, 40: 1};

  function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
  }

  function preventDefaultForScrollKeys(e) {
      if (keys[e.keyCode]) {
          preventDefault(e);
          return false;
      }
  }

  function disableScroll() {
    if (window.addEventListener) // older FF
        window.addEventListener('DOMMouseScroll', preventDefault, false);
    window.onwheel = preventDefault; // modern standard
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
    window.ontouchmove  = preventDefault; // mobile
    document.onkeydown  = preventDefaultForScrollKeys;
  }

  function enableScroll() {
      if (window.removeEventListener)
          window.removeEventListener('DOMMouseScroll', preventDefault, false);
      window.onmousewheel = document.onmousewheel = null;
      window.onwheel = null;
      window.ontouchmove = null;
      document.onkeydown = null;
  }
  // till here
})();

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

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

}, false);