document.addEventListener('DOMContentLoaded', () => {
    const pages = Array.from(document.querySelectorAll('img.viewer-image'));
    let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
    let duration = parseInt(localStorage.getItem(`${WORK_ID}-duration`)) || 10;
    let paused = true;
    let interval;
    let elapsed = 0;

    function startTimer() {
        if (interval) {
            clearInterval(interval);
        }
        interval = setInterval(
            function () {
                if (paused) {
                    return;
                }
                elapsed += 100;
                if (elapsed >= duration*1000) {
                    changePage(currentPage + 1);
                }
                updateBar();
            },
            100
        );
    }

    const progressBar = document.getElementById('progress');
    function updateBar() {
        progressBar.style.width = `${100*elapsed/(1000*duration)}%`;
    }

    function stopTimer() {
        if (interval) {
            clearInterval(interval);
            interval = null;
        }
        elapsed = 0;
        updateBar();
    }

    function changePage(pageNum) {
        elapsed = 0;

        const previous = pages[currentPage];
        const current = pages[pageNum];

        if (current == null) {
            return;
        }

        previous.classList.remove('current');
        current.classList.add('current');

        currentPage = pageNum;
        localStorage.setItem(`${WORK_ID}-currentPage`, currentPage);

        const display = document.getElementById('image-container');
        display.style.backgroundImage = `url("${current.src}")`;

        document.getElementById('page-num')
            .innerText = [
                (pageNum + 1).toLocaleString(),
                pages.length.toLocaleString()
            ].join('\u200a/\u200a');
    }

    function changeDuration(secs, pause) {
        duration = secs;
        localStorage.setItem(`${WORK_ID}-duration`, duration);
        paused = pause;

        document.getElementById('duration').textContent = (paused ? '[paused] ' : '') + duration.toLocaleString() + 's';
        if (paused) {
            stopTimer();
        } else {
            startTimer();
        }
    }

    changePage(currentPage);
    changeDuration(duration, paused);

    document.onkeydown = event =>{
        switch (event.keyCode) {
        case 32: //space
            changeDuration(duration, !paused);
            break;
        case 37: //left
            changePage(currentPage - 1);
            break;
        case 38: //up
            if (2 <= duration && duration <= 10) {
                changeDuration(duration - 1, false);
            } else if (10 < duration && duration <= 20) {
                changeDuration(duration - 2.5, false);
            } else if (20 < duration) {
                changeDuration(duration - 5, false);
            }
            break;
        case 39: //right
            changePage(currentPage + 1);
            break;
        case 40: //down
            if (duration < 10) {
                changeDuration(duration + 1, false);
            } else if (10 <= duration && duration < 20) {
                changeDuration(duration + 2.5, false);
            } else if (20 <= duration) {
                changeDuration(duration + 5, false);
            }
            break;
        case 13: //enter
            changeDuration(duration, true);
            localStorage.setItem(`${WORK_ID}-currentPage`, 0);
            window.location.href = ROOT;
            break;
        }
    };
});