document.addEventListener('DOMContentLoaded', function() {
    // Sélectionne tous les éléments avec la classe 'custom-thumbnail'
    const thumbnails = document.querySelectorAll('.custom-thumbnail');

    // Pour chaque vignette (thumbnail)
    thumbnails.forEach(thumbnail => {
        const video = thumbnail.querySelector('video');
        if (video) { // Vérifie si une vidéo est bien présente avant de continuer
            const initialPoster = video.poster; // Sauvegarde le poster initial de la vidéo

            // Lorsque la souris entre sur la vignette, la vidéo démarre
            thumbnail.addEventListener('mouseenter', () => {
                video.play();
            });

            // Lorsque la souris quitte la vignette, la vidéo s'arrête et revient à 0
            thumbnail.addEventListener('mouseleave', () => {
                video.pause();
                video.currentTime = 0;
                video.poster = initialPoster; // Réinitialise le poster de la vidéo
                video.load();
            });
        }
    });

    // Gestion des vidéos qui jouent automatiquement en fonction du défilement de la page
    let currentPlaying = null; // Référence à la vidéo actuellement en cours de lecture
    let initialPosters = {}; // Stocke les posters initiaux des vidéos

    window.addEventListener('scroll', function() {
        let minDistance = Infinity;
        let closestVideo = null;

        // Sélectionne tous les éléments avec la classe 'custom-thumbnail'
        const targets = document.querySelectorAll('.custom-thumbnail');
        const windowHeight = window.innerHeight;
        const windowCenter = windowHeight / 2;

        // Pour chaque vignette (thumbnail)
        targets.forEach((target, index) => {
            const video = target.querySelector('video');
            if (video) { // Vérifie si une vidéo est bien présente avant de continuer
                const rect = target.getBoundingClientRect();
                const elementCenter = rect.top + rect.height / 2;
                const distanceToCenter = Math.abs(windowCenter - elementCenter);

                // Sauvegarde le poster initial si ce n'est pas déjà fait
                if (!initialPosters[index]) {
                    initialPosters[index] = video.poster;
                }

                // Trouve la vidéo la plus proche du centre de la fenêtre
                if (distanceToCenter < minDistance) {
                    minDistance = distanceToCenter;
                    closestVideo = { video, index };
                }
            }
        });

        // Si la vidéo la plus proche est différente de celle actuellement en cours de lecture
        if (closestVideo && closestVideo.video !== currentPlaying) {
            if (currentPlaying) {
                // Arrête la vidéo actuellement en cours de lecture
                const oldIndex = Array.from(targets).findIndex(target => target.querySelector('video') === currentPlaying);
                currentPlaying.pause();
                currentPlaying.currentTime = 0;
                if (initialPosters[oldIndex]) {
                    currentPlaying.poster = initialPosters[oldIndex]; // Réinitialise le poster
                }
                currentPlaying.load();
            }

            // Démarre la lecture de la nouvelle vidéo la plus proche
            closestVideo.video.play();
            currentPlaying = closestVideo.video;
        }
    });
});

// Utilisation de jQuery pour gérer les événements de survol sur des éléments avec la classe 'myVideo'
$(document)
    .on('mouseenter', '.myVideo', function() {
        this.play(); // Joue la vidéo lorsque la souris entre dans l'élément
    })
    .on('mouseleave', '.myVideo', function() {
        this.pause(); // Met la vidéo en pause lorsque la souris quitte l'élément
    });