/* expandable sections */
(function () {
  function toggle (button, target) {
    var expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !expanded);
    target.hidden = !target.hidden;
  }

  var expanders = document.querySelectorAll('[data-expands]');

  Array.prototype.forEach.call(expanders, function (expander) {
    var target = document.getElementById(expander.getAttribute('data-expands'));

    expander.addEventListener('click', function () {
      toggle(expander, target);
    })
  })
}());

/* menu button */
(function () {
  var button = document.getElementById('menu-button');
  if (button) {
    var menu = document.getElementById('patterns-list');
    button.addEventListener('click', function() {
      var expanded = this.getAttribute('aria-expanded') === 'true';
      this.setAttribute('aria-expanded', !expanded);
    })
  }
}());

/* persist navigation scroll point */
(function () {
  window.onbeforeunload = function () {
    var patternsNav = document.getElementById('patterns-nav');
    if (patternsNav) {
      var scrollPoint = patternsNav.scrollTop;
      localStorage.setItem('scrollPoint', scrollPoint);
    }
  }

  window.addEventListener('DOMContentLoaded', function () {
    if (document.getElementById('patterns-nav')) {
      if (window.location.href.indexOf('patterns/') !== -1) {
        document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'));
      } else {
        document.getElementById('patterns-nav').scrollTop = 0;
      }
    }
  })
}());

/* Add "link here" links to <h2> headings */
(function () {
  var headings = document.querySelectorAll('main > h2');

  Array.prototype.forEach.call(headings, function (heading) {
    var id = heading.getAttribute('id');

    if (id) {
      var newHeading = heading.cloneNode(true);

      var container = document.createElement('div');
      container.setAttribute('class', 'h2-container');
      container.appendChild(newHeading);

      heading.parentNode.insertBefore(container, heading);

      var link = document.createElement('a');
      link.setAttribute('href', '#' + id);
      var headingText = heading.textContent;
      link.setAttribute('aria-label', 'This ' + headingText + ' section');
      link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';

      container.appendChild(link);

      heading.parentNode.removeChild(heading);
    }
  })
}());


/* SVG scaling fix for IE10-11 */
(function () {
  if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
    // Get all the SVGs on the page except the symbol defs
    var svgs = document.querySelectorAll('a svg, button svg, h1 svg, .tags svg, th svg');
    // ... iterate over SVGs
    Array.prototype.forEach.call(svgs, function(svg) {
      // Set preserveAspectRatio to 'XMidYMin slice'
      svg.setAttribute('preserveAspectRatio', 'xMidYMin slice');

      // Turn the viewBox values into an array
      var viewBox = svg.getAttribute('viewBox').split(' ');

      // Calculate padding value needed (width/height x 100)
      var padding = (viewBox[2] / viewBox[3]) * 100;

      // Set inline styles
      svg.setAttribute('style', 'width: 100%; height: 1px; padding-bottom: ' + padding + '%; overflow: visible');

      // Create span wrapper
      var span = document.createElement('span');
      span.setAttribute('class', 'svg-outer');
      span.style.width = '0.75em';

      svg.parentNode.insertBefore(span, svg);
      span.appendChild(svg);
    })
  }
}());

/* Enable scrolling by keyboard of code samples */
(function () {
  var codeBlocks = document.querySelectorAll('pre');

  Array.prototype.forEach.call(codeBlocks, function (block) {
    if (block.querySelector('code')) {
      block.setAttribute('role', 'region');
      block.setAttribute('aria-label', 'code sample');
      if (block.scrollWidth > block.clientWidth) {
        block.setAttribute('tabindex', '0');
      }
    }
  });
}());

/* Switch and persist theme */
(function () {
  var checkbox = document.getElementById('themer');
  var invertor = document.getElementById('inverter');

  function darkTheme(media) {
    invertor.setAttribute('media', media);
    invertor.textContent = invertor.textContent.trim();
    localStorage.setItem('darkTheme', media);
  }

  checkbox.addEventListener('change', function () {
    darkTheme(this.checked ? 'screen' : 'none');
  });

  window.addEventListener('DOMContentLoaded', function () {
    if (localStorage.getItem('darkTheme') === 'screen') {
      checkbox.click();
    }
  });
}());