function create_galleries() {
    let galleries = document.querySelectorAll(".gallery")
    for (let gallery of galleries) {
        // create thumbnail thing
        let gallery_thumbnails = document.createElement("div")
        gallery_thumbnails.classList.add("gallery-thumbnails")
        gallery.prepend(gallery_thumbnails)

        let figures = gallery.querySelectorAll("figure")
        for (let figure of figures) {
            let figure_image = figure.querySelector("img, video").src

            let thumbnail = document.createElement("button")
            thumbnail.classList.add("gallery-thumbnail")
            thumbnail.style.backgroundImage = "url(" + figure_image + ")"
            thumbnail.target_gallery = gallery
            thumbnail.target_figure = figure
            gallery_thumbnails.append(thumbnail)

            thumbnail.addEventListener('click', gallery_thumbnail_click)
        }
        gallery.active_figure_thumbnail = gallery_thumbnails.children[0]
        gallery.active_figure_thumbnail.classList.add("active")
        gallery.active_figure = figures[0]
        gallery.active_figure.classList.add("active")
    }
}

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

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

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

document.addEventListener('DOMContentLoaded', create_galleries)