/**
 * @author Usman Naeem
 */
var watch_list_name_map = new Map();
var opened_edit_watch_list_record_id = -1;
var opened_delete_watch_list_record_id = -1;

function enableWatchListPage() {
    addLoader();
    setPage("watch_list_page");
    addHeader(true);
    addFooter();
    closeWatchListActionsConfirmBox();
    const messageboxElement = getElement("watch_list_message_box");
    messageboxElement.innerHTML = "";
    opened_edit_watch_list_record_id = -1;
    opened_delete_watch_list_record_id = -1;

    //
    load_user().then(() => {
        load_watch_list(messageboxElement).then(() => {
            removeLoader();
            load_watch_list_div_list();
        }).catch(error => {
            handleError(error, "watch_list_message_box", true);
            return;
        });
    }).catch(error => {
        handleError(error, "watch_list_message_box", true);
        enableLoginPage();
        return;
    });
}

async function load_watch_list(messageboxElement) {
    try {
        const url = "GetSnapshotWatchListRecords";
        const json = await callWebserviceGET(url, messageboxElement, null);
        if (json.code !== 200) {
            if (messageboxElement) {
                messageboxElement.innerHTML = json.message;
            }
        } else {
            await set_watch_list(json.user_snapshot_watch_list_records);
        }
    } catch (error) {
        console.log(error);
        throw new Error("Failed to load watch list");
    }
}

function set_watch_list(watch_list_json) {
    watch_list_name_map.clear();
    const watchListMap = new Map();
    watch_list_json.forEach(record => {
        if (!watch_list_name_map.has(record.name)) {
            watch_list_name_map.set(record.name, record);
        }
    });

    load_watch_list_tags();
    clear_watch_list_filter('opts');
}

function load_watch_list_tags() {
    const tag1Array = new Array();
    const tag2Array = new Array();
    const tag3Array = new Array();

    watch_list_name_map.forEach(function (record, name) {
        if (record.tag_1 && record.tag_1.length > 0) {
            if (!tag1Array.includes(record.tag_1.toUpperCase())) {
                tag1Array.push(record.tag_1.toUpperCase());
            }
        }
        if (record.tag_2 && record.tag_2.length > 0) {
            if (!tag2Array.includes(record.tag_2.toUpperCase())) {
                tag2Array.push(record.tag_2.toUpperCase());
            }
        }
        if (record.tag_3 && record.tag_3.length > 0) {
            if (!tag3Array.includes(record.tag_3.toUpperCase())) {
                tag3Array.push(record.tag_3.toUpperCase());
            }
        }
    });

    tag1Array.sort((a, b) => {
        const textA = a.toLowerCase();
        const textB = b.toLowerCase();
        if (textA < textB) {
            return -1;
        }
        if (textA > textB) {
            return 1;
        }
        return 0;
    });

    load_watch_list_tag_element(tag1Array, "watch_list_filter_tag_1", "#1 none");
    load_watch_list_tag_element(tag2Array, "watch_list_filter_tag_2", "#2 none");
    load_watch_list_tag_element(tag3Array, "watch_list_filter_tag_3", "#3 none");
}
//
//function load_watch_list_tags222(watch_list_json) {
//    const tag1Array = new Array();
//    const tag2Array = new Array();
//    const tag3Array = new Array();
//
//    watch_list_json.forEach(record => {
//        if (record.tag_1 && record.tag_1.length > 0) {
//            if (!tag1Array.includes(record.tag_1.toUpperCase())) {
//                tag1Array.push(record.tag_1.toUpperCase());
//            }
//        }
//        if (record.tag_2 && record.tag_2.length > 0) {
//            if (!tag2Array.includes(record.tag_2.toUpperCase())) {
//                tag2Array.push(record.tag_2.toUpperCase());
//            }
//        }
//        if (record.tag_3 && record.tag_3.length > 0) {
//            if (!tag3Array.includes(record.tag_3.toUpperCase())) {
//                tag3Array.push(record.tag_3.toUpperCase());
//            }
//        }
//    });
//
//    tag1Array.sort((a, b) => {
//        const textA = a.toLowerCase();
//        const textB = b.toLowerCase();
//        if (textA < textB) {
//            return -1;
//        }
//        if (textA > textB) {
//            return 1;
//        }
//        return 0;
//    });
//
//    load_watch_list_tag_element(tag1Array, "watch_list_filter_tag_1", "Tag #1");
//    load_watch_list_tag_element(tag2Array, "watch_list_filter_tag_2", "Tag #2");
//    load_watch_list_tag_element(tag3Array, "watch_list_filter_tag_3", "Tag #3");
//}

function load_watch_list_tag_element(tag_array, filter_tag_id, first_value) {
    tag_array.sort((a, b) => {
        const textA = a.toLowerCase();
        const textB = b.toLowerCase();
        if (textA < textB) {
            return -1;
        }
        if (textA > textB) {
            return 1;
        }
        return 0;
    });

    const filter_tag_element = getElement(filter_tag_id);
    filter_tag_element.innerHTML = "";
    var optionElement = document.createElement('option');
    optionElement.value = "";
    optionElement.innerHTML = first_value;
    filter_tag_element.appendChild(optionElement);
    tag_array.forEach(tag => {
        optionElement = document.createElement('option');
        optionElement.value = tag;
        optionElement.innerHTML = tag;
        filter_tag_element.appendChild(optionElement);
    });
    set_watch_list_select_filter(filter_tag_element);
}

