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">View image</a>
    </div>`;
}

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

init_slideshow([
    {
        url: "https://datenvorr.at/renders/mandelbulb.png",
        text: "A 3d rendering of a mandelbulb with a power of 2"
    },
    {
        url: "https://datenvorr.at/renders/mbulb2.5.png",
        text: "A 3d rendering of a mandelbulb with a power of 2.5"
    },
    {
        url: "https://datenvorr.at/renders/mandelbulb-pow3.png",
        text: "A Mandelbulb with power 3"
    },
    {
        url: "https://datenvorr.at/renders/mbulb12.png",
        text: "A Mandelbulb with power 12"
    },
    {
        url: "https://datenvorr.at/renders/mandelbrot-fhd.png",
        source: "https://datenvorr.at/renders/mandelbrot2.png",
        text: "A mandelbrot set, downscaled."
    }
]);