/**
 * @author Usman Naeem
 */
const WS_ROOT = "/ws/";
const HOME = "/";
const login_page = "login_page";
const home_page = "home_page";
const watch_list_page = "watch_list_page";
const economic_calendar_page = "economic_calendar_page";
const calculators_page = "calculators_page";
const preferred_items_page = "preferred_items_page";
const preferred_timeframes_page = "preferred_timeframes_page";
const profile_page = "profile_page";
const delete_profile_page = "delete_profile_page";
const administration_page = "administration_page";
const assign_administration_page = "assign_administration_page";
const change_password_page = "change_password_page";
const disable_account_page = "disable_account_page";
const enable_account_page = "enable_account_page";
const manage_license_page = "manage_license_page";
const revoke_administration_page = "revoke_administration_page";
const send_invitation_page = "send_invitation_page";
//
const cache_expiry_delay = 1000 * 60 * 30;
const displayTime = true;
//
const time_info_format_options = {
    timeZone: 'America/New_York', /*timeZoneName: 'short',*/
    hour: '2-digit',
    minute: '2-digit',
    hour12: true
};
const download_time_format_options = new Intl.DateTimeFormat('en-US', {
    timeZone: 'America/New_York',
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
});
const preventClose = function (e) {
    e.preventDefault();
    e.returnValue = '';
};
var is_mobile_device;
var page = "";
//
var user_json = null;
var titleTapCount = 0;
var lastTitleTapTime = 0;

//
function initDefaultParamState() {
    user_json = null;
    titleTapCount = 0;
    lastTitleTapTime = 0;
}

//
window.onload = function () {
    //window.resizeTo(500, 700);
    window.addEventListener('beforeunload', preventClose, true);

    const timeInfoUpdater = function () {
        try {
            intervalUpdates();
        } catch (error) {
            console.log(error);
        }
        setTimeout(timeInfoUpdater, 1000);
    };
    timeInfoUpdater();

    is_mobile_device = isMobileDevice();
    load_timeframes().then(() => {
        set_all_timeframes_elements();
        enableHomePage();
    }).catch(error => {
        handleError(error, "home_message_box", true);
        return;
    });
    initCollapsable();
};

function goHome() {
    window.location = HOME;
}

function sleep(time) {
    if (time > 0) {
        return new Promise(resolve => {
            setTimeout(resolve, time);
        });
    }
}

function intervalUpdates() {
    if (user_json !== null) {
        const currentTime = Date.now();
        if (displayTime) {
            updateTimeInfo(currentTime);
        }

        const economic_calendar_filter_event_indicator = getElement("economic_calendar_filter_event_indicator");
        if (economic_calendar_filter_event_indicator.checked) {
            updateHighestEconomicEventImpactIndicator(currentTime);
        }
        if (page === economic_calendar_page) {
            if (currentTime >= economic_event_div_container_auto_update_time) {
                update_economic_event_div_container(false, false);
            }
        }
    }
}

function updateTimeInfo(currentTime) {
    try {
        const timeInfoElement = getElement("time_info");
        if (timeInfoElement) {
            const timezoneElement = getElement("timezone");
            if (timezoneElement) {
                var selected_timezone = timezoneElement.value ? timezoneElement.value : user_json.timezone;
                time_info_format_options.timeZone = selected_timezone;
                const timeFormater = new Intl.DateTimeFormat('en-US', time_info_format_options);
                timeInfoElement.innerHTML = timeFormater.format(currentTime);
            }
        }
    } catch (err) {
        console.log(err);
    }
}


function xSwipeDetection(e) {
    var xThreshold = 120;
    var yThreshold = 25;
    if (e.deltaY < yThreshold && e.deltaY > (yThreshold * -1)) {
        if (e.deltaX > xThreshold || e.deltaX < (xThreshold * -1)) {
            return e.deltaX > 0 ? 1 : -1;
        }
    }
    return 0;
}

function ySwipeDetection(e) {
    var xThreshold = 10;
    var yThreshold = 300;
    if (e.deltaX < xThreshold && e.deltaX > (xThreshold * -1)) {
        if (e.deltaY > yThreshold || e.deltaY < (yThreshold * -1)) {
            return e.deltaY > 0 ? 1 : -1;
        }
    }
    return 0;
}

function swipePage(nextPage) {
    if (page === home_page) {
        if (nextPage) {
            enableEconomicCalendarPage();
        }
    } else if (page === economic_calendar_page) {
        if (nextPage) {
            enableWatchListPage();
        } else {
            enableHomePage();
        }
    } else if (page === watch_list_page) {
        if (nextPage) {
            enableCalculatorsPage();
        } else {
            enableEconomicCalendarPage();
        }
    } else if (page === calculators_page) {
        if (nextPage) {
            enablePreferredItemsPage();
        } else {
            enableWatchListPage();
        }
    } else if (page === preferred_items_page) {
        if (nextPage) {
            enablePreferredTimeframesPage();
        } else {
            enableCalculatorsPage();
        }
    } else if (page === preferred_timeframes_page) {
        if (nextPage) {
            enableProfilePage();
        } else {
            enablePreferredItemsPage();
        }
    } else if (page === profile_page) {
        if (nextPage) {
        } else {
            enablePreferredTimeframesPage();
        }
    }
}

