// jshint esversion:6

var commit1;
var commit2;

var old_view;
var current_view;

current_diff_filter = "diff" // diff or normal

var panZoom_instance = null;
var lastEventListener = null;
var lastEmbed = null;

var current_selected_page = 0;
var previous_selected_page = -1;

sch_current_zoom = null;
sch_old_zoom = null;
sch_current_pan = null;

pcb_current_zoom = null;
pcb_old_zoom = null;
pcb_current_pan = null;

// Variables updated by Kiri
var selected_view = "schematic";

var is_fullscreen = false;

// =======================================
// HANDLE SHORTCUTS
// =======================================

function select_next_2_commits() {
    commits = $("#commits_form input:checkbox[name='commit']");

    selected_commits = [];
    next_selected_commits = [];

    for (i = 0; i < commits.length; i++) {
        if ($("#commits_form input:checkbox[name='commit']")[i].checked) {
            selected_commits.push(i);
            next_selected_commits.push(i + 1);
        }
    }

    // When second commit reaches the end, moves the first commit forward (if possible)
    if (next_selected_commits[1] >= commits.length) {
        next_selected_commits[1] = commits.length - 1;
        if (next_selected_commits[0] <= commits.length - 2) {
            next_selected_commits[0] = selected_commits[0] + 1;
        }
    }
    else {
        // By default does not change the first commit
        next_selected_commits[0] = selected_commits[0];
    }

    // Fix bottom boundary
    if (next_selected_commits[0] >= next_selected_commits[1]) {
        next_selected_commits[0] = next_selected_commits[1] - 1;
    }

    // Fix bottom boundary
    if (next_selected_commits[0] >= commits.length - 2) {
        next_selected_commits[0] = commits.length - 2;
    }

    // Update selected commits
    for (i = 0; i < selected_commits.length; i++) {
        commits[selected_commits[i]].checked = false;
    }
    for (i = 0; i < selected_commits.length; i++) {
        commits[next_selected_commits[i]].checked = true;
    }

    update_commits();
}

function select_next_commit() {
    commits = $("#commits_form input:checkbox[name='commit']");

    selected_commits = [];
    next_selected_commits = [];

    for (i = 0; i < commits.length; i++) {
        if ($("#commits_form input:checkbox[name='commit']")[i].checked) {
            selected_commits.push(i);
            next_selected_commits.push(i + 1);
        }
    }

    // Fix bottom boundary
    if (next_selected_commits[1] >= commits.length - 1) {
        next_selected_commits[1] = commits.length - 1;
    }

    // Fix bottom boundary
    if (next_selected_commits[0] >= commits.length - 2) {
        next_selected_commits[0] = commits.length - 2;
    }

    for (i = 0; i < selected_commits.length; i++) {
        commits[selected_commits[i]].checked = false;
    }
    for (i = 0; i < selected_commits.length; i++) {
        commits[next_selected_commits[i]].checked = true;
    }

    update_commits();
}

function select_previows_2_commits() {
    commits = $("#commits_form input:checkbox[name='commit']");

    selected_commits = [];
    next_selected_commits = [];

    for (i = 0; i < commits.length; i++) {
        if ($("#commits_form input:checkbox[name='commit']")[i].checked) {
            selected_commits.push(i);
            next_selected_commits.push(i - 1);
        }
    }

    // By default does not change the first commit
    next_selected_commits[0] = selected_commits[0];

    // When commits are touching, move first backwards (if possible)
    if (next_selected_commits[1] == next_selected_commits[0]) {
        if (next_selected_commits[0] > 0) {
            next_selected_commits[0] = next_selected_commits[0] -1;
        }
    }

    // Fix top boundary
    if (next_selected_commits[0] < 0) {
        next_selected_commits[0] = 0;
    }

    // Fix top boundary
    if (next_selected_commits[1] <= 1) {
        next_selected_commits[1] = 1;
    }

    // Update selected commits
    for (i = 0; i < selected_commits.length; i++) {
        commits[selected_commits[i]].checked = false;
    }
    for (i = 0; i < selected_commits.length; i++) {
        commits[next_selected_commits[i]].checked = true;
    }

    update_commits();
}

function select_previows_commit()
{
    commits = $("#commits_form input:checkbox[name='commit']");

    selected_commits = [];
    next_selected_commits = [];

    for (i = 0; i < commits.length; i++) {
        if ($("#commits_form input:checkbox[name='commit']")[i].checked) {
            selected_commits.push(i);
            next_selected_commits.push(i - 1);
        }
    }

    // Fix top boundary
    if (next_selected_commits[0] <= 0) {
        next_selected_commits[0] = 0;
    }

    // Fix top boundary
    if (next_selected_commits[1] <= 1) {
        next_selected_commits[1] = 1;
    }

    // Update selected commits
    for (i = 0; i < selected_commits.length; i++) {
        commits[selected_commits[i]].checked = false;
    }
    for (i = 0; i < selected_commits.length; i++) {
        commits[next_selected_commits[i]].checked = true;
    }

    update_commits();
}

function reset_commits_selection()
{
    commits = $("#commits_form input:checkbox[name='commit']");
    selected_commits = [];
    for (i = 0; i < commits.length; i++) {
        $("#commits_form input:checkbox[name='commit']")[i].checked = false;
    }
    for (i = 0; i < 2; i++) {
        $("#commits_form input:checkbox[name='commit']")[i].checked = true;
    }

    // reset visibility of the diff images
    $("#diff-xlink-1").css('visibility', 'visible')
    $("#commit1_legend").css('visibility', 'visible');
    $("#commit1_legend_text").css('visibility', 'visible');
    $("#commit1_legend_fs").css('visibility', 'visible');
    $("#commit1_legend_text_fs").css('visibility', 'visible');
    $("#commit1_legend").css('color', '#00FF00');
    $("#commit1_legend_fs").css('color', '#00FF00');

    $("#diff-xlink-2").css('visibility', 'visible')
    $("#commit2_legend").css('visibility', 'visible');
    $("#commit2_legend_text").css('visibility', 'visible');
    $("#commit2_legend_fs").css('visibility', 'visible');
    $("#commit2_legend_text_fs").css('visibility', 'visible');
    $("#commit2_legend").css('color', '#FF0000');
    $("#commit2_legend_fs").css('color', '#FF0000');

    $("#commit3_legend").css('visibility', 'visible');
    $("#commit3_legend_text").css('visibility', 'visible');
    $("#commit3_legend_fs").css('visibility', 'visible');
    $("#commit3_legend_text_fs").css('visibility', 'visible');

    $("#diff-xlink-1").css('filter', 'url(#filter-1)') /// FILTER_DEFAULT
    $("#diff-xlink-2").css('filter', 'url(#filter-2)') /// FILTER_DEFAULT

    update_commits();
}

