text: 'use strict';
  /* global ComponentUtils */
  
  window.GaiaOverflowMenu = (function(win) {
    // Extend from HTMLElement prototype
    var proto = Object.create(HTMLElement.prototype);
  
    // Allow baseurl to be overridden (used for demo page)
    var baseurl = window.GaiaOverflowMenuBaseurl ||
      '/shared/elements/gaia_overflow_menu/';
  
    proto.createdCallback = function() {
      var shadow = this.createShadowRoot();
  
      this._template = template.content.cloneNode(true);
  
      shadow.appendChild(this._template);
      ComponentUtils.style.call(this, baseurl);
  
      this.addEventListener('click', this);
      this.addEventListener('animationend', this);
      this.addEventListener('transitionend', this);
  
      this.classList.add('hidden');
    };
  
    proto.show = function() {
      // XXX You can't show a hiding overflow menu. We may want to reconsider
      //     this behaviour at some point, or make it optional.
      if (this.classList.contains('hidden')) {
        this.classList.remove('hidden');
        this.classList.add('showing');
      }
    };
  
    proto.hide = function() {
      // XXX You can't hide a showing overflow menu. We may want to reconsider
      //     this behaviour at some point, or make it optional.
      if (!this.classList.contains('hidden') &&
          !this.classList.contains('showing')) {
        this.classList.add('hiding');
      }
    };
  
    proto.handleEvent = function(evt) {
      switch(evt.type) {
        case 'click':
          evt.preventDefault();
          this.hide();
          break;
  
        case 'transitionend':
          if (evt.target === this) {
            if (this.classList.contains('hiding')) {
              this.classList.remove('hiding');
              this.classList.add('hidden');
            }
          }
          break;
  
        case 'animationend':
          this.classList.remove('showing');
          break;
      }
    };
  
    var template = document.createElement('template');
  
    template.innerHTML =
      `<div>
        <content select="button"></content>
      </div>`;
  
    // Register and return the constructor
    return document.registerElement('gaia-overflow-menu', { prototype: proto });
  })(window);
  