//Variables
var draw_bootloader_variables = function() {
    getFullPanel(0, 0, 3, 9, "tab-page-bootloader", "sec-boot-hexfile", "HEX", "FILE", "VER 1.0");
    var panel = document.getElementById("sec-boot-hexfile");
    panel.innerHTML += draw_bootloader_variables_1();
}

var draw_bootloader_variables_1 = function() {
    var html = '<textarea style="width:98%;" class="ai-textarea scroll-overflow"></textarea>'
    return html;
}

draw_bootloader_variables();

//Messages
var draw_bootloader_messages = function() {
    getFullPanel(3, 0, 6, 3, "tab-page-bootloader", "sec-boot-status", "BOOTLOADER", "STATUS", "VER 1.0");
    var panel = document.getElementById("sec-boot-status");
    panel.innerHTML += draw_bootloader_messages_1();
}

var draw_bootloader_messages_1 = function() {
    var html = getSectionTitle('MESSAGE COUNTERS');
    var rows = '';
    var row = '';
    //Start
    row = '<td><div class="ai-cell ai-cell-secondary-1" id="boot-bootmode">BOOTMODE</div></td>';
    row += '<td><div class="ai-cell ai-cell-secondary-1" id="boot-a5">A5</div></td>';
    row += '<td><div class="ai-cell ai-cell-secondary-1" id="boot-fc">FC</div></td>';
    row += '<td><div class="ai-cell ai-cell-secondary-1" id="boot-c7">C7</div></td>';
    row += '<td><div class="ai-cell ai-cell-secondary-1" id="boot-complete">COMPLETE</div></td>';
    row += '<td><div class="ai-cell ai-cell-secondary-1" id="boot-response">NO RESPONSE</div></td>';
    row += '<td><div class="ai-cell ai-cell-secondary-1" id="boot-retry">RETRY</div></td>';
    row += '<td><div class="ai-cell ai-cell-secondary-1" id="boot-checksum">CHECKSUM</div></td>';
    row += '<td><div class="ai-cell ai-cell-secondary-1" id="boot-address">ADDRESS</div></td>';
    row += '<td><div class="ai-cell ai-cell-secondary-1" id="boot-other">OTHER</div></td>';
    rows += getInfoRow(row);

    for (var i = 0; i < 4; i++) {
        row = '';
        for (var j = 0; j < 10; j++) {
            row += '<td><div class="ai-cell ai-cell-secondary-1" id="boot-dev-' + ((i*10) + j) + '">DEV ' + ((i*10) + j + 1) + '</div></td>';
        }
        rows += getInfoRow(row);
    }
    html += getTabel(rows);
    html = getPanel(html);
    return html;
}

draw_bootloader_messages();

//Data
var draw_bootloader_data = function() {
    getFullPanel(3, 3, 6, 6, "tab-page-bootloader", "sec-boot-data", "CAN BUS", "DATA", "VER 1.0");
    var panel = document.getElementById("sec-boot-data");
    panel.innerHTML += draw_bootloader_data_1();
    panel.innerHTML += draw_bootloader_data_2();
}

var draw_bootloader_data_1 = function() {
    var html = getSectionTitle('CAN FILTERS');
    var rows = '';
    var row = '';
    //Start
    row = '<td><div class="ai-cell ai-cell-danger" id="boot-filt-stop" onclick="BootFilterStart(\'start\');">START</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="boot-filt-reset" onclick="BootFilterReset(1);">RESET</div></td>';
    rows += getInfoRow(row);

    html += getTabel(rows);
    html = getPanel(html);
    return html;
}

var draw_bootloader_data_2 = function() {
    var html = '<div style="width: 100%; height: 20px;" id="device-1-title">';
    html += '<div class="ai-heading" style="height: 100%;"><div class="ai-heading-left">DATA</div><div class="ai-heading-right-fl"></div></div>';
    html += '</div>';
    html += '<table class="ai-table ai-table-border">';
    html += '<thead></thead>';
    html += '<tbody id="boot-message-table">';
    html += '</tbody>';
    html += '</table>';

    html = getPanel(html);
    return html;
}

draw_bootloader_data();

var BootFilterReset = function() {
    var lines = "";
    var content = ['ENV','S_L','S_H','E_L','E_H','FROM','TO','D_0','D_1','D_2','D_3','D_4','D_5','D_6','D_7','Details'];
    lines += '<tr style="widht:100%;">';
    for (var i = 0; i < content.length; i++) {
        lines += '<th><div class="ai-cell ai-cell-info-1">' + content[i] + '</div></th>';
    }
    lines += '</tr>';
    document.getElementById("boot-message-table").innerHTML = lines;
}

var BootFilterStart = function() {
    var classs = document.getElementById("boot-filt-stop").className;
    if (classs == "ai-cell ai-cell-success") {
        document.getElementById("boot-filt-stop").className = "ai-cell ai-cell-danger";
    } else {
        document.getElementById("boot-filt-stop").className = "ai-cell ai-cell-success";
    }
}