/* ═══════════════════════════════════════════════
   Image revealer — wraps every <img> inside a
   .window-content with a click-to-reveal widget.
   ═══════════════════════════════════════════════ */

(function () {
  "use strict";

  function wrapImage(img) {
    var alt = (img.getAttribute('alt') || '').trim() || 'image';

    // Container
    var revealer = document.createElement('div');
    revealer.className = 'img-revealer';

    // Header row: label + button
    var header = document.createElement('div');
    header.className = 'img-revealer-header';

    var label = document.createElement('span');
    label.className = 'img-revealer-label';
    label.textContent = alt;

    var btn = document.createElement('button');
    btn.className = 'img-reveal-btn';
    btn.textContent = 'reveal';

    header.appendChild(label);
    header.appendChild(btn);
    revealer.appendChild(header);

    // Move the img into the revealer, hidden by default
    img.parentNode.insertBefore(revealer, img);
    revealer.appendChild(img);

    btn.addEventListener('click', function () {
      var revealed = revealer.classList.toggle('revealed');
      btn.textContent = revealed ? 'hide' : 'reveal';
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.window-content img').forEach(wrapImage);
  });
}());