"use strict";

function start_dev_panel(win_id) {
    var dp = null;

    dp = build_dev_panel(win_id);

    return dp;
}


function place_dev_panel(win_id, dev_panel_obj) {

}


function build_dev_panel(win_id) {
    var dev_container = null;
    var tabs = null;
    var tab_box = null;

    dev_container = make_dev_container(win_id);
    ////alert(dev_container.outerHTML);
    if (dev_container !== null) {
        tabs = make_dev_tab(win_id, "javascript", "/chromosphere");
        if (tabs !== null) {
            dev_container.appendChild(tabs);
            show_tab(win_id, tabs, 1);
            tabs.click();

            //select_tab(win_id, tabs.id);
        }

        tabs = make_dev_tab(win_id, "html", "/chromosphere");
        if (tabs !== null) {
            dev_container.appendChild(tabs);
            show_tab(win_id, tabs, 0);
        }

        tabs = make_dev_tab(win_id, "css", "/chromosphere");
        if (tabs !== null) {
            dev_container.appendChild(tabs);
            show_tab(win_id, tabs, 0);
        }

        /* 
         tab_box = make_tab_container(win_id);
        if (tab_box !== null) {
        
            //dev_container.parentNode.appendChild(tab_box);
            //tab_box.style.width = (parseFloat(dev_container.parentNode.offsetWidth) + 20) + "px";
            //tab_box.style.width = tab_box.parentNode.offsetWidth + "px";
        }
        */
        //alert(dev_container.outerHTML);

        return dev_container;
    }


    //make container
    //make tab array w/ word labels
    //place tabs into container
    //place tab container into window contents above the code editor
}



function make_dev_container(win_id) {
    ////alert("helloo0o!?");
    ////return null;
    var c = null;

    c = document.getElementById(win_id + "_developer_panel");
    if (c !== null) {
        ////c.parentNode.removeChild(c);
        ////c.innerHTML = " ";
        return c;
    }

    c = document.createElement("div");
    c.setAttribute("id", win_id + "_developer_panel");
    c.setAttribute("name", "developer_panel");
    //c.setAttribute("Attr", "value");
    c.style.position = "absolute";
    c.style.display = "flex";
    c.style.flexDirection = "row";
    c.style.flexWrap = "wrap";
    c.style.width = (document.getElementById(win_id + "_tbl_0000_tr_0001_td_0000_div_0000").offsetWidth + 2) + "px"; //"100%"; //parseFloat(self.innerWidth) + "px";
    c.style.height = "32px";
    c.style.top = "0";
    c.style.left = "0";
    c.style.overflow = "hidden";
    c.style.backgroundColor = "#ddd";
    c.style.borderBottom = "none"; //solid 1px #222";
    c.style.padding = "0";
    c.style.margin = "0";
    ////c.style.borderTopLeftRadius = "6px";
    ////c.style.borderTopRightRadius = "6px";

    ////c.innerHTML = " ";
    return c;
}


function make_dev_tab(win_id, txt_label, URL_Str) {
    var tab = null;
    var rand = null;

    rand = Math.abs(Math.floor(Math.random() * 90000000000) + 10000000000).toString();

    tab = document.createElement("div");
    tab.setAttribute("id", win_id + "_" + rand + "_developer_panel_tab");
    tab.setAttribute("name", "developer_panel_tab");

    tab.style.position = "relative";
    tab.style.top = "0";
    tab.style.left = "0";
    tab.style.width = "100px";
    tab.style.height = "25px";
    tab.style.backgroundColor = "#444";
    tab.style.color = "#fff";
    tab.style.fontFamily = "Myriad Pro, Sans-serif, Arial";
    tab.style.fontSize = "16px";
    tab.style.padding = "3px";
    tab.style.paddingBottom = "0";
    tab.style.paddingTop = "5px";
    tab.style.paddingLeft = "6px";
    tab.style.paddingRight = "6px";
    tab.style.marginLeft = "2px";
    tab.style.marginRight = "2px";
    tab.style.marginTop = "4px";
    tab.style.marginBottom = "0";
    tab.style.overflow = "hide";

    tab.style.borderLeft = "solid 1px #004";
    tab.style.borderTop = "solid 1px #004";
    tab.style.borderRight = "solid 1px #004";
    tab.style.borderBottom = "none";

    tab.style.borderTopLeftRadius = "4px";
    tab.style.borderTopRightRadius = "4px";

    tab.style.cursor = "default";

    tab.innerHTML = "<b>" + txt_label + "</b>";
    //tab = tab_actions(win_id, tab.getAttribute("id"));
    tab = tab_actions(win_id, tab);
    //alert(tab);
    return tab;
}

function tab_actions(win_id, tab) {
    var w = null;
    var tb = null;
    var tb_txt = null;

    w = document.getElementById(win_id);
    tb = tab;

    tb_txt = tb.innerText;
    if (typeof tb_txt === "string") {
        if (tb_txt.length > 0) {
            if (tb_txt != "javascript") {
                tb_txt = tb_txt.toUpperCase();
            } else if (tb_txt == "javascript") {
                tb_txt = tb_txt.replace("javascript", "JavaScript");
            }
            tb.setAttribute("data-title", tb_txt);
            tb.setAttribute("data-desc", "view, edit, and save the " + tb_txt + " for this window");
            set_caption(tb);
        }
    }

    tb.setAttribute("onmouseover", "this.style.textDecoration='underline'");
    tb.setAttribute("onmouseout", "this.style.textDecoration='none'");
    tb.setAttribute("onmousedown", "deselect_all_tabs('" + win_id + "')");
    //tb.setAttribute("onmouseup", "select_tab('" + win_id + "', this.id)");


    tb.setAttribute("onclick", "hide_all_object_controls('" + win_id + "');select_tab('" + win_id + "', this.id);");


    //hide_all_object_controls(win_id);
    //tb.setAttribute("onmouseup", "show_tab('" + win_id + "', this, 0)");
    return tb;
    //tab = document.getElementById(tab_id);
    //if () {

    // }
    //return tab;

}

