(function () {
  const DEFAULT_INTERVAL = 5000;  // ms
  const FADE_MS = 600;            // passend zum CSS oben

  // Alle Boxen mit rotierenden Bildern finden
  console.log(document.querySelectorAll('li.images'));
  document.querySelectorAll('li.images').forEach(setupRotator);

  function setupRotator(li) {
    const a = li.querySelector('a');
    const img = a && a.querySelector('img');
    if (!a || !img) return;

    // Bildliste aus data-images lesen
    const list = (li.dataset.images || '')
      .split(',')
      .map(s => s.trim())
      .filter(Boolean);

    // Falls nur 0/1 Bild angegeben ist, keine Rotation
    if (list.length < 1) return;

    // Ersten Eintrag sicherstellen = aktuelles src
    const currentSrc = img.getAttribute('src');
    if (currentSrc && !list.includes(currentSrc)) list.unshift(currentSrc);

    // Preload (verhindert Flackern)
    list.forEach(src => { const im = new Image(); im.src = src; });

    // DOM: Basisbild als absolute Ebene + Ghost überlagert
    const wrap = document.createElement('span');
    wrap.className = 'rotator-wrap';
    const base = img;
    base.classList.add('rotator-base');
    const ghost = base.cloneNode(true);
    ghost.classList.remove('rotator-base');
    ghost.classList.add('rotator-ghost');

    // in Link einsetzen
    a.insertBefore(wrap, base);
    wrap.appendChild(base);
    wrap.appendChild(ghost);

    // Rotation starten
    const interval = parseInt(li.dataset.interval, 10) || DEFAULT_INTERVAL;
    let i = 0;

    setInterval(() => {
      i = (i + 1) % list.length;
      crossfade(base, ghost, list[i]);
    }, interval);
  }

  function crossfade(baseImg, ghostImg, nextSrc) {
    // Ghost vorbereiten: nächstes Bild laden
    if (ghostImg.getAttribute('src') === nextSrc) {
      // schon vorbereitet
      startFade();
    } else {
      ghostImg.addEventListener('load', startFade, { once: true });
      ghostImg.setAttribute('src', nextSrc);
    }

    function startFade() {
      // Ghost einblenden, Base bleibt sichtbar -> echte Überblendung
      ghostImg.style.transition = `opacity ${FADE_MS}ms ease-in-out`;
      baseImg.style.transition = `opacity ${FADE_MS}ms ease-in-out`;
      ghostImg.style.opacity = '1';

      // Nach der Überblendung Rollen tauschen (Ghost wird neue Base)
      setTimeout(() => {
        const tmpSrc = ghostImg.getAttribute('src');
        baseImg.setAttribute('src', tmpSrc);
        setTimeout(() => {
          ghostImg.style.opacity = '0';
        }, DEFAULT_INTERVAL/2);
      }, FADE_MS);
  }
  }
})();