function toggle_sch_pcb_view() {
    old_view = current_view;
    current_view = $('#view_mode input[name="view_mode"]:checked').val();
    if (current_view == "show_sch") {
        show_pcb();
    } else {
        show_sch();
    }
    update_commits();
}

function toggle_old_commit_visibility()
{
    if ($("#diff-xlink-1").css('visibility') === "hidden")
    {
        current_diff_filter = "diff";
        $("#diff-xlink-1").css('visibility', 'visible')
        $("#commit1_legend").css('visibility', 'visible');
        $("#commit1_legend_text").css('visibility', 'visible');
        $("#commit1_legend_fs").css('visibility', 'visible');
        $("#commit1_legend_text_fs").css('visibility', 'visible');

        $("#commit3_legend").css('visibility', 'visible');
        $("#commit3_legend_text").css('visibility', 'visible');
        $("#commit3_legend_fs").css('visibility', 'visible');
        $("#commit3_legend_text_fs").css('visibility', 'visible');
    }
    else
    {
        current_diff_filter = "single";
        $("#diff-xlink-1").css('visibility', 'hidden')
        $("#commit1_legend").css('visibility', 'hidden');
        $("#commit1_legend_text").css('visibility', 'hidden');
        $("#commit1_legend_fs").css('visibility', 'hidden');
        $("#commit1_legend_text_fs").css('visibility', 'hidden');

        $("#commit3_legend").css('visibility', 'hidden');
        $("#commit3_legend_text").css('visibility', 'hidden');
        $("#commit3_legend_fs").css('visibility', 'hidden');
        $("#commit3_legend_text_fs").css('visibility', 'hidden');
    }

    // enable the other image back
    if ($("#diff-xlink-1").css('visibility') === "hidden")
    {
        $("#diff-xlink-2").css('visibility', 'visible')
        $("#diff-xlink-2").css('filter', 'url(#filter-22)') /// FILTER_WHITE
        $("#commit2_legend").css('visibility', 'visible');
        $("#commit2_legend_text").css('visibility', 'visible');
        $("#commit2_legend_fs").css('visibility', 'visible');
        $("#commit2_legend_text_fs").css('visibility', 'visible');

        $("#commit2_legend").css('color', '#a7a7a7');
        $("#commit2_legend_fs").css('color', '#a7a7a7');
    }
    else
    {
        $("#diff-xlink-1").css('filter', 'url(#filter-1)') /// FILTER_DEFAULT
        $("#diff-xlink-2").css('filter', 'url(#filter-2)') /// FILTER_DEFAULT

        $("#commit1_legend").css('color', '#00FF00');
        $("#commit1_legend_fs").css('color', '#00FF00');
        $("#commit2_legend").css('color', '#FF0000');
        $("#commit2_legend_fs").css('color', '#FF0000');
    }
}

function toggle_new_commit_visibility()
{
    if ($("#diff-xlink-2").css('visibility') === "hidden")
    {
        current_diff_filter = "diff";
        $("#diff-xlink-2").css('visibility', 'visible')
        $("#commit2_legend").css('visibility', 'visible');
        $("#commit2_legend_text").css('visibility', 'visible');
        $("#commit2_legend_fs").css('visibility', 'visible');
        $("#commit2_legend_text_fs").css('visibility', 'visible');

        $("#commit3_legend").css('visibility', 'visible');
        $("#commit3_legend_text").css('visibility', 'visible');
        $("#commit3_legend_fs").css('visibility', 'visible');
        $("#commit3_legend_text_fs").css('visibility', 'visible');
    }
    else
    {
        current_diff_filter = "single";
        $("#diff-xlink-2").css('visibility', 'hidden')
        $("#commit2_legend").css('visibility', 'hidden');
        $("#commit2_legend_text").css('visibility', 'hidden');
        $("#commit2_legend_fs").css('visibility', 'hidden');
        $("#commit2_legend_text_fs").css('visibility', 'hidden');

        $("#commit3_legend").css('visibility', 'hidden');
        $("#commit3_legend_text").css('visibility', 'hidden');
        $("#commit3_legend_fs").css('visibility', 'hidden');
        $("#commit3_legend_text_fs").css('visibility', 'hidden');
    }

    // enable the other image back
    if ($("#diff-xlink-2").css('visibility') === "hidden")
    {
        $("#diff-xlink-1").css('visibility', 'visible')
        $("#diff-xlink-1").css('filter', 'url(#filter-12)') /// FILTER_WHITE
        $("#commit1_legend").css('visibility', 'visible');
        $("#commit1_legend_text").css('visibility', 'visible');
        $("#commit1_legend_fs").css('visibility', 'visible');
        $("#commit1_legend_text_fs").css('visibility', 'visible');

        $("#commit1_legend").css('color', '#a7a7a7');
        $("#commit1_legend_text_fs").css('color', '#a7a7a7');
    }
    else
    {
        $("#diff-xlink-1").css('filter', 'url(#filter-1)') /// FILTER_DEFAULT
        $("#diff-xlink-2").css('filter', 'url(#filter-2)') /// FILTER_DEFAULT

        $("#commit1_legend").css('color', '#00FF00');
        $("#commit1_legend_fs").css('color', '#00FF00');
        $("#commit2_legend").css('color', '#FF0000');
        $("#commit2_legend_fs").css('color', '#FF0000');
    }
}

