let current_moment = null;
let moment_current_image = null;
let moment_slider = null;

document.addEventListener("DOMContentLoaded", function(){
    current_moment = moments[0];

    moment_current_image = document.getElementById("moment_current_image");
    moment_slider = document.getElementById("moment_slider");

    moment_slider.addEventListener("input", e => {
        update_moment_image();
    });

    set_current_moment(0);
});

function update_moment_image(){
    moment_current_image.src = "/streams/" + streamName + "/" + watchAreaName + "/" + current_moment[moment_slider.value];
}

function set_current_moment(i){
    current_moment = moments[i];
    moment_current_image.src = "/streams/" + streamName + "/" + watchAreaName + "/" + current_moment[0];

    moment_slider.max = current_moment.length - 1;
    moment_slider.value = 0;
}

function next_moment(){
    console.log(moment_slider.value)
    moment_slider.value++;
    console.log(moment_slider.value)
    if (moment_slider.value >= moment_slider.max){
        moment_slider.value = "0";
    }
    update_moment_image();
}