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

let interval_id = 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 => {
        if (interval_id != null){
            clearInterval(interval_id);
            interval_id = null;
            return
        }
        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;
    if (interval_id != null){
        clearInterval(interval_id);
        interval_id = null;
    }
}

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

function play_moment(){
    next_moment();
    if (interval_id != null){
        return
    }
    interval_id = setInterval(next_moment, interval);
}

function pause_moment(){
    if (interval_id == null){
        return
    }
    clearInterval(interval_id);
    interval_id = null;
}