function makeIFrame(url, loginID, overlayID) {
    var existence = document.getElementById(loginID);
    if (!existence) {
        // Create the overlay div and add it to the page
        var overlay = document.createElement("div");
        overlay.id = overlayID;
        document.body.appendChild(overlay);

        // Create the iframe and add it to the overlay div
        var iframe = document.createElement("iframe");
        iframe.setAttribute("src", url);
        iframe.id = loginID;
        overlay.appendChild(iframe);

        // Create the close button and add it to the overlay div
        var closeButton = document.createElement("button");
        closeButton.innerHTML = "x";
        closeButton.title = "Close";
        closeButton.id = "closebutton";
        overlay.appendChild(closeButton);

        // Add event listener to close the iframe when the close button is clicked
        closeButton.addEventListener("click", closeIFrame);



        // Add event listener to close iframe when clicked outside
        setTimeout(function() {
            overlay.addEventListener("click", closeIFrame);
        }, 100);
    }
}

function closeIFrame() {
    loginID = "login";
    overlayID = "overlay";
    var iframe = document.getElementById(loginID);
    if (iframe) {
        iframe.parentNode.removeChild(iframe);
        var overlay = document.getElementById(overlayID);
        if (overlay) {
            overlay.removeEventListener("click", closeIFrame);
            overlay.parentNode.removeChild(overlay);
        }
    }
}

function search(){
    var existence = document.getElementById("search");
    if(!existence){
    makeSearchFrame('./indexes/search/search.php', 'search', 'search_overlay');
    document.getElementById("search_icon").src="./icon/del.svg";
    }
    else{
        document.getElementById("search_icon").src="./icon/search.svg";
        closeSearchFrame();
    }
}

function makeSearchFrame(url, loginID, overlayID) {
    var existence = document.getElementById(loginID);
    if (!existence) {
        // Create the overlay div and add it to the page
        var overlay = document.createElement("div");
        overlay.id = overlayID;
        document.body.appendChild(overlay);

        // Create the iframe and add it to the overlay div
        var iframe = document.createElement("iframe");
        iframe.setAttribute("src", url);
        iframe.id = loginID;
        overlay.appendChild(iframe);

        // Add event listener to close iframe when clicked outside
        setTimeout(function() {
            overlay.addEventListener("click", closeSearchFrame);
        }, 100);
    }
}

function closeSearchFrame() {
    loginID = "search";
    overlayID = "search_overlay";
    var iframe = document.getElementById(loginID);
    if (iframe) {
        iframe.parentNode.removeChild(iframe);
        var overlay = document.getElementById(overlayID);
        if (overlay) {
            overlay.parentNode.removeChild(overlay);
        }
    }
    document.getElementById("search_icon").src="./icon/search.svg";
}