// MENU -------------------------------------------------------------------------------------------------------------------------------------------------------------------

const toggleMenu = document.getElementById("toggleMenu");
toggleMenu.addEventListener("click", () => {
    var menu = document.getElementById("menu");
    if (menu.style.left === "-200vh") {
        menu.style.left = "0";
    } else {
        menu.style.left = "-200vh";
    }
});

const toggleMenu2 = document.getElementById("toggleMenu2");
toggleMenu2.addEventListener("click", () => {
    var menu = document.getElementById("menu");
    if (menu.style.left === "-200vh") {
        menu.style.left = "0";
    } else {
        menu.style.left = "-200vh";
    }
});

//----------------------------------------------------------------

const menuButtons = document.querySelectorAll(".menuButtons button");
menuButtons.forEach((btn) => {
    btn.addEventListener("mouseover", () => {
        btn.style.background = "rgb(163, 163, 163)";
        btn.style.transform = "translateX(10px)";
        btn.style.transition = "0.5s";
        btn.style.color = "black";
        btn.style.textShadow = "0 0 3px rgb(0, 0, 0)";
    });
    btn.addEventListener("mouseout", () => {
        btn.style.background = "rgba(255, 255, 255, 0.6)";
        btn.style.transform = "translateX(0px)";
        btn.style.transition = "0.5s";
        btn.style.color = "rgba(47, 47, 47, 0.5)";
        btn.style.textShadow = "0 0 3px rgba(47, 47, 47, 0.5)";
    });
});

//----------------------------------------------------------------

const menuCars = document.querySelectorAll("#display1 div");

menuCars.forEach((car) => {
    car.addEventListener("mouseover", () => {
        car.style.background = "rgba(47, 47, 47, 0.5)";
        car.style.transform = "scale(1.1)";
        car.style.transition = "0.5s";
    });
    car.addEventListener("mouseout", () => {
        car.style.background = "#EEEFF2";
        car.style.transform = "scale(1)";
        car.style.transition = "0.5s";
    });
});

//----------------------------------------------------------------

const boxy = document.querySelectorAll(".menuButtons button");
const all = document.querySelectorAll(".menuBox");

boxy.forEach((x, y)=>{
    x.addEventListener("click", (f)=>{
        boxy.forEach(x=>{x.classList.remove("active")});
        x.classList.add("active");

        all.forEach(content=>{content.classList.remove("active")});
        all[y].classList.add("active");
    });
});

//----------------------------------------------------------------

const carBoxContainer = document.getElementById("carBoxContainerId");
const firstDisplay = document.getElementById("firstDisplay");
const secondDisplay = document.getElementById("secondDisplay");
const menuBox = document.querySelectorAll(".menuBox");
const carBox = document.querySelectorAll(".carBox");

function menuBack(){
    firstDisplay.classList.add("active"); 
    secondDisplay.classList.remove("active");
    carBoxContainer.classList.remove("active");
    menuBox.forEach((box) => {
        box.classList.add("active");
    });
    carBox.forEach((box) => {
        box.classList.remove("active");
    });
    timeout();
}

function timeout(){
    setTimeout(
        ()=>{
            let modelsDisplay = document.getElementById("modelsMenuBox");
            modelsDisplay.classList.add("active");
        },
        1000
    )
}

function car(){
    firstDisplay.classList.remove("active");
    secondDisplay.classList.add("active");
    carBoxContainer.classList.add("active");
    menuBox.forEach((box) => {
        box.classList.remove("active");
    });
    carBox.forEach((box) => {
        box.classList.remove("active");
    });
}

function car718(){
    car();

    let carBox718 = document.getElementById("carBox718");
    carBox718.classList.add("active");
    let carDisplayBtn2 = document.getElementById("secondDisplayBtn2");
    carDisplayBtn2.classList.add("active");
}

function car911(){
    car();

    let carBox911 = document.getElementById("carBox911");
    carBox911.classList.add("active");
    let carDisplayBtn3 = document.getElementById("secondDisplayBtn3");
    carDisplayBtn3.classList.add("active");
}

function carTaycan(){
    car();

    let carBoxTaycan = document.getElementById("carBoxTaycan");
    carBoxTaycan.classList.add("active");
    let carDisplayBtn4 = document.getElementById("secondDisplayBtn4");
    carDisplayBtn4.classList.add("active");
}

