var snapshot_layout = "portrait"; /* (portrait |  landscape | full_screen | custom ) */
var snapshot_arrangement = "symbol_row"; /* (symbol_row |  symbol_column ) */
let detectReloadSwipe = true;
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_width = 0.5;
const crosshair_height = 0.5;
const crosshair_color_r = 255;
const crosshair_color_g = 255;
const crosshair_color_b = 255;
const crosshair_color_a = 0.5;
const crosshair_touch_delay = 500;
const crosshair = "<script> var sh_crosshair_h; var sh_crosshair_v; var mouse_down = false; let touchTimer; const longTouchDelay = " + crosshair_touch_delay + "; 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((e.shiftKey ? (" + crosshair_width + " * -1) : touchStartY), (e.metaKey ? (" + crosshair_height + " * -1) : 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 = (e.metaKey ? (" + crosshair_height + " * -1) : getTouchX(e)); var h = (e.shiftKey ? (" + crosshair_width + " * -1) : 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(" + (crosshair_width * -1) + ", " + (crosshair_height * -1) + "); }); 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); document.addEventListener('DOMContentLoaded', function() {move_snapshot_crosshair_to(" + (crosshair_width * -1) + ", " + (crosshair_height * -1) + ");});</script> <style> #sh-crosshair-h{ width:100%; height:" + crosshair_height + "px; margin-top:-1px; top: 0px; left: 0px; } #sh-crosshair-v{ height:100%; width:" + crosshair_width + "px; margin-left:-1px; left: 0px; top: 0px; } .sh-crosshair{ position:fixed; padding: 0px; margin: 0px; background-color: rgba(" + crosshair_color_r + "," + crosshair_color_g + "," + crosshair_color_b + "," + crosshair_color_a + "); } </style> <div id='sh-crosshair-h' class='sh-crosshair'></div> <div id='sh-crosshair-v' class='sh-crosshair'></div>";
const reloadDiv = "<div id='ReloadLink' style='display: none; position: absolute; z-index: 50000; top: 0px; padding: 5px; margin: 0 auto; cursor: pointer; width: 100%; text-align: center; opacity: 0.5; background-color: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 12px;'>RELOAD</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 load_snapshot_arrangement_element(select_id, selected_arrangement) {
    const arrangementElement = getElement(select_id);
    arrangementElement.innerHTML = "";
    add_arrangement_option(arrangementElement, "Symbol Row", "symbol_row", (selected_arrangement === "symbol_row"));
    add_arrangement_option(arrangementElement, "Symbol Column", "symbol_column", (selected_arrangement === "symbol_column"));
}

function add_arrangement_option(arrangement_element, name, value, selected) {
    var optionElement = document.createElement('option');
    optionElement.innerHTML = name;
    optionElement.value = value;
    optionElement.selected = selected;
    arrangement_element.appendChild(optionElement);
}

function set_snapshot_arrangement(arrangement) {
    snapshot_arrangement = arrangement;
}

function load_snapshot_layout_element(select_id, selected_layout, filter_mobile_options) {
    const layoutElement = getElement(select_id);
    layoutElement.innerHTML = "";
    if (!filter_mobile_options || !is_mobile_device) {
        add_layout_option(layoutElement, "Portrait", "portrait", (selected_layout === "portrait"));
        add_layout_option(layoutElement, "Landscape", "landscape", (selected_layout === "landscape"));
    }
    add_layout_option(layoutElement, "Full Screen", "full_screen", (is_mobile_device ? true : (selected_layout === "full_screen")));
    if (!filter_mobile_options || !is_mobile_device) {
        add_layout_option(layoutElement, "Custom", "custom", (selected_layout === "custom"));
    }
}

function add_layout_option(layout_element, name, value, selected) {
    var optionElement = document.createElement('option');
    optionElement.innerHTML = name;
    optionElement.value = value;
    optionElement.selected = selected;
    layout_element.appendChild(optionElement);
}


function set_snapshot_layout(layout) {
    snapshot_layout = layout;
    set_snapshot_custom_size_div('custom_size_div', layout);
}

function set_snapshot_custom_size_div(layout_custom_size_div_id, layout) {
    var layout_custom_size_div = getElement(layout_custom_size_div_id);
    if (layout === "custom") {
        layout_custom_size_div.style.display = "block";
    } else {
        layout_custom_size_div.style.display = "none";
    }
}

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

function openSnapshotWindow() {
    return openSnapshotWindowOfLayout(snapshot_layout);
}


function openSnapshotWindowOfLayout(snapshot_layout) {
    var popup_width;
    var popup_height;
    if (typeof snapshot_layout !== 'undefined') {
        if (snapshot_layout === "portrait") { // same as app size
            popup_width = 400;
            popup_height = 600;
        } else if (snapshot_layout === "landscape") {
            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);
            } else {
                popup_width = 1200;
                popup_height = 800;
            }
        } else if (snapshot_layout === "full_screen") {
            popup_width = window.screen.width;
            popup_height = window.screen.height;
        } else if (snapshot_layout === "custom") {
            var custom_width = getElement('custom_width');
            var custom_height = getElement('custom_height');
            popup_width = custom_width.value;
            popup_height = custom_height.value;
        } else {
            popup_width = window.screen.width;
            popup_height = window.screen.height;
        }
    } else {
        popup_width = 1200;
        popup_height = 800;
    }
    return openSnapshotWindowWithSize(popup_width, popup_height);
}

function openSnapshotWindowWithSize(popup_width, popup_height) {
    var x;
    var y;

    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);
    }

    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);
    setSnapshotWindowStyle(snapshotWindow);
    return snapshotWindow;
}

function setSnapshotWindowStyle(snapshotWindow) {
    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';
    snapshotWindow.document.body.style.margin = 0;
    snapshotWindow.document.body.style.padding = 0;
}

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

