// JavaScript Document

// Si logo en png non disponible, transformer le jpeg en png transparent
function jpegpngtransp() {
    // Sélectionnez votre div contenant l'image par son ID
    var contentLogo = $('#contentlogo');

    // Sélectionnez l'image à l'intérieur du div
    var image = contentLogo.find('img');

    console.log("Image avant le chargement :", image);

    // Chargement de l'image
    image.on('load', function() {
        console.log("Image après le chargement :", image);

        // Création d'un canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        console.log("Canvas créé :", canvas);

        // Obtenir les dimensions de l'image
        var width = image.get(0).naturalWidth;
        var height = image.get(0).naturalHeight;

        // Définir les dimensions du canvas pour correspondre à celles de l'image
        canvas.width = width;
        canvas.height = height;

        console.log("Dimensions du canvas définies :", canvas.width, canvas.height);

        // Dessiner l'image sur le canvas
        ctx.drawImage(image.get(0), 0, 0, width, height);

        console.log("Image dessinée sur le canvas");

        // Récupérer les données de l'image
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var data = imageData.data;

        console.log("Données de l'image récupérées :", imageData, data);

        // Parcourir les pixels de l'image pour remplacer les pixels proches du blanc par de la transparence
        for (var i = 0; i < data.length; i += 4) {
            var red = data[i];
            var green = data[i + 1];
            var blue = data[i + 2];

            // Calculer la luminance du pixel pour déterminer s'il est proche du blanc ou du gris clair
            var luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue);

            // Vérifier si la luminance est suffisamment élevée pour considérer le pixel comme proche du blanc ou du gris clair
            if (luminance > 200) {
                // Rendre le pixel transparent
                data[i + 3] = 0; // Alpha à 0 pour la transparence
            }
        }

        console.log("Pixels blancs remplacés par de la transparence");

        // Mettre à jour les données de l'image sur le canvas
        ctx.putImageData(imageData, 0, 0);

        console.log("Données de l'image mises à jour sur le canvas");

        // Remplacer l'image actuelle par l'image modifiée avec fond transparent
        image.attr('src', canvas.toDataURL());

        console.log("Image mise à jour avec fond transparent");

        // Retirez l'écouteur d'événement pour le chargement de l'image une fois que le chargement est terminé
        image.off('load');
    });

    // Déclencher le chargement de l'image
    image.attr('src', image.attr('src'));
}





// Fonction être rappelé et ouvrir formulaire
    function etrerappele(clickmenu)
        {
            if (clickmenu == 'clickmenu')
                {
                    $('.menu-btn').click(); 
                }
            $('html, body').animate({ scrollTop: $('.rubaction:has(.containerdrappel)').offset().top }, 1000, function() { $('.rubaction:has(.containerdrappel) .header_num').focus(); });
        }
    function ouvrirformulaire(clickmenu)
        {
            if (clickmenu == 'clickmenu')
                {
                    $('.menu-btn').click(); 
                }
              $('html, body').animate({ scrollTop: $('#formcontact').offset().top }, 1000); $('#formcontact').find('input').eq(1).focus();
        }
        
        // Animation des chiffres clés de la société onscroll
	document.addEventListener('DOMContentLoaded', function () {
		const animatedNumbers = document.querySelectorAll('.animate-number');
		const engagements = document.querySelectorAll('.engagement');

		const isElementInViewport = function (el) {
			const rect = el.getBoundingClientRect();
			return rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
		};

		const checkElementsVisibility = function () {
			engagements.forEach((engagement, index) => {
				setTimeout(() => {
					if (isElementInViewport(engagement) && !engagement.classList.contains('animated')) {
						engagement.classList.add('animated');
						engagement.style.opacity = 1;
						engagement.style.transform = 'translateY(0)';
						startCountUpAnimation(engagement.querySelector('.icoengagement'));
					}
				}, 1000 * index);
			});
		};

		const startCountUpAnimation = function (element) {
			const targetNumber = parseFloat(element.getAttribute('style').match(/--target-number:\s*([\d.]+)/)[1]);
            const animationDuration = 2000; // 2 seconds

            const updateNumber = function (progress) {
            	const currentNumber = Math.floor(progress * targetNumber);
            	element.textContent = currentNumber;
            };

            let startTime;

            const step = function (timestamp) {
            	if (!startTime) startTime = timestamp;

            	const progress = Math.min(1, (timestamp - startTime) / animationDuration);
            	updateNumber(progress);

            	if (progress < 1) {
            		requestAnimationFrame(step);
            	}
            };

            requestAnimationFrame(step);
        };

        // Initial check when the page loads
        checkElementsVisibility();

        // Attach the checkElementsVisibility function to the scroll event
        window.addEventListener('scroll', checkElementsVisibility);
    });
    
    // Menu prestation sous couverture page d'accueil, boutons gauche et droite
	function scrollContent(direction) 
	{
		const content = document.querySelector('.rubprespresta .content');
		const scrollAmount = 300;

		if (direction === 'left') 
		{
			content.scrollBy(
			{
				left: -scrollAmount,
				behavior: 'smooth',
			});
		} 
		else 
		{
			content.scrollBy(
			{
				left: scrollAmount,
				behavior: 'smooth',
			});
		}
	}
    
    // Ouverture des photos en popup
