//Variables
var draw_device_simulator_variables = function() 
{
    getFullPanel(0, 0, 9, 9, "tab-page-device-simulator", "sec-device-simulator", "DEVICE", "SIMULATOR", "VER 1.0");
    var panel = document.getElementById("sec-device-simulator");
    panel.innerHTML += draw_device_simulator_variables_1();
}

var draw_device_simulator_variables_1 = function() 
{
    var html = "";
    for (var i = 0; i < 35; i++) {
        if (i < 32) {
            html += draw_device_flow(i + 1);
        } else if (i < 34) {
            html += draw_device_fc(i + 1);
        } else {
            html += draw_device_hydr(i + 1);
        }
    }
    return html;
}

var draw_device_flow = function(i) 
{
    var html = "";
    var sub_html = getSectionTitle('DEVICE ' + i);
    var rows = '';
    var row = '';
    row = getInfoCellColumnClick('diag-sim-dev-power-' + i, 'OFF', 'danger', 'power_device(' + i + ');');
    row += getInfoCellColumn('diag-sim-dev-type-' + i, 'FLOW', 'secondary-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'TARGET', '');
    row += getInfoCellColumn('diag-sim-dev-target-' + i, '0000', 'info-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'ACTUAL', '');
    row += getInfoCellColumn('diag-sim-dev-actual-' + i, '0000', 'info-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'TXD', '');
    row += getInfoCellColumn('diag-sim-dev-txd-' + i, '000', 'info-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'RXD', '');
    row += getInfoCellColumn('diag-sim-dev-rxd-' + i, '000', 'info-1');
    rows += getInfoRow(row);

    row = getInfoCellColumn('diag-sim-dev-volt-' + i, 'VOLT', 'danger');
    row += getInfoCellColumn('diag-sim-dev-amp-' + i, 'AMP', 'danger');
    rows += getInfoRow(row);
    row = getInfoCellColumn('diag-sim-dev-wtr-' + i, 'WATER', 'danger');
    row += getInfoCellColumn('diag-sim-dev-eng-' + i, 'ENG', 'danger');
    rows += getInfoRow(row);

    sub_html += getTabel(rows);

    rows = '';
    row = '';
    row = getInfoCellColumnClick('diag-sim-dev-t-l-' + i, 'T_L', 'info-1', 'keypad(1,' + i + ');');
    row += getInfoCellColumnClick('diag-sim-dev-b-l-' + i, 'B_L', 'info-1', 'keypad(2,' + i + ');');
    row += getInfoCellColumnClick('diag-sim-dev-t-r-' + i, 'T_R', 'info-1', 'keypad(3,' + i + ');');
    row += getInfoCellColumnClick('diag-sim-dev-b-r-' + i, 'B_R', 'info-1', 'keypad(4,' + i + ');');
    rows += getInfoRow(row);
    row = "<td></td>";
    row += getInfoCellColumn('diag-sim-dev-green-led-' + i, 'G', 'success');
    row += getInfoCellColumn('diag-sim-dev-red-led-' + i, 'R', 'danger');
    row += "<td></td>";
    rows += getInfoRow(row);

    sub_html += getTabel(rows);
    html += getPanelColumn(sub_html);
    return html;
}

var draw_device_fc = function(i) 
{
    var html = "";
    var sub_html = getSectionTitle('DEVICE ' + i);
    var rows = '';
    var row = '';
    row = getInfoCellColumnClick('diag-sim-dev-power-' + i, 'OFF', 'danger', 'power_device(' + i + ');');
    row += getInfoCellColumn('diag-sim-dev-type-' + i, ' FC ', 'secondary-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'PICKUP', '');
    row += getInfoCellColumn('diag-sim-dev-target-' + i, '0000', 'info-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'PRESSURE', '');
    row += getInfoCellColumn('diag-sim-dev-actual-' + i, '0000', 'info-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'TXD', '');
    row += getInfoCellColumn('diag-sim-dev-txd-' + i, '000', 'info-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'RXD', '');
    row += getInfoCellColumn('diag-sim-dev-rxd-' + i, '000', 'info-1');
    rows += getInfoRow(row);

    row = getInfoCellColumn('diag-sim-dev-volt-' + i, 'VOLT', 'danger');
    row += getInfoCellColumn('diag-sim-dev-amp-' + i, 'AMP', 'danger');
    rows += getInfoRow(row);
    row = getInfoCellColumn('diag-sim-dev-wtr-' + i, 'WATER', 'danger');
    row += getInfoCellColumn('diag-sim-dev-eng-' + i, 'ENG', 'danger');
    rows += getInfoRow(row);

    sub_html += getTabel(rows);

    rows = '';
    row = '';
    row = getInfoCellColumnClick('diag-sim-dev-t-l-' + i, 'T_L', 'info-1', 'keypad(1,' + i + ');');
    row += getInfoCellColumnClick('diag-sim-dev-b-l-' + i, 'B_L', 'info-1', 'keypad(2,' + i + ');');
    row += getInfoCellColumnClick('diag-sim-dev-t-r-' + i, 'T_R', 'info-1', 'keypad(3,' + i + ');');
    row += getInfoCellColumnClick('diag-sim-dev-b-r-' + i, 'B_R', 'info-1', 'keypad(4,' + i + ');');
    rows += getInfoRow(row);
    row = "<td></td>";
    row += getInfoCellColumn('diag-sim-dev-green-led-' + i, 'G', 'success');
    row += getInfoCellColumn('diag-sim-dev-red-led-' + i, 'R', 'danger');
    row += "<td></td>";
    rows += getInfoRow(row);

    sub_html += getTabel(rows);
    html += getPanelColumn(sub_html);
    return html;
}

var draw_device_hydr = function(i) 
{
    var html = "";
    var sub_html = getSectionTitle('DEVICE ' + i);
    var rows = '';
    var row = '';
    row = getInfoCellColumnClick('diag-sim-dev-power-' + i, 'OFF', 'danger', 'power_device(' + i + ');');
    row += getInfoCellColumn('diag-sim-dev-type-' + i, 'HYDR', 'secondary-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'RPM', '');
    row += getInfoCellColumn('diag-sim-dev-target-' + i, '000', 'info-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'VOLUME', '');
    row += getInfoCellColumn('diag-sim-dev-actual-' + i, '0000', 'info-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'TXD', '');
    row += getInfoCellColumn('diag-sim-dev-txd-' + i, '000', 'info-1');
    rows += getInfoRow(row);
    row = getInfoCellColumn('', 'RXD', '');
    row += getInfoCellColumn('diag-sim-dev-rxd-' + i, '000', 'info-1');
    rows += getInfoRow(row);

    row = getInfoCellColumn('diag-sim-dev-volt-' + i, 'VOLT', 'danger');
    row += getInfoCellColumn('diag-sim-dev-amp-' + i, 'AMP', 'danger');
    rows += getInfoRow(row);
    row = getInfoCellColumn('diag-sim-dev-wtr-' + i, 'WATER', 'danger');
    row += getInfoCellColumn('diag-sim-dev-eng-' + i, 'ENG', 'danger');
    rows += getInfoRow(row);

    sub_html += getTabel(rows);

    rows = '';
    row = '';
    row = getInfoCellColumnClick('diag-sim-dev-t-l-' + i, 'T_L', 'info-1', 'keypad(1,' + i + ');');
    row += getInfoCellColumnClick('diag-sim-dev-b-l-' + i, 'B_L', 'info-1', 'keypad(2,' + i + ');');
    row += getInfoCellColumnClick('diag-sim-dev-t-r-' + i, 'T_R', 'info-1', 'keypad(3,' + i + ');');
    row += getInfoCellColumnClick('diag-sim-dev-b-r-' + i, 'B_R', 'info-1', 'keypad(4,' + i + ');');
    rows += getInfoRow(row);
    row = "<td><div></div></td>";
    row += getInfoCellColumn('diag-sim-dev-green-led-' + i, 'G', 'success');
    row += getInfoCellColumn('diag-sim-dev-red-led-' + i, 'R', 'danger');
    row += "<td><div></div></td>";
    rows += getInfoRow(row);

    sub_html += getTabel(rows);
    html += getPanelColumn(sub_html);
    return html;
}

////////////////////////////////////////////////////////////////////////////////////////////////////
//  html
////////////////////////////////////////////////////////////////////////////////////////////////////

var getPanelColumn = function(innerHTML) 
{
    var html = '<div style="width:15%; float:left;" class="ai-div">';
    html += innerHTML;
    html += '</div>';
    return html;
}

var getInfoCellColumn = function(id, text, colour) 
{
    var html = '<td><div class="ai-cell ai-cell-' + colour + '"';
    if (id != '') html += ' id="' + id + '"';
    html += '>' + text + '</div></td>';
    return html;
}

var getInfoCellColumnClick = function(id, text, colour, onclick) 
{
    var html = '<td><div class="ai-cell ai-cell-' + colour + '"';
    if (id != '') html += ' id="' + id + '"';
    html += ' onclick="' + onclick + '">' + text + '</div></td>';
    return html;
}

draw_device_simulator_variables();