var snapshot_layout = "x"; /* (x |  y | z) */
const include_reload_time_in_title = true;
const include_time_elapsed_in_title = true;
const clear_snapshot_before_reload = true;
const snapshot_message_text_placeholder = 'SNAPSHOT-MESSAGE-TEXT-PLACEHOLDER';
const snapshot_message_html = '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes"/><div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">' + snapshot_message_text_placeholder + '</div>';
const snapshot_wait_content = '<style>.ssloader-container {display: inline-block; position: absolute; padding: 0px; margin: 0px; top: calc(33%); color: #feb337; clear: both;} .ssloader {float: right; border-radius: 100%; border-right: 10px solid; border-left: 10px solid #feb337; border-bottom: 1.0px solid; border-top: 1.0px solid; width: 5px; height: 5px; background-color: inherit; -webkit-animation: spin 550ms linear infinite; animation: spin 750ms linear infinite;} @-webkit-keyframes spin {100% {-webkit-transform: rotate(360deg);} 0% {-webkit-transform: rotate(0deg);}}</style><div class="ssloader-container"><div class="ssloader"></div></div>';
const include_crosshair_on_single_svg = true;
const include_crosshair_on_multiple_svg = true;
const crosshair = "<script> var sh_crosshair_h; var sh_crosshair_v; var mouse_down = false; let touchTimer; const longTouchDelay = 300; const longTouchTolerance = 5; let touchStartX; let touchEndY; function handleTouchStart(e) { touchStartX = getTouchX(e); touchStartY = getTouchY(e); touchTimer = setTimeout(() => { mouse_down = true; move_snapshot_crosshair_to(touchStartY, touchStartX); }, longTouchDelay); } function handleTouchEnd() { clearTimeout(touchTimer); mouse_down = false; } function handleTouchCancel() { clearTimeout(touchTimer); mouse_down = false; } function getTouchX(e) { return e.touches && e.touches[0] ? e.touches[0].clientX : e.clientX; } function getTouchY(e) { return e.touches && e.touches[0] ? e.touches[0].clientY : e.clientY; } function move(e) { var v = getTouchX(e); var h = getTouchY(e); if(!mouse_down) { if(touchStartX && touchStartY) { if(Math.abs(v-touchStartX) > longTouchTolerance || Math.abs(h-touchStartY) > longTouchTolerance) { handleTouchCancel(); } } return; } move_snapshot_crosshair_to(h, v); }; function move_snapshot_crosshair_to(h, v) { if(!sh_crosshair_v || sh_crosshair_h) { sh_crosshair_h = document.getElementById('sh-crosshair-h'); sh_crosshair_v = document.getElementById('sh-crosshair-v'); } sh_crosshair_h.style.setProperty('top', h + 'px'); sh_crosshair_v.style.setProperty('left', v + 'px'); } document.addEventListener('dblclick', function() { move_snapshot_crosshair_to(0, 0); }); document.addEventListener('mousedown', handleTouchStart); document.addEventListener('mouseup', handleTouchEnd); document.addEventListener('touchstart', handleTouchStart); document.addEventListener('touchend', handleTouchEnd); document.addEventListener('touchcancel', handleTouchCancel); document.addEventListener('mousemove', move); document.addEventListener('touchmove', move); </script> <style> #sh-crosshair-h{ width:100%; height:1px; margin-top:-1px; top: 0px; left: 0px; } #sh-crosshair-v{ height:100%; width:1px; margin-left:-1px; left: 0px; top: 0px; } .sh-crosshair{ position:fixed; padding: 0px; margin: 0px; background-color: rgba(100,100,100,0.8); } </style> <div id='sh-crosshair-h' class='sh-crosshair'></div> <div id='sh-crosshair-v' class='sh-crosshair'></div>";

