document.addEventListener("DOMContentLoaded", function() {

    const FirstPicture = document.querySelector(".First-Picture");
    const SecondPicture = document.querySelector(".Second-Picture");
    const ThirdPicture = document.querySelector(".Third-Picture");
    const FourthPicture = document.querySelector(".Fourth-Picture"); 
    const FifthPicture = document.querySelector(".Fifth-Picture");
    const SixthPicture = document.querySelector(".Sixth-Picture");

    const Button = document.querySelector(".Button");
    const PlaceForButton = document.querySelector(".Place-For-Button");
    const ButtonUp = document.querySelector(".Button-Up");
    const PlaceForButtonUp = document.querySelector(".Place-Button-Up");
     


    let scale = 1;
    const MinScale = 0.9; 
    const MaxScale = 1;
    const StepScale = 0.1;

    var currentSwipe = 0;
    

    function UpdateScale() {
        FirstPicture.style.transform = `scale(${scale})`;
        SecondPicture.style.transform = `scale(${scale})`;
        ThirdPicture.style.transform = `scale(${scale})`;
        FourthPicture.style.transform = `scale(${scale})`;
        FifthPicture.style.transform = `scale(${scale})`;
        SixthPicture.style.transform = `scale(${scale})`; 

        if (scale <= MinScale + 0.01) {
        Button.classList.add("open");
        PlaceForButton.classList.add("open");
        }
        else {
        Button.classList.remove("open");
        PlaceForButton.classList.remove("open");
        };

    };

    function UpdateScaleUp() {
        SecondPicture.style.transform = `scale(${scale})`;
        ThirdPicture.style.transform = `scale(${scale})`;
        FourthPicture.style.transform = `scale(${scale})`;
        FifthPicture.style.transform = `scale(${scale})`;
        SixthPicture.style.transform = `scale(${scale})`;

        if ((scale <= MinScale + 0.01) && (currentSwipe => 1 )) {
            ButtonUp.classList.add("open");
            PlaceForButtonUp.classList.add("open");
        }
        else {
            ButtonUp.classList.remove("open");
            PlaceForButtonUp.classList.remove("open"); 

        }
    }

    FirstPicture.addEventListener("wheel", function(e) {

        e.preventDefault();

        if (e.deltaY < 0) {
            scale = Math.min(MaxScale, scale + StepScale);
        } else {
            scale = Math.max(MinScale, scale - StepScale);
        }

        UpdateScale();

    });

    SecondPicture.addEventListener("wheel", function(e) {

        e.preventDefault();

        if (e.deltaY < 0) {
            scale = Math.min(MaxScale, scale + StepScale);
        } else {
            scale = Math.max(MinScale, scale - StepScale);
        }

        UpdateScale();
        UpdateScaleUp(); 
        
    });

    ThirdPicture.addEventListener("wheel", function(e) {

        e.preventDefault();

        if (e.deltaY < 0) {
            scale = Math.min(MaxScale, scale + StepScale);
        } else {
            scale = Math.max(MinScale, scale - StepScale);
        }

        UpdateScale();
        UpdateScaleUp(); 
        
    });
    FourthPicture.addEventListener("wheel", function(e) {

        e.preventDefault();

        if (e.deltaY < 0) {
            scale = Math.min(MaxScale, scale + StepScale);
        } else {
            scale = Math.max(MinScale, scale - StepScale);
        }

        UpdateScale();
        UpdateScaleUp(); 

    });
    FifthPicture.addEventListener("wheel", function(e) {

        e.preventDefault();

        if (e.deltaY < 0) {
            scale = Math.min(MaxScale, scale + StepScale);
        } else {
            scale = Math.max(MinScale, scale - StepScale);
        }

        UpdateScale();
        UpdateScaleUp(); 

    });
    SixthPicture.addEventListener("wheel", function(e) {

        e.preventDefault();

        if (e.deltaY < 0) {
            scale = Math.min(MaxScale, scale + StepScale);
        } else {
            scale = Math.max(MinScale, scale - StepScale);
        }

        UpdateScale();
        UpdateScaleUp(); 

    });

    Button.addEventListener("click", function() {

        currentSwipe = currentSwipe + 1
        
        if (currentSwipe === 0) {
            FirstPicture.style.transform = "translateY(0%)";
            SecondPicture.style.transform = "translateY(0%)";
            ThirdPicture.style.transform = "translateY(0%)";
            FourthPicture.style.transform = "translateY(0%)";
            FifthPicture.style.transform = "translateY(0%)";
            SixthPicture.style.transform = "translateY(0%)"; 

        }
        else if (currentSwipe === 1) {
            FirstPicture.style.transform = 'translateY(-100%)';
            SecondPicture.style.transform = 'translateY(-100%)';
            ThirdPicture.style.transform = "translateY(-100%)"
            FourthPicture.style.transform = "translateY(-100%)";
            FifthPicture.style.transform = "translateY(-100%)";
            SixthPicture.style.transform = "translateY(-100%)";
            
        } else if (currentSwipe === 2) {
            FirstPicture.style.transform = 'translateY(-200%)';
            SecondPicture.style.transform = 'translateY(-200%)';
            ThirdPicture.style.transform = 'translateY(-200%)';
            FourthPicture.style.transform = "translateY(-200%)";
            FifthPicture.style.transform = "translateY(-200%)";
            SixthPicture.style.transform = "translateY(-200%)";
            
        } else if (currentSwipe === 3) {
            FirstPicture.style.transform = 'translateY(-300%)';
            SecondPicture.style.transform = 'translateY(-300%)';
            ThirdPicture.style.transform = 'translateY(-300%)';
            FourthPicture.style.transform = "translateY(-300%)";
            FifthPicture.style.transform = "translateY(-300%)";
            SixthPicture.style.transform = "translateY(-300%)";

        } else if (currentSwipe === 4) {
            FirstPicture.style.transform = 'translateY(-400%)';
            SecondPicture.style.transform = 'translateY(-400%)';
            ThirdPicture.style.transform = 'translateY(-400%)';
            FourthPicture.style.transform = "translateY(-400%)";
            FifthPicture.style.transform = "translateY(-400%)";
            SixthPicture.style.transform = "translateY(-400%)";
        
        } else if (currentSwipe === 5) {
            FirstPicture.style.transform = 'translateY(-500%)';
            SecondPicture.style.transform = 'translateY(-500%)';
            ThirdPicture.style.transform = 'translateY(-500%)';
            FourthPicture.style.transform = "translateY(-500%)";
            FifthPicture.style.transform = "translateY(-500%)";
            SixthPicture.style.transform = "translateY(-500%)";
            currentSwipe = -1;
        }
        
    });
    
    ButtonUp.addEventListener("click", function() {

        currentSwipe = currentSwipe - 1;
        
        if (currentSwipe === 0) {
            FirstPicture.style.transform = "translateY(0%)";
            SecondPicture.style.transform = "translateY(0%)";
            ThirdPicture.style.transform = "translateY(0%)";
            FourthPicture.style.transform = "translateY(0%)";
            FifthPicture.style.transform = "translateY(0%)";
            SixthPicture.style.transform = "translateY(0%)"; 

        }
        else if (currentSwipe === 1) {
            FirstPicture.style.transform = 'translateY(-100%)';
            SecondPicture.style.transform = 'translateY(-100%)';
            ThirdPicture.style.transform = "translateY(-100%)"
            FourthPicture.style.transform = "translateY(-100%)";
            FifthPicture.style.transform = "translateY(-100%)";
            SixthPicture.style.transform = "translateY(-100%)";
            
            
        } else if (currentSwipe === 2) {
            FirstPicture.style.transform = 'translateY(-200%)';
            SecondPicture.style.transform = 'translateY(-200%)';
            ThirdPicture.style.transform = 'translateY(-200%)';
            FourthPicture.style.transform = "translateY(-200%)";
            FifthPicture.style.transform = "translateY(-200%)";
            SixthPicture.style.transform = "translateY(-200%)";
            
        } else if (currentSwipe === 3) {
            FirstPicture.style.transform = 'translateY(-300%)';
            SecondPicture.style.transform = 'translateY(-300%)';
            ThirdPicture.style.transform = 'translateY(-300%)';
            FourthPicture.style.transform = "translateY(-300%)";
            FifthPicture.style.transform = "translateY(-300%)";
            SixthPicture.style.transform = "translateY(-300%)";

        } else if (currentSwipe === 4) {
            FirstPicture.style.transform = 'translateY(-400%)';
            SecondPicture.style.transform = 'translateY(-400%)';
            ThirdPicture.style.transform = 'translateY(-400%)';
            FourthPicture.style.transform = "translateY(-400%)";
            FifthPicture.style.transform = "translateY(-400%)";
            SixthPicture.style.transform = "translateY(-400%)";
        
        } else if (currentSwipe === 5) {
            FirstPicture.style.transform = 'translateY(-500%)';
            SecondPicture.style.transform = 'translateY(-500%)';
            ThirdPicture.style.transform = 'translateY(-500%)';
            FourthPicture.style.transform = "translateY(-500%)";
            FifthPicture.style.transform = "translateY(-500%)";
            SixthPicture.style.transform = "translateY(-500%)";
            
        } else if (currentSwipe === -1 ) {
            FirstPicture.style.transform = 'translateY(-500%)';
            SecondPicture.style.transform = 'translateY(-500%)';
            ThirdPicture.style.transform = 'translateY(-500%)';
            FourthPicture.style.transform = "translateY(-500%)";
            FifthPicture.style.transform = "translateY(-500%)";
            SixthPicture.style.transform = "translateY(-500%)";
            currentSwipe = 5;

        }

    });


    

});