function init_slideshow(images) {
    const slider = document.querySelector('.siema-slider');

    slider.innerHTML = images.map(slide_template).join("\n");

    const siema = new Siema({
        selector: '.siema-slider',
        loop: true
    });

    document.querySelector('.slider-control.slider-prev').addEventListener('click', () => {
        siema.prev();
    });
    document.querySelector('.slider-control.slider-next').addEventListener('click', () => {
        siema.next();
    });
    document.querySelector('.slider-control.slider-fullscreen').addEventListener('click', () => {
        fullscreen(slider.parentElement);
    });
}

function slide_template(slide_data) {
    return `<div class="slide-item" style="background-image: url('${slide_data.url}')">
        <p class="slide-info">${slide_data.text}</p>
        <a href="${slide_data.source || slide_data.url}" target="_blank" rel="noopener" class="full-source-link">Full resolution</a>
    </div>`;
}

const build_image_list = list => list.map(({name, text}) => ({text, url: `https://datenvorr.at/renders/lowres/${name}`, source: `https://datenvorr.at/renders/${name}`}));

function fullscreen(element) {
    element.requestFullscreen();
}

init_slideshow(build_image_list([
    {
        name: "mandelbulb2.png",
        text: "A 3d rendering of a mandelbulb with a power of 2"
    },
    {
        name: "mandelbulb2.5.png",
        text: "A 3d rendering of a mandelbulb with a power of 2.5"
    },
    {
        name: "mandelbulb3.png",
        text: "A 3d rendering of a mandelbulb with a power of 3"
    },
    {
        name: "mandelbulb12.png",
        text: "A 3d rendering of a mandelbulb with a power of 12"
    },
    {
        name: "mandelbulb42.png",
        text: "A 3d rendering of a mandelbulb with a power of 42"
    },
    {
        name: "mandelbrot2.png",
        text: "A mandelbrot set, 250 megapixel render"
    }
]));