function escapeCharacters(text) {
    return String(text)
            .replaceAll("&", "&amp;")
            .replaceAll("<", "&lt;")
            .replaceAll(">", "&gt;")
            .replaceAll('"', "&quot;")
            .replaceAll("'", "&#39;");
}

function isCompressionSupported() {
    return ('DecompressionStream' in window);
}
async function unzipGzipString(gzippedString, encoded) {
    if (!encoded) {
        gzippedString = window.btoa(gzippedString);
    }
    const gzippedBuffer = new Uint8Array(window.atob(gzippedString).split("").map(c => c.charCodeAt(0)));
    const ds = new DecompressionStream("gzip");
    const writer = ds.writable.getWriter();
    writer.write(gzippedBuffer);
    writer.close();
    const response = new Response(ds.readable);
    const arrayBuffer = await response.arrayBuffer();
    const textDecoder = new TextDecoder();
    const unzippedString = textDecoder.decode(arrayBuffer);
    return unzippedString;
}

function isNumeric(value) {
    return !isNaN(parseFloat(value)) && isFinite(value);
}

function isMobileDevice() {
    if (window.matchMedia("(pointer: coarse)").matches) {
        return true;
    }
    if (window.matchMedia("(any-hover:none)").matches) {
        return true;
    }
    const userAgent = navigator.userAgent.toLowerCase();
    if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|windows phone/.test(userAgent)) {
        return true;
    }
    return false;
}

function isPagePinched(win) {
    const innerWidth = win.innerWidth;
    const visualViewportWidth = win.visualViewport ? win.visualViewport.width : innerWidth;
    const zoomLevel = innerWidth / visualViewportWidth;

    return (Math.abs(zoomLevel - 1) > 0.0001);
}

async function getDocumentHeight() {
    document.body.scrollHeight;
}

async function goToTop() {
    document.body.scrollIntoView({behavior: 'smooth'});
    await sleep(200);
    window.scrollTo(0, 0);
}

async function goToBottom() {
    window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'});
    await sleep(200);
    window.scrollTo(0, document.body.scrollHeight);
}

async function goToMiddle() {
    window.scrollTo({top: (document.body.scrollHeight / 2), behavior: 'smooth'});
    await sleep(200);
    window.scrollTo(0, (document.body.scrollHeight / 2));
}

async function goToPosition(x, y) {
    window.scrollTo({top: y, behavior: 'smooth'});
    await sleep(200);
    window.scrollTo(x, y);
}

async function onPageTitleClick(e) {
    const currentTime = new Date().getTime();
    const tapDelay = currentTime - lastTitleTapTime;
    lastTitleTapTime = currentTime;
    titleTapCount++;

    if (tapDelay > 200) {
        titleTapCount = 1;
        await sleep(200);
    }

    if (titleTapCount === 1) {
        goToTop();
    } else if (titleTapCount === 2) {
        goToBottom();
    }
}

//async function onPageTitleDoubleTap(e) {
//    const currentTime = new Date().getTime();
//    const tapLength = currentTime - lastTitleTapTime;
//
//    if (tapLength < 300 && tapLength > 0) {
//        e.preventDefault();
//        goToBottom();
//    } else {
//        //goToTop();
//    }
//    lastTitleTapTime = currentTime;
//}

function getElement(id) {
    return document.getElementById(id);
}

function setPage(_page) {
    hidePage();
    page = _page;
}

function displayPage() {
    const _page = getElement(page);
    if (_page) {
        _page.style.display = "block";
        scrollToTop();
    }
}

function hidePage() {
    const _page = getElement(page);
    if (_page) {
        _page.style.display = "none";
    }
}

function scrollToTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

function removeLoader() {
    const loaderContainer = getElement('loader_container');
    if (loaderContainer) {
        const loaderSpinner = getElement('loader_spinner');
        loaderSpinner.style.animationPlayState = 'paused';

        loaderContainer.style.display = 'none';
    }
    displayPage();
}

function addLoader() {
    const loaderContainer = getElement('loader_container');
    if (loaderContainer && loaderContainer.style.display !== 'block') {
        loaderContainer.style.display = 'block';

        const loaderSpinner = getElement('loader_spinner');
        loaderSpinner.style.animationPlayState = 'running';
    }
    displayPage();
}

function quit() {
    //if (confirm("Are you sure?")) {
    //close_snapshots();
    close_snapshot(comman_name_for_any_snapshot_window);
    setTimeout(function () {
        window.close();
    }, 1000);
    //}
}

function isObject(obj) {
    return obj !== null && obj !== undefined && obj.constructor === Object;
}

function isString(obj) {
    return obj !== null && obj !== undefined && obj.constructor === String;
}

