//Variables
var draw_can_bus_variables = function() {
    getFullPanel(0, 0, 4, 3, "tab-page-can_bus", "sec-can-bus-variables", "CAN BUS", "VARIABLES", "VER 1.0");
    var panel = document.getElementById("sec-can-bus-variables");
    panel.innerHTML += draw_can_bus_variables_1();
    panel.innerHTML += draw_can_bus_variables_2();
    panel.innerHTML += draw_can_bus_variables_3();
}

var draw_can_bus_variables_1 = function() {
    var html = getSectionTitle('CAN COUNTERS');
    var rows = '';
    var row = '';
    row = getInfoCell('', 'TX COUNT');
    row += getInfoCell('count-can-tx', '0');
    row += getInfoCell('', 'RX COUNT');
    row += getInfoCell('count-can-rx', '0');
    row += getInfoCell('', 'OV COUNT');
    row += getInfoCell('count-can-ov', '0');
    row += getInfoCell('', 'C1 COUNT');
    row += getInfoCell('count-can-c1', '0');
    rows += getInfoRow(row);
    row = getInfoCell('', 'ER COUNT');
    row += getInfoCell('count-can-er', '0');
    row += getInfoCell('', 'ENV COUNT');
    row += getInfoCell('count-can-env', '0');
    row += getInfoCell('', 'DEV COUNT');
    row += getInfoCell('count-can-dev', '0');
    row += getInfoCell('', 'NEW TYPE');
    row += getInfoCell('count-can-type', '0');
    rows += getInfoRow(row);

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

var draw_can_bus_variables_2 = function() {
    var html = getSectionTitle('CAN FLAGS');
    var rows = '';
    var row = '';
    row = getInfoCell('flags-can-config-mode', 'CONFIG MODE');
    row += getInfoCell('flags-can-boot-mode', 'BOOT MODE');
    row += getInfoCell('flags-can-sent-config', 'SENT CONFIG');
    row += getInfoCell('flags-can-sent-base', 'SENT BASE');
    rows += getInfoRow(row);
    row = getInfoCell('flags-can-sent-unconfig', 'SENT UNCNFG RQ');
    row += getInfoCell('flags-can-config-correct', 'CONFIG CORRECT');
    row += getInfoCell('flags-can-check-valid-config', 'CHECK VALID CONF');
    row += getInfoCell('flags-can-received-unconfigured', 'RECEIVED UNCONFIG');
    rows += getInfoRow(row);
    row = getInfoCell('flags-can-received-response', 'RECEIVED RESPONSE');
    row += getInfoCell('flags-can-device-not-responding', 'DEVICE NOT RESP');
    rows += getInfoRow(row);

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

var draw_can_bus_variables_3 = function() {
    var html = getSectionTitle('CAN MESSAGE FLAGS');
    var rows = '';
    var row = '';
    row = getInfoCell('flags-messcan-sendbasenumber', 'BASE NUMBER');
    row += getInfoCell('flags-messcan-sendconfigmodeall', 'CONFIG ALL');
    row += getInfoCell('flags-messcan-sendconfigmodenotinit', 'CONFIG NOT INIT');
    row += getInfoCell('flags-messcan-sendexitconfigmode', 'EXIT CONFIG');
    rows += getInfoRow(row);
    row = getInfoCell('flags-messcan-sendnotinitresponse', 'NOT INIT RESPONSE');
    row += getInfoCell('flags-messcan-sendnewenvelopetx', 'NEW ENV TX');
    row += getInfoCell('flags-messcan-sendnewenveloperx', 'NEW ENV RX');
    row += getInfoCell('flags-messcan-sendnewdeviceid', 'NEW DEVICE ID');
    rows += getInfoRow(row);
    row = getInfoCell('flags-messcan-resetIDMemory', 'RESET DEVICE MEM');
    row += getInfoCell('flags-messcan-bootstartflowfc', 'BOOT START FLOW/FC');
    row += getInfoCell('flags-messcan-bootstarthydr', 'BOOT START HYDR');
    row += getInfoCell('flags-messcan-bootend', 'BOOT END');
    rows += getInfoRow(row);
    row = getInfoCell('flags-messcan-sendengageflowall', 'ENGAGE FLOW ALL');
    row += getInfoCell('flags-messcan-sendflowtargetall', 'FLOW TARGET ALL');
    row += getInfoCell('flags-messcan-sendmanualcalibrateall', 'MAN CALIB ALL');
    row += getInfoCell('flags-messcan-sendstatusrequestallflow', 'STATUS REQ ALL FLOW');
    rows += getInfoRow(row);
    row = getInfoCell('flags-messcan-sendengagefcall', 'ENGAGE FC ALL');
    row += getInfoCell('flags-messcan-sendfcpressuretargetall', 'FC PRES TRG ALL');
    row += getInfoCell('flags-messcan-sendstatusrequestallfc', 'STATUS REQ ALL FC');
    row += getInfoCell('flags-messcan-sendengagehydall', 'ENGAGE HYDR ALL');
    rows += getInfoRow(row);
    row = getInfoCell('flags-messcan-sendhydflowtargetall', 'HYDR FLOW TRG ALL');
    row += getInfoCell('flags-messcan-sendhydvolumetargetall', 'HYDR VOL TRG ALL');
    row += getInfoCell('flags-messcan-sendhydmanualtargetall', 'HYDR MAN TRG ALL');
    row += getInfoCell('flags-messcan-sendhydmanualpwm', 'HYDR MAN PWM ALL');
    rows += getInfoRow(row);
    row = getInfoCell('flags-messcan-sendstatusrequestallhyd', 'STATUS REQ ALL HYDR');
    rows += getInfoRow(row);

    row = '';
    for (var i = 0; i < 40; i++) {
        row += getInfoCell('flags-messcan-sendenterconfigmode-' + (i + 1), 'ENT CNFG ' + (i + 1));
        row += getInfoCell('flags-messcan-sendreset-' + (i + 1), 'RESET ' + (i + 1));
        if (i%2 == 1) {
            rows += getInfoRow(row);
            row = '';
        }
    }

    for (var i = 0; i < 32; i++) {
        row = getInfoCell('flags-messcan-sendflowengage-' + (i + 1), 'FLOW ENG ' + (i + 1));
        row += getInfoCell('flags-messcan-sendflowtarget-' + (i + 1), 'FLOW TRG ' + (i + 1));
        row += getInfoCell('flags-messcan-sendflowstatusrequest-' + (i + 1), 'FLOW STAT REQ ' + (i + 1));
        row += getInfoCell('flags-messcan-sendflowgolden-' + (i + 1), 'FLOW GOLD ' + (i + 1));
        rows += getInfoRow(row);
    }

    html += getTabel(rows);
    rows = '';

    for (var i = 0; i < 2; i++) {
        row = getInfoCell('flags-messcan-sendfcengage-' + (i + 1), 'FC ENG ' + (i + 1));
        row += getInfoCell('flags-messcan-sendfcpressuretarget-' + (i + 1), 'FC PRES TRG ' + (i + 1));
        row += getInfoCell('flags-messcan-sendfcstatusrequest-' + (i + 1), 'FC STAT REQ ' + (i + 1));
        rows += getInfoRow(row);
    }

    html += getTabel(rows);
    rows = '';

    for (var i = 0; i < 2; i++) {
        row = getInfoCell('flags-messcan-sendhydrengage-' + (i + 1), 'HYDR ENG ' + (i + 1));
        row += getInfoCell('flags-messcan-sendhydrflowtarget-' + (i + 1), 'HYDR FLOW TRG ' + (i + 1));
        row += getInfoCell('flags-messcan-sendhydrvolumetarget-' + (i + 1), 'HYDR VOL TRG ' + (i + 1));
        row += getInfoCell('flags-messcan-sendhydrstatusrequest-' + (i + 1), 'HYDR STAT REQ ' + (i + 1));
        rows += getInfoRow(row);
    }

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

draw_can_bus_variables();

//Messages
var draw_can_bus_messages = function() {
    getFullPanel(4, 0, 5, 3, "tab-page-can_bus", "sec-can-bus-messages", "CAN BUS", "MESSAGES", "VER 1.0");
    var panel = document.getElementById("sec-can-bus-messages");
    panel.innerHTML += draw_can_bus_messages_1();
}

var draw_can_bus_messages_1 = function() {
    var html = getSectionTitle('MESSAGE COUNTERS');
    var rows = '';
    var row = '';
    //Header
    row = getInfoCellH('', 'D');
    for (var i = 0; i < 8; i++) {
        row += getInfoCellH('', 'E');
        row += getInfoCellH('', 'P');
        row += getInfoCellH('', '#');
    }
    rows += getInfoRow(row);
    //Start
    row = '<td><div class="ai-cell ai-cell-secondary-1">-</div></td>';
    row += '<td><div class="ai-cell">0</div></td>';
    row += '<td><div class="ai-cell">0</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="can-cnt-0-0">0</div></td>';
    row += '<td><div class="ai-cell">0</div></td>';
    row += '<td><div class="ai-cell">1</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="can-cnt-0-1">0</div></td>';
    row += '<td><div class="ai-cell">0</div></td>';
    row += '<td><div class="ai-cell">2</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="can-cnt-0-2">0</div></td>';
    row += '<td><div class="ai-cell">3</div></td>';
    row += '<td><div class="ai-cell">0</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="can-cnt-3-0">0</div></td>';
    row += '<td><div class="ai-cell">3</div></td>';
    row += '<td><div class="ai-cell">1</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="can-cnt-3-1">0</div></td>';
    row += '<td><div class="ai-cell">3</div></td>';
    row += '<td><div class="ai-cell">2</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="can-cnt-3-2">0</div></td>';
    row += '<td><div class="ai-cell">4</div></td>';
    row += '<td><div class="ai-cell">0</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="can-cnt-4-0">0</div></td>';
    row += '<td><div class="ai-cell">4</div></td>';
    row += '<td><div class="ai-cell">1</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="can-cnt-4-1">0</div></td>';
    rows += getInfoRow(row);

    row = '<tr style="width:100%;">';
    row += '<td><div class="ai-cell ai-cell-secondary-1">-</div></td>';
    row += '<td><div class="ai-cell">4</div></td>';
    row += '<td><div class="ai-cell">1</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="can-cnt-4-2">0</div></td>';
    row += '<td><div class="ai-cell">10:256</div></td>';
    row += '<td><div class="ai-cell">0</div></td>';
    row += '<td><div class="ai-cell ai-cell-success" id="can-cnt-10256-0">0</div></td>';
    row += '<td><div class="ai-cell">12c</div></td>';
    row += '<td><div class="ai-cell">1</div></td>';
    row += '<td><div class="ai-cell ai-cell-info-1" id="can-cnt-12c-1">0</div></td>';
    row += '<td><div class="ai-cell">12c</div></td>';
    row += '<td><div class="ai-cell">4</div></td>';
    row += '<td><div class="ai-cell ai-cell-info-1" id="can-cnt-12c-4">0</div></td>';
    row += '<td><div class="ai-cell">12c</div></td>';
    row += '<td><div class="ai-cell">7</div></td>';
    row += '<td><div class="ai-cell ai-cell-info-1" id="can-cnt-12c-7">0</div></td>';
    row += '</tr>';
    rows += getInfoRow(row);

    for (var i = 0; i < 40; i++) {
        row = '<td><div class="ai-cell ai-cell-secondary-1" id="">' + (i + 1) + '</div></td>';
        row += '<td><div class="ai-cell">' + (300 + (i*2) + 2).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell">0</div></td>';
        row += '<td><div class="ai-cell ai-cell-info-2" id="can-cnt-d' + (i + 1) + '-0">0</div></td>';
        row += '<td><div class="ai-cell">' + (300 + (i*2) + 1).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell">1</div></td>';
        row += '<td><div class="ai-cell ai-cell-info-2" id="can-cnt-d' + (i + 1) + '-1">0</div></td>';
        row += '<td><div class="ai-cell">' + (300 + (i*2) + 1).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell">2</div></td>';
        row += '<td><div class="ai-cell ai-cell-info-2" id="can-cnt-d' + (i + 1) + '-2">0</div></td>';
        row += '<td><div class="ai-cell">' + (300 + (i*2) + 2).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell">3</div></td>';
        row += '<td><div class="ai-cell ai-cell-info-2" id="can-cnt-d' + (i + 1) + '-3">0</div></td>';
        row += '<td><div class="ai-cell">' + (300 + (i*2) + 1).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell">4</div></td>';
        row += '<td><div class="ai-cell ai-cell-info-2" id="can-cnt-d' + (i + 1) + '-4">0</div></td>';
        row += '<td><div class="ai-cell">' + (300 + (i*2) + 2).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell">6</div></td>';
        row += '<td><div class="ai-cell ai-cell-info-2" id="can-cnt-d' + (i + 1) + '-6">0</div></td>';
        row += '<td><div class="ai-cell">' + (300 + (i*2) + 1).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell">7</div></td>';
        row += '<td><div class="ai-cell ai-cell-info-2" id="can-cnt-d' + (i + 1) + '-7">0</div></td>';
        row += '<td><div class="ai-cell">' + (300 + (i*2) + 1).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell">8</div></td>';
        row += '<td><div class="ai-cell ai-cell-info-2" id="can-cnt-d' + (i + 1) + '-8">0</div></td>';
        rows += getInfoRow(row);
    }

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

draw_can_bus_messages();

//Data
var draw_can_bus_data = function() {
    getFullPanel(0, 3, 9, 6, "tab-page-can_bus", "sec-can-bus-data", "CAN BUS", "DATA", "VER 1.0");
    var panel = document.getElementById("sec-can-bus-data");
    panel.innerHTML += draw_can_bus_data_1();
    panel.innerHTML += draw_can_bus_data_2();
}

var draw_can_bus_data_1 = function() {
    var html = getSectionTitle('CAN FILTERS');
    var rows = '';
    var row = '';
    //Start
    row = '<td><div class="ai-cell ai-cell-danger" id="can-filt-stop" onclick="CanFilterStart(\'start\');">START</div></td>';
    row += '<td><div class="ai-cell ai-cell-danger" id="can-filt-reset" onclick="CanFilterReset(1);">RESET</div></td>';
    row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-all" onclick="CanFilterSelect(\'all\');">ALL</div></td>';
    row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-0" onclick="CanFilterSelect(\'env-0\');">ENV - 0</div></td>';
    row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-3" onclick="CanFilterSelect(\'env-3\');">ENV - 3</div></td>';
    row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-4" onclick="CanFilterSelect(\'env-4\');">ENV - 4</div></td>';
    row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-10266" onclick="CanFilterSelect(\'env-10266\');">ENV - 10:266</div></td>';
    row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-12c16c" onclick="CanFilterSelect(\'env-12c16c\');">ENV - 12c:16c</div></td>';
    row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-12c" onclick="CanFilterSelect(\'env-12c\');">ENV - 12c</div></td>';
    row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-12d16c" onclick="CanFilterSelect(\'env-12d16c\');">ENV - 12d:16c</div></td>';
    row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-tx" onclick="CanFilterSelect(\'env-tx\');">ENV - TX</div></td>';
    row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-rx" onclick="CanFilterSelect(\'env-rx\');">ENV - RX</div></td>';
    rows += getInfoRow(row);

    row = '';
    for (var i = 0; i < 8; i++) {
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-' + (300 + (i*2) + 1).toString(16) + '" onclick="CanFilterSelect(\'env-' + (300 + (i*2) + 1).toString(16) + '\');">ENV - ' + (300 + (i*2) + 1).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-' + (300 + (i*2) + 2).toString(16) + '" onclick="CanFilterSelect(\'env-' + (300 + (i*2) + 2).toString(16) + '\');">ENV - ' + (300 + (i*2) + 2).toString(16) + '</div></td>';
    }
    rows += getInfoRow(row);

    row = '';
    for (var i = 8; i < 16; i++) {
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-' + (300 + (i*2) + 1).toString(16) + '" onclick="CanFilterSelect(\'env-' + (300 + (i*2) + 1).toString(16) + '\');">ENV - ' + (300 + (i*2) + 1).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-' + (300 + (i*2) + 2).toString(16) + '" onclick="CanFilterSelect(\'env-' + (300 + (i*2) + 2).toString(16) + '\');">ENV - ' + (300 + (i*2) + 2).toString(16) + '</div></td>';
    }
    rows += getInfoRow(row);

    row = '';
    for (var i = 16; i < 24; i++) {
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-' + (300 + (i*2) + 1).toString(16) + '" onclick="CanFilterSelect(\'env-' + (300 + (i*2) + 1).toString(16) + '\');">ENV - ' + (300 + (i*2) + 1).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-' + (300 + (i*2) + 2).toString(16) + '" onclick="CanFilterSelect(\'env-' + (300 + (i*2) + 2).toString(16) + '\');">ENV - ' + (300 + (i*2) + 2).toString(16) + '</div></td>';
    }
    rows += getInfoRow(row);

    row = '';
    for (var i = 24; i < 32; i++) {
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-' + (300 + (i*2) + 1).toString(16) + '" onclick="CanFilterSelect(\'env-' + (300 + (i*2) + 1).toString(16) + '\');">ENV - ' + (300 + (i*2) + 1).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-' + (300 + (i*2) + 2).toString(16) + '" onclick="CanFilterSelect(\'env-' + (300 + (i*2) + 2).toString(16) + '\');">ENV - ' + (300 + (i*2) + 2).toString(16) + '</div></td>';
    }
    rows += getInfoRow(row);

    row = '';
    for (var i = 32; i < 40; i++) {
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-' + (300 + (i*2) + 1).toString(16) + '" onclick="CanFilterSelect(\'env-' + (300 + (i*2) + 1).toString(16) + '\');">ENV - ' + (300 + (i*2) + 1).toString(16) + '</div></td>';
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-env-' + (300 + (i*2) + 2).toString(16) + '" onclick="CanFilterSelect(\'env-' + (300 + (i*2) + 2).toString(16) + '\');">ENV - ' + (300 + (i*2) + 2).toString(16) + '</div></td>';
    }
    rows += getInfoRow(row);

    row = '<td><div class="ai-cell ai-cell-warning" id="can-filt-pag-all" onclick="CanFilterSelect(\'pag-all\');">PAG - ALL</div></td>';
    for (var i = 0; i < 10; i++) {
        row += '<td><div class="ai-cell ai-cell-warning" id="can-filt-pag-' + i + '" onclick="CanFilterSelect(\'pag-' + i + '\');">PAG - ' + i + '</div></td>';
    }
    rows += getInfoRow(row);

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

var draw_can_bus_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="can-message-table">';
    html += '</tbody>';
    html += '</table>';

    html = getPanel(html);
    return html;
}

draw_can_bus_data();

var CanFilterReset = function(counters) {
    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("can-message-table").innerHTML = lines;

    if (counters == 1) {
        document.getElementById("can-cnt-0-0").innerHTML = "0";
        document.getElementById("can-cnt-0-1").innerHTML = "0";
        document.getElementById("can-cnt-0-2").innerHTML = "0";
        document.getElementById("can-cnt-3-0").innerHTML = "0";
        document.getElementById("can-cnt-3-1").innerHTML = "0";
        document.getElementById("can-cnt-3-2").innerHTML = "0";
        document.getElementById("can-cnt-4-0").innerHTML = "0";
        document.getElementById("can-cnt-4-1").innerHTML = "0";
        document.getElementById("can-cnt-10256-0").innerHTML = "0";
        document.getElementById("can-cnt-12c-1").innerHTML = "0";
        document.getElementById("can-cnt-12c-4").innerHTML = "0";
        document.getElementById("can-cnt-12c-7").innerHTML = "0";
        for (var i = 1; i <= 40; i++) {
            for (var j = 0; j <= 4; j++) {
                document.getElementById("can-cnt-d" + i + "-" + j).innerHTML = "0";
            }
            for (var j = 6; j <= 8; j++) {
                document.getElementById("can-cnt-d" + i + "-" + j).innerHTML = "0";
            }
        }
        
    }
}

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

var CanFilterSelect = function(filter) {
    CanFilterReset(0);
    var classs = document.getElementById("can-filt-" + filter).className;
    if (classs == "ai-cell ai-cell-warning") {
        document.getElementById("can-filt-" + filter).className = "ai-cell ai-cell-secondary-2";
    } else {
        document.getElementById("can-filt-" + filter).className = "ai-cell ai-cell-warning";
    }

    if (filter == "all") {
        classs = document.getElementById("can-filt-" + filter).className;
        document.getElementById("can-filt-env-0").className = classs;
        document.getElementById("can-filt-env-3").className = classs;
        document.getElementById("can-filt-env-4").className = classs;
        document.getElementById("can-filt-env-10266").className = classs;
        document.getElementById("can-filt-env-12c16c").className = classs;
        document.getElementById("can-filt-env-12c").className = classs;
        document.getElementById("can-filt-env-12d16c").className = classs;
        document.getElementById("can-filt-env-tx").className = classs;
        document.getElementById("can-filt-env-rx").className = classs;
        document.getElementById("can-filt-pag-all").className = classs;
        for (var i = 0; i < 40; i++) {
            document.getElementById('can-filt-env-' + (300 + (i*2) + 1).toString(16)).className = classs;
            document.getElementById('can-filt-env-' + (300 + (i*2) + 2).toString(16)).className = classs;
        }
        for (var i = 0; i < 10; i++) {
            document.getElementById("can-filt-pag-" + i.toString(16)).className = classs;
            document.getElementById("can-filt-pag-" + i.toString(16)).className = classs;
        }
    }

    if (filter == "env-12c16c") {
        classs = document.getElementById("can-filt-" + filter).className;
        document.getElementById("can-filt-env-12d16c").className = classs;
        document.getElementById('can-filt-env-' + (300).toString(16)).className = classs;
        document.getElementById("can-filt-env-tx").className = classs;
        document.getElementById("can-filt-env-rx").className = classs;
        for (var i = 0; i <= 40; i++) {
            document.getElementById('can-filt-env-' + (300 + (i*2) + 1).toString(16)).className = classs;
            document.getElementById('can-filt-env-' + (300 + (i*2) + 2).toString(16)).className = classs;
        }
    }

    if (filter == "env-12d16c") {
        classs = document.getElementById("can-filt-" + filter).className;
        document.getElementById("can-filt-env-12d16c").className = classs;
        document.getElementById("can-filt-env-tx").className = classs;
        document.getElementById("can-filt-env-rx").className = classs;
        for (var i = 0; i <= 40; i++) {
            document.getElementById('can-filt-env-' + (300 + (i*2) + 1).toString(16)).className = classs;
            document.getElementById('can-filt-env-' + (300 + (i*2) + 2).toString(16)).className = classs;
        }
    }

    if (filter == "pag-all") {
        classs = document.getElementById("can-filt-" + filter).className;
        for (var i = 0; i < 10; i++) {
            document.getElementById("can-filt-pag-" + i.toString(16)).className = classs;
            document.getElementById("can-filt-pag-" + i.toString(16)).className = classs;
        }
    }

    if (filter == "env-tx") {
        classs = document.getElementById("can-filt-" + filter).className;
        for (var i = 0; i < 40; i++) {
            document.getElementById('can-filt-env-' + (300 + (i*2) + 1).toString(16)).className = classs;
        }
    }

    if (filter == "env-rx") {
        classs = document.getElementById("can-filt-" + filter).className;
        for (var i = 0; i < 40; i++) {
            document.getElementById('can-filt-env-' + (300 + (i*2) + 2).toString(16)).className = classs;
        }
    }
}