$(document).ready(function() {
    // Pour les éléments .blocphoto dans des .rubsatisfaits
    $('.rubsatisfaits .blocphoto').click(function() {
    // Vérifie si .blocphoto a un background-image défini en style=""
    if ($(this).css('background-image') !== 'none') {
        openLightbox(this);
    } else {
        // Si .blocphoto n'a pas de background-image, ne fait rien
        console.log('Aucune image de fond n\'est définie.');
    }
});

    // Pour les éléments .photo dans des .rubprestation
    $('.rubprestation .photo').click(function() {
        if ($(this).css('background-image') !== 'none') {
        openLightbox(this);
    }
    });
});
	function openLightbox(element) {
		var lightbox = document.getElementById('lightbox');
		var lightboxImg = document.getElementById('lightbox-img');
        // Récupérer l'URL de l'image du style background-image
        var backgroundImageUrl = $(element).css('background-image');

        // Nettoyer l'URL récupérée
        var imageSrc = backgroundImageUrl.replace('url("', '').replace('")', '');

		lightbox.style.display = 'flex';
		lightboxImg.src = imageSrc;
	}

	function closeLightbox() {
		$('#lightbox').fadeOut();
	}
    
    // Affichage / Masquage Menu Hamburger général
	document.addEventListener('DOMContentLoaded', function() {
		const menuBtn2 = document.querySelector('.menu-btn');
		const menugen = document.querySelector('.menugeneral');

		menuBtn2.addEventListener('click', function() {
			menugen.classList.toggle('invisible');
			menugen.classList.toggle('menuvisible');
		});
	});
    
    
    // Diaporama carousel couverture th8 :

// Fonction pour extraire l'URL de l'image à partir du style background-image
function extractImageUrl(backgroundStyle) {
    return backgroundStyle.replace(/^url\(['"]?([^'"]+)['"]?\)/, '$1');
}

// Récupération des divs avec la classe .carousel-image
const carouselImages = document.querySelectorAll('.carousel-image');

// Récupération des URLs des images
const imageUrls = Array.from(carouselImages).map(element => {
    const backgroundImage = window.getComputedStyle(element).backgroundImage;
    return extractImageUrl(backgroundImage);
});

// Préchargement des images
function preloadImages(urls) {
    urls.forEach(url => {
        const img = new Image();
        img.src = url;
    });
}

preloadImages(imageUrls); // Permet de précharger les images dans le cache du navigateur


