
function layoutNightDay(type) {
    if (type == 0) {  // night layout black background
        document.body.style.backgroundColor = "#000";
    }
    else {  // day layout white background
        document.body.style.backgroundColor = "#FFF";

        var elements = document.getElementsByClassName('thermoTemp'); // get all temp elements
        for(var i = 0; i < elements.length; i++){
            elements[i].style.color = "#000";
        }
        
        var elements = document.getElementsByClassName('thermoHumidity'); // get all temp elements
        for(var i = 0; i < elements.length; i++){
            elements[i].style.color = "#000";
        }
        
        var elements = document.getElementsByClassName('thermoMin'); // get all temp elements
        for(var i = 0; i < elements.length; i++){
            elements[i].style.color = "#000";
        }
        
        var elements = document.getElementsByClassName('thermoMax'); // get all temp elements
        for(var i = 0; i < elements.length; i++){
            elements[i].style.color = "#000";
        }
    }

}

function redrawDashboardCol1() {  // 
    // if ((redrawTempWidget == 1) || (redrawProbesWidget == 1))  // redraw the temperature gauges in widget once after assigning custom name
    if (redrawTempWidget == 1)  // redraw the temperature gauges in widget once after assigning custom name
    {
        var dataRows = 0;
        if (windowWidth < 1280) {dataRows = ds18b20Found + phSeen + sensorPinID.length;}
        else if (windowHeight < 885) {dataRows = 10;}
        else if (windowHeight < 1004) {dataRows = 12;}
        else {dataRows = 14;}
        
        dashboardDataID = 0;
        // console.log('redrawDashboardCol1----------- ' + dataRows);
        $('#contentCol1').empty();  // clear temp widget
        
        for (var i=0; i < dataRows; i++)  // 
        {
            document.getElementById('contentCol1').innerHTML += 
                '<div class="dashboardDataBox" id="dashboardDataBox_' + i + '"></div>';
        }

        for (var i=0; i < ds18b20Found; i++)  // 
        {
            dashboardDataID++;
        }

        for (var i=0; i < phSeen; i++)  // 
        {
            document.getElementById('dashboardDataBox_' + dashboardDataID).innerHTML += 
                '<div class="probeHolder" id="probeHolder_' + i + '">\
                    <div class="probeIcon">\
                        <img class="" src="images/icons/probes.png">\
                    </div>\
                    <div class="probeBox">\
                        <div class="probeName" id="probeName' + [i] + '"></div>\
                        <div class="probeValue" id="probeValue' + [i] + '">\</div>\
                        <div class="probeMinLabel" id="probeMinLabel">Min</div>\
                        <div class="probeMaxLabel" id="probeMaxLabel">Max</div>\
                        <div class="probeMin" onclick="resetProbeMinMax(' + i + ',0)" id="probeMin' + [i] + '"></div>\
                        <div class="probeMax" onclick="resetProbeMinMax(' + i + ',1)" id="probeMax' + [i] + '"></div>\
                    </div>\
                </div>';
                
            dashboardDataID++;
        }
        printProbes();
        
        // console.log('dashboardDataID----------- ' + dashboardDataID);
        sensorsUpdateDashboard();

    }
}

