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

let descriptions = {
    "baxter-stare.png": "Baxter lovingly staring at the camera on a sunny day in the apartment. One of my favorite photos of him. He would of been 6 or 7 around this time.",
};


icon.forEach((item) => {
    item.addEventListener("click", () => {
        
        
        let desktop = document.querySelector("body");
        
        // begin creation of window that will display image
        let imageWindow = document.createElement("div");
        imageWindow.classList.add("window");
        
        // titlebar creation
        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);

        // image will reside in this part of the window
        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 = "0.75rem";
        figure.style.display = "flex";
        figure.style.flexDirection = "column";
        figure.style.alignItems = "center";
        figure.appendChild(image);

        let figureCaption = document.createElement("figcaption");
        figureCaption.textContent = `${descriptions[item.querySelector("figcaption").textContent]}`;
        figureCaption.style.textAlign = "center";
        figureCaption.style.marginTop = "1rem";
        figure.appendChild(figureCaption);

        // add everything together backwards and hide the window
        // with the image icons in it, then set the gird properties
        // for the image viewing window so it is in the right place
        // the dialog on the right needs set otherwise it will 
        // move itself over
        // append image window to body to show image at larger size
        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);
    });
});