(function () {

// Requires accompanying CSS rules, based on classes on main container
// (body) that style header, menu and trigger button.
// Container classes used: .with-expandable-nav, .with-expanded-nav

class NavTrigger {
  constructor({ triggerTemplateSelector, onTriggerClick }) {
    this.onTriggerClick = onTriggerClick;
    this.triggerTemplate = document.querySelector(`${triggerTemplateSelector}`);
    this.triggerEl = document.importNode(this.triggerTemplate.content, true);
  }

  render() {
    const wrapper = this.triggerEl.children[0];
    wrapper.addEventListener('click', this.onTriggerClick);
    return wrapper;
  }
}

class ExpandableContainer {
  constructor({
      containerEl,
      headerEl,
      mainEl,
      footerEl,
      expandableNavEl, priorityNavEl,
      expandableHtmlClass, expandedHtmlClass }) {

    this.toggle = this.toggle.bind(this);

    this.expandedHtmlClass = expandedHtmlClass;

    this.containerEl = containerEl;
    this.headerEl = headerEl;
    this.mainEl = mainEl;
    this.footerEl = footerEl;
    this.expandableNavEl = expandableNavEl;
    this.priorityNavEl = priorityNavEl;

    this.expandableNavBottomOffset = 20;
    this.containerEl.classList.add(expandableHtmlClass);

    this.expanded = false;
    this.animationTimeout = undefined;
  }

  toggle() {
    this.expanded = !this.expanded;
    this.update();
  }

  update() {
    if (this.expanded) {
      window.clearTimeout(this.animationTimeout);

      // Hold main position
      const mainTopOffset =
        this.mainEl.getBoundingClientRect().top +
        document.documentElement.scrollTop -
        (document.documentElement.clientTop || document.body.clientTop || 0);
      this.mainEl.style.marginTop = `${mainTopOffset}px`;

      this.containerEl.classList.add(this.expandedHtmlClass);

      const expH = this.expandableNavEl ?
        this.expandableNavEl.getBoundingClientRect().height :
        0;

      const prioH = this.priorityNavEl ?
        this.priorityNavEl.getBoundingClientRect().height :
        0;

      const heightDifference = expH - prioH + this.expandableNavBottomOffset;

      this.headerEl.style.paddingBottom = `${heightDifference}px`;
      this.headerEl.style.zIndex = '2';
      this.headerEl.style.position = 'absolute';
      this.headerEl.style.top = '0px';
      this.headerEl.style.left = '0px';
      this.headerEl.style.right = '0px';

    } else {
      this.containerEl.classList.remove(this.expandedHtmlClass);
      this.headerEl.style.removeProperty('padding-bottom');

      window.clearTimeout(this.animationTimeout);

      this.animationTimeout = window.setTimeout(() => {
        this.mainEl.style.removeProperty('margin-top');
        this.headerEl.style.removeProperty('z-index');
        this.headerEl.style.removeProperty('position');
      }, 1000);
    }
  }
}

const body = document.querySelector('body');
const headerEl = document.querySelector('body > header');
const expandableNavEl = headerEl.querySelector('nav.expandable-nav');
const committeeMenuEl = headerEl.querySelector('.committee-widget .committee-menu');

if (expandableNavEl || committeeMenuEl) {

  const container = new ExpandableContainer({
    containerEl: body,
    expandableHtmlClass: 'with-expandable-nav',
    expandedHtmlClass: 'with-expanded-nav',
    headerEl: headerEl,
    footerEl: document.querySelector('body > footer'),
    mainEl: document.querySelector('body > main'),
    expandableNavEl: expandableNavEl,
    priorityNavEl: headerEl.querySelector('nav.priority-nav'),
  });

  const trigger = new NavTrigger({
    triggerTemplateSelector: '#expandableNavTrigger',
    onTriggerClick: container.toggle,
  });

  headerEl.appendChild(trigger.render());

}

}());