function show_tab(win_id, tab, visible) {
    if (tab !== null) {
        if (visible === 0) {
            tab.style.opacity = "50%";
            tab.style.backgroundColor = "#003";
            tab.style.borderBottom = "solid 1px #222";
        }
        else if (visible === 1) {
            tab.style.opacity = "100%";
            tab.style.backgroundColor = "#003";
            tab.style.borderBottom = "none";
        }
    }
}



function make_tab_container(win_id) {
    return;
    /*
    var d = null;
    var rand = null;

    rand = Math.abs(Math.floor(Math.random() * 90000000000) + 10000000000).toString();

    d = document.createElement("div");
    d.setAttribute("id", win_id + "_" + rand + "_tab_container");
    //d.setAttribute("", "");
    d.style.backgroundColor = "#003";
    d.style.position = "absolute";
    d.style.top = "0";
    d.style.left = "0";
    d.style.width = "100%"; //(parseFloat(self.innerWidth)) + "px";
    d.style.height = "32px"; //(parseFloat(self.innerHeight) - 32 - 1) + "px";
    d.style.overflow = "visible";
    d.style.margin = "0";
    d.style.padding = "0";
    d.innerHTML = "&nbsp;";
    return d;
    */
}


//2023-09-19:
//editing this function to work properly when duplicate window instances exist.
//the 'has_duplicate_window_instances(win_id)' function checks for duplicate window
//instances. If there are duplicates, this function only deselects tabs on the
//individual window that is focused. See file 'open_window.js'
function deselect_all_tabs(win_id) {
    var dev_panels = null;
    var tb = null;
    var has_duplicate_windows = null;

    has_duplicate_windows = has_duplicate_window_instances(win_id);

    if (has_duplicate_windows !== true) {
        dev_panels = document.getElementsByName("developer_panel_tab");
        for (i = 0; i < dev_panels.length; i++) {
            tb = dev_panels[i];
            show_tab(win_id, tb, 0);
        }
    }
    else {
        //this function only deselects tabs that are part of
        //a single window instance, provided other window duplicates
        //are open. See file 'open_window.js'
        deselect_all_single_window_tabs(win_id);
    }
}


//2023-09-19:
//This function deselects only tabs of a single window.
//If there are multiple window instances open, we only want to
//deselect the tab that belongs to that specific window;
//not all window instances.

function deselect_all_single_window_tabs(win_id) {
    var dev_panels = null;
    var tb = null;
    var cid = null;

    cid = win_id.split("_")[2];

    dev_panels = document.getElementsByName("developer_panel_tab");
    for (i = 0; i < dev_panels.length; i++) {
        tb = dev_panels[i];
        if (tb.id.indexOf(win_id) > -1.0) {
            show_tab(win_id, tb, 0);
        }
    }
}



function select_tab(win_id, tab_id) {
    var tb = null;
    var w = null;
    var tb_pnl = null;

    w = document.getElementById(win_id);
    tb = document.getElementById(tab_id);

    show_tab(win_id, tb, 1); //select tab...

    if (tb !== null) {
        tb_pnl = show_tab_panel(win_id, tab_id, tb.innerText);
    }

}




function show_tab_panel(win_id, tab_id, tb_text) {
    var w = null;
    var tb = null;
    var txt = null;

    w = document.getElementById(win_id);
    tb = document.getElementById(tab_id);
    txt = tb_text; //tb.innerText;

    hide_all_object_controls(win_id); //make sure to hide all tab panels
    set_code_editor_iframe_is_visible_attribute(win_id, false, "javascript");
    set_code_editor_iframe_is_visible_attribute(win_id, false, "html");
    set_code_editor_iframe_is_visible_attribute(win_id, false, "css");

    if (txt === "javascript") {
        ////alert("javascript");
        ////show_jsEditor_controls(win_id);
        show_javascript_editor_controls(win_id, "javascript");
        set_code_editor_iframe_is_visible_attribute(win_id, true, "javascript");
    }
    else if (txt === "html") {
        ////alert("html");
        ////show_htmlEditor_controls(win_id);
        show_html_editor_controls(win_id, "html");
        set_code_editor_iframe_is_visible_attribute(win_id, true, "html");
    }
    else if (txt === "css") {
        ////alert("css");
        ////show_cssEditor_controls(win_id);
        show_css_editor_controls(win_id, "css");
        set_code_editor_iframe_is_visible_attribute(win_id, true, "css");
    }
    else {
        ////alert("default");
        ////show_jsEditor_controls(win_id);
        show_javascript_editor_controls(win_id, "javascript");
        set_code_editor_iframe_is_visible_attribute(win_id, true, "javascript");
    }
    return txt;
}