(function (ns, $) {
  'use strict';

  let images = [];
  let index = 0;

  function refreshButton(selector, disabled) {
    const button = $(selector).prop('disabled', disabled);
    if (button.hasClass('ui-button')) button.button('refresh');
  }

  function render() {
    const hasImages = images.length > 0;
    $('#slideshow').toggle(hasImages);
    if (!hasImages) return;

    const image = images[index];
    $('#slide-image')
      .attr('src', image.url)
      .attr('alt', image.caption || 'Bild zur Station');
    $('#slide-caption').text(image.caption || '');
    $('#slide-position').text(`${index + 1} / ${images.length}`);
    refreshButton('#slide-prev', images.length < 2);
    refreshButton('#slide-next', images.length < 2);
  }

  ns.Slideshow = {
    show(items) {
      images = items || [];
      index = 0;
      render();
    },
    next() {
      if (images.length) index = (index + 1) % images.length;
      render();
    },
    previous() {
      if (images.length) index = (index - 1 + images.length) % images.length;
      render();
    }
  };

  $(document)
    .on('click', '#slide-next', () => ns.Slideshow.next())
    .on('click', '#slide-prev', () => ns.Slideshow.previous());
}(window.Wegwichtel, window.jQuery));