function clear_watch_list_filter(type) {
    if (type === 'tags') {
        const filter_tag_1_element = getElement("watch_list_filter_tag_1");
        filter_tag_1_element.selectedIndex = 0;
        set_watch_list_select_filter(filter_tag_1_element);
        const filter_tag_2_element = getElement("watch_list_filter_tag_2");
        filter_tag_2_element.selectedIndex = 0;
        set_watch_list_select_filter(filter_tag_2_element);
        const filter_tag_3_element = getElement("watch_list_filter_tag_3");
        filter_tag_3_element.selectedIndex = 0;
        set_watch_list_select_filter(filter_tag_3_element);
    } else if (type === 'opts') {
        const watch_list_filter_name = getElement("watch_list_filter_name");
        watch_list_filter_name.value = '';
        set_watch_list_text_filter(watch_list_filter_name);
        const watch_list_filter_desc = getElement("watch_list_filter_desc");
        watch_list_filter_desc.value = '';
        set_watch_list_text_filter(watch_list_filter_desc);
        const watch_list_filter_source = getElement("watch_list_filter_source");
        watch_list_filter_source.selectedIndex = 0;
        set_watch_list_select_filter(watch_list_filter_source);
    }

    load_watch_list_div_list();
}

function set_watch_list_select_filter(watch_list_filter) {
    if (watch_list_filter.selectedIndex === 0) {
        watch_list_filter.style.opacity = 0.5;
    } else {
        watch_list_filter.style.opacity = 1.0;
    }
}

function set_watch_list_text_filter(watch_list_filter) {
    if (watch_list_filter.value === '') {
        watch_list_filter.style.opacity = 0.5;
    } else {
        watch_list_filter.style.opacity = 1.0;
    }
}

function load_watch_list_div_list() {
    watch_list_name_map = new Map([...watch_list_name_map.entries()].sort(function (a, b) {
        return a[0].toLowerCase().localeCompare(b[0].toLowerCase());
    }));
    const watchListDivContainer = getElement("watch_list_div_container");
    watchListDivContainer.innerHTML = "";
    if (!watch_list_name_map || watch_list_name_map.size === 0) {
        watchListDivContainer.innerHTML = "<div class='watch_list_empty'>Your don't have anyting in your watch list</div>";
        return;
    }

    const filter_tag_1 = getElement("watch_list_filter_tag_1");
    const filter_tag_2 = getElement("watch_list_filter_tag_2");
    const filter_tag_3 = getElement("watch_list_filter_tag_3");
    
    const filter_name = getElement("watch_list_filter_name");
    const filter_desc = getElement("watch_list_filter_desc");
    const filter_source = getElement("watch_list_filter_source");

    watch_list_name_map.forEach(function (watchListRecord, name) {
        if (filter_tag_1 && filter_tag_1.value !== '' && filter_tag_1.value.toUpperCase() !== watchListRecord.tag_1.toUpperCase()) {
            return;
        }
        if (filter_tag_2 && filter_tag_2.value !== '' && filter_tag_2.value.toUpperCase() !== watchListRecord.tag_2.toUpperCase()) {
            return;
        }
        if (filter_tag_3 && filter_tag_3.value !== '' && filter_tag_3.value.toUpperCase() !== watchListRecord.tag_3.toUpperCase()) {
            return;
        }
        
        if (filter_name && !watchListRecord.name.toUpperCase().includes(filter_name.value.toUpperCase())) {
            return;
        }
        if (filter_desc && !watchListRecord.description.toUpperCase().includes(filter_desc.value.toUpperCase())) {
            return;
        }
        if (filter_source && filter_source.value !== '' && ((filter_source.value === 'imported') ? !watchListRecord.imported  : watchListRecord.imported)) {
            return;
        }
        
        
        add_watch_list_record_div(watchListDivContainer, watchListRecord);
    });
}

function findRecordById(id) {
    var watchListRecordOfId = null;
    watch_list_name_map.forEach(function (watchListRecord, name) {
        if (Number(watchListRecord.id) === Number(id)) {
            watchListRecordOfId = watchListRecord;
        }
    });
    return watchListRecordOfId;
}