document.addEventListener("DOMContentLoaded", function() {
    const images = document.querySelectorAll(".carousel-image");
    const totalImages = images.length;
    let currentImageIndex = 0;

    // Vérifiez s'il y a des images à gérer
    if (totalImages === 0) {
        console.error("Aucune image trouvée avec la classe .carousel-image.");
        return; // Sortie si aucune image n'est trouvée
    }

    function changeImage() {
        if (images[currentImageIndex]) {
            images[currentImageIndex].style.opacity = 0; // Masquer l'image actuelle
        }
        currentImageIndex = (currentImageIndex + 1) % totalImages; // Passer à l'image suivante
        if (images[currentImageIndex]) {
            images[currentImageIndex].style.opacity = 1; // Afficher la nouvelle image
        }
    }

    if (images[currentImageIndex]) {
        images[currentImageIndex].style.opacity = 1; // Afficher la première image
    }

    setInterval(changeImage, 4000); // Changez d'image toutes les 5 secondes (ajustez la durée selon vos préférences)
});

    // Page prestation
        // Ouverture des images de la galerie en grand
  function activimgfullscreen() {
    // Ajout du style dynamiquement
    $('head').append('<style>\
      .galerie .album img {\
        cursor: pointer;\
      }\
    </style>');

    function showFullScreenImage(src) {
      $('#fullScreenImage').attr('src', src);
      $('#fullScreen').fadeIn();
    }

    function hideFullScreenImage() {
      $('#fullScreen').fadeOut();
    }

    $('.galerie .album img').on('click', function (event) {
      var windowWidth = $(window).width();
      if (windowWidth > 300) {
        var src = $(this).attr('src');
        showFullScreenImage(src);
      }
    });

    // Vérification et ajout dynamique du div #fullScreen
    if ($('#fullScreen').length === 0) {
      $('body').append('<div id="fullScreen" style=\"display:flex;\">\
        <img id="fullScreenImage" alt="Full Screen Image">\
        <div id="closeButton">&times; | FERMER</div>\
      </div>');

      $('#fullScreen').on('click', function (event) {
        // Ne ferme le plein écran que si on clique à l'extérieur de l'image
        if ($(event.target).attr('id') === 'fullScreen') {
          hideFullScreenImage();
        }
      });

      $('#closeButton').on('click', hideFullScreenImage);

      // Handle navigation to the next/previous image using arrow keys
      $(document).on('keydown', function (event) {
        if ($('#fullScreen').is(':visible')) {
          if (event.key === 'ArrowRight') {
            navigateImage('next');
          } else if (event.key === 'ArrowLeft') {
            navigateImage('prev');
          } else if (event.key === 'Escape') {
            hideFullScreenImage();
          }
        }
      });

      // Handle navigation to the next image
      $('#fullScreenImage').on('click', function (event) {
        var mouseX = event.pageX - $('#fullScreenImage').offset().left;
        var imageWidth = $('#fullScreenImage').width();

        if (mouseX > imageWidth / 2) {
          navigateImage('next');
        } else {
          navigateImage('prev');
        }
      });

      // Prevent propagation of click event from full screen image to its parent
      $('#fullScreenImage').on('click', function (event) {
        event.stopPropagation();
      });
    }
$('#fullScreen').hide();

    // Resize event listener to check window width on resize
    $(window).resize(function () {
      var windowWidth = $(window).width();
      if (windowWidth <= 300) {
        hideFullScreenImage();
      }
    });

    // Function to navigate to the next/previous image
    function navigateImage(direction) {
      var currentSrc = $('#fullScreenImage').attr('src');
      var $nextImage;

      if (direction === 'next') {
        $nextImage = $('.galerie .album img[src="' + currentSrc + '"]').next('img');
      } else {
        $nextImage = $('.galerie .album img[src="' + currentSrc + '"]').prev('img');
      }

      if ($nextImage.length > 0) {
        var nextSrc = $nextImage.attr('src');
        showFullScreenImage(nextSrc);
      } else {
        hideFullScreenImage();
      }
    }
  }
  
$(document).ready(function() {
    // Detect Safari
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

    if (isSafari) {
        $('.th8').addClass('safari');
    }
});