(function () {
  'use strict';

  function toArray(list) {
    return Array.prototype.slice.call(list || []);
  }

  function initRoleTabs() {
    var root = document.querySelector('[data-dv42-role-lab]');
    if (!root) return;

    var tabs = toArray(root.querySelectorAll('[data-dv42-role-tab]'));
    var panels = toArray(root.querySelectorAll('[data-dv42-role-panel]'));
    if (!tabs.length || !panels.length) return;

    function activate(role, focusTab, updateHash) {
      var activeTab = tabs.find(function (tab) {
        return tab.getAttribute('data-dv42-role-tab') === role;
      }) || tabs[0];
      var activeRole = activeTab.getAttribute('data-dv42-role-tab');

      tabs.forEach(function (tab) {
        var selected = tab === activeTab;
        tab.setAttribute('aria-selected', selected ? 'true' : 'false');
        tab.setAttribute('tabindex', selected ? '0' : '-1');
      });

      panels.forEach(function (panel) {
        var selected = panel.getAttribute('data-dv42-role-panel') === activeRole;
        panel.hidden = !selected;
      });

      root.setAttribute('data-dv42-ready', 'true');
      if (focusTab) activeTab.focus();
      if (updateHash && window.history && window.history.replaceState) {
        window.history.replaceState(null, '', '#role-' + activeRole);
      }
    }

    tabs.forEach(function (tab, index) {
      tab.addEventListener('click', function () {
        activate(tab.getAttribute('data-dv42-role-tab'), false, true);
      });

      tab.addEventListener('keydown', function (event) {
        var nextIndex = index;
        if (event.key === 'ArrowRight') nextIndex = (index + 1) % tabs.length;
        else if (event.key === 'ArrowLeft') nextIndex = (index - 1 + tabs.length) % tabs.length;
        else if (event.key === 'Home') nextIndex = 0;
        else if (event.key === 'End') nextIndex = tabs.length - 1;
        else return;
        event.preventDefault();
        activate(tabs[nextIndex].getAttribute('data-dv42-role-tab'), true, true);
      });
    });

    function roleFromHash() {
      return window.location.hash.replace(/^#role-/, '');
    }

    var hashRole = roleFromHash();
    activate(hashRole || tabs[0].getAttribute('data-dv42-role-tab'), false, false);

    window.addEventListener('hashchange', function () {
      var role = roleFromHash();
      if (role) activate(role, false, false);
    });
  }

  function init() {
    if (!document.body.classList.contains('dv42-page')) return;
    initRoleTabs();
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
}());