/* Foto-Slider für die Leistungsseiten von bodenleger-muenchen.com
   Bedienbar mit Maus, Tastatur (Pfeiltasten) und Wischgeste.
   Ohne JavaScript werden alle Bilder untereinander angezeigt. */
(function () {
  document.querySelectorAll('.ls-slider').forEach(function (slider) {
    var track   = slider.querySelector('.ls-track');
    var slides  = Array.prototype.slice.call(slider.querySelectorAll('.ls-slide'));
    var thumbs  = Array.prototype.slice.call(slider.querySelectorAll('.ls-thumb'));
    var prev    = slider.querySelector('.ls-prev');
    var next    = slider.querySelector('.ls-next');
    var zaehler = slider.querySelector('.ls-zaehler');
    var caption = slider.querySelector('.ls-caption');
    var live    = slider.querySelector('.ls-live');
    if (!track || slides.length === 0) return;

    slider.classList.remove('no-js');
    var i = 0;

    function zeige(neu, ansagen) {
      i = (neu + slides.length) % slides.length;
      track.style.transform = 'translateX(' + (-i * 100) + '%)';

      slides.forEach(function (s, n) {
        s.setAttribute('aria-hidden', n === i ? 'false' : 'true');
        var img = s.querySelector('img');
        if (img && Math.abs(n - i) <= 1) img.loading = 'eager';
      });
      thumbs.forEach(function (t, n) {
        t.setAttribute('aria-current', n === i ? 'true' : 'false');
      });

      if (caption) caption.textContent = slides[i].getAttribute('data-bu') || '';
      if (zaehler) zaehler.textContent = (i + 1) + ' / ' + slides.length;
      if (ansagen && live) {
        var img = slides[i].querySelector('img');
        live.textContent = 'Bild ' + (i + 1) + ' von ' + slides.length +
                           (img ? ': ' + img.getAttribute('alt') : '');
      }
      if (thumbs[i] && thumbs[i].scrollIntoView) {
        thumbs[i].scrollIntoView({ block: 'nearest', inline: 'nearest' });
      }
    }

    if (prev) prev.addEventListener('click', function () { zeige(i - 1, true); });
    if (next) next.addEventListener('click', function () { zeige(i + 1, true); });
    thumbs.forEach(function (t, n) {
      t.addEventListener('click', function () { zeige(n, true); });
    });

    slider.addEventListener('keydown', function (e) {
      if (e.key === 'ArrowLeft')  { e.preventDefault(); zeige(i - 1, true); }
      if (e.key === 'ArrowRight') { e.preventDefault(); zeige(i + 1, true); }
    });

    var x0 = null, y0 = null;
    var fenster = slider.querySelector('.ls-fenster');
    if (fenster) {
      fenster.addEventListener('touchstart', function (e) {
        x0 = e.changedTouches[0].clientX;
        y0 = e.changedTouches[0].clientY;
      }, { passive: true });
      fenster.addEventListener('touchend', function (e) {
        if (x0 === null) return;
        var dx = e.changedTouches[0].clientX - x0;
        var dy = e.changedTouches[0].clientY - y0;
        // nur waagerechte Gesten auswerten, sonst kollidiert es mit dem Scrollen
        if (Math.abs(dx) > 45 && Math.abs(dx) > Math.abs(dy)) {
          zeige(dx < 0 ? i + 1 : i - 1, true);
        }
        x0 = null; y0 = null;
      }, { passive: true });
    }

    zeige(0, false);
  });
})();