function select_next_sch_or_pcb(cycle = false) {
    if (document.getElementById("show_sch").checked) {
        pages = $("#pages_list input:radio[name='pages']");
        selected_page = pages.index(pages.filter(':checked'));

        new_index = selected_page + 1;
        if (new_index >= pages.length) {
            if (cycle) {
                new_index = 0;
            }
            else {
                new_index = pages.length - 1;
            }
        }

        pages[new_index].checked = true;

        update_page();
    }
    else
    {
        layers = $("#layers_list input:radio[name='layers']");
        selected_layer = layers.index(layers.filter(':checked'));

        new_index = selected_layer + 1;
        if (new_index >= layers.length) {
            if (cycle) {
                new_index = 0;
            }
            else {
                new_index = layers.length - 1;
            }
        }

        layers[new_index].checked = true;

        update_layer();
    }
}

function select_preview_sch_or_pcb(cycle = false) {
    if (document.getElementById("show_sch").checked) {
        pages = $("#pages_list input:radio[name='pages']");
        selected_page = pages.index(pages.filter(':checked'));

        new_index = selected_page - 1;
        if (new_index < 0) {
            if (cycle) {
                new_index = pages.length - 1;
            }
            else {
                new_index = 0;
            }
        }

        pages[new_index].checked = true;

        update_page();
        update_sheets_list(commit1, commit2);

    } else {
        layers = $("#layers_list input:radio[name='layers']");
        selected_layer = layers.index(layers.filter(':checked'));

        new_index = selected_layer - 1;
        if (new_index < 0) {
            if (cycle) {
                new_index = layers.length - 1;
            }
            else {
                new_index = 0;
            }
        }

        layers[new_index].checked = true;

        update_layer();
    }
}

function svg_fit_center()
{
    panZoom_instance.resetZoom();
    panZoom_instance.center();
}

function svg_zoom_in()
{
    panZoom_instance.zoomIn();
}

function svg_zoom_out()
{
    panZoom_instance.zoomOut();
}

function manual_pan(direction)
{
    const step = 50;

    switch(direction) {
       case "up":
            panZoom_instance.panBy({x: 0, y: step});
            break;
       case "down":
            panZoom_instance.panBy({x: 0, y: -step});
            break;
       case "left":
            panZoom_instance.panBy({x: step, y: 0});
            break;
       case "right":
            panZoom_instance.panBy({x: -step, y: 0});
            break;
    }
}

// Commits
Mousetrap.bind(['ctrl+down', 'ctrl+]','command+down', 'command+]'], function(){select_next_2_commits()});
Mousetrap.bind(['down', ']'],      function(){select_next_commit()});

Mousetrap.bind(['ctrl+up', 'ctrl+[', 'command+up', 'command+['], function(){select_previows_2_commits()});
Mousetrap.bind(['up', '['],        function(){select_previows_commit()});

Mousetrap.bind(['r', 'R'],  function(){reset_commits_selection()});

// View
Mousetrap.bind(['s', 'S'],  function(){toggle_sch_pcb_view()});

Mousetrap.bind(['q', 'Q'],  function(){toggle_old_commit_visibility()});
Mousetrap.bind(['w', 'W'],  function(){toggle_new_commit_visibility()});

Mousetrap.bind(['alt+q', 'alt+Q'],  function(){toggle_new_commit_visibility()});
Mousetrap.bind(['alt+w', 'alt+W'],  function(){toggle_old_commit_visibility()});

Mousetrap.bind(['right'], function(){select_next_sch_or_pcb()});
Mousetrap.bind(['left'],  function(){select_preview_sch_or_pcb()});

Mousetrap.bind(['ctrl+right', 'command+right'], function(){select_next_sch_or_pcb(true)});
Mousetrap.bind(['ctrl+left', 'command+left'],  function(){select_preview_sch_or_pcb(true)});

// SVG PAN
Mousetrap.bind('alt+up',    function(){manual_pan("up")});
Mousetrap.bind('alt+down',  function(){manual_pan("down")});
Mousetrap.bind('alt+left',  function(){manual_pan("left")});
Mousetrap.bind('alt+right', function(){manual_pan("right")});

// SVG ZOOM
Mousetrap.bind('0',        function(){svg_fit_center()});
Mousetrap.bind(['+', '='], function(){svg_zoom_in()});
Mousetrap.bind('-',        function(){svg_zoom_out()});

// Misc
Mousetrap.bind(['f', 'F'], function(){toggle_fullscreen()});
Mousetrap.bind(['i', 'I'], function(){show_info_popup()});

// =======================================
// =======================================

// For images related with each commit, it is good to have the same image cached with the same specially when serving throug the internet
// For those images, it uses the commit hash as the timestamp
function url_timestamp(timestamp_id="") {
    if (timestamp_id) {
        return "?t=" + timestamp_id;
    }
    else {
        return "?t=" + new Date().getTime();
    }
}

function if_url_exists(url, callback) {
    let request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.setRequestHeader('Accept', '*/*');
    request.onprogress = function(event) {
        let status = event.target.status;
        let statusFirstNumber = (status).toString()[0];
        switch (statusFirstNumber) {
            case '2':
                request.abort();
                return callback(true);
            default:
                request.abort();
                return callback(false);
        }
    };
    request.send('');
}

function update_commits() {

    // Remove tooltips so they dont get stuck
    $('[data-toggle="tooltip"]').tooltip("hide");

    console.log("================================================================================");

    var commits = $("#commits_form input:checkbox[name='commit']");
    var hashes = [];

    for (var i = 0; i < commits.length; i++) {
        if (commits[i].checked) {
            var value = commits[i].value;
            hashes.push(value);
        }
    }

    // It needs 2 items selected to do something
    if (hashes.length < 2) {
        return;
    }

    // Update selected commits
    commit1 = hashes[0].replace(/\s+/g, '');
    commit2 = hashes[1].replace(/\s+/g, '');

    console.log("commit1:", commit1);
    console.log("commit2:", commit2);


    // 1. Update commit_legend_links
    // 2. Update commit_legend
    // 3. Update current_diff_view


    // Update commit_legend_links

    var old_commit1 = document.getElementById("commit1_hash").value;
    var old_commit2 = document.getElementById("commit2_hash").value;

    var kicad_pro_path_1 = document.getElementById("commit1_kicad_pro_path").value;
    var kicad_pro_path_2 = document.getElementById("commit2_kicad_pro_path").value;

    document.getElementById("commit1_kicad_pro_path").value = kicad_pro_path_1.replace(old_commit1, commit1);
    document.getElementById("commit2_kicad_pro_path").value = kicad_pro_path_2.replace(old_commit2, commit2);

    // Update commit_legend

    document.getElementById("commit1_hash").value = commit1;
    document.getElementById("commit2_hash").value = commit2;

    document.getElementById("commit1_legend_hash").innerHTML = commit1;
    document.getElementById("commit2_legend_hash").innerHTML = commit2;

    // Update current_diff_view

    old_view = current_view;
    current_view = $('#view_mode input[name="view_mode"]:checked').val();

    if (current_view == "show_sch") {
        update_page();
    } else {
        update_layer();
    }
}