function isError(obj) {
    return obj !== null && obj !== undefined && obj.constructor === Error;
}

function handleError(error, message_box, remove_loader) {
    if (remove_loader) {
        removeLoader();
    }
    var msg = getErrorMessage(error);
    const messageboxElement = getElement(message_box);
    if (messageboxElement) {
        messageboxElement.innerHTML = msg;
    }
}

function getErrorMessage(error) {
    var msg = "";
    if (error) {
        if (isError(error)) {
            msg = error.message;
        } else {
            msg = error;
        }
        if (isString(msg)) {
            var ind = msg.lastIndexOf("Error:");
            if (ind !== -1) {
                msg = msg.substr(ind + 6).trim();
            }
            ind = msg.lastIndexOf("Exception:");
            if (ind !== -1) {
                msg = msg.substr(ind + 10).trim();
            }
        }
    }
    return msg;
}

function addHeader(menue) {
    const header = getElement("header");
    if (header) {
        header.setAttribute("class", "header " + (typeof highest_economic_event_impact !== 'undefined' ? (highest_economic_event_impact + "-economic-event-impact-header") : "" ));
        var content = "<span class='title' onclick='enableHomePage();'>AEATAS</span>";
        if (menue) {
            content += "<div class='setting-menu'>";
            content += "<div id='setting-menu' onclick='javascript:settingMenu();'>";
            content += "<div id='setting-item-1' class='setting'></div>";
            content += "<div id='setting-item-2' class='setting'></div>";
            content += "<div id='setting-item-3' class='setting'></div>";
            content += "</div>";
            content += "<div id='setting-content' class='setting-content'>";
            content += "<a onclick='enableHomePage();'>Home</a>";
            content += "<a onclick='enableEconomicCalendarPage();'>Economic Calendar</a>";
            content += "<a onclick='enableCalculatorsPage();'>Calculators</a>";
            content += "<a onclick='enableWatchListPage();'>Snapshot Watchlist</a>";
            content += "<a onclick='refreshSnapshotsMenu(event);'>Refresh Snapshots</a>";
            if (!is_mobile_device) {
                content += "<a onclick='gotoSnapshotMenu(event);'>Go To Snapshot</a>";
            }
            content += "<a onclick='closeSnapshotsMenu(event);'>Close Snapshots</a>";
            content += "<a onclick='preferencesMenu();'>Preferences</a>";
            content += "<a onclick='accountMenu();'>Account</a>";
            content += "<div id='setting-content-admin' class='setting-content-admin'>";
            content += "<a onclick='administrationMenu();'>Administration</a>";
            content += "</div>";
            content += "<a href='javascript:logout();'>Logout</a>";
            if (!is_mobile_device) {
                content += "<a href='javascript:quit();'>Quit Aeatas</a>";
            }
            content += "</div>";
            content += "<div id='setting-refresh-snapshots-content' class='setting-content'></div>";
            content += "<div id='setting-close-snapshots-content' class='setting-content'></div>";
            content += "<div id='setting-goto-snapshots-content' class='setting-content'></div>";
            content += "</div>";
            content += "<div id='setting-preferences-content' class='setting-content'>";
            content += "<a onclick='enablePreferredItemsPage();'>Preferred Symbols</a>";
            content += "<a onclick='enablePreferredTimeframesPage();'>Preferred Timeframes</a>";
            content += "<a onclick='enableProfilePage();'>Preferred Time Zone</a>";
            content += "</div>";
            content += "<div id='setting-account-content' class='setting-content'>";
            content += "<a onclick='enableProfilePage();'>User Profile</a>";
            content += "<a onclick='enableChangePasswordPage();'>Change Password</a>";
            content += "<a onclick='enableDeleteProfilePage();'>Delete Account</a>";
            content += "</div>";
            content += "<div id='setting-administration-content' class='setting-content'>";
            content += "<a onclick='enableAdministrationPage();'>Administration Home</a>";
            content += "<a onclick='enableSendInvitationPage();'>Send Sign-up Invitation</a>";
            content += "<a onclick='enableManageLicensePage();'>Manage License</a>";
            content += "<a onclick='enableAssignAdministrationPage();'>Assign Administration</a>";
            content += "<a onclick='enableRevokeAdministrationPage();'>Revoke  Administration</a>";
            content += "<a onclick='enableEnableAccountPage();'>Enable Account</a>";
            content += "<a onclick='enableDisableAccountPage();'>Disable Account</a>";
            content += "</div>";
            content += "<div class='time' id='time_info' onclick='settingMenu();'></div>";
            content += "<div class='user' id='user_info' onclick='settingMenu();'></div>";
        }
        header.innerHTML = content;
    }
}

function addFooter() {
    const footer = getElement("footer");
    if (footer) {
        footer.setAttribute("class", "footer");
        var content = "<span class='copyright'>";
        content += "&copy; Copyright ";
        content += /\d{4}/.exec(Date())[0];
        content += " Powered by MUZTech Consulting";
        content += "</span>";
//        content += "<div class='vgap'></div>";
        footer.innerHTML = content;
    }
}