function add_watch_list_record_div(watchListDivContainer, watchListRecord) {
    var reloadDelayInfo = "OFF";
    if (watchListRecord.reload_delay > 0) {
        var minutes = Math.floor(watchListRecord.reload_delay / 60000);
        var seconds = ((watchListRecord.reload_delay % 60000) / 1000).toFixed(0);
        reloadDelayInfo = minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
    }
    const frameId = "frm_" + watchListRecord.id;
    var recordDiv = "<div class='watch_list_div_title' style='pointer-events: auto;'>";
    recordDiv += watchListRecord.name;
    recordDiv += "</div>";
    recordDiv += "<div class='watch_list_div' style='pointer-events: auto;'>";
    recordDiv += "<span class='watch_list_detail_name'>Tag 1</span><span class='watch_list_detail_value " + (watchListRecord.tag_1 ? "watch_list_detail_on_value" : "watch_list_detail_off_value") + "'>" + (watchListRecord.tag_1 ? watchListRecord.tag_1 : "NONE") + "</span>";
    recordDiv += "<div class='vgap'></div>";
    recordDiv += "<span class='watch_list_detail_name'>Tag 2</span><span class='watch_list_detail_value " + (watchListRecord.tag_2 ? "watch_list_detail_on_value" : "watch_list_detail_off_value") + "'>" + (watchListRecord.tag_2 ? watchListRecord.tag_2 : "NONE") + "</span>";
    recordDiv += "<div class='vgap'></div>";
    recordDiv += "<span class='watch_list_detail_name'>Tag 3</span><span class='watch_list_detail_value " + (watchListRecord.tag_3 ? "watch_list_detail_on_value" : "watch_list_detail_off_value") + "'>" + (watchListRecord.tag_3 ? watchListRecord.tag_3 : "NONE") + "</span>";
    recordDiv += "<div class='vgap'></div>";
    recordDiv += "<span class='watch_list_detail_name'>Layout</span><span class='watch_list_detail_value watch_list_detail_on_value'>" + watchListRecord.layout + "</span>";
    recordDiv += "<div class='vgap'></div>";
    recordDiv += "<span class='watch_list_detail_name'>Update</span><span class='watch_list_detail_value " + (reloadDelayInfo !== "OFF" ? "watch_list_detail_on_value" : "watch_list_detail_off_value") + "'>" + reloadDelayInfo + "</span>";
    recordDiv += "<div class='vgap'></div>";
    recordDiv += "<span class='watch_list_detail_name'>Imported</span><span class='watch_list_detail_value " + (watchListRecord.imported ? "watch_list_detail_on_value" : "watch_list_detail_off_value") + "'>" + (watchListRecord.imported ? "Yes" : "NO") + "</span>";
    recordDiv += "<div class='vgap2x'></div>";
    recordDiv += "<div class='watch_list_detail_value watch_list_detail_desc_value'>" + (watchListRecord.description ? "<iframe id='" + frameId + "' class='watch_list_detail_frame' onload='set_description_frame(\"" + frameId + "\");'></iframe>" : "Description is not provided") + "</div>";
    recordDiv += "<div class='watch_list_actions'>";
    recordDiv += "<div class='watch_list_action'>";
    recordDiv += "<button type='button' class='aeatas_button swl_delete_btn' onclick='openDeleteWatchListBox(" + watchListRecord.id + ");' id='watchlist_delete_button'><span class='aeatas_button_label swl_delete_lbl' id='watchlist_delete_button_lbl'>Delete</span><span class='aeatas_button_icon swl_delete_icon' id='watchlist_delete_button_icon'>X</span></button>";
    recordDiv += "</div>";
    recordDiv += "<div class='watch_list_action'>";
    recordDiv += "<button type='button' class='aeatas_button swl_edit_btn' onclick='openEditWatchListBox(" + watchListRecord.id + ");' id='watchlist_edit_button'><span class='aeatas_button_label swl_edit_lbl' id='watchlist_edit_button_lbl'>Setting</span><span class='aeatas_button_icon swl_edit_icon' id='watchlist_edit_button_icon'>&#9998;</span></button>";
    recordDiv += "</div>";
    recordDiv += "<div class='watch_list_action'>";
    recordDiv += "<button type='button' class='aeatas_button swl_launch_btn' onclick='launchWatchListRecord(" + watchListRecord.id + ", \"" + watchListRecord.layout + "\", " + watchListRecord.custom_width + ", " + watchListRecord.custom_height + ", " + watchListRecord.reload_delay + ");'><span class='aeatas_button_label swl_launch_lbl'>Launch</span><span class='aeatas_button_icon swl_launch_icon'><img width='12' height='12' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==' /></span></button>";
    recordDiv += "</div>";
    recordDiv += "</div>";
    recordDiv += "</div>";

    //
    recordDiv += "<div id='watchlist_edit_div_" + watchListRecord.id + "' class='watchlist_edit_div'>";
    recordDiv += "</div>";

    //
    recordDiv += "<div id='watchlist_delete_div_" + watchListRecord.id + "' class='watchlist_delete_div'>";
    recordDiv += "</div>";

    watchListDivContainer.innerHTML += recordDiv;
    if (watchListRecord.description) {
        const description_frame = getElement(frameId);
        description_frame.srcdoc = watchListRecord.description;

    }
}
function set_description_frame(id) {
    const description_frame = getElement(id);
    const new_style_element = document.createElement("style");
    new_style_element.textContent = "body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: italic; color: #777; text-align: left; line-heith: 10px; text-decoration: none;}";
    description_frame.contentDocument.head.appendChild(new_style_element);
    description_frame.contentWindow.document.body.style.padding = "0px";
    description_frame.contentWindow.document.body.style.margin = "0px";
    description_frame.contentWindow.document.body.style.top = "0";
    description_frame.contentWindow.document.body.style.left = "0";
    description_frame.width = "100%";
    description_frame.height = description_frame.contentWindow.document.body.offsetHeight;
    description_frame.style.width = "100%";
    description_frame.style.height = description_frame.contentWindow.document.body.offsetHeight + "px";
}
function closeWatchListBoxes() {
    closeEditWatchListBox(true);
    closeDeleteWatchListBox(true);
}
function openDeleteWatchListBox(id) {
    closeWatchListBoxes();
    var watchListRecordOfId = findRecordById(id);
    if (!watchListRecordOfId) {
        return;
    }
    opened_delete_watch_list_record_id = id;
    var recordDiv = "<div id='watchlist_delete_box' class='watchlist_delete_box'>";
    recordDiv += "<input type='hidden' id='watchlist_record_id' name='watchlist_record_id' value='" + watchListRecordOfId.id + "'>";
    recordDiv += "<div id='watchlist_delete_confirm_label'class='watchlist_delete_confirm'>Confirm Deletion</div>";
    recordDiv += "<div class='vgap4x'></div>";
    recordDiv += "<div id='watchlist_delete_name_label'class='watchlist_delete_label'>" + escapeCharacters(watchListRecordOfId.name) + "</div>";
    recordDiv += "<div class='vgap3x'></div>";
    recordDiv += "<div id='watchlist_delete_message_box' class='messagebox'></div>";
    recordDiv += "<button id='cancle_watchlist_delete_btn' class='watchlist_delete_btn' type='button' onClick='closeDeleteWatchListBox();'>Cancel</button>";
    recordDiv += "<button id='watchlist_delete_btn' class='watchlist_delete_btn' type='button' onClick='deleteWatchListRecord();'>Delete</button>";
    recordDiv += "</div>";

    const watchlist_delete_div = getElement("watchlist_delete_div_" + watchListRecordOfId.id);
    watchlist_delete_div.innerHTML = recordDiv;
    watchlist_delete_div.style.display = 'block';

}

