
$(document).ready(function(){
    

      
    const bananeIMG = document.getElementById('imgb1');
    const tomateIMG = document.getElementById('imgb3');
    const platIMG = document.getElementById('imgb4');
    const saladeIMG = document.getElementById('imgb5');
    const flecheIMG = document.getElementById('fleche');

    const GreenFrameIMG = document.getElementById('part1');
    const Poubelle = document.getElementsByClassName('imgs1');
    const gaz = document.getElementsByClassName('imgs2');
    const champs = document.getElementsByClassName('imgs3');
    
    let LastPOS = 0;

    function Function1(currentImage, newImage) {
        currentImage.css({ 
            'transform-origin': 'center' 
        });
        currentImage.css({ 
            'transition': 'transform 0.3s ease-in-out', 
            'transform': 'scaleX(0)'
        });
    
        setTimeout(function() {
            currentImage.hide();
            newImage.show().css({ 
                'transform-origin': 'center',
                'transform': 'scaleX(0)', 
                'transition': 'transform 0.3s ease-in-out'
            });
    
            setTimeout(() => newImage.css('transform', 'scaleX(1)'), 10);
        }, 300); 
    }

    function RefreshScrollPosition(position) {
        const POS = position - 250;

        bananeIMG.style.transform = `translateX(${Math.min(325, Math.max(0, POS))}px) translateY(${Math.max(0, POS - 325)}px)`;
        saladeIMG.style.transform = `translateX(${Math.min(325, Math.max(0, POS + 75))}px) translateY(${Math.max(0, POS - 250)}px)`;
        tomateIMG.style.transform = `translateX(${Math.min(325, Math.max(0, POS + 150))}px) translateY(${Math.max(0, POS - 175)}px)`;
        platIMG.style.transform = `translateX(${Math.min(325, Math.max(0, POS + 225))}px) translateY(${Math.max(0, POS - 100)}px)`;
        flecheIMG.style.transform = `translateY(${Math.max(0, Math.min(200, position - 500))}px)`;

        $('#imgb1').css('opacity', 1 - (Math.max(0, POS - 425)) / 10);
        $('#imgb5').css('opacity', 1 - (Math.max(0, POS - 350)) / 10);
        $('#imgb3').css('opacity', 1 - (Math.max(0, POS - 275)) / 10);
        $('#imgb4').css('opacity', 1 - (Math.max(0, POS - 200)) / 10);

        if (position - LastPOS > 0) {
            $('#fleche').css('transition', 'transform 0.3s ease-in-out');
            $('#fleche').css('transform', 'rotate(0deg)');
        } else {
            $('#fleche').css('transition', 'transform 0.3s ease-in-out');
            $('#fleche').css('transform', 'rotate(180deg)');
        }

        LastPOS = position;
    }

    RefreshScrollPosition(0);
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        RefreshScrollPosition(scrollTop);
    });

    $("#tips").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#tips").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});    
    $("#impacts").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#impacts").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});    
    $("#campagnes").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#campagnes").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});   


    function TextAnimation(over, TextToAnimate, RandomAnimation) {
        // Generate a random number between 1 and 6 to select one of the 6 effects
        const effect = Math.floor(Math.random() * 6) + 1;
    
        if (over == true) {
            switch (effect) {
                case 1:
                    // Translate Y (move the element up)
                    TextToAnimate.css({
                        'transform': 'translateY(-150%)',
                        'transition': 'transform 0.5s ease-in-out',
                    });
                    break;
                case 2:
                    // Opacity effect (fade the element)
                    TextToAnimate.css({
                        'opacity': '0.5',
                        'transition': 'opacity 0.5s ease-in-out',
                    });
                    break;
                case 3:
                    // Scale effect (scale the text up)
                    TextToAnimate.css({
                        'transform': 'scale(1.2)',
                        'transition': 'transform 0.5s ease-in-out',
                    });
                    break;
                case 4:
                    TextToAnimate.css({
                        'text-shadow': '5px 5px 15px #F45A4A',
                        'transition': 'text-shadow 0.5s ease-in-out',
                    });
                    break;
                default:
                    break;
            }
        } else {
            TextToAnimate.css({
                'transform': 'translateY(0)',
                'opacity': '1',
                'text-shadow': 'none', 
                'transition': 'transform 0.5s ease-in-out, opacity 0.5s ease-in-out, color 0.5s ease-in-out, text-shadow 0.5s ease-in-out',
            });
        }
    }
    
    $("h1").mouseover(function() {
        TextAnimation(true, $(this), Math.random());
    });
    
    $("h1").mouseleave(function() {
        TextAnimation(false, $(this), Math.random());
    });
    
    
    

     

    $('.imgtips').each(function(index) {
        $(this).click(function() {
            Function1($(this), $('.imgtips1').eq(index));
        });
        $('.imgtips1').eq(index).click(function() {
            Function1($('.imgtips1').eq(index), $('.imgtips').eq(index));
        });
    });
});
