"use strict";

function save_form_text_data(win_id, code_editor_type) {
    var code_editor_text_content = null;
    var code_editor_iframe_javascript_visibility = null;
    var code_editor_iframe_html_visibility = null;
    var code_editor_iframe_css_visibility = null;
    var win = null;
    var q_str = null;
    var b = null;
    var f = null;
    var function_error_string = null;
    ////var code_editor_type = null;
    var editor_type = null;
    var txt = null;
    var u = null;

    ////function_error_string = "Cannot save code editor iframe text content.\nNo code editor is visible\nfunction name: 'save_form_text_data'\nfile: 'code_editor_functions.js'";

    ////code_editor_type = get_visible_code_editor_type(win_id);
    editor_type = code_editor_type;
    if (!is_code_editor_type_valid(editor_type)) {
        return;
    }

    update_stored_editor_code_text(win_id, editor_type);

    ////global_code_editor_http_save_data_timer_id = setTimeout(function () {
        ////code_editor_type = get_visible_code_editor_type(win_id);
        //editor_type = code_editor_type;
        //if (!is_code_editor_type_valid(editor_type)) {
        //    return;
        //}

        //alert(editor_type);
        win = document.getElementById(win_id);
        if (win !== null) {
            q_str = win.getAttribute("data-content_id");
            if (q_str !== null) {
                b = return_base_path();
                f = new FormData();
            }
            else {
                console.log(function_error_string);
                return;
            }
        }
        else {
            console.log(function_error_string);
            return;
        }

        code_editor_text_content = get_code_editor_text_contents(win_id, editor_type);

        code_editor_iframe_javascript_visibility = get_code_editor_iframe_is_visible_attribute(win_id, editor_type);
        code_editor_iframe_html_visibility = get_code_editor_iframe_is_visible_attribute(win_id, editor_type);
        code_editor_iframe_css_visibility = get_code_editor_iframe_is_visible_attribute(win_id, editor_type);
    ////alert(editor_type);
        ////if (code_editor_iframe_javascript_visibility === true || code_editor_iframe_javascript_visibility === "true") {
    if (code_editor_type === "javascript") {
        //alert("javascript");
        u = b + "/chromosphere/scripts/js/ui/ss/contents_and_js/set_js?i=" + q_str + "&r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
        txt = code_editor_text_content;
        f.append("jsTextEditor", txt);
        http_post_form(u, f);
    }
    else if (code_editor_type === "html") {
        //else if (code_editor_iframe_html_visibility === true || code_editor_iframe_html_visibility === "true") {
            ////alert("fucking html");
        u = b + "/chromosphere/scripts/js/ui/ss/contents_and_js/set_content?i=" + q_str + "&r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
        txt = code_editor_text_content;
        f.append("contentDataTextEditor", txt);
        http_post_form(u, f);
        }
        //else if (code_editor_iframe_css_visibility === true || code_editor_iframe_css_visibility === "true") {
        //    //alert("css");
    //    u = b + "/chromosphere/scripts/js/ui/ss/contents_and_js/set_css?i=" + q_str + "&r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
        //    txt = code_editor_text_content;
        //    f.append("cssTextEditor", txt);
        //    http_post_form(u, f);
        //}
        //else {
        //    console.log(function_error_string);
        //}
        ////clearTimeout(global_code_editor_http_save_data_timer_id);
    ////}, 250);
}


async function http_post_form(u, form_data) {
    var xhr = new XMLHttpRequest();
    var response_text = null;

    xhr.open("POST", u, true);
    ////xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
    ////xhr.setRequestHeader("Content-Type", "text/plain; charset=utf-8");
    xhr.onreadystatechange = async function () { // Call a function when the state changes.
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            ////alert("Code editor text has been saved.");
            response_text = await xhr.responseText;
            return response_text;
        }
    }
    xhr.send(form_data);
}

