(function() {
  'use strict';

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

  var ALERT_INVISIBLE_CLASS = 'alert--invisible';
  var TOGGLER_INVISIBLE_CLASS = 'alerts__toggler--visible';

  window.utils.alerts = function(alertsEl) {

    var alerts = Array.from(alertsEl.querySelectorAll('.alert'));
    var toggler;
    var showingToggler = false;

    function makeToggler() {
      toggler = document.createElement('DIV');
      toggler.classList.add('alerts__toggler');
      toggler.addEventListener('click', function() {
        alerts.forEach(function(alert) {
          alert.classList.remove(ALERT_INVISIBLE_CLASS);
          toggler.classList.remove(TOGGLER_INVISIBLE_CLASS);
        });
        checkToggler();
      });
      alertsEl.appendChild(toggler);
    }

    function makeAlert(alertEl) {
      var iconEl = document.createElement('DIV');
      var closeEl = document.createElement('DIV');
      var dataDecay = alertEl.dataset.decay;
      var autoDecay = 30;
      if (dataDecay) {
        autoDecay = parseInt(dataDecay, 10);
      }
      iconEl.classList.add('alert__icon');
      closeEl.classList.add('alert__close');
      closeEl.addEventListener('click', function(event) {
        closeAlert(alertEl);
      });
      alertEl.insertBefore(iconEl, alertEl.children[0]);
      alertEl.insertBefore(closeEl, alertEl.children[0]);

      // auto-hide info and success-alerts after 3 seconds
      if (autoDecay > 0 && !alertEl.matches('.alert-warning, .alert-error')) {
        window.setTimeout(function() {
          closeAlert(alertEl);
        }, autoDecay * 1000);
      }
    }

    function closeAlert(alertEl) {
      alertEl.classList.add(ALERT_INVISIBLE_CLASS);
      checkToggler();
    }

    function checkToggler() {
      var hidden = true;
      alerts.forEach(function(alert) {
        if (hidden && !alert.classList.contains(ALERT_INVISIBLE_CLASS)) {
          hidden = false;
        }
      });
      if (!showingToggler) {
        showingToggler = true;
        window.setTimeout(function() {
          toggler.classList.toggle(TOGGLER_INVISIBLE_CLASS, hidden);
          showingToggler = false;
        }, 120);
      }
    }

    makeToggler();
    alerts.map(makeAlert);
  }

})();

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

  // setup alerts
  window.utils.alerts(document.querySelector('.alerts'));
});