/* site.js: the landing page's own behaviour. Everything here enhances
   markup that already works without it: the theme bar is hidden until
   this runs, and the sample's panes all show and its forms reload the
   page at the sample. The install line's Copy button is Fiesta's
   copy.js, given the site's own words as attributes.

   Theme. The three theme buttons swap the stylesheet the head wrote,
   remember the choice in localStorage["fiesta-theme"], and mark the
   pressed one. The scheme is fiesta.js's, through the scheme menu.

   Sample. One pane shows at a time, chosen from the sidebar; the Menu
   pane shows one course at a time, chosen from its tabs. Its two forms
   never leave the page: a submit shows the form's own local message in
   a status region instead. */
(function () {
  "use strict";

  var THEMES = { day: "/1/fiesta.css", plain: "/1/fiesta-plain.css", signal: "/1/fiesta-signal.css" };
  // The three names, spelled out: a lookup in THEMES alone would take
  // "constructor" or "__proto__", which every object inherits, as a
  // theme, and mark none of the tabs for it.
  function isTheme(t) {
    return t === "day" || t === "plain" || t === "signal";
  }
  function stored() {
    try { return localStorage.getItem("fiesta-theme"); } catch (e) { return null; }
  }
  function remember(theme) {
    try { localStorage.setItem("fiesta-theme", theme); } catch (e) {}
  }
  // Every button says "true" or "false": a toggle button with no
  // aria-pressed is announced as a plain button, not as one unpressed.
  function markTheme(theme) {
    document.querySelectorAll("[data-site-theme]").forEach(function (button) {
      button.setAttribute("aria-pressed", button.getAttribute("data-site-theme") === theme ? "true" : "false");
    });
  }

  var bar = document.querySelector(".site-themebar"), link = document.getElementById("site-theme");
  if (bar && link) {
    var theme = stored();
    if (!isTheme(theme)) theme = "day";
    markTheme(theme);
    bar.hidden = false;
    bar.addEventListener("click", function (e) {
      var button = e.target.closest("[data-site-theme]");
      if (!button) return;
      var t = button.getAttribute("data-site-theme");
      if (!isTheme(t)) return;
      if (link.getAttribute("href") !== THEMES[t]) link.setAttribute("href", THEMES[t]);
      remember(t);
      markTheme(t);
    });
  }

  var sample = document.getElementById("sample");
  if (sample) {
    // One group of choosers and the things they show, where each
    // chooser links #id and the thing is the element with that id.
    function group(links, things) {
      function show(id) {
        things.forEach(function (el) { el.hidden = el.id !== id; });
        links.forEach(function (a) {
          if (a.getAttribute("href") === "#" + id) a.setAttribute("aria-current", "page");
          else a.removeAttribute("aria-current");
        });
      }
      var current = null;
      links.forEach(function (a) { if (a.hasAttribute("aria-current")) current = a; });
      show((current || links[0]).getAttribute("href").slice(1));
      links.forEach(function (a) {
        a.addEventListener("click", function (e) {
          e.preventDefault();
          show(a.getAttribute("href").slice(1));
        });
      });
    }
    var side = Array.prototype.slice.call(sample.querySelectorAll('[rst-side-nav] a[href^="#pane-"]'));
    var panes = Array.prototype.slice.call(sample.querySelectorAll(".site-pane"));
    if (side.length && panes.length) group(side, panes);
    var tabs = Array.prototype.slice.call(sample.querySelectorAll("[data-site-course]"));
    var courses = Array.prototype.slice.call(sample.querySelectorAll(".site-course"));
    if (tabs.length && courses.length) group(tabs, courses);

    sample.addEventListener("submit", function (e) {
      var form = e.target, done = form.getAttribute("data-site-done"), live = form.querySelector(".site-live");
      if (!done || !live) return;
      e.preventDefault();
      live.textContent = "";
      live.textContent = done;
    });
  }
})();