function closeDeleteWatchListBox(explicit) {
    if (opened_delete_watch_list_record_id !== -1) {
        const id = event && event.target ? event.target.id : null;
        if (explicit === true || !id || !id.startsWith("watchlist_")) {
            const watchlist_delete_div = getElement("watchlist_delete_div_" + opened_delete_watch_list_record_id);
            watchlist_delete_div.innerHTML = "";
            watchlist_delete_div.style.display = 'none';
            opened_delete_watch_list_record_id = -1;
        }
    }
}

function openEditWatchListBox(id) {
    closeWatchListBoxes();
    var watchListRecordOfId = findRecordById(id);
    if (!watchListRecordOfId) {
        return;
    }
    opened_edit_watch_list_record_id = watchListRecordOfId.id;
    var recordDiv = "<div id='watchlist_edit_box' class='watchlist_edit_box'>";
    recordDiv += "<input type='hidden' id='watchlist_record_id' name='watchlist_record_id' value='" + watchListRecordOfId.id + "'>";
    recordDiv += "<label id='watchlist_edit_name_label' for='watchlist_record_name' class='watchlist_edit_label'>Name</label>";
    recordDiv += "<input type='text' placeholder='Enter Name (required)' id='watchlist_record_name' name='watchlist_record_name' value='" + escapeCharacters(watchListRecordOfId.name) + "' autocomplete='off' maxlength='40' onkeypress='if (event.keyCode === 13) {saveWatchList(); return false;}'>";
    recordDiv += "<label id='watchlist_edit_description_label' for='watchlist_record_description' class='watchlist_edit_label'>Description</label>";
    recordDiv += "<input type='text' placeholder='Enter Description (optional)' id='watchlist_record_description' name='watchlist_record_description' value='" + (watchListRecordOfId.description ? escapeCharacters(watchListRecordOfId.description) : "") + "' autocomplete='off' maxlength='500' onkeypress='if (event.keyCode === 13) {saveWatchList(); return false;}'>";
    recordDiv += "<label id='watchlist_edit_tag_label' for='watchlist_record_tag_1' class='watchlist_edit_label'>Filter Tags</label>";
    recordDiv += "<input type='text' placeholder='Enter Tag #1 (optional)' id='watchlist_record_tag_1' name='watchlist_record_tag_1' value='" + (watchListRecordOfId.tag_1 ? escapeCharacters(watchListRecordOfId.tag_1) : "") + "' autocomplete='off' maxlength='20' onkeypress='if (event.keyCode === 13) {saveWatchList(); return false;}'>";
    recordDiv += "<input type='text' placeholder='Enter Tag #2 (optional)' id='watchlist_record_tag_2' name='watchlist_record_tag_2' value='" + (watchListRecordOfId.tag_2 ? escapeCharacters(watchListRecordOfId.tag_2) : "") + "' autocomplete='off' maxlength='20' onkeypress='if (event.keyCode === 13) {saveWatchList(); return false;}'>";
    recordDiv += "<input type='text' placeholder='Enter Tag #3 (optional)' id='watchlist_record_tag_3' name='watchlist_record_tag_3' value='" + (watchListRecordOfId.tag_3 ? escapeCharacters(watchListRecordOfId.tag_3) : "") + "' autocomplete='off' maxlength='20' onkeypress='if (event.keyCode === 13) {saveWatchList(); return false;}'>";
    recordDiv += "<label id='watchlist_edit_reload_delay_label' for='watchlist_record_reload_delay' class='watchlist_edit_label'>Periodic Update</label>";
    recordDiv += "<select id='watchlist_record_reload_delay'>";
    recordDiv += "</select>";
    recordDiv += "<label id='watchlist_edit_layout_label' for='watchlist_record_layout' class='watchlist_edit_label'>Layout</label>";
    recordDiv += "<select id='watchlist_record_layout' onchange='set_snapshot_custom_size_div(\"watchlist_record_custom_size_div\", this.value)'>";
    recordDiv += "</select>";
    recordDiv += "<div id='watchlist_record_custom_size_div' class='custom_size_div'>";
    recordDiv += "<label id='watchlist_edit_record_custom_width' for='watchlist_record_custom_width' class='inputlabel'>Width</label>";
    recordDiv += "<input type='number' id='watchlist_record_custom_width' name='watchlist_record_custom_width' min='100' max='100000' step='1' value='" + watchListRecordOfId.custom_width + "'>";
    recordDiv += "<label id='watchlist_edit_record_custom_height' for='watchlist_record_custom_height' class='inputlabel'>HeightTT</label>";
    recordDiv += "<input type='number' id='watchlist_record_custom_height' name='watchlist_record_custom_height' min='100' max='100000' step='1' value='" + watchListRecordOfId.custom_height + "'>";
    recordDiv += "</div>";
    recordDiv += "<div id='watchlist_edit_message_box' class='messagebox'></div>";
    recordDiv += "<button id='cancle_watchlist_btn' class='watchlist_edit_btn' type='button' onClick='closeEditWatchListBox();'>Cancel</button>";
    recordDiv += "<button id='watchlist_save_btn' class='watchlist_edit_btn' type='button' onClick='saveWatchList();'>Save</button>";
    recordDiv += "</div>";

    const watchlist_edit_div = getElement("watchlist_edit_div_" + watchListRecordOfId.id);
    watchlist_edit_div.innerHTML = recordDiv;
    load_snapshot_layout_element("watchlist_record_layout", watchListRecordOfId.layout, false);
    set_snapshot_custom_size_div('watchlist_record_custom_size_div', watchListRecordOfId.layout);
    watchlist_edit_div.style.display = 'block';

    load_snapshot_reload_delay_element("watchlist_record_reload_delay", watchListRecordOfId.reload_delay);

    const watch_list_record_name = getElement('watchlist_record_name');
    watch_list_record_name.focus();
}