function preventDefaultFormSubmit(formId) {
    const form = document.getElementById(formId);
    form.addEventListener('submit', function (e) {
        e.preventDefault();
    });
}

function disableOrEnableForm(formId, disable) {
    const form = document.getElementById(formId);
    const formChildren = form.elements;
    for (var i = 0, len = formChildren.length; i < len; ++i) {
        if (formChildren[i].name) {
            formChildren[i].readOnly = disable ? true : false;
            formChildren[i].disabled = disable ? true : false;
        }
    }
}

function getFormData(formId) {
    const form = document.getElementById(formId);
    return new URLSearchParams(new FormData(form));
}

async function httpGetResponse(url) {
    const response = await fetch(url, {
        method: "GET"
                //}).catch((error) =>{
                //console.log("GET FAILED: " + error);
    });
    if (response.status === 404) {
        throw new Error("Not Found");
    }
    return response;
}

async function downloadWebserviceGET(url, downloadName) {
    const response = await httpGetResponse(WS_ROOT + url);
    const blob = await response.blob();
    const blobUrl = window.URL.createObjectURL(blob);

    //
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = downloadName;
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(blobUrl);
}

async function httpPostResponse(url, formData) {
    const response = await fetch(url, {
        method: "POST",
        body: formData
    });
    if (response.status === 404) {
        throw new Error("Not Found");
    }
    return response;
}

async function downloadWebservicePOST(url, formData, downloadName) {
    const response = await httpPostResponse(WS_ROOT + url, formData);
    if (response.status === 404) {
        throw new Error("Not Found");
    }
    const blob = await response.blob();
    const blobUrl = window.URL.createObjectURL(blob);

    //
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = downloadName;
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(blobUrl);
}

async function callWebservicePOST(url, formData, message_box, callback_403) {
    const response = await httpPostResponse(WS_ROOT + url, formData);
    const json = await response.json();
    if (isObject(json)) {
        if (json.code === 403) {
            if (callback_403) {
                try {
                    callback_403();
                } catch (er) {
                    console.log(er);
                }
            }
            if (message_box) {
                message_box.innerHTML = json.message;
                await sleep(1000);
            }
            enableLoginPage();
            return;
        }
    }
    return json;
}

async function callWebserviceGET(url, message_box, callback_403) {
    const response = await httpGetResponse(WS_ROOT + url);
    const json = await response.json();
    if (isObject(json)) {
        if (json.code === 403) {
            if (callback_403) {
                try {
                    callback_403();
                } catch (er) {
                    console.log(er);
                }
                enableLoginPage();
            }
            if (message_box) {
                message_box.innerHTML = json.message;
                await sleep(1000);
            }
            enableLoginPage();
            return;
        }
    }
    return json;
}

async function load_user(messageboxElement) {
    try {
        if (user_json !== null) {
            await set_user();
            return user_json;
        }
        const url = "GetUser";
        const json = await callWebserviceGET(url, messageboxElement, null);
        if (json.code !== 200) {
            if (messageboxElement) {
                messageboxElement.innerHTML = json.message;
            }
            throw new Error("Failed to get user");
        } else {
            set_user_json(json.user);
            await set_user();
        }
        return json;
    } catch (error) {
        throw new Error("Failed to load user");
    }
}

function set_user_json(userjson) {
    user_json = userjson;
}

async function set_user() {
    const userInfoElement = getElement("user_info");
    if (userInfoElement) {
        userInfoElement.innerHTML = user_json.name;
    }
    //messageboxElement.innerHTML = JSON.stringify(json);

    const settingContentAdminElement = getElement('setting-content-admin');
    if (settingContentAdminElement) {
        if (user_json.type === 'Administrator') {
            settingContentAdminElement.style.display = 'block';
        } else {
            settingContentAdminElement.style.display = 'none';
        }
    }
}

async function logout() {
    try {
        const url = "Logout";
        const json = await callWebserviceGET(url, null, null);
        set_user_json(null);
        close_snapshots();
        enableLoginPage();
    } catch (error) {
        console.error(error);
    }
}

function closeMenu() {
    const id = event.target.id;
    if (!id || !id.startsWith("setting-")) {
        if (!id || (id !== "setting-menu" && id !== "user_info" && id !== "time_info")) {
            const settingContent = getElement("setting-content");
            if (settingContent) {
                if (settingContent.style.display !== "none") {
                    settingContent.style.display = "none";
                } else {
                    closeRefreshSnapshotsMenu();
                    closeCloseSnapshotsMenu();
                    closeGoToSnapshotMenu();
                    closePreferencesMenu();
                    closeAccountMenu();
                    closeAdministrationMenu();
                }
            }
        }
    }
}