function loadLayout() {  // 
    redrawTempWidget = 1;
    displayScreen = 0;
    // console.log('loadLayout-----------');
                        // <div class="headerStatusIcon bi bi-cloud-arrow-down-fill" onclick="deleteRuleConfirm()"></div>\
    getWindowSize();
    document.getElementById('mainContainer').innerHTML =  // 
        '<div class="headerContainer" id="headerContainer">\
            <div class="headerIcon" id="headerIcon"></div>\
            <div class="headerLine" id="headerLine">\
                <div class="headerTitle" id="headerTitle"></div>\
                <div class="headerRightSide" id="headerRightSide">\
                    <div>\
                        <div class="headerDatetime" id="headerDatetime"></div>\
                        <div class="updateIconContainer" id="updateIconContainer" onclick="runUpdate()">\
                            <div class="updateIconBox" id="updateIconBox">Install Version ' + latestVersion + '<span class="updateIcon bi bi-cloud-arrow-down-fill"></span></div>\
                        </div>\
                    </div>\
                    <div class="headerStatus" id="headerStatus">\
                        <div id="logo">\
                            <span class="needle" id="needle"></span>\
                        </div>\
                        <img class="headerStatusIcon" src="images/icons/health.png">\
                        <img class="headerStatusIcon" src="images/icons/feedOff.png">\
                        <img class="headerStatusIcon" src="images/icons/ato2.png">\
                        <img class="headerStatusIcon" src="images/icons/secLkOff.png">\
                        <img class="headerStatusIcon" id="connectedIcon" src="images/icons/conn.png">\
                    </div>\
                </div>\
            </div>\
        </div>\
        <div class="content" id="content">\
            <div class="contentCol1" id="contentCol1">\
            </div>\
            <div class="contentCol2" id="contentCol2">\
                <div class="contentCol2_Col" id="contentCol2_Col">\
                    <div class="contentCol2_Col1" id="contentCol2_Col1"></div>\
                    <div class="contentCol2_Col2" id="contentCol2_Col2"></div>\
                    <div class="contentCol2_Col3" id="contentCol2_Col3"></div>\
                </div>\
                <div class="contentCol2_Bottom" id="contentCol2_Bottom">\
                    <div id="widgetDs18b20Graph"></div>\
                </div>\
            </div>\
            <div class="contentCol3" id="contentCol3">\
            </div>\
        </div>\
        <div class="footerContainer" id="footerContainer"></div>';
    
    if (outletPinID.length != 0) {
        document.getElementById('contentCol3').innerHTML =  // 
            `<div class="dashboardOutletContainer" id="dashboardOutletContainer"></div>`;
    }
    if (dcPinID.length != 0) {
        document.getElementById('contentCol3').innerHTML +=  // 
            `<div class="dashboardDcContainer" id="dashboardDcContainer"></div>`;
    }
    if (dosePinID.length != 0) {
        document.getElementById('contentCol3').innerHTML +=  // 
            `<div class="dashboardDoseContainer" id="dashboardDoseContainer" onclick="dosingSettings()"></div>`;
    }
        // <div class="contentCol1_Col1" id="contentCol1_Col1"></div>\
        // <div class="contentCol1_Col2" id="contentCol1_Col2"></div>\
    printHeaderTitle("ROBO-TANK", "home2.png", "#0226f0");  // name and file
    printDateTime();
    printDcPortsWidget();  // load DC port widget when it opens
    printLightWidget();
    printDosingPumpsWidget();
    redrawDashboardCol1();
    printTemps();
    printProbes();
    printFooter();
    printAcOutletsWidget();
    layoutNightDay(0);
    printGraphs();
}

function printHeaderTitle(title, file, color) {  // 
    $('.headerTitle').empty();  // 
    if (windowWidth > 480) {document.getElementById('headerTitle').innerHTML = title;}
    document.getElementById('headerTitle').style.color = color;
    document.getElementById('headerIcon').style.backgroundImage = "url('/images/icons/" + file + "')";
    document.getElementById('headerIcon').style.backgroundColor = color;
}

function menuButtonClick(button) {  // 
    // console.log('menuButtonClick----------- ' + button);

    if (button == 0) {featureNotAvailable();}
    else if (button == 1) {printSchedulesTableMenu(scheduleTabSelected);}  // load DC port widget when it opens
    else if (button == 2) {viewLightModes();}
    else if (button == 3) {customRulesList();}
    else if (button == 4) {printGraphsScreen();}
    else if (button == 5) {viewLogs();}
    else if (button == 6) {featureNotAvailable();}
    else if (button == 7) {featureNotAvailable();}
    else if (button == 8) {viewSettingsMenu();}
}

function scrollMenuLeft() {  // 
    // console.log('scrollMenuLeft-----------');
    menuScrollMarginLeft = menuScrollMarginLeft + 92;

    if (menuScrollMarginLeft <= 0) {
        document.getElementById('menuBox0').style.marginLeft = menuScrollMarginLeft + "px";
        document.getElementById('menuBox0').style.transitionDuration = ".6s";
    }
    else {menuScrollMarginLeft = 0;}
    // console.log('menuScrollMarginLeft = ' + menuScrollMarginLeft);
}

var width = 0;
var hiding = 0;
var maxLeft = 0;
function scrollMenuRight() {  // 
    // console.log('scrollMenuRight-----------');
    width = document.getElementById("footerMenuContainer").offsetWidth;

    if (width == 828) hiding = 0;
    else if (width == 644) hiding = 2;
    else if (width == 552) hiding = 3;
    else if (width == 460) hiding = 4;
    else if (width == 368) hiding = 5;
    else if (width == 276) hiding = 6;
    else if (width == 184) hiding = 7;
    // console.log('hiding           = ' + hiding);
    
    menuScrollMarginLeft = menuScrollMarginLeft + -92;
    // console.log('menuScrollMarginLeft = ' + menuScrollMarginLeft);
    maxLeft = hiding * -92;
    // console.log('maxLeft          = ' + maxLeft);

    if (menuScrollMarginLeft >= maxLeft) {
        document.getElementById('menuBox0').style.marginLeft = menuScrollMarginLeft + "px";
        document.getElementById('menuBox0').style.transitionDuration = ".6s";
    }
    else {menuScrollMarginLeft = menuScrollMarginLeft + 92;}
    // console.log('menuScrollMarginLeft = ' + menuScrollMarginLeft);
    // console.log(' ');
}

