document.addEventListener("DOMContentLoaded", run);

function run() {
    supportFireFox();
    initializeClickHandler();
}

/* Firefox seems to handle positioning after transform
differently to webkit based browsers, therefore this
function checks if the current userAgent is FF and sets
the required property for bottom from 0 to 15vh */
function supportFireFox() {
    // console.log(navigator.userAgent);
    if (navigator.userAgent.includes("Firefox")) {
        // document.getElementById("exhibition").style.bottom = "15vh";
    }
}

function initializeClickHandler() {
    document.addEventListener("click", (e) => {
        let overlay = document.getElementById("info-box");
        let curr = e.target;
        console.log(curr);
        if (curr.className === "thumb") {
            handleThumb(overlay, curr);
        } else if (curr.id === "btn-close") {
            hideOverlay(overlay);
        }
    });
}

function handleThumb(overlay, elem) {
    let imgName = elem.dataset.img;
    showOverlay(overlay, imgName);
}

function showOverlay(overlay, imgName) {
    let info = getInfoForImg(imgName);
    // \xD7 is the multiplication sign in hex
    overlay.children[0].innerHTML =
        `<div id="btn-close">\xD7</div>
<img src="/inc/images/${imgName}.jpg" alt="${imgName}" />

<table id="img-description">
<tr>
<th>Author:</th><td>${info.author}</td>
</tr>
<tr>
<th>Size:</th><td>${info.size}</td>
</tr>
<tr>
<th>Tools:</th><td>${info.tools}</td>
</tr>
<tr>
<th>Date:</th><td>${info.date}</td>
</tr>
<tr>
<th>Price:</th><td>${info.price}</td>
</tr>
<tr>
<th colspan="2">Description:</th>
</tr>
<tr>
<td colspan="2">${info.desc}</td>
</tr>
<tr>
<th colspan="2"><a href="${info.blog}">Read more...</a></th>
</tr>
</table>`;
    overlay.classList.remove("hidden");
}

function hideOverlay(overlay) {
    overlay.classList.add("hidden");
}

// Get info from server
function getInfoForImg(imgName) {
    let info = {author: "Philip Gaber", size: "1920x1080 @24MP", tools: "Sony a5100", date: "2019-10-10",
                desc: "A couple words about the piece of art. I like trees, I am groot, Winter is coming!!!", price: "2999,99 €",
                blog: "./blog/some/url"};
    return info;
}