"use strict";

function start_view_window_grid() {
    var tbl_exists = null;

    tbl_exists = (document.getElementById("window_grid_table") !== null) ? true : false;
    if (tbl_exists === true) {
    }
    else {
        get_window_grid_table();
        place_td_blank_img();
    }
}

function get_window_grid_table() {
    var grid_table = null;
    var tr = null;
    var td = null;
    var td_width = null;
    var td_height = null
    var tr_width = null;
    var tr_height = null;
    var i = null;
    var j = null;
    var array_count = null;

    grid_table = document.getElementById("window_grid_table");
    if (grid_table !== null) {
        return grid_table;
    }
    else {
        grid_table = document.createElement("table");
        grid_table.setAttribute("id", "window_grid_table");
        grid_table.setAttribute("border", "0");
        grid_table.setAttribute("cellspacing", "20");
        grid_table.setAttribute("cellspadding", "0");
        grid_table.style.position = "absolute";
        grid_table.style.top = "0"; // (parseFloat(self.innerHeight)) + "px"; //"0"; // offset_grid_table_Y() + "px";
        grid_table.style.left = "0";
        grid_table.style.width = "calc(100% - 7px)";
        grid_table.style.zIndex = -1000;
        ////grid_table.style.paddingTop = "calc(" + parseFloat(self.innerHeight) + "px - 200px)";
        grid_table.style.opacity = 0.0;
        grid_table.style.overflow = "hidden";

        tr_width = "calc(100% - 7px)";
        tr_height = (parseFloat(window.innerHeight) / 2.0) + "px";
        td_width = (parseFloat(window.innerWidth) / 5.0) + "px"; //(tr_height / 1.618) + "px";
        td_height = tr_height;

        grid_table.style.paddingTop = (parseFloat(window.innerHeight) - 40) * get_pixel_ratio() + "px"; //"calc(" + (parseFloat(window.innerHeight) * get_pixel_ratio()) + "px + " + tr_height + "px)";
        document.body.appendChild(grid_table);
        for (i = 0; i < 7; i++) {
            tr = create_window_grid_table_tr("window_grid_table_row_" + (1000 + i), tr_width, tr_height);
            grid_table.appendChild(tr);
            for (j = 0; j < 5; j++) {
                //array_count = global_timer_ids.push(setTimeout(function () {
                   td = create_window_grid_table_td(("window_grid_table_row_" + (1000 + i) + "_td_" + (1000 + j)), td_width, td_height);
                   tr.appendChild(td);
                //clearTimeout(global_timer_ids[array_count - 1]);
                //(((j + i) + 1) * 300)));
            }
        }
    }
    return grid_table;
}

function create_window_grid_table_tr(id, tr_width, tr_height) {
    var tr = null;

    tr = document.createElement("tr");
    tr.setAttribute("id", id);
    tr.style.width = tr_width;
    tr.style.height = tr_height;

    return tr;
}

function create_window_grid_table_td(id, td_width, td_height) {
    var td = null;

    td = document.createElement("td");
    td.setAttribute("id", id);
    td.setAttribute("name", "window_grid_table_cell");
    td.style.width = td_width;
    td.style.height = td_height;
    td.style.minWidth = "256px";

    return td;
}

function add_blank_image_to_td(td_cell) {
    var img = null;
    var td = null;

    td = td_cell;
    if (td !== null) {
        img = document.createElement("img");
        img.setAttribute("id", (td.getAttribute("id") + "_blank_image"));
        img.setAttribute("src", "/chromosphere/images/blank.gif");
        img.setAttribute("name", "window_grid_table_image");
        img.style.position = "relative";
        img.style.top = "auto";   
        img.style.left = "auto";  
        img.style.width = "100%"; 
        img.style.height = "100%";
        img.style.backgroundColor = "rgba(0,0,255,0.5)";
        td.appendChild(img);

        img.addEventListener("load", function () {
            image_load_place_window(img);
            img.parentNode.removeChild(img);
        });
        return td;
    }
}


async function image_load_place_window(image) {
    var img = null;
    var win = null;
    var w = null;
    var h = null;
    var t = null;
    var l = null;

    img = image;
    w = parseFloat(img.offsetWidth);
    h = parseFloat(img.offsetHeight);
    t = parseFloat(img.offsetTop);
    l = parseFloat(img.offsetLeft);
    win = await make_new_window(null, l, t, w, h, (Math.floor(Math.random() * 900) + 100), null);
}



function place_td_blank_img() {
    var tds = null;
    var td = null;
    var i = null;
    var td_count = null;

    tds = document.getElementsByName("window_grid_table_cell");
    if (tds !== null) {
        if (tds.length > 0) {
            td_count = tds.length;
            for (i = 0; i < td_count; i++) {
                td = tds[i];
                if (td !== null) {
                    add_blank_image_to_td(td);
                }
            }
        }
    }
    setTimeout(function () {
        remove_window_grid_table();
    }, 2000);
}