function setFooterMenuPosition() {  // 
    // console.log('setFooterMenuPosition-----------');
    width = document.getElementById("footerMenuContainer").offsetWidth;

    if (width == 828) hiding = 0;
    else if (width == 644) hiding = 2;
    else if (width == 552) hiding = 3;
    else if (width == 460) hiding = 4;
    else if (width == 368) hiding = 5;
    else if (width == 276) hiding = 6;
    else if (width == 184) hiding = 7;
    // console.log('hiding           = ' + hiding);
    
    // menuScrollMarginLeft = menuScrollMarginLeft + -92;
    // console.log('menuScrollMarginLeft = ' + menuScrollMarginLeft);
    maxLeft = hiding * -92;
    // console.log('maxLeft          = ' + maxLeft);

    if (menuScrollMarginLeft >= maxLeft) {
        document.getElementById('menuBox0').style.marginLeft = menuScrollMarginLeft + "px";
        document.getElementById('menuBox0').style.transitionDuration = ".6s";
    }
    else {menuScrollMarginLeft = menuScrollMarginLeft + 92;}
    // console.log('menuScrollMarginLeft = ' + menuScrollMarginLeft);
    // console.log(' ');
}

function printFooter() {  // 
    // console.log('printFooter-----------');
    $('#footerContainer').empty();  // 
    document.getElementById('footerContainer').innerHTML = 
        '<div class="footerPrevNav" id="footerPrevNav" onclick="scrollMenuLeft()"></div>\
        <div class="footerMenuContainer" id="footerMenuContainer"></div>';

    for (var i=0; i < 9; i++)  // 
    {
        document.getElementById('footerMenuContainer').innerHTML +=  // 
            '<div class="menuBox" id="menuBox' + i + '">\
                <div class="menuIcon" id="menuIcon_' + i + '" onclick="menuButtonClick(' + i + ')"></div>\
                <div class="menuIconName" id="menuIconName_' + i + '" onclick="menuButtonClick(' + i + ')"></div>\
            </div>';
    }
    document.getElementById('footerContainer').innerHTML += 
    '<div class="footerNextNav" id="footerNextNav" onclick="scrollMenuRight()"></div>';
    
    document.getElementById('menuIcon_0').style.backgroundImage = "url('/images/icons/resume.png')";
    document.getElementById('menuIconName_0').innerHTML = "Resume";
    
    document.getElementById('menuIcon_1').style.backgroundImage = "url('/images/icons/schedules4.png')";
    document.getElementById('menuIconName_1').innerHTML = "Schedules";
    
    document.getElementById('menuIcon_2').style.backgroundImage = "url('/images/icons/lights.png')";
    document.getElementById('menuIconName_2').innerHTML = "Lights";
    
    document.getElementById('menuIcon_3').style.backgroundImage = "url('/images/icons/rules.png')";
    document.getElementById('menuIconName_3').innerHTML = "Rules";
    
    document.getElementById('menuIcon_4').style.backgroundImage = "url('/images/icons/graph.png')";
    document.getElementById('menuIconName_4').innerHTML = "Charts";
    
    document.getElementById('menuIcon_5').style.backgroundImage = "url('/images/icons/log.png')";
    document.getElementById('menuIconName_5').innerHTML = "Logs";
    
    document.getElementById('menuIcon_6').style.backgroundImage = "url('/images/icons/alerts.png')";
    document.getElementById('menuIconName_6').innerHTML = "Alerts";
    
    // document.getElementById('menuIcon_7').style.backgroundImage = "url('/images/icons/storm.png')";
    // document.getElementById('menuIconName_7').innerHTML = "Storm";
    
    document.getElementById('menuIcon_7').style.backgroundImage = "url('/images/icons/feed.png')";
    document.getElementById('menuIconName_7').innerHTML = "Feed";
    
    document.getElementById('menuIcon_8').style.backgroundImage = "url('/images/icons/settings.png')";
    // document.getElementById('menuIcon_9').innerHTML = '<i class="bi bi-gear-fill"></i>';
    document.getElementById('menuIconName_8').innerHTML = "Settings";
    setFooterMenuPosition();
}

function removeFooter() {  // remove footer and empty content area
    displayScreen = 255;
    
    $('.content').empty();  // empty dashboard
    $('.footerContainer').empty();  // empty dashboard menu

    var elements = document.getElementsByClassName('footerContainer'); // get all temp elements
    for(var i = 0; i < elements.length; i++) {
        elements[i].style.borderTop = "none";
        elements[i].style.backgroundImage = "none";
        elements[i].style.height = "0px";
    }
    var elements = document.getElementsByClassName('content'); // get all temp elements
    for(var i = 0; i < elements.length; i++) {
        elements[i].style.height = "88vh";
    }
}