(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() {

    utils.aside(document.querySelector('.main__aside'));

    // remove me before flight:
    // EXPERIMENTAL
    var selector = document.querySelector('#theme-selector');
    var options = Array.from(selector.querySelectorAll('option'))
      .reduce(function(acc, optEl) {
          if (!acc.includes(optEl.value)) {
            acc.push(optEl.value);
          }
          return acc;
        },
        []);

    selector.addEventListener('change', function(event) {
      setTheme(event.target.value);
    });

    function setTheme(theme) {
      document.body.className = 'theme--' + theme;
    }

    // random theme on loading and again every 20 seconds
    // setInterval(function() {
    //   setTheme(randomOption());
    // }, 20000);

    // function randomOption() {
    //   return options[Math.floor(Math.random() * options.length)];
    // }

    // // initial theme
    // setTheme(randomOption());

});