//this function is called by a function in the
//file: 'javascript_code_editor.js'.
//it removes the existing iframe element, and
//then creates a new one. the src attribute of
//the newly created iframe is set to the URL of
//the ASP.NET page to load the iframe with the
//respective code type (javascript, html, css).
async function place_code_editor_iframe_contents(win_id, code_editor_type = "javascript") {
    var iframe = null;
    var iframe_top = null;
    var iframe_height = null;
    var iframe_width = null;
    var code_container = null;
    var editor_type = null;
    var base_url = null;
    var code_text = null;

    editor_type = code_editor_type;
    if (!is_code_editor_type_valid(editor_type)) {
        return;
    }

    base_url = return_base_path();
    iframe = document.createElement("iframe");
    iframe.setAttribute("id", win_id + "_code_editor_iframe_" + editor_type);

    iframe.setAttribute("data-win_id", win_id);
    iframe.setAttribute("data-code_editor_type", editor_type);

    if (document.getElementById(win_id + "_code_editor_iframe_" + editor_type) !== null) {
        ////document.getElementById(win_id + "_code_editor_iframe_" + editor_type).parentNode.removeChild(document.getElementById(win_id + "_code_editor_iframe_" + editor_type));
    }

    iframe.setAttribute("frameborder", "0");
    iframe.style.position = "relative";
    iframe.style.left = "0";

    iframe_top = get_code_editor_iframe_offset_top(win_id);
    iframe_height = get_code_editor_iframe_avail_height(win_id);
    iframe_width = get_dev_panel_width(win_id);
    iframe.style.top = iframe_top + "px";
    iframe.style.height = iframe_height + "px";
    iframe.style.width = iframe_width + "px";

    //Keep This. this event listener gets 
    //the text content from the code editor
    /*iframe.addEventListener("load", function () {
        setTimeout(function () {
            get_code_editor_text_contents(win_id, editor_type);
        }, 300);
    });*/

    code_container = document.getElementById(win_id + "_code_editor_container");
    if (code_container !== null) {
        code_container.appendChild(iframe);
    }

    /*iframe.addEventListener("load", async function () {
        setTimeout(async function () {
            code_text = await get_code_editor_text_from_server(win_id, editor_type);
            setTimeout(async function () {
                insert_new_text_into_code_editor(win_id, editor_type);
                setTimeout(async function () {
                    update_stored_editor_code_text(win_id, editor_type);
                }, 500);
            }, 500);
        }, 500);
    });*/

    if (editor_type === "javascript") {
        iframe.setAttribute("src", base_url + "/chromosphere/scripts/js/ui/coding_editors/javascript/code_editor_javascript?r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString());
    }
    else if (editor_type === "html") {
        iframe.setAttribute("src", base_url + "/chromosphere/scripts/js/ui/coding_editors/html/code_editor_html?r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString());
    }
    else if (editor_type === "css") {
        iframe.setAttribute("src", base_url + "/chromosphere/scripts/js/ui/coding_editors/css/code_editor_css?r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString());
    }

    return code_text;
}

//accesses the code editor iframe element and gets
//the stored code editor text located in the iframe's
//document body. the text is stored within a hidden
//input type form element.
function get_code_editor_text_contents(win_id, code_editor_type = "javascript") {
    var editor_type = null;
    var iframe_id = null;
    var iframe = null;
    var imported_element = null;
    var text_storage_element = null;
    var code_editor_text_contents = null;

    editor_type = code_editor_type;
    if (!is_code_editor_type_valid(editor_type)) {
        return;
    }

    iframe_id = win_id + "_code_editor_iframe_" + editor_type;
    iframe = document.getElementById(iframe_id);
    if (iframe !== null) {
        if (iframe.contentWindow !== null) {
            text_storage_element = iframe.contentWindow.document.getElementById("store_code_text");
            imported_element = document.importNode(text_storage_element, true);
            if (imported_element !== null) {
                if (imported_element.hasAttribute("value") === true) {
                    code_editor_text_contents = imported_element.getAttribute("value");
                    imported_element.remove();
                }
            }
        }
    }
    return code_editor_text_contents;
}

function return_base_path() {
    var host = null;
    var port = null;
    var protocol = null;
    var base_url = null;

    host = window.location.hostname;
    port = window.location.port;
    if (port !== "" && port !== null && port !== undefined) {
        port = ":" + port;
    }
    protocol = window.location.protocol + "//";
    base_url = protocol + host + port;
    return base_url;
}

//this function retrieves the code text (javascript, html, css)
//from the database via HTTP. once the code text has been recieved
//from the database, the code editor text is removed, then the new
//code text is inserted into the code editor. another function is
//called to sync the stored code text -- which is stored as a hidden form
//element within the iframe's document -- to match the newly retrieved
//code text.
async function get_code_editor_text_from_server(win_id, code_editor_type = "javascript") {
    //alert(code_editor_type);
    var u = null;
    var b = null;
    var q_str = null;
    var win = null;
    var editor_type = null;
    var d = null;

    editor_type = code_editor_type;
    if (!is_code_editor_type_valid(editor_type)) {
        return;
    }

    win = document.getElementById(win_id);
    if (win !== null) {
        q_str = win.getAttribute("data-content_id");

        b = return_base_path();
        if (editor_type === "javascript") {
            u = b + "/chromosphere/scripts/js/ui/ss/contents_and_js/get_js?i=" + q_str + "&r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
            d = await getDataCodeEditorHTTP(u);
            return (await d);
        }
        else if (editor_type === "html") {
            u = b + "/chromosphere/scripts/js/ui/ss/contents_and_js/get_content?i=" + q_str + "&r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
            d = await getDataCodeEditorHTTP(u);
            return (await d);
        }
        else if (editor_type === "css") {
            u = b + "/chromosphere/scripts/js/ui/ss/contents_and_js/get_css?i=" + q_str + "&r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
            d = await getDataCodeEditorHTTP(u);
            return (await d);
        }
    }
}

async function getDataCodeEditorHTTP(url) {
    let d = await fetch(url);
    let t = await d.text();
    return t;
}

//this function reloads a blank image located inside
//the iframe's document element. the image has an "onload"
//event listener that calls a function. the function updates
//the stored code editor's text to sync with the text inside
//the code editor. 
function update_stored_editor_code_text(win_id, code_editor_type = "javascript") {
    var editor_type = null;
    var iframe_id = null;
    var iframe = null;
    var update_stored_code_text_image = null;
    var image_path = null;
    var image_querystring = null;
    var new_image_path_and_querystring = null;

    editor_type = code_editor_type;
    if (!is_code_editor_type_valid(editor_type)) {
        return;
    }

    iframe_id = win_id + "_code_editor_iframe_" + editor_type;
    iframe = document.getElementById(iframe_id);
    if (iframe !== null) {
        if (iframe.contentWindow !== null) {
            update_stored_code_text_image = iframe.contentWindow.document.getElementById("update_stored_code_text_image");
            if (update_stored_code_text_image !== null) {
                if (update_stored_code_text_image.hasAttribute("src") === true) {
                    image_path = update_stored_code_text_image.getAttribute("src");
                    if (typeof (image_path) === "string" && image_path.length > 0) {
                        if (image_path.indexOf("?") > -1.0) {
                            image_path = image_path.split("?")[0];
                            image_querystring = image_path.split("?")[1];
                            if (typeof (image_path) === "string" && image_path.length > 0) {
                                image_querystring = parseFloat(Math.floor(Math.random() * 9000000000000) + 1000000000000);
                                if (typeof (image_querystring) === "number") {
                                    image_querystring = image_querystring.toString();
                                    new_image_path_and_querystring = (image_path + "?r=" + image_querystring);
                                    update_stored_code_text_image.setAttribute("src", new_image_path_and_querystring);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

//gets the code editor's text (javascript, html, css) that's
//stored in the database via HTTP. Get's the unique ID of the
//iframe's document that is set using ASP.NET. The unique ID
//is stored in the iframe's document as a hidden input form field.
//get the names of the functions inside the iframe's document.
//call the first function to remove all text inside the iframe's
//code editor. next, call the second function which places the
//new text from the database into the text editor.
async function insert_new_text_into_code_editor(win_id, code_editor_type = "javascript") {
    var editor_type = null;
    var iframe_id = null;
    var iframe = null;
    var win = null;
    var q_str = null;
    var iframe_win = null;
    var u = null;
    var b = null;
    var d = null;

    editor_type = code_editor_type;
    if (!is_code_editor_type_valid(editor_type)) {
        return;
    }

    win = document.getElementById(win_id);
    if (win !== null) {
        q_str = win.getAttribute("data-content_id");
        iframe_id = win_id + "_code_editor_iframe_" + editor_type;
        iframe = document.getElementById(iframe_id);
        if (iframe !== null) {
            if (iframe.contentWindow !== null) {
                iframe_win = iframe.contentWindow;
                b = return_base_path();
                if (editor_type === "javascript") {
                    u = b + "/chromosphere/scripts/js/ui/ss/contents_and_js/get_js?i=" + q_str + "&r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
                    d = await getDataCodeEditorHTTP(u);
                }
                else if (editor_type === "html") {
                    u = b + "/chromosphere/scripts/js/ui/ss/contents_and_js/get_content?i=" + q_str + "&r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
                    d = await getDataCodeEditorHTTP(u);
                }
                else if (editor_type === "css") {
                    u = b + "/chromosphere/scripts/js/ui/ss/contents_and_js/get_css?i=" + q_str + "&r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
                    d = await getDataCodeEditorHTTP(u);
                }
                else {
                    return;
                }

                iframe_win.editor_remove_all_code_editor_text();
                iframe_win.editor_insert_code_editor_text(d);
            }
        }
    }
}

//gets the unique ID of the iframe window's document
//that is assigned to the ASP.NET page inside the iframe.
//the unique ID is stored in the iframe document and inside
//a hidden input form field within the "value" HTML attribute.
function get_code_editor_iframe_unique_id(win_id, code_editor_type = "javascript") {
    var editor_type = null;
    var iframe_id = null;
    var iframe = null;
    var win = null;
    var iframe_win = null;
    var hidden_input_obj = null;
    var unique_id = null;

    editor_type = code_editor_type;
    if (!is_code_editor_type_valid(editor_type)) {
        return;
    }

    win = document.getElementById(win_id);
    if (win !== null) {
        q_str = win.getAttribute("data-content_id");

        iframe_id = win_id + "_code_editor_iframe_" + editor_type;
        iframe = document.getElementById(iframe_id);
        if (iframe !== null) {
            if (iframe.contentWindow !== null) {
                iframe_win = iframe.contentWindow;
                hidden_input_obj = iframe_win.document.getElementById("code_editor_unique_id");
                if (hidden_input_obj !== null) {
                    if (hidden_input_obj.hasAttribute("value") === true) {
                        unique_id = hidden_input_obj.getAttribute("value");
                        return unique_id;
                    }
                }
            }
        }
    }
}





//function make_code_editor_save_icon_as_image(win_id, code_editor_type = "javascript") {
//    var img = null;
//    var img_src = null;
//    var base_path = null;
//    var img_id = null;
//    var existing_image = null;
//    var editor_type = null;

//    base_path = return_base_path();

//    editor_type = code_editor_type;
//    if (!is_code_editor_type_valid(editor_type)) {
//        return;
//    }

//    img_id = win_id + "_save_code_editor_text_image";
//    existing_image = document.getElementById(img_id);
//    if (existing_image !== null) {
//        existing_image.parentNode.removeChild(existing_image);
//    }

//    img = document.createElement("img");
//    img.setAttribute("id", img_id);
//    img_src = base_path + "/chromosphere/images/ui/icons/save_icon.png?r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
//    img.src = img_src;
//    img.style.maxWidth = "23px";
//    img.style.maxHeight = "23px";
//    img.style.height = "23px";
//    img.style.width = "23px";
//    img.style.borderStyle = "solid";
//    img.style.borderColor = "rgba(255,255,255,0.0)";
//    img.style.borderWidth = "2px";
//    img.style.background = "none";
//    img = img_mouse_events(img);
//    img.addEventListener("click", function () {
//        save_form_text_data(win_id);
//        img.style.opacity = 0.5;
//        setTimeout(function () {
//            img.style.opacity = 1.0;
//        }, 700);
//    });
//    return img;
//}
//function make_code_editor_refresh_icon_as_image(win_id, code_editor_type = "javascript") {
//    var img = null;
//    var img_src = null;
//    var base_path = null;
//    var img_id = null;
//    var existing_image = null;
//    var editor_type = null;

//    base_path = return_base_path();

//    editor_type = code_editor_type;
//    if (!is_code_editor_type_valid(editor_type)) {
//        return;
//    }

//    img_id = win_id + "_refresh_code_editor_text_image";
//    existing_image = document.getElementById(img_id);
//    if (existing_image !== null) {
//        existing_image.parentNode.removeChild(existing_image);
//    }

//    img = document.createElement("img");
//    img.setAttribute("id", img_id);
//    img_src = base_path + "/chromosphere/images/ui/icons/refresh_code_editor.png"; //base_path + "/chromosphere/images/ui/icons/save_icon.png?r=" + (Math.floor(Math.random() * 900000000) + 1000000000).toString();
//    img.src = img_src;
//    img.style.maxWidth = "23px";
//    img.style.maxHeight = "23px";
//    img.style.height = "23px";
//    img.style.width = "23px";
//    img.style.borderStyle = "solid";
//    img.style.borderColor = "rgba(255,255,255,0.0)";
//    img.style.borderWidth = "2px";
//    img.style.background = "none";
//    img = img_mouse_events(img);
//    img.addEventListener("click", function () {
//        insert_new_text_into_code_editor(win_id, editor_type);
//        img.style.opacity = 0.5;
//        setTimeout(function () {
//            img.style.opacity = 1.0;
//        }, 700);
//    });
//    return img;
//}
//function make_code_editor_exit_icon_as_image(win_id, code_editor_type = "javascript") {
//    var img = null;
//    var img_src = null;
//    var base_path = null;
//    var img_id = null;
//    var existing_image = null;
//    var editor_type = null;

//    base_path = return_base_path();

//    editor_type = code_editor_type;
//    if (!is_code_editor_type_valid(editor_type)) {
//        return;
//    }

//    img_id = win_id + "_exit_code_editor_text_image";
//    existing_image = document.getElementById(img_id);
//    if (existing_image !== null) {
//        existing_image.parentNode.removeChild(existing_image);
//    }

//    img = document.createElement("img");
//    img.setAttribute("id", img_id);
//    img_src = base_path + "/chromosphere/images/ui/icons/checkmark5.png";
//    img.src = img_src;
//    img.style.maxWidth = "23px";
//    img.style.maxHeight = "23px";
//    img.style.height = "23px";
//    img.style.width = "23px";
//    img.style.borderStyle = "solid";
//    img.style.borderColor = "rgba(255,255,255,0.0)";
//    img.style.borderWidth = "2px";
//    img.style.background = "none";
//    img = img_mouse_events(img);
//    img.addEventListener("click", function () {
//        exit_code_editor(win_id);
//        img.style.opacity = 0.5;
//        setTimeout(function () {
//            img.style.opacity = 1.0;
//        }, 700);
//    });
//    return img;
//}
//function img_mouse_events(img) {
//    img.setAttribute("onmouseover", "this.style.borderColor='#89898a';this.style.backgroundColor='#bcbcbc';");
//    img.setAttribute("onmousedown", "this.style.borderColor='#00f';this.style.backgroundColor='#fff';");
//    img.setAttribute("onmouseup", "this.style.borderColor='#002';this.style.backgroundColor='#002';");
//    img.setAttribute("onmouseout", "this.style.borderColor='#002';this.style.backgroundColor='#002';");
//    return img;
//}
//function set_code_window_generic_controls_to_default(win_id) {
//    var controls_table = null;
//    var control_tr_0000 = null;
//    var control_td_0000 = null;
//    var control_td_0001 = null;
//    var control_td_0002 = null;
//    var control_td_padding_left = null;
//    var control_td_width = null;
//    var control_td_max_width = null;
//    var control_td_height = null;
//    var control_td_max_height = null;
//    var control_td_padding = null;
//    var controls_table_height = null;
//    var controls_table_max_height = null;
//    var controls_table_margin = null;

//    control_td_padding = 3;
//    control_td_padding_left = 3;

//    control_td_width = 23 + control_td_padding_left + control_td_padding;
//    control_td_max_width = control_td_width;

//    control_td_height = 23 + (control_td_padding * 2);
//    control_td_max_height = control_td_height;

//    controls_table_margin = 0;
//    controls_table_height = 28 + (control_td_padding * 2) + (controls_table_margin * 2);
//    controls_table_max_height = controls_table_height;

//    controls_table = document.createElement("table");
//    controls_table.setAttribute("id", win_id + "_code_editor_container_table");
//    controls_table.style.position = "fixed";
//    controls_table.style.height = controls_table_height + "px";
//    controls_table.style.width = "auto";
//    controls_table.style.maxHeight = controls_table_max_height + "px";
//    controls_table.style.padding = "0";
//    controls_table.style.margin = controls_table_margin + "px";
//    controls_table.style.backgroundColor = "rgb(0,0,51)";

//    control_tr_0000 = document.createElement("tr");
//    control_tr_0000.setAttribute("id", win_id + "_code_editor_container_table_tr_0000");

//    control_td_0000 = document.createElement("td");
//    control_td_0000.setAttribute("id", win_id + "_code_editor_container_table_tr_0000_td_0000");
//    control_td_0001 = document.createElement("td");
//    control_td_0001.setAttribute("id", win_id + "_code_editor_container_table_tr_0000_td_0001");
//    control_td_0002 = document.createElement("td");
//    control_td_0002.setAttribute("id", win_id + "_code_editor_container_table_tr_0000_td_0002");

//    control_td_0000.style.height = control_td_height + "px";
//    control_td_0000.style.width = control_td_width + "px";
//    control_td_0000.style.maxHeight = control_td_max_height + "px";
//    control_td_0000.style.maxWidth = control_td_max_width + "px";
//    control_td_0000.style.userSelect = "none";
//    control_td_0000.style.padding = control_td_padding + "px";
//    control_td_0002.style.paddingLeft = control_td_padding_left + "px";
//    control_td_0000.style.margin = "0";
//    control_td_0000.style.backgroundColor = "rgb(0,0,51)";

//    control_td_0001.style.height = control_td_height + "px";
//    control_td_0001.style.width = control_td_width + "px";
//    control_td_0001.style.maxHeight = control_td_max_height + "px";
//    control_td_0001.style.maxWidth = control_td_max_width + "px";
//    control_td_0001.style.userSelect = "none";
//    control_td_0001.style.padding = control_td_padding + "px";
//    control_td_0001.style.paddingLeft = control_td_padding_left + "px";
//    control_td_0001.style.margin = "0";
//    control_td_0001.style.backgroundColor = "rgb(0,0,51)";

//    control_td_0002.style.height = control_td_height + "px";
//    control_td_0002.style.width = control_td_width + "px";
//    control_td_0002.style.maxHeight = control_td_max_height + "px";
//    control_td_0002.style.maxWidth = control_td_max_width + "px";
//    control_td_0002.style.userSelect = "none";
//    control_td_0002.style.padding = control_td_padding + "px";
//    control_td_0002.style.paddingLeft = control_td_padding_left + "px";
//    control_td_0002.style.margin = "0";
//    control_td_0002.style.backgroundColor = "rgb(0,0,51)";

//    controls_table.appendChild(control_tr_0000);
//    control_tr_0000.appendChild(control_td_0000);
//    control_tr_0000.appendChild(control_td_0001);
//    control_tr_0000.appendChild(control_td_0002);

//    return controls_table;
//}