(function() {
  'use strict';

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

  window.utils.aside = function(asideEl, topNav) {
    var collapsed = false;
    var collClass = 'main__aside--collapsed';
    var animClass = 'main__aside--transitioning';
    var aboveCollapsedNav = false;

    init();
    function init() {
      var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true';
      if (document.body.getBoundingClientRect().width < 999 || collLS) {
        asideEl.classList.add(collClass);
        collapsed = true;
          if (topNav) {
            topNav.style.paddingLeft = '90px';
          window.setTimeout(function() {
                topNav.classList.add('navbar--animated');
          }, 200);
        }
      } else if (topNav) {
        topNav.classList.add('navbar--animated');
      }
    }

    function check() {
      if (collapsed && !hasClass() || !collapsed && hasClass()) {
        asideEl.classList.add(animClass);
        asideEl.classList.toggle(collClass, collapsed);
          if (topNav) {
            topNav.style.paddingLeft = collapsed ? '90px' : '';
        }
        window.localStorage.setItem('asidenavCollapsed', collapsed);
      }
    }

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

    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 (!collapsed) {
        return false;
      }
      aboveCollapsedNav = true;
      console.log(event);
      window.setTimeout(function() {
        if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
          asideEl.classList.add('pseudo-hover');
        }
      }, 430);
    }, false);
    asideEl.addEventListener('mouseleave', function(event) {
      aboveCollapsedNav = false;
      asideEl.classList.remove('pseudo-hover');
    }, false);
  };
})();

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

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

});