async function setSnapshots(snapshotWindow, snapshots, arrangement, message_box_id) {
    try {
        if (snapshotWindow.closed) {
            return;
        }
        const snapshotItems = new Array();
        const snapshotTimeframes = new Array();
        for (var 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);
            }
        }
        const arrangedSnapshots = new Array();
        var snapshotHeight;
        var snapshotWidth;
        if (arrangement === 'symbol_row') {
            for (var i = 0; i < snapshotItems.length; i++) {
                const snapshotItem = snapshotItems[i];
                
                for (var j = 0; j < snapshots.length; j++) {
                    if (snapshotItem === snapshots[j].item) {
                        arrangedSnapshots.push(snapshots[j]);
                    }
                }
            }
            snapshotHeight = (100 / snapshotItems.length);
            snapshotWidth = (100 / snapshotTimeframes.length);
        } else if (arrangement === 'symbol_column') {
            for (var i = 0; i < snapshotTimeframes.length; i++) {
                const snapshotTimeframe = snapshotTimeframes[i];
                
                for (var j = 0; j < snapshots.length; j++) {
                    if (snapshotTimeframe === snapshots[j].timeframe) {
                        arrangedSnapshots.push(snapshots[j]);
                    }
                }
            }
            snapshotHeight = (100 / snapshotTimeframes.length);
            snapshotWidth = (100 / snapshotItems.length);
        } else {
            snapshotWindow.document.body.innerHTML = createSnapshotAltContent("Arrangement is not supported: " + arrangement);
            return;
        }

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

        for (i = 0; i < arrangedSnapshots.length; i++) {
            const snapshotObject = arrangedSnapshots[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(" + (arrangedSnapshots.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 + (format === "svg" && ((arrangedSnapshots.length === 1 && include_crosshair_on_single_svg) || (arrangedSnapshots.length > 1 && include_crosshair_on_multiple_svg) ? crosshair : ""));
                snapshot_frame.focus();
            }
        }

        snapshotWindow.document.body.innerHTML = reloadDiv + snapshotWindow.document.body.innerHTML;

        add_window_events(snapshotWindow);
    } catch (error) {
        console.log(error);
        handleError("Failed to set snapshot window. " + error, message_box_id, false);
        if (snapshotWindow && !snapshotWindow.closed) {
            snapshotWindow.close();
        }
    }
}

function add_window_events(snapshot_window) {
    snapshot_window.document.addEventListener("keydown", (event) => {
        if ((event.metaKey || event.ctrlKey) && event.key === 'r') {
            event.preventDefault();
            snapshot_reload_request(snapshot_window.name);
        } else if ((event.metaKey || event.ctrlKey) && event.key === 'w') {
            event.preventDefault();
            snapshot_close_request(snapshot_window.name);
        }
    });

    const iframes = snapshot_window.document.body.querySelectorAll('iframe');
    iframes.forEach(snapshot_frame => {
        if (snapshot_frame.contentWindow) {
            add_reload_event(snapshot_window, snapshot_frame);
        }
    });

    let reloadLink = snapshot_window.document.getElementById('ReloadLink');
    snapshot_window.document.addEventListener('mouseleave', (event) => {
        if (event.clientY > 0) {
            return;
        }
        reloadLink.style.setProperty('display', 'block');
        const reloadLinkTimer = setTimeout(() => {
            reloadLink.style.setProperty('display', 'none');
        }, 3000);
    });


    reloadLink.addEventListener('click', () => {
        snapshot_reload_request(snapshot_window.name);
    });

    add_pull_to_reload_events(snapshot_window);
}

function add_reload_event(snapshot_window, snapshot_frame) {
    snapshot_frame.addEventListener("load", () => {
        if (snapshot_frame.contentWindow) {
            snapshot_frame.contentWindow.document.body.addEventListener("keydown", (event) => {
                if ((event.metaKey || event.ctrlKey) && event.key === 'r') {
                    event.preventDefault();
                    snapshot_reload_request(snapshot_window.name);
                } else if ((event.metaKey || event.ctrlKey) && (event.key === 'w')) {
                    event.preventDefault();
                    snapshot_close_request(snapshot_window.name);
                }
            });

            snapshot_frame.contentWindow.document.addEventListener("wheel", function (e) {
                if (detectReloadSwipe) {
                    let ySwipeDirection = ySwipeDetection(e);
                    if (ySwipeDirection < 0) {
                        detectReloadSwipe = false;
                        snapshot_reload_request(snapshot_window.name);

                        setTimeout(() => {
                            detectReloadSwipe = true;
                        }, 1000);
                    }
                }
            });
        }
    });
}

function add_pull_to_reload_events(snapshot_window) {
    let pullStartY = 0;
    let pullStarted = false;

    snapshot_window.document.body.addEventListener('touchstart', (e) => {
        if (window.scrollY === 0 && e.touches.length === 2) {
            pullStarted = true;
            pullStartY = e.touches[0].pageY;
        } else {
            pullStarted = false;
            pullStartY = 0;
        }
    });

    snapshot_window.document.addEventListener('touchmove', (e) => {
        if (pullStarted) {
            if (window.scrollY === 0 && e.touches[0].pageY - pullStartY > 170) {
                pullStarted = false;
                pullStartY = 0;
                snapshot_reload_request(snapshot_window.name);
            }
        }
    });

    snapshot_window.document.addEventListener('touchend', (e) => {
        pullStarted = false;
        pullStartY = 0;
    });
}

function snapshot_reload_request(snapshot_window_name) {
    window.parent.postMessage('SNPReload:' + snapshot_window_name, '*');
}

function snapshot_close_request(snapshot_window_name) {
    window.parent.postMessage('SNPClose:' + snapshot_window_name, '*');
}