function loadFile(filePath) {

    console.log("filePath:", filePath);

    var result = null;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open('GET', filePath, false);
    xmlhttp.send();
    if (xmlhttp.status==200) {
        result = xmlhttp.responseText;
    }
    return result;
}

function update_page()
{
    console.log("-----------------------------------------");

    // Runs only when updating commits
    update_sheets_list(commit1, commit2);

    var pages = $("#pages_list input:radio[name='pages']");
    var selected_page;
    var page_name;

    // if a different page was in use before, revert the selection to it
    // TODO: maybe I have to use a list instead...
    if (previous_selected_page > -1) {
        pages[previous_selected_page].checked = true;
        previous_selected_page = -1;
    }

    // try to get the first page
    try {
        selected_page = pages.index(pages.filter(':checked'));
        page_name = pages[selected_page].id;
        current_selected_page = selected_page;

    // if there is no page selected, select the first one
    // TODO: instead of the first item by default, a better solution would change to the next inferior index
    // and keep decrementing until reaching a valid index
    } catch (error) {
        previous_selected_page = current_selected_page;
        pages[0].checked = true;
        selected_page = pages.index(pages.filter(':checked'));
        page_name = pages[selected_page].id;
    }

    var page_filename = pages[selected_page].value.replace(".kicad_sch", "").replace(".sch", "");

    if (commit1 == ""){
        commit1 = document.getElementById("diff-xlink-1-sch").href.baseVal.split("/")[1];
    }
    if (commit2 == ""){
        commit2 = document.getElementById("diff-xlink-2-sch").href.baseVal.split("/")[1];
    }

    var image_path_1 = "../" + commit1 + "/_KIRI_/sch/" + page_filename + ".svg";
    var image_path_2 = "../" + commit2 + "/_KIRI_/sch/" + page_filename + ".svg";

    console.log("[SCH] page_filename =", page_filename);
    console.log("[SCH]  image_path_1 =", image_path_1);
    console.log("[SCH]  image_path_2 =", image_path_2);

    var image_path_timestamp_1 = image_path_1 + url_timestamp(commit1);
    var image_path_timestamp_2 = image_path_2 + url_timestamp(commit2);

    if (current_view != old_view)
    {
        old_view = current_view;
        removeEmbed();
        lastEmbed = createNewEmbed(image_path_timestamp_1, image_path_timestamp_2);
    }
    else
    {
        document.getElementById("diff-xlink-1").href.baseVal = image_path_timestamp_1;
        document.getElementById("diff-xlink-2").href.baseVal = image_path_timestamp_2;

        document.getElementById("diff-xlink-1").setAttributeNS('http://www.w3.org/1999/xlink', 'href', image_path_timestamp_1);
        document.getElementById("diff-xlink-2").setAttributeNS('http://www.w3.org/1999/xlink', 'href', image_path_timestamp_2);

        if_url_exists(image_path_timestamp_1, function(exists) {
            if (exists == true) {
                document.getElementById("diff-xlink-1").parentElement.style.display = 'inline' }
            else {
                document.getElementById("diff-xlink-1").parentElement.style.display = "none";
            }
        });

        if_url_exists(image_path_timestamp_2, function(exists) {
            if (exists == true) {
                document.getElementById("diff-xlink-2").parentElement.style.display = 'inline';
            }
            else {
                document.getElementById("diff-xlink-2").parentElement.style.display = "none";
            }
        });
    }

    // keep images visibility the same as the legend
    $("#diff-xlink-1").css('visibility', $("#commit1_legend").css('visibility'))
    $("#diff-xlink-2").css('visibility', $("#commit2_legend").css('visibility'))

    update_fullscreen_label();
}

function update_sheets_list(commit1, commit2) {

    // Get current selected page name
    var pages = $("#pages_list input:radio[name='pages']");
    var selected_page = pages.index(pages.filter(':checked'));

    // Save the current selected page, if any
    try {
        selected_sheet = pages[selected_page].id;
    }
    catch(err) {
        selected_sheet = "";
        console.log("There isn't a sheet selected");
    }

    // Data format: ID|LAYER

    data1 = loadFile("../" + commit1 + "/_KIRI_/sch_sheets" + url_timestamp(commit1)).split("\n").filter((a) => a);
    data2 = loadFile("../" + commit2 + "/_KIRI_/sch_sheets" + url_timestamp(commit2)).split("\n").filter((a) => a);

    var sheets = [];

    for (const d of data1)
    {
        sheet = d.split("|")[0];
        sheets.push(sheet);
    }

    for (const d of data2)
    {
        sheet = d.split("|")[0];
        if (! sheets.includes(sheet))
        {
            sheets.push(sheet);
        }
    }

    // sheets.sort();
    // sheets = Array.from(new Set(sheets.sort()));
    sheets = Array.from(new Set(sheets));

    console.log("[SCH]  Sheets =", sheets.length);
    console.log("sheets", sheets);

    var new_sheets_list = [];
    var form_inputs_html;

    for (const sheet of sheets)
    {
        var input_html = `
        <input id="${sheet}" data-toggle="tooltip" title="${sheet}" type="radio" value="${sheet}" name="pages" onchange="update_page()">
            <label for="${sheet}" data-toggle="tooltip" title="${sheet}" id="label-${sheet}" class="rounded text-sm-left list-group-item radio-box" onclick="update_page_onclick()" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                <span data-toggle="tooltip" title="${sheet}" style="margin-left:0.5em; margin-right:0.1em;" class="iconify" data-icon="gridicons:pages" data-inline="false"></span>
                ${sheet}
            </label>
        </label>
        `;

        new_sheets_list.push(sheet);

        form_inputs_html = form_inputs_html + input_html;
    }

    // Get the current list of pages
    pages = $("#pages_list input:radio[name='pages']");
    const current_sheets_list = Array.from(pages).map((opt) => opt.id);

    // Return if the current list is equal to the new list
    console.log("current_sheets_list = ", current_sheets_list);
    console.log("new_sheets_list = ", new_sheets_list);
    if (current_sheets_list.toString() === new_sheets_list.toString()) {
        console.log("Keep the same list of sheets");
        return;
    }

    // Update list of pages
    sheets_element = document.getElementById("pages_list_form");
    sheets_element.innerHTML = form_inputs_html.replace("undefined", "");

    // rerun tooltips since they are getting ugly.
    $('[data-toggle="tooltip"]').tooltip({html: true});
    $('[data-toggle="tooltip"]').tooltip('update');
    $('[data-toggle="tooltip"]').tooltip({boundary: 'body'});

    const optionLabels = Array.from(pages).map((opt) => opt.id);

    const hasOption = optionLabels.includes(selected_sheet);
    if (hasOption) {
        // Keep previews selection active
        $("#pages_list input:radio[name='pages'][value='" + selected_sheet + "']").prop('checked', true);
    }
    else {
        // If old selection does not exist, maybe the list is now shorter, then select the last item...
        if (optionLabels.length) {
            pages[optionLabels.length-1].checked = true;
        }
    }

    // If nothing is selected still, select the first item
    if (pages.length && !pages.filter(':checked').length) {
        pages[0].checked = true;
    }
}