function closeEditWatchListBox(explicit) {
    if (opened_edit_watch_list_record_id !== -1) {
        const id = event && event.target ? event.target.id : null;
        if (explicit === true || !id || !id.startsWith("watchlist_")) {
            const watchlist_edit_div = getElement("watchlist_edit_div_" + opened_edit_watch_list_record_id);
            watchlist_edit_div.innerHTML = "";
            watchlist_edit_div.style.display = 'none';
            opened_edit_watch_list_record_id = -1;
        }
    }
}

async function saveWatchList() {
    try {
        const watchListMessageboxElement = getElement("watchlist_edit_message_box");
        watchListMessageboxElement.innerHTML = "";

        const watchListRecordNameElement = getElement("watchlist_record_name");
        const watchListRecordName = watchListRecordNameElement.value.trim();
        if (watchListRecordName === '') {
            watchListMessageboxElement.innerHTML = "Name of watch list entry is required";
            return;
        }

        const watchListRecordIdElement = getElement("watchlist_record_id");
        const watchListRecordId = watchListRecordIdElement.value.trim();
        if (watchListRecordId === '' || watchListRecordId < 1) {
            watchListMessageboxElement.innerHTML = "Id of watch list entry is required";
            return;
        }

        const watchListRecordDescriptionElement = getElement("watchlist_record_description");
        const watchListRecordDescription = watchListRecordDescriptionElement.value ? watchListRecordDescriptionElement.value.trim() : "";

        const watchListRecordTag1Element = getElement("watchlist_record_tag_1");
        const watchListRecordTag1 = watchListRecordTag1Element.value ? watchListRecordTag1Element.value.trim() : "";

        const watchListRecordTag2Element = getElement("watchlist_record_tag_2");
        const watchListRecordTag2 = watchListRecordTag2Element.value ? watchListRecordTag2Element.value.trim() : "";

        const watchListRecordTag3Element = getElement("watchlist_record_tag_3");
        const watchListRecordTag3 = watchListRecordTag3Element.value ? watchListRecordTag3Element.value.trim() : "";

        const watchListRecordReloadDelayElement = getElement("watchlist_record_reload_delay");
        const watchListRecordReloadDelay = Number(watchListRecordReloadDelayElement.value);

        const watchListRecordLayoutElement = getElement("watchlist_record_layout");
        const watchListRecordLayout = watchListRecordLayoutElement.value;

        const watchListRecordLayoutCustomWidthElement = getElement("watchlist_record_custom_width");
        const watchListRecordCustomWidth = Number(watchListRecordLayoutCustomWidthElement.value);

        const watchListRecordLayoutCustomHeightElement = getElement("watchlist_record_custom_height");
        const watchListRecordCustomHeight = Number(watchListRecordLayoutCustomHeightElement.value);

        var wait_text = "Please Wait";
        const buttonElement = getElement("watchlist_save_btn");
        if (buttonElement.textContent === wait_text) {
            return;
        }

        var watchListRecordToUpdate = findRecordById(watchListRecordId);
        if (!watchListRecordToUpdate) {
            return;
        }

        if (watchListRecordName === watchListRecordToUpdate.name && watchListRecordDescription === watchListRecordToUpdate.description && watchListRecordTag1 === watchListRecordToUpdate.tag_1 && watchListRecordTag2 === watchListRecordToUpdate.tag_2 && watchListRecordTag3 === watchListRecordToUpdate.tag_3 && watchListRecordReloadDelay === watchListRecordToUpdate.reload_delay && watchListRecordLayout === watchListRecordToUpdate.layout && watchListRecordCustomWidth === watchListRecordToUpdate.custom_width && watchListRecordCustomHeight === watchListRecordToUpdate.custom_height) {
            watchListMessageboxElement.innerHTML = "Nothing to save";
            return;
        }


        const buttonText = buttonElement.textContent;
        buttonElement.textContent = wait_text;

        const formData = getFormData(home_form_id);
        const url = "EditSnapshotWatchListRecord?id=" + watchListRecordId + "&name=" + encodeURIComponent(watchListRecordName) + "&description=" + encodeURIComponent(watchListRecordDescription) + "&tag_1=" + encodeURIComponent(watchListRecordTag1) + "&tag_2=" + encodeURIComponent(watchListRecordTag2) + "&tag_3=" + encodeURIComponent(watchListRecordTag3) + "&reload_delay=" + watchListRecordReloadDelay + "&layout=" + encodeURIComponent(watchListRecordLayout) + "&custom_width=" + watchListRecordCustomWidth + "&custom_height=" + watchListRecordCustomHeight;
        await callWebserviceGET(url, watchListMessageboxElement, null).then((json) => {
            buttonElement.textContent = buttonText;
            if (json) {
                if (json.code !== 200) {
                    watchListMessageboxElement.innerHTML = getErrorMessage(json.message);
                } else {
                    closeEditWatchListBox(true);
                    var watchListRecordToUpdate = null;
                    watch_list_name_map.forEach(function (watchListRecord, name) {
                        if (Number(watchListRecord.id) === Number(watchListRecordId)) {
                            watchListRecordToUpdate = watchListRecord;
                        }
                    });
                    if (watchListRecordToUpdate) {
                        var tagsUpdated = (watchListRecordToUpdate.tag_1 !== watchListRecordTag1) || (watchListRecordToUpdate.tag_2 !== watchListRecordTag2) || (watchListRecordToUpdate.tag_3 !== watchListRecordTag3);

                        watch_list_name_map.delete(watchListRecordToUpdate.name);
                        watchListRecordToUpdate.name = watchListRecordName;
                        watchListRecordToUpdate.description = watchListRecordDescription;
                        watchListRecordToUpdate.tag_1 = watchListRecordTag1;
                        watchListRecordToUpdate.tag_2 = watchListRecordTag2;
                        watchListRecordToUpdate.tag_3 = watchListRecordTag3;
                        watchListRecordToUpdate.reload_delay = watchListRecordReloadDelay;
                        watchListRecordToUpdate.layout = watchListRecordLayout;
                        watchListRecordToUpdate.custom_width = watchListRecordCustomWidth;
                        watchListRecordToUpdate.custom_height = watchListRecordCustomHeight;
                        watch_list_name_map.set(watchListRecordToUpdate.name, watchListRecordToUpdate);

                        if (tagsUpdated) {
                            load_watch_list_tags();
                        }
                        load_watch_list_div_list();
                    }


                    const messageboxElement = getElement("watch_list_message_box");
                    messageboxElement.innerHTML = "Watch list updated";
                    sleep(2000).then(() => {
                        messageboxElement.innerHTML = "";
                    });
                }
            }
        }).catch((error) => {
            disableOrEnableForm(home_form_id, false);
            buttonElement.textContent = buttonText;
            handleError("Failed to edit watch list " + error, "watch_list_message_box", false);
            console.log(error);
        });
    } catch (error) {
        console.log(error);
        handleError("Failed to edit watch list " + error, "watch_list_message_box", false);
    }
}