function closeRefreshSnapshotsMenu() {
    const settingRefreshSnapshotsContent = getElement("setting-refresh-snapshots-content");
    if (settingRefreshSnapshotsContent) {
        if (settingRefreshSnapshotsContent.style.display !== "none") {
            settingRefreshSnapshotsContent.style.display = "none";
        }
    }
}

function closeCloseSnapshotsMenu() {
    const settingCloseSnapshotsContent = getElement("setting-close-snapshots-content");
    if (settingCloseSnapshotsContent) {
        if (settingCloseSnapshotsContent.style.display !== "none") {
            settingCloseSnapshotsContent.style.display = "none";
        }
    }
}

function closeGoToSnapshotMenu() {
    const settingGoToSnapshotsContent = getElement("setting-goto-snapshots-content");
    if (settingGoToSnapshotsContent) {
        if (settingGoToSnapshotsContent.style.display !== "none") {
            settingGoToSnapshotsContent.style.display = "none";
        }
    }
}

function closePreferencesMenu() {
    const settingPreferencesContent = getElement("setting-preferences-content");
    if (settingPreferencesContent) {
        if (settingPreferencesContent.style.display !== "none") {
            settingPreferencesContent.style.display = "none";
        }
    }
}

function closeAccountMenu() {
    const settingAccountContent = getElement("setting-account-content");
    if (settingAccountContent) {
        if (settingAccountContent.style.display !== "none") {
            settingAccountContent.style.display = "none";
        }
    }
}

function closeAdministrationMenu() {
    const settingAdministrationContent = getElement("setting-administration-content");
    if (settingAdministrationContent) {
        if (settingAdministrationContent.style.display !== "none") {
            settingAdministrationContent.style.display = "none";
        }
    }
}