function pad(num, size)
{
    num = num.toString();
    while (num.length < size) {
        num = "0" + num;
    }
    return num;
}

function update_layers_list(commit1, commit2, selected_layer_idx, selected_layer_id)
{
    var used_layers_1;
    var used_layers_2;

    var id;
    var layer;
    var dict = {};

    var id_pad;
    var layer_name;
    var color;
    var checked;

    var new_layers_list = [];
    var form_inputs_html;

    // Get current selected page name
    var layers = $("#layers_list input:radio[name='layers']");
    var selected_layer_element = layers.index(layers.filter(':checked'));

    // Save the current selected page, if any
    try {
        selected_layer = layers[selected_layer_element].id;
    }
    catch(err) {
        selected_layer = "";
        console.log("There isn't a layer selected");
    }

    // File = ../[COMMIT]/_KIRI_/pcb_layers
    // Format = ID|LAYER

    used_layers_1 = loadFile("../" + commit1 + "/_KIRI_/pcb_layers" + url_timestamp(commit1)).split("\n").filter((a) => a);
    used_layers_2 = loadFile("../" + commit2 + "/_KIRI_/pcb_layers" + url_timestamp(commit2)).split("\n").filter((a) => a);

    for (const line of used_layers_1)
    {
        id = line.split("|")[0];
        layer = line.split("|")[1]; //.replace(".", "_");
        dict[id] = [layer];
    }

    for (const line of used_layers_2)
    {
        id = line.split("|")[0];
        layer = line.split("|")[1]; //.replace(".", "_");

        // Add new key
        if (! dict.hasOwnProperty(id)) {
            dict[id] = [layer];
        }
        else {
            // Append if id key exists
            if (dict[id] != layer) {
                dict[id].push(layer);
            }
        }
    }

    console.log("[PCB] Layers =", Object.keys(dict).length);

    for (const [layer_id, layer_names] of Object.entries(dict))
    {
        id = parseInt(layer_id);
        id_pad = pad(id, 2);
        layer_name = layer_names[0];

        var input_html = `
        <!-- Generated Layer ${id} -->
        <input  id="layer-${id_pad}" value="layer-${layer_names}" type="radio" name="layers" onchange="update_layer()">
        <label for="layer-${id_pad}" id="label-layer-${id_pad}" data-toggle="tooltip" title="${id}, ${layer_names}" class="rounded text-sm-left list-group-item radio-box" onclick="update_layer_onclick()">
            <span class="iconify layer_color_margin layer_color_${id}" data-icon="teenyicons-square-solid" data-inline="false"></span>
            ${layer_names}
        </label>
        `;

        new_layers_list.push(layer_names.toString());

        form_inputs_html = form_inputs_html + input_html;
    }

    // Get the current list of pages
    const current_layers_list = Array.from(layers).map((opt) => opt.value.replace("layer-", ""));

        // Return if the current list is equal to the new list
    console.log("current_layers_list = ", current_layers_list);
    console.log("new_layers_list = ", new_layers_list);
    if (current_layers_list.toString() === new_layers_list.toString()) {
        console.log("Keep the same list of layers");
        return;
    }

    // Update layers list
    layers_element = document.getElementById("layers_list_form");
    layers_element.innerHTML = form_inputs_html.replace("undefined", "");

    // Update html tooltips
    $('[data-toggle="tooltip"]').tooltip({html:true});
    $('[data-toggle="tooltip"]').tooltip('update');
    $('[data-toggle="tooltip"]').tooltip({boundary: 'body'});

    // Enable back the selected layer
    const optionLabels = Array.from(layers).map((opt) => opt.id);

    const hasOption = optionLabels.includes(selected_layer);
    if (hasOption) {
        // Keep previews selection active
        $("#layers_list input:radio[name='layers'][value=" + selected_layer + "]").prop('checked', true);
    }
    else {
        // If old selection does not exist, maybe the list is now shorter, then select the last item...
        if (optionLabels.length) {
            layers[optionLabels.length-1].checked = true;
        }
    }

    // restore previously selected index
    layers = $("#layers_list input:radio[name='layers']");
    if (selected_layer_idx >= 0) {
        layers[selected_layer_idx].checked = true;
    }

    // If nothing is selected still, select the first item
    if (! layers.filter(':checked').length) {
        layers[0].checked = true;
    }
}

