// A vous de jouer !

// Identifie les deux élements de la liste fixe / portable
const desktopLi = document.getElementById("fixe");
const laptopLi = document.getElementById("portable");
const computerImg = document.getElementById("img-pc");

// Ajouter d'un observateur d'évènement sur ces éléments, faisant appel à la fonction définie ci-dessous
desktopLi.addEventListener("click", () => { selectComputerPicture("fixe"); });
laptopLi.addEventListener("click", () => { selectComputerPicture("portable"); });

// Ajout d'observateurs d'évènements pour le passage de la souris sur l'image
computerImg.addEventListener("mouseenter", () => {
    if (desktopLi.classList.contains("selected")) {
        selectComputerPicture("portable");
    } else {
        selectComputerPicture("fixe");
    }
})

computerImg.addEventListener("mouseleave", () => {
    if (desktopLi.classList.contains("selected")) {
        selectComputerPicture("portable");
    } else {
        selectComputerPicture("fixe");
    }
})


// Fonction modifiant l'application de la classe "selected" à un élément, à compléter
function selectComputerPicture(type) {
    if (type === "fixe") {
        console.log("fixe")
        desktopLi.classList.add("selected");
        laptopLi.classList.remove("selected");
        computerImg.src = "img/ordinateur.png";
    } else if (type === "portable") {
        console.log("portable")
        laptopLi.classList.add("selected");
        desktopLi.classList.remove("selected");
        computerImg.src = "img/portable.png";
    }
}

// Tableau contenant les photos à faire défiler
let photos = ["img/clavier.png", "img/souris.png", "img/switch.png", "img/routeur.png"];
let currentPhoto = 0;
const photo = document.getElementById("img-peripherique");

//fonction modifiant la photo en décallant dans le tableau de la valeur "modifier" (positive ou négative)
function changePhotoIndex(modifier) {
    currentPhoto += modifier;
    if (currentPhoto > photos.length -1) {
        currentPhoto = 0;
    }
    if (currentPhoto < 0) {
        currentPhoto = photos.length -1;
    }
    photo.src = photos[currentPhoto];
}

// Définition des boutons et mise en place d'observateur d'évènements utilisant la fonction
const nextButton = document.getElementById("btn-suivant");
const prevButton = document.getElementById("btn-precedent");

nextButton.addEventListener("click", () => {changePhotoIndex(1);});
prevButton.addEventListener("click", () => {changePhotoIndex(-1);});