function create_slideshows() {
    let slideshows = document.querySelectorAll(".slideshow")
    for (let slideshow of slideshows) {
        // create thumbnail thing
        let slideshow_thumbnails = document.createElement("div")
        slideshow_thumbnails.classList.add("slideshow-thumbnails")
        slideshow.prepend(slideshow_thumbnails)

        let figures = slideshow.querySelectorAll("figure")
        for (let figure of figures) {
            figure.style.display = "none"

            let figure_image = figure.querySelector("img").src

            let thumbnail = document.createElement("button")
            thumbnail.classList.add("slideshow-thumbnail")
            thumbnail.style.backgroundImage = "url(" + figure_image + ")"
            thumbnail.target_slideshow = slideshow
            thumbnail.target_figure = figure
            slideshow_thumbnails.append(thumbnail)

            thumbnail.addEventListener('click', slideshow_thumbnail_click)
        }
        slideshow.active_figure_thumbnail = slideshow_thumbnails.children[0]
        slideshow.active_figure_thumbnail.classList.add("active")
        slideshow.active_figure = figures[0]
        slideshow.active_figure.classList.add("active")
    }
}

function slideshow_thumbnail_click(event) {
    let el = event.currentTarget

    el.target_slideshow.active_figure_thumbnail.classList.remove("active")
    el.target_slideshow.active_figure.classList.remove("active")

    el.target_slideshow.active_figure_thumbnail = el
    el.target_slideshow.active_figure_thumbnail.classList.add("active")
    el.target_slideshow.active_figure = el.target_figure
    el.target_slideshow.active_figure.classList.add("active")
}

document.addEventListener('DOMContentLoaded', create_slideshows)