async function deleteWatchListRecord() {
    try {
        const watchListMessageboxElement = getElement("watchlist_delete_message_box");
        watchListMessageboxElement.innerHTML = "";

        const watchListRecordIdElement = getElement("watchlist_record_id");
        const watchListRecordId = watchListRecordIdElement.value.trim();
        if (watchListRecordId === '' || watchListRecordId < 1) {
            watchListMessageboxElement.innerHTML = "Id of watch list entry is required";
            return;
        }

        var wait_text = "Please Wait";
        const buttonElement = getElement("watchlist_delete_btn");
        if (buttonElement.textContent === wait_text) {
            return;
        }

        const buttonText = buttonElement.textContent;
        buttonElement.textContent = wait_text;

        const formData = getFormData(home_form_id);
        const url = "RemoveSnapshotWatchListRecord?id=" + watchListRecordId;
        await callWebserviceGET(url, watchListMessageboxElement, null).then((json) => {
            buttonElement.textContent = buttonText;
            if (json) {
                if (json.code !== 200) {
                    watchListMessageboxElement.innerHTML = getErrorMessage(json.message);
                } else {
                    closeDeleteWatchListBox(true);
                    var watchListRecordToRemove = null;
                    watch_list_name_map.forEach(function (watchListRecord, name) {
                        if (Number(watchListRecord.id) === Number(watchListRecordId)) {
                            watchListRecordToRemove = watchListRecord;
                        }
                    });
                    if (watchListRecordToRemove) {
                        watch_list_name_map.delete(watchListRecordToRemove.name);
                        if (watchListRecordToRemove.tag_1 || watchListRecordToRemove.tag_2 || watchListRecordToRemove.tag_3) {
                            load_watch_list_tags();
                        }
                        load_watch_list_div_list();
                    }


                    const messageboxElement = getElement("watch_list_message_box");
                    messageboxElement.innerHTML = "Watch list updated";
                    sleep(2000).then(() => {
                        messageboxElement.innerHTML = "";
                    });
                }
            }
        }).catch((error) => {
            disableOrEnableForm(home_form_id, false);
            buttonElement.textContent = buttonText;
            handleError("Failed to delete watch list " + error, "watch_list_message_box", false);
            console.log(error);
        });
    } catch (error) {
        console.log(error);
        handleError("Failed to delete watch list " + error, "watch_list_message_box", false);
    }
}

