let icon = document.querySelectorAll(".clickable-image");

icon.forEach((item) => {
    item.addEventListener("click", () => {
        

        let desktop = document.querySelector("body");
    
        let imageWindow = document.createElement("div");
        imageWindow.classList.add("window");
        
        let titleBar = document.createElement("div");
        titleBar.classList.add("title-bar");
        
        let closeButton = document.createElement("button");
        closeButton.ariaLabel = "Close";
        closeButton.classList.add("close");
    
        titleBar.appendChild(closeButton);

        let windowTilte = document.createElement("h2");
        windowTilte.classList.add("title")
        windowTilte.textContent = item.querySelector("figcaption").textContent;
        titleBar.appendChild(windowTilte);

        let separator = document.createElement("div");
        separator.classList.add("separator")
        imageWindow.appendChild(titleBar);
        imageWindow.appendChild(separator);

        let windowPane = document.createElement("div");
        windowPane.classList.add("window-pane");
        windowPane.style.display = "flex";
        windowPane.style.justifyContent = "center";

        let figure = document.createElement("figure");
        let image = document.createElement("img");
        image.src = `img/${item.querySelector("figcaption").textContent}`;
        image.height = "700";
        figure.style.marginTop = "1.5rem";
        figure.appendChild(image);

        let figureCaption = document.createElement("figcaption");
        figureCaption.textContent = `${item.querySelector("figcaption").textContent}`;
        figureCaption.style.textAlign = "center";
        figure.appendChild(figureCaption);

        windowPane.appendChild(figure);
        imageWindow.appendChild(windowPane);
        document.querySelector(".window").style.display = "none";
        imageWindow.style.gridColumn = "1";
        imageWindow.style.gridRow = "1";
        let = aboutThisCat = document.querySelector(".site-info");
        aboutThisCat.style.gridColumn = "2";
        desktop.appendChild(imageWindow);
    });
});