document.addEventListener('DOMContentLoaded', function() {
  'use strict';

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

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

      this.open = function openFn() {
        modal.classList.add('modal--open');
        overlay.classList.add('modal__overlay');
        modal.parentNode.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')) {
          this.open();
        }
      };
      this.close = function closeFn(event) {
        if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
          modal.classList.remove('modal--open');
          overlay.classList.remove('modal__overlay--open');
          toggleScroll(true);
          closer.removeEventListener('click', closeBound, false);
        }
      };

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

  function toggleScroll(scrollable) {
    document.body.classList.toggle('no-scroll', !scrollable);
  }

  new utils.modal(document.querySelector('#modal-13')); // hashtag{modalId} scope-variable

}, false);