async function settingMenu() {
    const settingContent = getElement("setting-content");
    if (!settingContent) {
        return;
    }
    if (settingContent.style.display === "block") {
        const setting_menue_ani = settingContent.animate([
            {opacity: 1, transform: 'scale(1)'},
            {opacity: 0.5, transform: 'scale(0)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingContent.style.display = "none";
    } else {
        closeRefreshSnapshotsMenu();
        closeCloseSnapshotsMenu();
        closeGoToSnapshotMenu();
        closePreferencesMenu();
        closeAccountMenu();
        closeAdministrationMenu();
        settingContent.style.opacity = "0";
        settingContent.style.display = "block";
        settingContent.style.transformOrigin = "top right";
        const setting_menue_ani = settingContent.animate([
            {opacity: 1, transform: 'scale(0)'},
            {opacity: 1, transform: 'scale(1)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingContent.style.opacity = "1";
    }
}

async function refreshSnapshotsMenu(event) {
    if (event.shiftKey) {
        refreshSnapshotsMenu_without_groups();
    } else {
        refreshSnapshotsMenu_with_groups();
    }
}
async function refreshSnapshotsMenu_with_groups() {
    const settingRefreshSnapshotsContent = getElement("setting-refresh-snapshots-content");
    if (!settingRefreshSnapshotsContent) {
        return;
    }
    if (settingRefreshSnapshotsContent.style.display === "block") {
        const setting_menue_ani = settingRefreshSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(1)'},
            {opacity: 0.5, transform: 'scale(0)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingRefreshSnapshotsContent.style.display = "none";
    } else {
        // &#10139      &bull;       &#9492;
        const snapshotWindows = getOpenSnapshotWindows();
        snapshotWindows.sort((a, b) => a.title.localeCompare(b.title));
        const snapshotGroups = getOpenSnapshotGroups();
        var snapshotGroupRefreshItems = "<a style=\"font-size: 13px;\" onclick='refresh_snapshots();'>" + (snapshotWindows.length > 0 ? "Refresh All Snapshots" : "No Snapshot Open") + "</a>";
        snapshotGroups.forEach((subgroups, group) => {
            snapshotGroupRefreshItems = snapshotGroupRefreshItems + "<a style=\"font-size: 12px; font-weight: bold;\" onclick='refresh_snapshot_group(\"" + group + "\");'>" + group + "</a>";
            if (subgroups) {
                subgroups.sort();
                subgroups.forEach((subgroup, index) => {
                    snapshotGroupRefreshItems = snapshotGroupRefreshItems + "<a style=\"font-size: 12px; font-weight: bold; opacity: 0.75;\" onclick='refresh_snapshot_subgroup(\"" + group + "\", \"" + subgroup + "\");'>&nbsp;&#9492;&nbsp;&nbsp;" + subgroup + "</a>";
                    for (const snapshotWindow of snapshotWindows) {
                        if (snapshotWindow.group === group && snapshotWindow.subgroup === subgroup) {
                            var snapshotTitle = snapshotWindow.title;
                            if (snapshotTitle.length > 20) {
                                snapshotTitle = snapshotTitle.substring(0, 19) + "...";
                            }
                            snapshotGroupRefreshItems = snapshotGroupRefreshItems + "<a style=\"font-size: 11px; opacity: 0.8;\" onclick='refresh_snapshot(\"" + snapshotWindow.name + "\");'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp;" + snapshotTitle + "</a>";
                        }
                    }
                });
            }
        });
        settingRefreshSnapshotsContent.innerHTML = snapshotGroupRefreshItems;
        settingRefreshSnapshotsContent.style.opacity = "0";
        settingRefreshSnapshotsContent.style.display = "block";
        settingRefreshSnapshotsContent.style.transformOrigin = "top right";
        const setting_menue_ani = settingRefreshSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(0)'},
            {opacity: 1, transform: 'scale(1)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingRefreshSnapshotsContent.style.opacity = "1";
        settingRefreshSnapshotsContent.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}
async function refreshSnapshotsMenu_without_groups() {
    const settingRefreshSnapshotsContent = getElement("setting-refresh-snapshots-content");
    if (!settingRefreshSnapshotsContent) {
        return;
    }
    if (settingRefreshSnapshotsContent.style.display === "block") {
        const setting_menue_ani = settingRefreshSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(1)'},
            {opacity: 0.5, transform: 'scale(0)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingRefreshSnapshotsContent.style.display = "none";
    } else {
        const snapshotWindows = getOpenSnapshotWindows();
        snapshotWindows.sort((a, b) => a.title.localeCompare(b.title));
        var snapshtWindowRefreshItems = "<a style=\"font-size: 14x;" + (snapshotWindows.length > 0 ? " pointer-events: none;" : "") + "\"'>" + (snapshotWindows.length > 0 ? "Refresh Snapshot" : "No Snapshot Open") + "</a>";
        snapshotWindows.forEach((snapshotWindow, index) => {
            var snapshotTitle = snapshotWindow.title;
            if (snapshotTitle.length > 20) {
                snapshotTitle = snapshotTitle.substring(0, 19) + "...";
            }
            snapshtWindowRefreshItems = snapshtWindowRefreshItems + "<a style=\"font-size: 12px;\" onclick='refresh_snapshot(\"" + snapshotWindow.name + "\");'>&#10139;&nbsp;&nbsp;" + snapshotTitle + "</a>";
        });
        settingRefreshSnapshotsContent.innerHTML = snapshtWindowRefreshItems;
        settingRefreshSnapshotsContent.style.opacity = "0";
        settingRefreshSnapshotsContent.style.display = "block";
        settingRefreshSnapshotsContent.style.transformOrigin = "top right";
        const setting_menue_ani = settingRefreshSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(0)'},
            {opacity: 1, transform: 'scale(1)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingRefreshSnapshotsContent.style.opacity = "1";
        settingRefreshSnapshotsContent.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}

async function closeSnapshotsMenu(event) {
    if (event.shiftKey) {
        closeSnapshotsMenu_without_groups();
    } else {
        closeSnapshotsMenu_with_groups();
    }
}
async function closeSnapshotsMenu_with_groups() {
    const settingCloseSnapshotsContent = getElement("setting-close-snapshots-content");
    if (!settingCloseSnapshotsContent) {
        return;
    }
    if (settingCloseSnapshotsContent.style.display === "block") {
        const setting_menue_ani = settingCloseSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(1)'},
            {opacity: 0.5, transform: 'scale(0)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingCloseSnapshotsContent.style.display = "none";
    } else {
        const snapshotWindows = getOpenSnapshotWindows();
        snapshotWindows.sort((a, b) => a.title.localeCompare(b.title));
        const snapshotGroups = getOpenSnapshotGroups();
        var snapshotGroupCloseItems = "<a style=\"font-size: 13px;\" onclick='close_snapshots();'>" + (snapshotWindows.length > 0 ? "Close All Snapshots" : "No Snapshot Open") + "</a>";
        snapshotGroups.forEach((subgroups, group) => {
            snapshotGroupCloseItems = snapshotGroupCloseItems + "<a style=\"font-size: 12px; font-weight: bold;\" onclick='close_snapshot_group(\"" + group + "\");'>" + group + "</a>";
            if (subgroups) {
                subgroups.sort();
                subgroups.forEach((subgroup, index) => {
                    snapshotGroupCloseItems = snapshotGroupCloseItems + "<a style=\"font-size: 12px; font-weight: bold; opacity: 0.75;\" onclick='close_snapshot_subgroup(\"" + group + "\", \"" + subgroup + "\");'>&nbsp;<b>&#9492;</b>&nbsp;&nbsp;" + subgroup + "</a>";
                    for (const snapshotWindow of snapshotWindows) {
                        if (snapshotWindow.group === group && snapshotWindow.subgroup === subgroup) {
                            var snapshotTitle = snapshotWindow.title;
                            if (snapshotTitle.length > 20) {
                                snapshotTitle = snapshotTitle.substring(0, 19) + "...";
                            }
                            snapshotGroupCloseItems = snapshotGroupCloseItems + "<a style=\"font-size: 11px; opacity: 0.8;\" onclick='close_snapshot(\"" + snapshotWindow.name + "\");'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp;" + snapshotTitle + "</a>";
                        }
                    }
                });
            }
        });
        settingCloseSnapshotsContent.innerHTML = snapshotGroupCloseItems;
        settingCloseSnapshotsContent.style.opacity = "0";
        settingCloseSnapshotsContent.style.display = "block";
        settingCloseSnapshotsContent.style.transformOrigin = "top right";
        const setting_menue_ani = settingCloseSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(0)'},
            {opacity: 1, transform: 'scale(1)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingCloseSnapshotsContent.style.opacity = "1";
        settingCloseSnapshotsContent.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}
async function closeSnapshotsMenu_without_groups() {
    const settingCloseSnapshotsContent = getElement("setting-close-snapshots-content");
    if (!settingCloseSnapshotsContent) {
        return;
    }
    if (settingCloseSnapshotsContent.style.display === "block") {
        const setting_menue_ani = settingCloseSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(1)'},
            {opacity: 0.5, transform: 'scale(0)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingCloseSnapshotsContent.style.display = "none";
    } else {
        const snapshotWindows = getOpenSnapshotWindows();
        snapshotWindows.sort((a, b) => a.title.localeCompare(b.title));
        var snapshtWindowCloseItems = "<a style=\"font-size: 14x;" + (snapshotWindows.length > 0 ? " pointer-events: none;" : "") + "\"'>" + (snapshotWindows.length > 0 ? "Close Snapshot" : "No Snapshot Open") + "</a>";
        snapshotWindows.forEach((snapshotWindow, index) => {
            var snapshotTitle = snapshotWindow.title;
            if (snapshotTitle.length > 20) {
                snapshotTitle = snapshotTitle.substring(0, 19) + "...";
            }
            snapshtWindowCloseItems = snapshtWindowCloseItems + "<a style=\"font-size: 12px;\" onclick='close_snapshot(\"" + snapshotWindow.name + "\");'>&#10139;&nbsp;&nbsp;" + snapshotTitle + "</a>";
        });
        settingCloseSnapshotsContent.innerHTML = snapshtWindowCloseItems;
        settingCloseSnapshotsContent.style.opacity = "0";
        settingCloseSnapshotsContent.style.display = "block";
        settingCloseSnapshotsContent.style.transformOrigin = "top right";
        const setting_menue_ani = settingCloseSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(0)'},
            {opacity: 1, transform: 'scale(1)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingCloseSnapshotsContent.style.opacity = "1";
        settingCloseSnapshotsContent.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}

async function gotoSnapshotMenu(event) {
    if (event.shiftKey) {
        gotoSnapshotMenu_without_groups();
    } else {
        gotoSnapshotMenu_with_groups();
    }
}
async function gotoSnapshotMenu_with_groups() {
    const settingGoToSnapshotsContent = getElement("setting-goto-snapshots-content");
    if (!settingGoToSnapshotsContent) {
        return;
    }
    if (settingGoToSnapshotsContent.style.display === "block") {
        const setting_menue_ani = settingGoToSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(1)'},
            {opacity: 0.5, transform: 'scale(0)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingGoToSnapshotsContent.style.display = "none";
    } else {
        const snapshotWindows = getOpenSnapshotWindows();
        snapshotWindows.sort((a, b) => a.title.localeCompare(b.title));
        const snapshotGroups = getOpenSnapshotGroups();
        var snapshtWindowGoToItems = "<a style=\"font-size: 13px;" + (snapshotWindows.length > 0 ? " pointer-events: none;" : "") + "\"'>" + (snapshotWindows.length > 0 ? "Go To Snapshot" : "No Snapshot Open") + "</a>";
        snapshotGroups.forEach((subgroups, group) => {
            snapshtWindowGoToItems = snapshtWindowGoToItems + "<a style=\"font-size: 12px; font-weight: bold; pointer-events: none;\">" + group + "</a>";
            if (subgroups) {
                subgroups.sort();
                subgroups.forEach((subgroup, index) => {
                    snapshtWindowGoToItems = snapshtWindowGoToItems + "<a style=\"font-size: 12px;  font-weight: bold; opacity: 0.75; pointer-events: none;\">&nbsp;<b>&#9492;</b>&nbsp;&nbsp;" + subgroup + "</a>";
                    for (const snapshotWindow of snapshotWindows) {
                        if (snapshotWindow.group === group && snapshotWindow.subgroup === subgroup) {
                            var snapshotTitle = snapshotWindow.title;
                            if (snapshotTitle.length > 20) {
                                snapshotTitle = snapshotTitle.substring(0, 19) + "...";
                            }
                            snapshtWindowGoToItems = snapshtWindowGoToItems + "<a style=\"font-size: 11px; opacity: 0.8;\" onclick='goto_snapshot_window(\"" + snapshotWindow.name + "\");'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp;" + snapshotTitle + "</a>";
                        }
                    }
                });
            }
        });
        settingGoToSnapshotsContent.innerHTML = snapshtWindowGoToItems;
        settingGoToSnapshotsContent.style.opacity = "0";
        settingGoToSnapshotsContent.style.display = "block";
        settingGoToSnapshotsContent.style.transformOrigin = "top right";
        const setting_menue_ani = settingGoToSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(0)'},
            {opacity: 1, transform: 'scale(1)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingGoToSnapshotsContent.style.opacity = "1";
        settingGoToSnapshotsContent.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}
async function gotoSnapshotMenu_without_groups() {
    const settingGoToSnapshotsContent = getElement("setting-goto-snapshots-content");
    if (!settingGoToSnapshotsContent) {
        return;
    }
    if (settingGoToSnapshotsContent.style.display === "block") {
        const setting_menue_ani = settingGoToSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(1)'},
            {opacity: 0.5, transform: 'scale(0)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingGoToSnapshotsContent.style.display = "none";
    } else {
        const snapshotWindows = getOpenSnapshotWindows();
        snapshotWindows.sort((a, b) => a.title.localeCompare(b.title));
        var snapshtWindowGoToItems = "<a style=\"font-size: 14x;" + (snapshotWindows.length > 0 ? " pointer-events: none;" : "") + "\"'>" + (snapshotWindows.length > 0 ? "Go To Snapshot" : "No Snapshot Open") + "</a>";
        snapshotWindows.forEach((snapshotWindow, index) => {
            var snapshotTitle = snapshotWindow.title;
            if (snapshotTitle.length > 20) {
                snapshotTitle = snapshotTitle.substring(0, 19) + "...";
            }
            snapshtWindowGoToItems = snapshtWindowGoToItems + "<a style=\"font-size: 12px;\" onclick='goto_snapshot_window(\"" + snapshotWindow.name + "\");'>&#10139;&nbsp;&nbsp;" + snapshotTitle + "</a>";
        });
        settingGoToSnapshotsContent.innerHTML = snapshtWindowGoToItems;
        settingGoToSnapshotsContent.style.opacity = "0";
        settingGoToSnapshotsContent.style.display = "block";
        settingGoToSnapshotsContent.style.transformOrigin = "top right";
        const setting_menue_ani = settingGoToSnapshotsContent.animate([
            {opacity: 1, transform: 'scale(0)'},
            {opacity: 1, transform: 'scale(1)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingGoToSnapshotsContent.style.opacity = "1";
        settingGoToSnapshotsContent.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}

async function preferencesMenu() {
    const settingPreferencessContent = getElement("setting-preferences-content");
    if (!settingPreferencessContent) {
        return;
    }
    if (settingPreferencessContent.style.display === "block") {
        const setting_menue_ani = settingPreferencessContent.animate([
            {opacity: 1, transform: 'scale(1)'},
            {opacity: 0.5, transform: 'scale(0)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingPreferencessContent.style.display = "none";
    } else {
        settingPreferencessContent.style.opacity = "0";
        settingPreferencessContent.style.display = "block";
        settingPreferencessContent.style.transformOrigin = "top right";
        const setting_menue_ani = settingPreferencessContent.animate([
            {opacity: 1, transform: 'scale(0)'},
            {opacity: 1, transform: 'scale(1)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingPreferencessContent.style.opacity = "1";
    }
}

async function accountMenu() {
    const settingAccountsContent = getElement("setting-account-content");
    if (!settingAccountsContent) {
        return;
    }
    if (settingAccountsContent.style.display === "block") {
        const setting_menue_ani = settingAccountsContent.animate([
            {opacity: 1, transform: 'scale(1)'},
            {opacity: 0.5, transform: 'scale(0)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingAccountsContent.style.display = "none";
    } else {
        settingAccountsContent.style.opacity = "0";
        settingAccountsContent.style.display = "block";
        settingAccountsContent.style.transformOrigin = "top right";
        const setting_menue_ani = settingAccountsContent.animate([
            {opacity: 1, transform: 'scale(0)'},
            {opacity: 1, transform: 'scale(1)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingAccountsContent.style.opacity = "1";
    }
}

async function administrationMenu() {
    const settingAdministrationsContent = getElement("setting-administration-content");
    if (!settingAdministrationsContent) {
        return;
    }
    if (settingAdministrationsContent.style.display === "block") {
        const setting_menue_ani = settingAdministrationsContent.animate([
            {opacity: 1, transform: 'scale(1)'},
            {opacity: 0.5, transform: 'scale(0)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingAdministrationsContent.style.display = "none";
    } else {
        settingAdministrationsContent.style.opacity = "0";
        settingAdministrationsContent.style.display = "block";
        settingAdministrationsContent.style.transformOrigin = "top right";
        const setting_menue_ani = settingAdministrationsContent.animate([
            {opacity: 1, transform: 'scale(0)'},
            {opacity: 1, transform: 'scale(1)'}
        ], {duration: 300, easing: 'ease-in-out'});
        await setting_menue_ani.finished;
        settingAdministrationsContent.style.opacity = "1";
    }
}