const frames = document.querySelectorAll("article.frame")
const frameCallbacks = {}

function showFrame(frameIdentifier) {
    for (const frame of frames) {
        frame.setAttribute("hidden", "")
        if (frame.classList.contains(frameIdentifier)) {
            frame.removeAttribute("hidden")
            if (Array.isArray(frameCallbacks[frameIdentifier])) {
                for (const callback of frameCallbacks[frameIdentifier]) {
                    callback()
                }
            }
        }
    }
}

function showFrameNavigationButtons() {
    document.querySelector("article.frame:not([hidden]) > section.buttons").removeAttribute("hidden")
}

function hideFrameNavigationButtons() {
    document.querySelector("article.frame:not([hidden]) > section.buttons").setAttribute("hidden", "")
}

function onFrameShowed(frameIdentifier, cb) {
    if (!frameCallbacks[frameIdentifier]) {
        frameCallbacks[frameIdentifier] = []
    }

    frameCallbacks[frameIdentifier].push(cb)
}