/**
 * Bratonien Adventskalender – Türchen-Positionierung
 * --------------------------------------------------
 * Dieses Skript sorgt dafür, dass sich jedes .door-Element
 * exakt relativ zum sichtbaren Kalenderbild positioniert.
 *
 * Autor: Bratonien Development
 * Stand: 2025
 */

/**
 * Positioniert ein einzelnes Türchen auf Basis prozentualer Angaben.
 *
 * @param {string} selector  - CSS-Selektor des Türchens (z. B. ".door" oder ".door[data-day='1']")
 * @param {number} topPct    - vertikale Position in Prozent (0–100) bezogen auf das Bild
 * @param {number} leftPct   - horizontale Position in Prozent (0–100) bezogen auf das Bild
 * @param {number} widthPct  - Breite des Türchens in Prozent der Bildbreite
 */
function positionDoor(selector, topPct, leftPct, widthPct) {
  const img  = document.querySelector('.kalenderbild img');
  const cont = document.querySelector('.kalenderbild');
  const door = document.querySelector(selector);

  if (!img || !cont || !door) return;

  const imgRect  = img.getBoundingClientRect();
  const contRect = cont.getBoundingClientRect();
  const doorWidth = imgRect.width * (widthPct / 100);

  door.style.position = 'absolute';
  door.style.width  = doorWidth + 'px';
  door.style.height = doorWidth + 'px';
  door.style.top  = (imgRect.top  - contRect.top + imgRect.height * (topPct / 100)) + 'px';
  door.style.left = (imgRect.left - contRect.left + imgRect.width  * (leftPct / 100)) + 'px';
}

/**
 * Positioniert automatisch alle Türchen mit data-pos-Attribut.
 * Beispiel:
 * <div class="door" data-day="1" data-top="20" data-left="15" data-width="10">1</div>
 */
function positionAllDoors() {
  const doors = document.querySelectorAll('.door');
  doors.forEach(door => {
    const t = parseFloat(door.dataset.top)   || 0;
    const l = parseFloat(door.dataset.left)  || 0;
    const w = parseFloat(door.dataset.width) || 10;
    const selector = `.door[data-day='${door.dataset.day || ''}']`;
    positionDoor(selector, t, l, w);
  });
}

/* === Events === */
window.addEventListener('load', positionAllDoors);
window.addEventListener('resize', positionAllDoors);