function _(el) {
  if (!(this instanceof _)) {
    return new _(el);
  }

  this.el = document.getElementById(el);
}

_.prototype.fade = function fade(type, ms) {
  var isIn = type === 'in',
    opacity = isIn ? 0 : 1,
    interval = 50,
    duration = ms,
    gap = interval / duration,
    self = this;

  if(isIn) {
    self.el.style.display = 'inline';
    self.el.style.opacity = opacity;
  }

  function func() {
    opacity = isIn ? opacity + gap : opacity - gap;
    self.el.style.opacity = opacity;

    if(opacity <= 0) self.el.style.display = 'none'
    if(opacity <= 0 || opacity >= 1) window.clearInterval(fading);
  }

  var fading = window.setInterval(func, interval);
}

document.addEventListener('DOMContentLoaded', function() {
  var body = document.getElementsByTagName('body')[0];
  var apply_button = document.getElementsByClassName('apply');
  var modals = document.getElementById('modals');
  var modal_close = document.getElementById('modal__close');
  var navbar_burgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  for (i = 0; i < apply_button.length; i++) {
    apply_button[i].addEventListener('click', function() {
      _('modals').fade('in', 100);
      body.style.overflow = 'hidden';
    });
  }

  modals.addEventListener('click', function() {
    _('modals').fade('out', 100);
    body.style.overflow = 'visible';
  });

  modals.children[0].addEventListener('click', function(e) {
    e.stopPropagation();
  }, false);

  modal_close.addEventListener('click', function() {
    _('modals').fade('out', 100);
    body.style.overflow = 'visible';
  });

  document.addEventListener('keyup', function(e) {
    if (e.keyCode == 27) {
      _('modals').fade('out', 100);
      body.style.overflow = 'visible';
    }
  });

  if (navbar_burgers.length > 0) {
    navbar_burgers.forEach(function (el) {
      el.addEventListener('click', function () {
        var targetEl = el.dataset.target;
        var target = document.getElementById(targetEl);

        el.classList.toggle('is-active');
        target.classList.toggle('is-active');
      });
    });
  }
});

document.addEventListener('DOMContentLoaded', function() {
  var inputs = document.querySelectorAll('input');

  if (inputs !== null) {
    inputs.forEach(function(input) {
      input.addEventListener('blur', function() {
        if (this.value) {
          this.classList.add('focused');
        } else {
          this.classList.remove('focused');
        }
      });

      input.addEventListener('invalid', function() {
        input.classList.add('invalid');
      });

      input.addEventListener('input', function() {
        if (input.validity.valid) {
          input.classList.remove('invalid');
          input.classList.add('valid');
        } else {
          input.classList.remove('valid');
        }
      });
    });
  }
  
  var selects = document.querySelectorAll('select');

  if (selects !== null) {
    selects.forEach(function(select) {
      select.addEventListener('blur', function() {
        if (this.value) {
          this.classList.add('focused');
        } else {
          this.classList.remove('focused');
        }
      });

      select.addEventListener('invalid', function() {
        select.classList.add('invalid');
      });

      select.addEventListener('change', function() {
          select.classList.add('selected');
        if (select.validity.valid) {
          select.classList.remove('invalid');
          select.classList.add('valid');
        } else {
          select.classList.remove('valid');
        }
      });
    });
  }
});