Guide JS

				
					/* =========================================================
   balloon-click.js
   FINAL CLICK VERSION

   WHAT THIS DOES:
   - Click thumbnail → opens large image centred
   - Click ×, background, or press Esc → closes
   ========================================================= */

document.addEventListener("DOMContentLoaded", function () {
  var balloons = document.querySelectorAll(".balloonwrap .balloon");

  balloons.forEach(function (balloon) {
    balloon.addEventListener("click", function (e) {
      e.preventDefault();

      var wrap = balloon.closest(".balloonwrap");
      if (!wrap) return;

      var hidden = wrap.querySelector(".hide img.big");
      if (!hidden) return;

      var overlay = document.createElement("div");
      overlay.className = "balloon-overlay";

      var inner = document.createElement("div");
      inner.className = "balloon-overlay-inner";

      var img = document.createElement("img");
      img.src = hidden.getAttribute("src");
      img.alt = hidden.getAttribute("alt") || "";
      img.className = "big";

      var closeBtn = document.createElement("button");
      closeBtn.className = "balloon-close";
      closeBtn.type = "button";
      closeBtn.setAttribute("aria-label", "Close image");
      closeBtn.innerHTML = "×";

      inner.appendChild(img);
      inner.appendChild(closeBtn);
      overlay.appendChild(inner);
      document.body.appendChild(overlay);

      function closeOverlay() {
        if (overlay && overlay.parentNode) {
          overlay.parentNode.removeChild(overlay);
        }
        document.removeEventListener("keydown", escHandler);
      }

      closeBtn.addEventListener("click", function (ev) {
        ev.stopPropagation();
        closeOverlay();
      });

      overlay.addEventListener("click", function (ev) {
        if (ev.target === overlay) {
          closeOverlay();
        }
      });

      function escHandler(ev) {
        if (ev.key === "Escape") {
          closeOverlay();
        }
      }

      document.addEventListener("keydown", escHandler);
    });
  });
});





/* =========================================================
   tooltip
   ========================================================= */

document.addEventListener("DOMContentLoaded", function(){

  // Find the tooltip box that will be shown and hidden
  const box = document.getElementById("tooltipBox");

  // Find every tooltip trigger on the page
  document.querySelectorAll(".gs-tt").forEach(function(item){

    // When mouse enters a trigger...
    item.addEventListener("mouseenter", function(){

      // Copy the tooltip text from data-tt into the tooltip box
      box.innerHTML = item.getAttribute("data-tt");

      // Get the trigger's position on the screen
      const r = item.getBoundingClientRect();

      // Position the tooltip underneath the trigger
      box.style.left = (r.left + window.scrollX) + "px";
      box.style.top  = (r.bottom + window.scrollY + 8) + "px";

      // Make the tooltip visible
      box.style.display = "block";
    });

    // When mouse leaves the trigger...
    item.addEventListener("mouseleave", function(){

      // Hide the tooltip
      box.style.display = "none";

    });

  });

});


/* =========================================================
   SCROLL TO TOP — JS FILE — v1.0

   WHAT THIS DOES
   - Creates the button automatically.
   - Shows it only after scrolling down.
   - Smoothly scrolls back to the top when clicked.

   HOW TO USE
   - Save this file as: Training/CSS Files/scroll-to-top.js
   - Load it in each HTML page with:
     <script src="../CSS Files/scroll-to-top.js"></script>

   NOTES
   - Because this script creates the button automatically,
     you do NOT need to add button HTML to every page.
   - This script expects the CSS file to be loaded too.
   ========================================================= */

(function () {
  var id = 'scrollToTopButton';
  var threshold = 300;
  var btn;

  function createButton() {
    btn = document.getElementById(id);

    if (btn) {
      return;
    }

    btn = document.createElement('button');
    btn.id = id;
    btn.type = 'button';
    btn.setAttribute('aria-label', 'Scroll to top');
    btn.setAttribute('title', 'Back to top');
    btn.textContent = '↑';

    btn.addEventListener('click', function () {
      try {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      } catch (e) {
        window.scrollTo(0, 0);
      }

      try {
        btn.blur();
      } catch (e) {}
    });

    document.body.appendChild(btn);
  }

  function updateButton() {
    if (!btn) return;

    var y = window.pageYOffset || document.documentElement.scrollTop || 0;

    if (y > threshold) {
      btn.classList.add('visible');
    } else {
      btn.classList.remove('visible');
    }
  }

  function onScroll() {
    window.requestAnimationFrame(updateButton);
  }

  function init() {
    if (!document.body) return;

    createButton();
    updateButton();

    window.addEventListener('scroll', onScroll, { passive: true });
  }

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