async function launchWatchListRecord(watch_list_record_id, layout, custom_width, custom_height, reloadDelay) {
    try {
        const timezoneElement = getElement("timezone");
        var timezone = timezoneElement.value ? timezoneElement.value : user_json.timezone;
        const messageboxElement = getElement("watch_list_message_box");
        const snapshotWindow = layout === "custom" ? openSnapshotWindowWithSize(custom_width, custom_height) : openSnapshotWindowOfLayout(layout);
        if (snapshotWindow && !snapshotWindow.closed) {
            const closeSnapshotWindow = closeSnapshotWindowFunction(snapshotWindow);

            await take_snapshot_of_watch_list_record(snapshotWindow, watch_list_record_id, timezone, messageboxElement, closeSnapshotWindow, false).then(() => {
                if (snapshotWindow && !snapshotWindow.closed) {
                    var startTime = Number(Date.now());
                    if (reloadDelay > 1000) {
                        var nextReload = startTime + Number(reloadDelay);
                        var takingSnapshot = false;

                        const reloader = window.setInterval(function () {
                            if (snapshotWindow.closed) {
                                clearInterval(reloader);
                                return;
                            }
                            if (!takingSnapshot) {
                                if (nextReload < Date.now()) {
                                    if (!takingSnapshot) {
                                        takingSnapshot = true;
                                        take_snapshot_of_watch_list_record(snapshotWindow, watch_list_record_id, timezone, null, null, true).then(() => {
                                            startTime = Number(Date.now());
                                            nextReload = startTime + Number(reloadDelay);
                                            takingSnapshot = false;
                                        });
                                    }
                                }
                            }
                        }, 1000);

                        if (include_time_elapsed_in_title || include_reload_time_in_title) {
                            var title = snapshotWindow.document.title;
                            const titler = window.setInterval(function () {
                                if (snapshotWindow.closed) {
                                    clearInterval(titler);
                                    return;
                                }
                                var remaining;
                                if (include_reload_time_in_title) {
                                    var remainingTime = (include_time_elapsed_in_title ? nextReload - startTime : nextReload - Number(Date.now()));
                                    if (remainingTime < 0) {
                                        remainingTime = 0;
                                    }
                                    var minutes = Math.floor(remainingTime / 60000);
                                    var seconds = ((remainingTime % 60000) / 1000).toFixed(0);
                                    remaining = (include_time_elapsed_in_title ? " " : " - ") + minutes + ":" + (seconds < 10 ? '0' : '') + seconds + " ";
                                }
                                var timePssed;
                                if (include_time_elapsed_in_title) {
                                    const timeElapsed = Number(Date.now() - startTime);
                                    minutes = Math.floor(timeElapsed / 60000);
                                    seconds = ((timeElapsed % 60000) / 1000).toFixed(0);
                                    timePssed = " - " + minutes + ":" + (seconds < 10 ? '0' : '') + seconds + " ";
                                }
                                snapshotWindow.document.title = title + (timePssed ? timePssed : "") + (remaining ? (timePssed ? "/" : "") + remaining : "");
                            }, 1000);
                        }
                    } else {
                        startTime = Number(Date.now());
                        if (include_time_elapsed_in_title) {
                            var title = snapshotWindow.document.title;
                            const titler = window.setInterval(function () {
                                if (snapshotWindow.closed) {
                                    clearInterval(titler);
                                    return;
                                }
                                const timeElapsed = Number(Date.now() - startTime);
                                var minutes = Math.floor(timeElapsed / 60000);
                                var seconds = ((timeElapsed % 60000) / 1000).toFixed(0);
                                const timePassed = " - " + minutes + ":" + (seconds < 10 ? '0' : '') + seconds + " ";
                                snapshotWindow.document.title = title + timePassed;
                            }, 1000);
                        }
                    }

                    var takingSnapshotOnManualRequest = false;
                    const snapshotMonitor = window.setInterval(function () {
                        if (snapshotWindow.closed) {
                            clearInterval(snapshotMonitor);
                            return;
                        }
                        if (!takingSnapshotOnManualRequest) {
                            if (reload_snapshot_on_request === snapshotWindow.name) {
                                reload_snapshot_on_request = null;
                                if (!takingSnapshotOnManualRequest) {
                                    takingSnapshotOnManualRequest = true;
                                    take_snapshot_of_watch_list_record(snapshotWindow, watch_list_record_id, timezone, null, null, true).then(() => {
                                        startTime = Number(Date.now());
                                        nextReload = startTime + Number(reloadDelay);
                                        takingSnapshotOnManualRequest = false;
                                    });
                                }
                            }
                            if (close_snapshot_on_request === snapshotWindow.name) {
                                if (!snapshotWindow.closed) {
                                    clearInterval(snapshotMonitor);
                                    snapshotWindow.close();
                                    return;
                                }
                            }
                        }
                    }, 500);

                }
            });
        } else {
            messageboxElement.innerHTML = "Failed to open snapshot popup";
        }
    } catch (error) {
        console.log(error);
        handleError("Failed to take snapshot " + error, "watch_list_message_box", false);
    }
}