function update_layer() {

    console.log("-----------------------------------------");

    var layers = $("#layers_list input:radio[name='layers']");
    var selected_layer;
    var layer_id;

    if (layers)
    {
        selected_layer = layers.index(layers.filter(':checked'));
        console.log(">>>> [selected_layer] = ", selected_layer);
        if (selected_layer >= 0) {
            layer_id = layers[selected_layer].id.split("-")[1];
            console.log(">>>> [label_id_IF] = ", layer_id);
        }
        else {
            try {
                layers[0].checked = true;
                selected_layer = layers.index(layers.filter(':checked'));
                layer_id = layers[selected_layer].id.split("-")[1];
                console.log(">>>> [label_id_ELSE] = ", layer_id);
            } catch (error) {
                if (layers.length == 0) {
                    selected_layer = -1
                    layer_id = ""
                }
                else {
                    console.log("[PCB] Images may not exist and Kicad layout may be missing.");
                    show_sch();
                    return;
                }
            }
        }
    }
    else {
        console.log("[PCB] Images may not exist and Kicad layout may be missing.");
        show_sch();
        return;
    }

    if (commit1 == "") {
        commit1 = document.getElementById("diff-xlink-1-pcb").href.baseVal.split("/")[1];
    }
    if (commit2 == "") {
        commit2 = document.getElementById("diff-xlink-2-pcb").href.baseVal.split("/")[1];
    }

    update_layers_list(commit1, commit2, selected_layer, layer_id);

    var image_path_1 = "../" + commit1 + "/_KIRI_/pcb/layer" + "-" + layer_id + ".svg";
    var image_path_2 = "../" + commit2 + "/_KIRI_/pcb/layer" + "-" + layer_id + ".svg";

    console.log("[PCB]      layer_id =", layer_id);
    console.log("[PCB]  image_path_1 =", image_path_1);
    console.log("[PCB]  image_path_2 =", image_path_2);

    var image_path_timestamp_1 = image_path_1 + url_timestamp(commit1);
    var image_path_timestamp_2 = image_path_2 + url_timestamp(commit2);

    if (current_view != old_view)
    {
        old_view = current_view;
        removeEmbed();
        lastEmbed = createNewEmbed(image_path_timestamp_1, image_path_timestamp_2);
    }
    else if (layer_id != "")
    {
        document.getElementById("diff-xlink-1").href.baseVal = image_path_timestamp_1;
        document.getElementById("diff-xlink-2").href.baseVal = image_path_timestamp_2;

        document.getElementById("diff-xlink-1").setAttributeNS('http://www.w3.org/1999/xlink', 'href', image_path_timestamp_1);
        document.getElementById("diff-xlink-2").setAttributeNS('http://www.w3.org/1999/xlink', 'href', image_path_timestamp_2);

        if_url_exists(image_path_timestamp_1, function(exists) {
            if (exists == true) {
                document.getElementById("diff-xlink-1").parentElement.style.display = 'inline' }
            else {
                document.getElementById("diff-xlink-1").parentElement.style.display = "none";
            }
        });

        if_url_exists(image_path_timestamp_2, function(exists) {
            if (exists == true) {
                document.getElementById("diff-xlink-2").parentElement.style.display = 'inline';
            }
            else {
                document.getElementById("diff-xlink-2").parentElement.style.display = "none";
            }
        });
    }

    // keep images visibility the same as the legend
    $("#diff-xlink-1").css('visibility', $("#commit1_legend").css('visibility'))
    $("#diff-xlink-2").css('visibility', $("#commit2_legend").css('visibility'))

    update_fullscreen_label();
}

// =======================================
// SVG Controls
// =======================================

function select_initial_commits()
{
    var commits = $("#commits_form input:checkbox[name='commit']");

    if (commits.length >= 2)
    {
        commit1 = commits[0].value;
        commit2 = commits[1].value;
        commits[0].checked = true;
        commits[1].checked = true;
    }
    else if (commits.length == 1)
    {
        commit1 = commits[0].value;
        commits[0].checked = true;
    }
}

function get_selected_commits()
{
    var commits = [];
    var hashes = [];
    for (var i = 0; i < commits.length; i++) {
        if ($("#commits_form input:checkbox[name='commit']")[i].checked) {
            var value = $("#commits_form input:checkbox[name='commit']")[i].value;
            hashes.push(value);
        }
    }

    // It needs 2 items selected to do something
    if (hashes.length < 2) {
        return;
    }

    var commit1 = hashes[0].replace(/\s+/g, '');
    var commit2 = hashes[1].replace(/\s+/g, '');

    return [commit1, commit2];
}


// Interpret tooltois as html
$(document).ready(function()
{
    $('[data-toggle="tooltip"]').tooltip({html:true});
    $('[data-toggle="tooltip"]').tooltip('update');
    $('[data-toggle="tooltip"]').tooltip({boundary: 'body'});
});

// Limit commits list with 2 checked commits at most
$(document).ready(function()
{
    $("#commits_form input:checkbox[name='commit']").change(function() {
        var max_allowed = 2;
        var count = $("input[name='commit']:checked").length;
        if (count > max_allowed) {
            $(this).prop("checked", "");
        }
    });
});

function ready()
{
    check_server_status();
    select_initial_commits();

    update_commits();

    if (selected_view == "schematic") {
        // show_sch();
        update_page(commit1, commit2);
    }
    else {
        // show_pcb();
        update_layer(commit1, commit2);
    }
}

window.onload = function()
{
    console.log("function onload");
};

window.addEventListener('DOMContentLoaded', ready);

// =======================================
// Toggle Schematic/Layout
// =======================================

function show_sch()
{
    // Show schematic stuff
    document.getElementById("show_sch_lbl").classList.add('active');
    document.getElementById("show_sch").checked = true;
    // document.getElementById("diff-sch").style.display = "inline";
    document.getElementById("diff-xlink-1").parentElement.style.display = "inline";
    document.getElementById("diff-xlink-2").parentElement.style.display = "inline";
    document.getElementById("pages_list").style.display = "inline";
    document.getElementById("sch_title").style.display = "inline";

    // Hide layout stuff
    document.getElementById("show_pcb_lbl").classList.remove('active');
    document.getElementById("show_pcb").checked = false;
    // document.getElementById("diff-pcb").style.display = "none";
    // document.getElementById("diff-xlink-1-pcb").parentElement.style.display = "none";
    // document.getElementById("diff-xlink-2-pcb").parentElement.style.display = "none";
    document.getElementById("layers_list").style.display = "none";
    document.getElementById("pcb_title").style.display = "none";

    update_page(commit1, commit2);
}

