//Variables
var draw_rain_meter_variables = function() {
    getFullPanel(0, 0, 4, 9, "tab-page-rain-meter", "sec-rain-meter-variables", "RAIN METER", "DATA", "VER 1.0");
    var panel = document.getElementById("sec-rain-meter-variables");
    panel.innerHTML += draw_rain_meter_variables_1();
    panel.innerHTML += draw_rain_meter_variables_1_5();
    panel.innerHTML += draw_rain_meter_variables_2();
    panel.innerHTML += draw_rain_meter_variables_3();
}

var draw_rain_meter_variables_1 = function() {
    var html = getSectionTitle('CONTROL');
    html = getPanel(html);
    return html;
}

var draw_rain_meter_variables_1_5 = function() {
    var html = '';
    html += '<table class="ai-table ai-table-border">';
    html += '<thead></thead>';
    html += '<tbody>';
    html += '<tr><td><div class="ai-cell ai-cell-info-1" id="rain-meter-download" onclick="download_rain();">DOWNLOAD</div></td></tr>';
    html += '<tr><td><div class="ai-cell ai-cell-info-1" id="rain-meter-export" onclick="export_rain();">EXPORT</div></td></tr>';
    html += '</tbody>';
    html += '</table>';

    html = getPanel(html);
    return html;
}

var draw_rain_meter_variables_2 = function() {
    var html = getSectionTitle('DATA');
    var rows = '';
    var row = '';

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

var draw_rain_meter_variables_3 = function() {
    var html = '';
    html += '<table class="ai-table ai-table-border">';
    html += '<thead></thead>';
    html += '<tbody>';
    html += '<tr><td><div class="ai-cell ai-cell-warning">04</div></td><td>Internal memory</td><td>F6</td><td>External Memory</td></tr>';
    html += '<tr><td></td></tr>';
    html += '</tbody>';
    html += '</table>';
    
    html += '<table class="ai-table ai-table-border">';
    html += '<thead></thead>';
    html += '<tbody id="rain-data-table">';
    html += '<tr><td>-----</td><td><div class="ai-cell ai-cell-info-1">ASCII</div><td><div class="ai-cell ai-cell-info-1">00</div></td><td><div class="ai-cell ai-cell-info-1">01</div></td><td><div class="ai-cell ai-cell-info-1">02</div></td><td><div class="ai-cell ai-cell-info-1">03</div></td><td><div class="ai-cell ai-cell-info-1">04</div></td><td><div class="ai-cell ai-cell-info-1">05</div></td><td><div class="ai-cell ai-cell-info-1">06</div></td><td><div class="ai-cell ai-cell-info-1">07</div></td><td><div class="ai-cell ai-cell-info-1">08</div></td><td><div class="ai-cell ai-cell-info-1">09</div></td><td><div class="ai-cell ai-cell-info-1">0A</div></td><td><div class="ai-cell ai-cell-info-1">0B</div></td><td><div class="ai-cell ai-cell-info-1">0C</div></td><td><div class="ai-cell ai-cell-info-1">0D</div></td><td><div class="ai-cell ai-cell-info-1">0E</div></td><td><div class="ai-cell ai-cell-info-1">0F</div></td></tr>';
    html += '<tr><td class="ai-cell ai-cell-warning">00000</td><td class="ai-cell ai-cell-warning"></td></tr>';
    html += '</tbody>';
    html += '</table>';

    html = getPanel(html);
    return html;
}

draw_rain_meter_variables();

//Data
var draw_rain_meter_data = function() {
    getFullPanel(4, 0, 5, 9, "tab-page-rain-meter", "sec-rain-meter-data", "RAIN METER", "INFORMATION", "VER 1.0");
    var panel = document.getElementById("sec-rain-meter-data");
    panel.innerHTML += draw_rain_meter_data_2();
}

var draw_rain_meter_data_2 = function() {
    var html = '';
    html += '<table class="ai-table ai-table-border">';
    html += '<thead></thead>';
    html += '<tbody id="rain-message-table">';
    html += '</tbody>';
    html += '</table>';

    html = getPanel(html);
    return html;
}

draw_rain_meter_data();