function remove_window_grid_table() {
    var grid_table = null;

    grid_table = document.getElementById("window_grid_table");
    if (grid_table !== null) {
        grid_table.parentNode.removeChild(grid_table);
    }
}


function offset_grid_table_Y() {
    var menu_bar = null;
    var y_offset = null;

    menu_bar = document.getElementById("div_wrapper_0");
    if (menu_bar !== null) {
        y_offset = parseFloat(menu_bar.offsetTop) + parseFloat(menu_bar.offsetHeight);
        ////y_offset = y_offset + "px";
    }
    else {
        y_offset = 0;
        ////y_offset = y_offset + "px";
    }
    return y_offset;
}

//function create_grid_layout_table() {
//    var tbl = null;
//    var td = null;
//    var tr = null;
//    var td_array = [];
//    var tr_array = [];
//    var avail_width = null;
//    var avail_height = null;
//    var i = null;
//    var win_width = null;
//    var win_height = null;
//    var win_top = null;
//    var win_left = null;
//    var cells_per_row = null;
//    var tr_count = null;
//    var td_count = null;
//    //var wins_count = null;

//    //wins_count = document.getElementsByName("web_window").length;

//    //if (typeof (wins_count) === "number") {
//    //    if (wins_count > 0) {
//    //        //there is atleast one window, 
//    //        //continue function.
//    //    }
//    //    else {
//    //        ////return;
//    //    }
//    //}
//    //else {
//    //    ////return;
//    //}

//    tr_count = 0;
//    td_count = 0;

//    cells_per_row = 5;
//    avail_width = parseFloat(window.innerWidth);
//    win_width = parseFloat(avail_width / cells_per_row);
//    win_height = win_width * 1.33;

//    tbl = document.getElementById("grid_layout_table");
//    if (tbl !== null) {
//        tbl.parentNode.removeChild(tbl);
//    }
//    tbl = document.createElement("table");
//    tbl.setAttribute("id", "grid_layout_table");
//    tbl.setAttribute("border", "1");
//    tbl.setAttribute("cellspacing", "0");
//    tbl.setAttribute("cellpadding", "0");
//    tbl.style.position = "absolute";
//    tbl.style.top = "32px";
//    tbl.style.display = "none";
//    document.body.appendChild(tbl);

//    for (i = 0; i < 50; i++) {
//        if (i % cells_per_row === 0) {
//            tr = document.createElement("tr");
//            tr.setAttribute("id", ("grid_layout_table_tr_" + ((100000 + tr_count).toString().substring(1, 6))));
//            tr_count++;
//            tbl.appendChild(tr);
//            td_count = 0;
//        }
//        td = document.createElement("td");
//        td.setAttribute("id", (tr.id + "_td_" + ((100000 + td_count).toString().substring(1, 6))));
//        td.style.width = win_width + "px";
//        td.style.height = win_height + "px";
//        td_count++
//        tr.appendChild(td);
//        td.style.margin = "0";
//        td.style.padding = "22px";
//        setTimeout(function () {
//            place_blank_image_into_tbl_cell(td.id);
//        }, ((td_count * i * 100) + 1));
//    }
//    tbl.style.zIndex = 1000000000000000;
//    ////console.log(tbl.outerHTML);
//}


//function place_blank_image_into_tbl_cell(td_cell_id) {
//    var cell_id = null;
//    var cell = null;
//    var img = null;

//    cell_id = td_cell_id;
//    cell = document.getElementById(cell_id);
//    if (cell !== null) {
//        img = document.createElement("img");
//        img.setAttribute("id", cell.id + "_blank_image_place_holder");
//        cell.appendChild(img);
//        img.style.whiteSpace = "nowrap";
//        img.style.display = "block";
//        img.style.position = "relative";
//        img.style.top = "0";
//        img.style.left = "0";
//        img.style.width = "inherit";
//        img.style.height = parseFloat(cell.style.height) + "px"; // inherit";

//        img.style.backgroundColor = "rgba(255,255,255,0.25)";
//        ////img = set_blank_image_load_event_listener(img);

//        img.addEventListener("load", function () {
//            console.log("Image loaded id: " + img.id);
//            img.style.backgroundColor = "rgba(218,218,218,0.33)";
//            img.style.display = "block";
//            ////alert();
//            ////img.parentNode.removeChild(img);
//        });

//        img.setAttribute("src", "/chromosphere/images/blank.gif");
//    }
//}



//function set_blank_image_load_event_listener(img_place_holder) {
//    var img = null;

//    img = img_place_holder;
//    if (img !== null) {
//        //img.addEventListener("load", function () {
//        //    console.log("Image loaded id: " + img.id);
//        //    img.style.backgroundColor = "rgba(218,218,218,0.33)";
//        //    alert();
//        //    ////img.parentNode.removeChild(img);
//        //});
//    }
//    return img;
//}


//function place_windows_into_grid_table() {
//    var tbl = null;
    
//    tbl = document.getElementById("grid_layout_table");
//    if (tbl !== null) {

//    }
//}