function show_pcb()
{
    // Show layout stuff
    document.getElementById("show_pcb_lbl").classList.add('active');
    document.getElementById("show_pcb").checked = true;
    // document.getElementById("diff-pcb").style.display = "inline";
    document.getElementById("diff-xlink-1").parentElement.style.display = "inline";
    document.getElementById("diff-xlink-2").parentElement.style.display = "inline";
    document.getElementById("layers_list").style.display = "inline";
    document.getElementById("pcb_title").style.display = "inline";

    // Hide schematic stuff
    document.getElementById("show_sch_lbl").classList.remove('active');
    document.getElementById("show_sch").checked = false;
    // document.getElementById("diff-sch").style.display = "none";
    // document.getElementById("diff-xlink-1-sch").parentElement.style.display = "none";
    // document.getElementById("diff-xlink-2-sch").parentElement.style.display = "none";
    document.getElementById("pages_list").style.display = "none";
    document.getElementById("sch_title").style.display = "none";

    update_layer(commit1, commit2);
}

// =======================================
// Toggle Onion/Slide
// =======================================

function show_onion() {
    // console.log("Function:", "show_onion");
}

function show_slide() {
    // console.log("Function:", "show_slide");
}

// =======================================
// =======================================

function update_page_onclick(obj) {
    update_page();
}

function update_layer_onclick(obj) {
    update_layer();
}

// Hide fields with missing images
function imgError(image)
{
    // console.log("Image Error (missing or problematic) =", image.href.baseVal);
    image.onerror = null;
    parent = document.getElementById(image.id).parentElement;
    parent.style.display = "none";
    return true;
}


// #===========================

var server_status = 1;
var old_server_status = -1;

function check_server_status()
{
    var img;

    img = document.getElementById("server_status_img");

    if (! img) {
        img = document.body.appendChild(document.createElement("img"));
        img.setAttribute("id", "server_status_img");
        img.style.display = "none";
    }

    img.onload = function() {
        server_is_online();
    };

    img.onerror = function() {
        server_is_offline();
    };

    img.src = "favicon.ico" + url_timestamp();

    setTimeout(check_server_status, 5000);
}

function server_is_online() {
    server_status = 1;
    document.getElementById("server_offline").style.display = "none";
    if (server_status != old_server_status) {
        old_server_status = server_status;
        console.log("Server is Online");
    }
}

function server_is_offline() {
    server_status = 0;
    document.getElementById("server_offline").style.display = "block";
    if (server_status != old_server_status) {
        old_server_status = server_status;
        console.log("Server is Offline");
    }
}

// ==================================================================

function createNewEmbed(src1, src2)
{
    console.log("createNewEmbed...");

    var embed = document.createElement('div');
    embed.setAttribute('id', "diff-container");
    embed.setAttribute('class', "position-relative");
    embed.setAttribute('style', "padding: 0px; height: 94%;");

    // WORKING WITH FILTERS..
    // https://fecolormatrix.com/

    var svg_element = `
    <svg id="svg-id" style="margin: 0px; width: 100%; height: 100%;"
             xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >
      <g class="my_svg-pan-zoom_viewport">
          <svg id="img-1">
              <defs>
                  <filter id="filter-1">
                      <feColorMatrix in=SourceGraphic type="matrix"
                      values="1.0  0.0  0.0  0.0  0.0
                              0.0  1.0  0.0  1.0  0.0
                              0.0  0.0  1.0  0.0  0.0
                              0.0  0.0  0.0  0.5  0.0">
                  </filter>
                  <filter id="filter-12">
                      <feColorMatrix in=SourceGraphic type="matrix"
                      values="-1.0   0.0   0.0  0.0  1.0
                               0.0  -1.0   0.0  1.0  1.0
                               0.0   0.0  -1.0  0.0  1.0
                               0.0   0.0   0.0  0.6  0.0">
                  </filter>
              </defs>
              <image id="diff-xlink-1" height="100%" width="100%" filter="url(#filter-1)"
                  onerror="this.onerror=null; imgError(this);"
                  href="${src1}" xlink:href="${src1}"/>
          </svg>
          <svg id="img-2">
              <defs>
                  <filter id="filter-2">
                      <feColorMatrix in=SourceGraphic type="matrix"
                      values="1.0  0.0  0.0  1.0  0.0
                              0.0  1.0  0.0  0.0  0.0
                              0.0  0.0  1.0  0.0  0.0
                              0.0  0.0  0.0  0.5  0.0">
                  </filter>
                  <filter id="filter-22">
                      <feColorMatrix in=SourceGraphic type="matrix"
                      values="-1.0   0.0   0.0  1.0  1.0
                               0.0  -1.0   0.0  0.0  1.0
                               0.0   0.0  -1.0  0.0  1.0
                               0.0   0.0   0.0  0.6  0.0">
                  </filter>
              </defs>
              <image id="diff-xlink-2" height="100%" width="100%" filter="url(#filter-2)"
                  onerror="this.onerror=null; imgError(this);"
                  href="${src2}" xlink:href="${src2}"/>
          </svg>
      </g>
    </svg>
    `;

    document.getElementById('diff-container').replaceWith(embed);
    document.getElementById('diff-container').innerHTML = svg_element;
    console.log(">>> SVG: ", embed);

    svgpanzoom_selector = "#svg-id";


    panZoom_instance = svgPanZoom(
      svgpanzoom_selector, {
        zoomEnabled: true,
        controlIconsEnabled: false,
        center: true,
        minZoom: 1,
        maxZoom: 20,
        zoomScaleSensitivity: 0.22,
        contain: false,
        fit: false, // cannot be used, bug? (this one must be here to change the default)
        viewportSelector: '.my_svg-pan-zoom_viewport',
        eventsListenerElement: document.querySelector(svgpanzoom_selector),
        onUpdatedCTM: function() {
            if (current_view == "show_sch") {
                if (sch_current_zoom != sch_old_zoom) {
                    console.log(">> Restoring SCH pan and zoom");
                    panZoom_instance.zoom(sch_current_zoom);
                    panZoom_instance.pan(sch_current_pan);
                    sch_old_zoom = sch_current_zoom;
                }
            }
            else {
                if (pcb_current_zoom != pcb_old_zoom) {
                    console.log(">> Restoring PCB pan and zoom");
                    panZoom_instance.zoom(pcb_current_zoom);
                    panZoom_instance.pan(pcb_current_pan);
                    pcb_old_zoom = pcb_current_zoom;
                }
            }
        }
    });

    console.log("panZoom_instance:", panZoom_instance);

    embed.addEventListener('load', lastEventListener);

    document.getElementById('zoom-in').addEventListener('click', function(ev) {
        ev.preventDefault();
        panZoom_instance.zoomIn();
        panZoom_instance.center();
    });

    document.getElementById('zoom-out').addEventListener('click', function(ev) {
        ev.preventDefault();
        panZoom_instance.zoomOut();
        panZoom_instance.center();
    });

    document.getElementById('zoom-fit').addEventListener('click', function(ev) {
        ev.preventDefault();
        panZoom_instance.resetZoom();
        panZoom_instance.center();
    });

    if (current_diff_filter === "diff")
    {
        $("#diff-xlink-1").css('filter', 'url(#filter-1)') /// FILTER_DIFF
        $("#diff-xlink-2").css('filter', 'url(#filter-2)') /// FILTER_DIFF
    }
    else
    {
        $("#diff-xlink-1").css('filter', 'url(#filter-12)') /// FILTER_WHITE
        $("#diff-xlink-2").css('filter', 'url(#filter-22)') /// FILTER_WHITE
    }

    return embed;
}