async function take_snapshot_of_watch_list_record(snapshot_window, watch_list_record_id, timezone, messagebox_element, close_snapshot_window, reloading) {
    if (snapshot_window.closed) {
        return;
    }
    setSnapshotWindowStyle(snapshot_window);
    if (!reloading || clear_snapshot_before_reload) {
        snapshot_window.document.body.innerHTML = createSnapshotAltContent(snapshot_wait_content);
    }
    const url = "TakeSnapshotOfWatchListRecord?id=" + watch_list_record_id + "&timezone=" + encodeURIComponent(timezone);
    await callWebserviceGET(url, messagebox_element, close_snapshot_window).then((json) => {
        if (json) {
            if (json.code !== 200) {
                if (!reloading) {
                    messagebox_element.innerHTML = getErrorMessage(json.message);
                }
                if (snapshot_window && !snapshot_window.closed) {
                    snapshot_window.close();
                }
            } else {
                if (!reloading) {
                    messagebox_element.innerHTML = "";
                }
                if (snapshot_window && !snapshot_window.closed) {
                    if (!reloading) {
                        snapshot_window.focus();
                    }
                    const snapshots = json.snapshots;
                    setSnapshots(snapshot_window, snapshots, "watch_list_message_box");
                }
            }
        }
    }).catch((error) => {
        if (!reloading) {
            if (!snapshot_window.closed) {
                try {
                    snapshot_window.close();
                } catch (error) {
                }
            }
            if (!reloading) {
                handleError("Failed to launch snapshot for watch list record  " + error, "watch_list_message_box", false);
            }
        } else {
            if (!snapshot_window.closed) {
                snapshot_window.document.body.innerHTML = createSnapshotAltContent(error);
            }
        }
        console.log(error);
    });
}


function openImportWatchListConfirmBox(action) {
    const watchlistactions_confirm_div = getElement("watchlistactions_confirm_div");
    watchlistactions_confirm_div.style.display = 'block';

    const watchlistactions_import_confirm_btn = getElement("watchlistactions_import_confirm_btn");
    const watchlistactions_remove_imported_confirmed_btn = getElement("watchlistactions_remove_imported_confirmed_btn");
    const watchlistactions_remove_local_confirmed_btn = getElement("watchlistactions_remove_local_confirmed_btn");
    if (action === 'import') {
        watchlistactions_import_confirm_btn.style.display = 'inline-block';
        watchlistactions_remove_imported_confirmed_btn.style.display = 'none';
        watchlistactions_remove_local_confirmed_btn.style.display = 'none';
    } else if (action === 'remove_imported') {
        watchlistactions_import_confirm_btn.style.display = 'none';
        watchlistactions_remove_imported_confirmed_btn.style.display = 'inline-block';
        watchlistactions_remove_local_confirmed_btn.style.display = 'none';
    } else if (action === 'remove_local') {
        watchlistactions_import_confirm_btn.style.display = 'none';
        watchlistactions_remove_imported_confirmed_btn.style.display = 'none';
        watchlistactions_remove_local_confirmed_btn.style.display = 'inline-block';
    } else {
        watchlistactions_import_confirm_btn.style.display = 'none';
        watchlistactions_remove_imported_confirmed_btn.style.display = 'none';
        watchlistactions_remove_local_confirmed_btn.style.display = 'none';
    }
}

function closeWatchListActionsConfirmBox(explicit) {
    const id = event && event.target ? event.target.id : null;
    if (explicit === true || !id || !id.startsWith("watchlistactions_")) {
        const watchlist_actions_confirm_div = getElement("watchlistactions_confirm_div");
        watchlist_actions_confirm_div.style.display = 'none';
    }

}

async function importWatchList() {
    closeWatchListActionsConfirmBox(true);
    addLoader();
    const messageboxElement = getElement("watch_list_message_box");
    try {
        messageboxElement.innerHTML = "";

        const url = "ImportSnapshotWatchList";
        const json = await callWebserviceGET(url, messageboxElement, null);
        if (json.code !== 200) {
            if (messageboxElement) {
                messageboxElement.innerHTML = json.message;
            }
        } else {
            await load_watch_list(messageboxElement);
            load_watch_list_div_list();
        }
    } catch (error) {
        console.log(error);
        handleError("Failed to import watch list " + error, "watch_list_message_box", false);
    }
    removeLoader();
    sleep(5000).then(() => {
        messageboxElement.innerHTML = "";
    });
}

async function removeImportedWatchlist() {
    closeWatchListActionsConfirmBox(true);
    const messageboxElement = getElement("watch_list_message_box");
    try {
        messageboxElement.innerHTML = "";

        const url = "RemoveImportedSnapshotWatchList";
        const json = await callWebserviceGET(url, messageboxElement, null);
        if (json.code !== 200) {
            if (messageboxElement) {
                messageboxElement.innerHTML = json.message;
            }
        } else {
            await load_watch_list(messageboxElement);
            load_watch_list_div_list();
        }
    } catch (error) {
        console.log(error);
        handleError("Failed to remove imported watch list " + error, "watch_list_message_box", false);
    }
    sleep(5000).then(() => {
        messageboxElement.innerHTML = "";
    });
}

async function removeLocalWatchlist() {
    closeWatchListActionsConfirmBox(true);
    const messageboxElement = getElement("watch_list_message_box");
    try {
        messageboxElement.innerHTML = "";

        const url = "RemoveLocalSnapshotWatchList";
        const json = await callWebserviceGET(url, messageboxElement, null);
        if (json.code !== 200) {
            if (messageboxElement) {
                messageboxElement.innerHTML = json.message;
            }
        } else {
            await load_watch_list(messageboxElement);
            load_watch_list_div_list();
        }
    } catch (error) {
        console.log(error);
        handleError("Failed to remove local watch list " + error, "watch_list_message_box", false);
    }
    sleep(5000).then(() => {
        messageboxElement.innerHTML = "";
    });
}