function carPanamera(){
    car();

    let carBoxPanamera = document.getElementById("carBoxPanamera");
    carBoxPanamera.classList.add("active");
    let carDisplayBtn5 = document.getElementById("secondDisplayBtn5");
    carDisplayBtn5.classList.add("active");
}

function carMacan(){
    car();

    let carBoxMacan = document.getElementById("carBoxMacan");
    carBoxMacan.classList.add("active");
    let carDisplayBtn6 = document.getElementById("secondDisplayBtn6");
    carDisplayBtn6.classList.add("active");
}

function carCayenne(){
    car();

    let carBoxCayenne = document.getElementById("carBoxCayenne");
    carBoxCayenne.classList.add("active");
    let carDisplayBtn7 = document.getElementById("secondDisplayBtn7");
    carDisplayBtn7.classList.add("active");
}

//----------------------------------------------------------------

function car718box(){
    carBox.forEach((box) => {
        box.classList.remove("active");
    });
    let carBox718 = document.getElementById("carBox718");
    carBox718.classList.add("active");
}
function car911box(){
    carBox.forEach((box) => {
        box.classList.remove("active");
    });
    let carBox911 = document.getElementById("carBox911");
    carBox911.classList.add("active");
}
function carTaycanbox(){
    carBox.forEach((box) => {
        box.classList.remove("active");
    });
    let carBoxTaycan = document.getElementById("carBoxTaycan");
    carBoxTaycan.classList.add("active");
}
function carPanamerabox(){
    carBox.forEach((box) => {
        box.classList.remove("active");
    });
    let carBoxPanamera = document.getElementById("carBoxPanamera");
    carBoxPanamera.classList.add("active");
}
function carMacanbox(){
    carBox.forEach((box) => {
        box.classList.remove("active");
    });
    let carBoxMacan = document.getElementById("carBoxMacan");
    carBoxMacan.classList.add("active");
}
function carCayennebox(){
    carBox.forEach((box) => {
        box.classList.remove("active");
    });
    let carBoxCayenne = document.getElementById("carBoxCayenne");
    carBoxCayenne.classList.add("active");
}

//----------------------------------------------------------------

const carModels = document.querySelectorAll(".carBox div");

carModels.forEach((car) => {
    car.addEventListener("mouseover", () => {
        car.style.background = "rgba(47, 47, 47, 0.5)"
        car.style.transform = "scale(1.1)";
        car.style.transition = "0.5s";
    });
    car.addEventListener("mouseout", () => {
        car.style.background = "#EEEFF2";
        car.style.transform = "scale(1)";
        car.style.transition = "0.5s";
    });
});

//----------------------------------------------------------------

const firstButton = document.getElementById("firstButton");
firstButton.addEventListener("mouseover", (btn) => {
    btn.target.style.transition = "0.5s"
    btn.target.style.color = "black";
    btn.target.style.background = "rgba(255, 255, 255, 0.5)";
    btn.target.style.backdropFilter = "blur(5px)"
    btn.target.style.transform = "translateY(-5px)"
    btn.target.style.borderRadius = "10px"
});
firstButton.addEventListener("mouseout", (btn) => {
    btn.target.style.transitionDuration = "0.5s"
    btn.target.style.color = "fff";
    btn.target.style.background = "rgba(255, 255, 255, 0.2)";
    btn.target.style.backdropFilter = "blur(3px)"
    btn.target.style.transform = "translateY(0)"
    btn.target.style.borderRadius = "0"
});

//----------------------------------------------------------------

const window1 = document.querySelector("#okno1 img");
const window2 = document.querySelector("#okno2 img");
const window3 = document.querySelector("#okno3 img");

const sipka1 = document.querySelector("#okno1 i");
const sipka2 = document.querySelector("#okno2 i");
const sipka3 = document.querySelector("#okno3 i");

window1.addEventListener("mouseover", (event) => {
    event.target.style.transform = "scale(1.5)";
    event.target.style.transition = "0.5s";
    sipka1.style.animation = "sipka 1s linear infinite";
});
window1.addEventListener("mouseout", (event) => {
    event.target.style.transform = "scale(1.2)";
    event.target.style.transition = "0.5s";
    sipka1.style.animation = "none";
});
window2.addEventListener("mouseover", (event) => {
    event.target.style.transform = "scale(1.5)";
    event.target.style.transition = "0.5s";
    sipka2.style.animation = "sipka 1s linear infinite";
});
window2.addEventListener("mouseout", (event) => {
    event.target.style.transform = "scale(1.2)";
    event.target.style.transition = "0.5s";
    sipka2.style.animation = "none";
});
window3.addEventListener("mouseover", (event) => {
    event.target.style.transform = "scale(1.5)";
    event.target.style.transition = "0.5s";
    sipka3.style.animation = "sipka 1s linear infinite";
});
window3.addEventListener("mouseout", (event) => {
    event.target.style.transform = "scale(1.2)";
    event.target.style.transition = "0.5s";
    sipka3.style.animation = "none";
});