function removeEmbed()
{
    console.log(">=============================================<");
    console.log("removeEmbed...");
    console.log(">> lastEmbed: ", lastEmbed);
    console.log(">> panZoom_instance: ", panZoom_instance);

    // Destroy svgpanzoom
    if (panZoom_instance)
    {
        if (current_view == "show_pcb") {
            sch_current_zoom = panZoom_instance.getZoom();
            sch_current_pan = panZoom_instance.getPan();
            sch_old_zoom = null;
        } else {
            pcb_current_zoom = panZoom_instance.getZoom();
            pcb_current_pan = panZoom_instance.getPan();
            pcb_old_zoom = null;
        }

        panZoom_instance.destroy();

        // Remove event listener
        lastEmbed.removeEventListener('load', lastEventListener);

        // Null last event listener
        lastEventListener = null;

        // Remove embed element
        // document.getElementById('diff-container').removeChild(lastEmbed);

        // Null reference to embed
        lastEmbed = null;
    }
}

function update_fullscreen_label()
{
    fullscreen_label = document.getElementById("fullscreen_label");

    commit1 = document.getElementById("commit1_hash").value;
    commit2 = document.getElementById("commit2_hash").value;

    if (current_view == "show_sch")
    {
        pages = $("#pages_list input:radio[name='pages']");
        selected_page = pages.index(pages.filter(':checked'));
        page_name = document.getElementById("label-" + pages[selected_page].id).innerHTML;
        view_item = "Page " + page_name;
    }
    else
    {
        layers = $("#layers_list input:radio[name='layers']");
        selected_layer = layers.index(layers.filter(':checked'));
        layer_name = document.getElementById("label-" + layers[selected_layer].id).innerHTML;
        view_item = "Layer " + layer_name;
    }

    if (is_fullscreen)
    {
        if (fullscreen_label)
        {
            document.getElementById("commit1_fs").innerHTML = `(<a id="commit1_legend_hash">${commit1}</a>)`;
            document.getElementById("commit2_fs").innerHTML = `(<a id="commit2_legend_hash">${commit2}</a>)`;
            document.getElementById("view_item_fs").innerHTML = view_item;
        }
        else
        {
            label = `
                <div id="fullscreen_label" class="alert alert-dark border border-dark rounded-pill position-absolute top-10 start-50 translate-middle" style="background-color: #333;" role="alert">
                    <span id=commit1_legend_fs style="margin-left:0em; margin-right:0.2em; color: #00FF00; width: 10px; height: 10px;" class="iconify" data-icon="teenyicons-square-solid"></span>
                    <small id=commit1_legend_text_fs class="text-sm text-light">
                        Newer
                        <span id="commit1_fs" class="text-monospace">(<a id="commit1_legend_hash">${commit1}</a>)</span>
                    </small>

                    <span style="display: inline; width: 3em;"></span>
                    <span id="commit2_legend_fs" style="display: inline; margin-left:1em; margin-right:0.2em; color: #FF0000; width: 10px; height: 10px;" class="iconify" data-icon="teenyicons-square-solid"></span>
                    <small id=commit2_legend_text_fs class="text-sm text-light">
                        Older
                        <span id="commit2_fs" class="text-monospace">(<a id="commit2_legend_hash">${commit2}</a>)</span>
                    </small>

                    <span style="display: inline; width: 3em;"></span>
                    <span id="commit3_legend_fs" style="margin-left:1em; margin-right:0.2em; color: #FFA000; width: 10px; height: 10px;" class="iconify" data-icon="teenyicons-square-solid"></span>
                    <small id="commit3_legend_text_fs" class="text-sm text-light">
                        Unchanged
                    </small>

                    <small class="text-sm text-muted" style="margin-left:1em; margin-right:0.2em;">
                        |
                    </small>
                    <span style="display: inline; width: 3em;"></span>
                    <small id="view_item_fs" class="text-sm text-light" style="margin-left:1em; margin-right:0.2em;">
                        ${view_item}
                    </small>
                </div>
            `

            const element = $('#diff-container').get(0);
            element.insertAdjacentHTML("afterbegin", label);

            var visibility1 = $("#diff-xlink-1").css('visibility');
            $("#commit1_legend_fs").css('visibility', visibility1)
            $("#commit1_legend_text_fs").css('visibility', visibility1)

            var visibility2 = $("#diff-xlink-2").css('visibility');
            $("#commit2_legend_fs").css('visibility', visibility2)
            $("#commit2_legend_text_fs").css('visibility', visibility2)
        }
    }
}

function toggle_fullscreen()
{
  if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
  {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }

    is_fullscreen = false;
    const box = document.getElementById('fullscreen_label');
    box.remove();

  } else {
    element = $('#diff-container').get(0);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }

    is_fullscreen = true;
    update_fullscreen_label()
  }
}

function show_info_popup()
{
    document.getElementById("info-btn").click();
}

// Remove focus whne info buttons is clicked with shortcut i
$('#shortcuts-modal').on('shown.bs.modal', function(e){
    $('#info-btn').one('focus', function(e){$(this).blur();});
});

function change_page()
{
    update_page();
}