(function() {
  'use strict';

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

  // Defines a function to turn an element into an interactive aside-navigation.
  // If the screen is smaller than 999px the navigation is automatically
  // collapsed - even when dynamically resized (e.g. switching from portatit
  // to landscape).
  // The can user may also manually collapse and expand the navigation by
  // using the little arrow at the bottom.
  window.utils.aside = function(asideEl) {
    var collapsed = false;
    var collClass = 'main__aside--collapsed';
    // animClass used to enable transitions only when needed so that
    // (potentially happening) initial collapse of the asidenav
    // goes unnoticed by the user.
    var animClass = 'main__aside--transitioning';
    var hoveringAboveCollapsedNav = false;

    init();
    function init() {
      var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true';
      if (document.body.getBoundingClientRect().width < 999 || collLS) {
        asideEl.classList.add(collClass);
        collapsed = true;
      }
      addListener();
    }

    function check() {
      if (collapsed && !hasCollapsedClass() || !collapsed && hasCollapsedClass()) {
        asideEl.classList.add(animClass);
        asideEl.classList.toggle(collClass, collapsed);
        window.localStorage.setItem('asidenavCollapsed', collapsed);
      }
    }

    function hasCollapsedClass() {
      return asideEl.classList.contains(collClass);
    }

    function addListener() {

      asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
        collapsed = !collapsed;
        check();
      }, false);

      asideEl.addEventListener('transitionend', function(event) {
        if (event.propertyName === 'opacity') {
          asideEl.classList.remove(animClass);
        }
      }, false);

      window.addEventListener('resize', function() {
        collapsed = document.body.getBoundingClientRect().width < 999;
        check();
      }, false);

      asideEl.addEventListener('mouseover', function(event) {
        if (!hasCollapsedClass()) {
          return false;
        }
        hoveringAboveCollapsedNav = true;
        window.setTimeout(function() {
          if (hoveringAboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
            asideEl.classList.add('pseudo-hover');
          }
        }, 200);
      }, false);

      asideEl.addEventListener('mouseleave', function(event) {
        hoveringAboveCollapsedNav = false;
        window.setTimeout(function() {
          if (!hoveringAboveCollapsedNav) {
            asideEl.classList.remove('pseudo-hover');
          }
        }, 200);
      }, false);
    }
  };
})();

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

  var asidenavEl = document.querySelector('.main__aside');
  var mainEl = document.querySelector('.main__content');

  asidenavEl.style.height = `${mainEl.clientHeight + 75}px`;

  window.addEventListener('resize', function() {
    window.requestAnimationFrame(function() {
      asidenavEl.style.height = `${mainEl.clientHeight + 75}px`;
    });
  });

  // TODO: make it swipeable on mobile and narrower
  // utils.aside(asidenavEl);

});