//----------------------------------------------------------------

const model1 = document.getElementById("model1");
const img1 = document.getElementById("modelimg1");
model1.addEventListener("mouseover", (event) => {
    img1.transition = "0.5s";
    img1.style.transform = "scale(1.2)";
});
model1.addEventListener("mouseout", (event) => {
    img1.style.transform = "scale(1)";
    img1.style.transition = "0.5s";
});

const model2 = document.getElementById("model2");
const img2 = document.getElementById("modelimg2");
model2.addEventListener("mouseover", (event) => {
    img2.transition = "0.5s";
    img2.style.transform = "scale(1.2)";
});
model2.addEventListener("mouseout", (event) => {
    img2.style.transform = "scale(1)";
    img2.style.transition = "0.5s";
});

const model3 = document.getElementById("model3");
const img3 = document.getElementById("modelimg3");
model3.addEventListener("mouseover", (event) => {
    img3.transition = "0.5s";
    img3.style.transform = "scale(1.2)";
});
model3.addEventListener("mouseout", (event) => {
    img3.style.transform = "scale(1)";
    img3.style.transition = "0.5s";
});

const model4 = document.getElementById("model4");
const img4 = document.getElementById("modelimg4");
model4.addEventListener("mouseover", (event) => {
    img4.transition = "0.5s";
    img4.style.transform = "scale(1.2)";
});
model4.addEventListener("mouseout", (event) => {
    img4.style.transform = "scale(1)";
    img4.style.transition = "0.5s";
});

const model5 = document.getElementById("model5");
const img5 = document.getElementById("modelimg5");
model5.addEventListener("mouseover", (event) => {
    img5.transition = "0.5s";
    img5.style.transform = "scale(1.2)";
});
model5.addEventListener("mouseout", (event) => {
    img5.style.transform = "scale(1)";
    img5.style.transition = "0.5s";
});

const model6 = document.getElementById("model6");
const img6 = document.getElementById("modelimg6");
model6.addEventListener("mouseover", (event) => {
    img6.transition = "0.5s";
    img6.style.transform = "scale(1.2)";
});
model6.addEventListener("mouseout", (event) => {
    img6.style.transform = "scale(1)";
    img6.style.transition = "0.5s";
});

//----------------------------------------------------------------

const products = document.querySelectorAll(".product");

products.forEach((product) => {
    product.addEventListener("mouseover", (event) => {
        product.classList.add("productHover");
    });
    product.addEventListener("mouseout", (event) => {
        product.classList.remove("productHover");
    });
});

//----------------------------------------------------------------

const discover = document.querySelectorAll(".discover");

discover.forEach((element) => {
    element.addEventListener("mouseover", (event) => {
        element.classList.add("discoverHover");
    });
    element.addEventListener("mouseout", (event) => {
        element.classList.remove("discoverHover");
    });
});

//----------------------------------------------------------------






















//----------------------------------------------------------------

/*

const windowClass = docuemnt.querySelectorAll(".window");

windowClass.onScroll((okno) => {
    okno.style.animation = "slide 1s ease";
})


let window = document.querySelectorAll(".window");

window.onscroll = function(element){
    element.forEach(sec => {
        let top = window.scrollY;
        let offset = sec.offsetTop - 150;
        let height = sec.offsetHeight;

        if(top >= offset && top < offset + height) {
            sec.classList.add("show-animate");
        }
        else{
            sec.classList.remove("show-animate");
        }
    });
}

*/

/*
const model1 = document.querySelectorAll(".model");
const img1 = document.querySelector(".model img");
model1.forEach(element => {
    element.addEventListener("mouseover", (event) => {
        img1.forEach((element) => {
            element.style.transform = "scale(1.2)";
            element.style.transition = "0.5s";
});});});

model1.forEach(element => {
    element.addEventListener("mouseout", (event) => {
        img1.forEach((element) => {
            element.style.transform = "scale(1)";
            element.style.transition = "0.5s";
});});})
*/