/// La fonction reçoit un tableau d'ids de conteneurs contenant les vidéos à afficher successivement
/// Attention : les vidéos à afficher ne sont pas dédoublonnées, car on peut souhaiter afficher plusieurs fois la même vidéo durant un tour du carrousel

export const vCarousel = (vContainers:string[]) : void =>
{
    interface videoDOM
    {
        containerElt: HTMLElement;
        videoElt: HTMLMediaElement;
    }

    // On commence par vérifier que les ids de conteneurs fournis sont correctes
    const realVContainers : videoDOM[] = [];
    for(let container of vContainers)
    {
        let checkContainerExist=document.getElementById(container);
        if(checkContainerExist===null)// utiliser fonctionner empty() de wikilerni ?
            console.error("Aucun élément HTML trouvé dans la page pour l'id "+container);
        else
        {
            let checkVideoExist=<HTMLMediaElement>document.querySelector("#"+container+" video");// tester avec + plusieurs vidéos dans le conteneur
            if(checkVideoExist===null)
                console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id "+container);
            else
                realVContainers.push({containerElt:checkContainerExist, videoElt: checkVideoExist});
        }
    }
    let nbContainers=realVContainers.length;
    if(nbContainers < 2)
        console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
    else
    {
        for (let i = 0; i < nbContainers; i++)
        {
            let container=realVContainers[i].containerElt;
            let video=realVContainers[i].videoElt;
            if(i!==0)
                container.style.display = "none";
            video.addEventListener("ended", function()
            {
                container.style.display = "none";
                let nextContainer: HTMLElement;
                if(i < (nbContainers-1))
                    nextContainer=realVContainers[i+1].containerElt;
                else
                    nextContainer=realVContainers[0].containerElt;
                nextContainer.style.display = "block";
            });
        }
    }
}