function load_snapshot_reload_delay_element(select_id, selected_reload_delay) {
    const reloadDelayElement = getElement(select_id);
    reloadDelayElement.innerHTML = "";
    create_snapshot_reload_delay_option(reloadDelayElement, 'OFF', -1, (-1 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '30 Seconds', 30000, (30000 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '45 Seconds', 45000, (45000 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '60 Seconds', 60000, (60000 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '02 Minutes', 120000, (120000 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '03 Minutes', 180000, (180000 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '05 Minutes', 300000, (300000 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '10 Minutes', 600000, (600000 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '15 Minutes', 900000, (900000 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '30 Minutes', 1800000, (1800000 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '45 Minutes', 2700000, (2700000 === selected_reload_delay));
    create_snapshot_reload_delay_option(reloadDelayElement, '60 Minutes', 3600000, (3600000 === selected_reload_delay));
}

function create_snapshot_reload_delay_option(reloadDelayElement, name, value, selected) {
    var optionElement = document.createElement('option');
    optionElement.innerHTML = name;
    optionElement.value = value;
    if (selected) {
        optionElement.selected = true;
    }
    reloadDelayElement.appendChild(optionElement);
}

function set_snapshot_layout(layout) {
    snapshot_layout = layout;
}

function createSnapshotAltContent(alt_content) {
    return snapshot_message_html.replace(snapshot_message_text_placeholder, alt_content);
}

function openSnapshotWindow() {
    var popup_width;
    var popup_height;
    var x;
    var y;
    var msg_margin;
    if (typeof snapshot_layout !== 'undefined') {
        if (snapshot_layout === "x") { // same as popup
            popup_width = 400;
            popup_height = 600;
            if (window.screen.width && window.screen.height) {
                x = (window.screen.width / 2) - (popup_width / 2);
                y = (window.screen.height / 2) - (popup_height / 2);
            } else {
                x = (window.innerWidth / 2) - (popup_width / 2);
                y = (window.innerHeight / 2) - (popup_height / 2);
            }
            msg_margin = popup_width / 5;
        } else if (snapshot_layout === "y") {
            if (window.screen.width && window.screen.height) {
                popup_width = window.screen.width - (window.screen.width / 2);
                popup_height = window.screen.height - (window.screen.height / 2);
                x = (window.screen.width / 2) - (popup_width / 2);
                y = (window.screen.height / 2) - (popup_height / 2);
            } else {
                popup_width = 1200;
                popup_height = 800;
                x = (window.innerWidth / 2) - (popup_width / 2);
                y = window.innerHeight / 2 - (popup_height / 2);
            }
            msg_margin = popup_width / 2.75;
        } else {
            popup_width = window.screen.width;
            popup_height = window.screen.height;
            x = 0;
            y = 0;
            msg_margin = popup_width / 2;
        }
    } else {
        popup_width = 1200;
        popup_height = 800;
        x = 0;
        y = 0;
        msg_margin = popup_width / 2.75;
    }

    const popupParams = "scrollbars=no,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=" + popup_width + ",height=" + popup_height + ",left=" + x + ",top=" + y;
    const popupName = "SNP" + Date.now();
    const snapshotWindow = window.open('', popupName, popupParams);
    snapshotWindow.document.body.style.background = '#0a1b2c';
    snapshotWindow.document.body.style.color = '#7c7c7c';
    snapshotWindow.document.body.style.fontSize = '18px';
    snapshotWindow.document.body.style.fontFamily = 'Arial, Helvetica, sans-serif';
    return snapshotWindow;
}

function closeSnapshotWindowFunction(snapshotWindow) {
    if (snapshotWindow && !snapshotWindow.closed) {
        return  function closeSnapshotWindow() {
            if (snapshotWindow) {
                snapshotWindow.close();
            }
        };
    }
}

async function setSnapshots(snapshotWindow, snapshots, message_box_id) {
    try {
        if (snapshotWindow.closed) {
            return;
        }
        var snapshotItem = '';
        const snapshotItems = new Array();
        const snapshotTimeframes = new Array();
        var snapshotTimeframe = 0;
        var i = 0;
        for (i = 0; i < snapshots.length; i++) {
            if (!snapshotItems.includes(snapshots[i].item)) {
                snapshotItems.push(snapshots[i].item);
            }
            if (!snapshotTimeframes.includes(snapshots[i].timeframe)) {
                snapshotTimeframes.push(snapshots[i].timeframe);
            }
            if (snapshotItems.length === 1)
                if (snapshotItem !== null) {
                    if (i === 0) {
                        snapshotItem = snapshots[i].item;
                    } else if (snapshotItem !== snapshots[i].item) {
                        snapshotItem = null;
                    }
                }
            if (snapshotTimeframe !== null) {
                if (i === 0) {
                    snapshotTimeframe = snapshots[i].timeframe;
                } else if (snapshotTimeframe !== snapshots[i].timeframe) {
                    snapshotTimeframe = null;
                }
            }
        }
        const snapshotWidth = (100 / snapshotTimeframes.length);
        const snapshotHeight = (100 / snapshotItems.length);

        var title = snapshotItems.length === 1 ? snapshots[0].item : "";
        title += snapshotTimeframes.length === 1 ? ((snapshotItems.length === 1 ? " - " : "") + snapshots[0].timeframe) : "";
        if (title === "") {
            title = "Combo";
        }
        snapshotWindow.document.body.style.margin = 0;
        snapshotWindow.document.body.style.padding = 0;
        snapshotWindow.document.title = title;

        for (i = 0; i < snapshots.length; i++) {
            const snapshotObject = snapshots[i];
            var encoded = snapshotObject.encoded;
            var data = snapshotObject.data;

            var format;
            if (snapshotObject.format.endsWith("png")) {
                format = "png";
            } else if (snapshotObject.format.endsWith("jpeg")) {
                format = "jpeg";
            } else if (snapshotObject.format.endsWith("svg")) {
                format = "svg";
            } else if (snapshotObject.format.endsWith("html")) {
                format = "html";
            } else {
                snapshotWindow.document.body.innerHTML = createSnapshotAltContent("Format is not supported in web application. " + snapshotObject.format);
                return;
            }

            //
            if (snapshotObject.compressed) {
                if (!encoded) {
                    snapshotWindow.document.body.innerHTML = createSnapshotAltContent("Compressed document is not encoded. " + format);
                    return;
                }

                if (format === "png" || format === "jpeg") {
                    snapshotWindow.document.body.innerHTML = createSnapshotAltContent(format + "'s compression is not supported");
                    return;
                }
                
                if(!isCompressionSupported()) {
                    snapshotWindow.document.body.innerHTML = createSnapshotAltContent("Compression is not supported on your device or browser. You can only use PNG format.");
                    return;
                }

                await unzipGzipString(data, encoded).then((unzipped) => {
                    data = unzipped;
                    encoded = false;
                }).catch((error) => {
                    console.error("Error unzipping:", error);
                    throw error;
                });
            }

            if (!snapshotObject.encoded) {
                if (format === "png" || format === "jpeg") {
                    snapshotWindow.document.body.innerHTML = createSnapshotAltContent(format + " is not encoded");
                    return;
                }
            }

            var snapshot_element_id = 'snapshot_' + i;
            if (format === "png" || format === "jpeg") {
                const img = "<img id='" + snapshot_element_id + "' src='data:image/" + (format === "png" ? "png" : "jpeg") + ";base64, " + data + "' style='overflow:hidden; margin:0; padding:0; height:" + snapshotHeight + "%;width:" + snapshotWidth + "%; border:0;' height='" + snapshotHeight + "%' width='" + snapshotWidth + "%'  onMouseOver=\"this.style.transform='scaleY(1) scaleX(1)'\" onMouseOut=\"this.style.transform='scaleY(1) scaleX(1)'\"/>";
                snapshotWindow.document.body.innerHTML = i === 0 ? img : (snapshotWindow.document.body.innerHTML + img);
                const snapshot_image = snapshotWindow.document.getElementById(snapshot_element_id);
                snapshot_image.focus();
            } else if (format === "svg" || format === "html") {
                if (encoded) {
                    data = window.atob(data);
                }
                var frame = "<iframe id='" + snapshot_element_id + "' style='overflow:hidden; margin:0; padding:0; height:" + snapshotHeight + "%;width:" + snapshotWidth + "%; border:0;' height='" + snapshotHeight + "%' width='" + snapshotWidth + "%'";
                if (format === "html") {
                    frame += " onMouseOver=\"this.style.transform='scaleY(" + (snapshots.length > 1 ? "0.9875" : "1") + ") scaleX(1)'\" onMouseOut=\"this.style.transform='scaleY(1) scaleX(1)'\"";
                }
                frame += "></iframe>";
                snapshotWindow.document.body.innerHTML = i === 0 ? frame : (snapshotWindow.document.body.innerHTML + frame);
                const snapshot_frame = snapshotWindow.document.getElementById(snapshot_element_id);
                snapshot_frame.srcdoc = data + ((snapshots.length === 1 && include_crosshair_on_single_svg) || (snapshots.length > 1 && include_crosshair_on_multiple_svg) ? crosshair : "");
                snapshot_frame.focus();
            }
        }
    } catch (error) {
        console.log(error);
        handleError("Failed to set snapshot window. " + error, message_box_id, false);
        if (snapshotWindow && !snapshotWindow.closed) {
            snapshotWindow.close();
        }
    }
}