
function settingsDrivers_ORG() {
    removeFooter();

    document.getElementById('content').innerHTML +=
        '<div class="cleanScreen" id="cleanScreen">\
        <div class="dosingPumpsBoxContainer" id="dosingPumpsBoxContainer"></div>\
        <div class="widgetButtonBox">\
            <button class="button _48" onclick="loadLayout()">Home</button>\
        </div>\
        </div>';

    // $('.popupBoxHeader').append("Driver Settings");  // change popup header
    // $('.popupInstructions').append("Pins Available");  // add text to top of popup
    // $('.popupButtons').append("<button class='button back'>Back</button>");  // add back button
    // $('.popupButtons').append("<button class='button exit'>Exit</button>");  // add exit button
      
    // $(".popupBox2").append("</br></br>This is where you can add, edit or remove equipment and sensors from the controller.</br></br>");
    
    $(".dosingPumpsBoxContainer").load('/php/getDriverDetails.php');
    
    // add touch for buttons
    // $('.back').click(function() { settingsMainMenu(); });
    // $('.exit').click(function() { $('#popupBackground').hide(); $('#settingsPopup').hide(); document.querySelector("body").style.overflow = 'visible';});
}

function showDriver_ORG() {  // dropdown for driver type, loads table with pin details
    // if (str == "") {
    //   return;
    // } else {
    //   var xmlhttp = new XMLHttpRequest();
    //   xmlhttp.onreadystatechange = function() {
    //     // if (this.readyState == 4 && this.status == 200) {            
    //     // }
    //   };
    //   // request pins for driver selected, driverID is being sent with link
    //   $(".popupBox2").load('/php/getDriverDetails.php?q='+str);
    // }
    $(".popupBox2").load('/php/getDriverDetails.php');
}

function showPin() {  // dropdown for driver type when assigning a pin, loads pin optionss
    // if (str == "") {
    //   return;
    // } else {
    //   var xmlhttp = new XMLHttpRequest();
    //   xmlhttp.onreadystatechange = function() {
    //     // if (this.readyState == 4 && this.status == 200) {
    //     // }
    //   };
    //   // request pins for driver selected, driverID is being sent with link
    //   $(".popupBox2").load('/php/driverAssignPin2.php?q='+str);
    // }
    // $(".popupBox2").load('/php/driverAssignPin2.php');
}

var editingPort = 0;  // track which port is being edited
var v3EditModule = 0;  // track which module is being edited for v3 controller
var savePortEnabled = "";  // temporarily hold new value until save button is pressed
var savePortLogic = 0;  // temporarily hold new value until save button is pressed
var savePortName = "";  // temporarily hold new value until save button is pressed
var saveIconID = 0;  // temporarily hold new value until save button is pressed
var savePinTypeID = 0;  // temporarily hold new value until save button is pressed
var prevPinTypeID = 0;  // track pinTypeID before we update it so we can update 1wire bus if necessary
var configureDB9plug = 0;  // track what DB9 we are editing

var countSaves = 0;

function changeDB9Accessory() {  // change what's plugged in a DB9 on controller
    console.log('changeDB9Accessory = ' + configureDB9plug);
    var arrayID = [[4,5,17,10,9,18,19,20],[11,1,0,2,6,3,7,8]];  // GPIOpin array location for pin number
    var portFun = 0;  // 
    portFun = document.getElementById('db9Accessory').value;
    console.log('portFun           = ' + portFun);

    
    document.getElementById('db9Accessory').value = portFun;
    
    document.getElementById('db9PinTable').innerHTML = "";  // empty table

    for (i = 0; i < 8; i++) {  // build table
        document.getElementById('db9PinTable').innerHTML +=
            `<div class="driversEditDB9Rows" id="">\
                <div class="driverDB9Name" id="pinTitle_` + i + `" style="flex: 0 0 10px;">` + (i+1) + `</div>
                <input class="driverDB9pinName" type="text" id="portCustomName_` + i + `" value="` + customPortName[arrayID[configureDB9plug][i]] + `" onfocusout="" autocomplete="off">\
                <label class="switch" style="margin-left:10px;">\
                    <input type="checkbox" id="portEnabled_` + i + `" onclick="">\
                    <span class="sliderSwitch round"></span>\
                </label>\
                <div class="tg-0pky enable_14" id="icon_14"><img class="driverDB9icon" onclick="editDB9Icon(` + arrayID[configureDB9plug][i] + `)" src="images/Outlets/OutLD` + pinIconID[arrayID[configureDB9plug][i]] + `S.png" alt="Assign Icon"></div>\
                <select class="driverDB9pinFunction" name="pinLogic" id="pinLogic_` + i + `"></select>\
                <select class="driverDB9pinFunction" name="pinFunction" id="pinFunction_` + i + `"></select>\
            </div>\
            <div class="fieldError" id="db9error_` + i + `"></div>`;
    }

    for (i = 0; i < 8; i++) {  // 
        document.getElementById('pinLogic_' + i).innerHTML = 
            '<option value="0">Normal</option>\
            <option value="1">Inverted</option>';

        if (portFun == 0) {
            document.getElementById('pinTitle_' + i).innerHTML = "AC" + (i+1);

            document.getElementById('pinFunction_' + i).innerHTML = 
                '<option value="1">AC Outlet</option>\
                <option value="13">Auto Feeder</option>\
                <option value="2">DC Port</option>\
                <option value="12">Dosing Pump</option>\
                <option value="15">Dosing Pump Stirrer</option>\
                <option value="11">Light</option>'
        }
        else if (portFun == 1) {  // 6 DC 2 sensors 
            if (i < 6) {  // dc port functions
                document.getElementById('pinTitle_' + i).innerHTML = "DC" + (i+1);
                document.getElementById('pinFunction_' + i).innerHTML = 
                    '<option value="1">AC Outlet</option>\
                    <option value="13">Auto Feeder</option>\
                    <option value="2">DC Port</option>\
                    <option value="12">Dosing Pump</option>\
                    <option value="15">Dosing Pump Stirrer</option>\
                    <option value="11">Light</option>'
            }
            else {  // sensor functions
                document.getElementById('pinTitle_' + i).innerHTML = "Sen" + (i+1);
                document.getElementById('pinFunction_' + i).innerHTML = 
                    '<option value="4">DHT22</option>\
                    <option value="8">Float Switch</option>\
                    <option value="6">Non-Contact Sensor</option>\
                    <option value="7">Optical Sensor</option>\
                    <option value="14">Toggle Switch</option>\
                    <option value="9">Other Water Sensor</option>'
            }
        }
        else if (portFun == 2) {  // 6 sensors 2 dc
            if (i < 6) {  // sensor functions
                document.getElementById('pinTitle_' + i).innerHTML = "Sen" + (i+1);
                document.getElementById('pinFunction_' + i).innerHTML = 
                    '<option value="4">DHT22</option>\
                    <option value="8">Float Switch</option>\
                    <option value="6">Non-Contact Sensor</option>\
                    <option value="7">Optical Sensor</option>\
                    <option value="14">Toggle Switch</option>\
                    <option value="9">Other Water Sensor</option>'
            }
            else {  // dc port functions
                document.getElementById('pinTitle_' + i).innerHTML = "DC" + (i+1);
                document.getElementById('pinFunction_' + i).innerHTML = 
                    '<option value="1">AC Outlet</option>\
                    <option value="13">Auto Feeder</option>\
                    <option value="2">DC Port</option>\
                    <option value="12">Dosing Pump</option>\
                    <option value="15">Dosing Pump Stirrer</option>\
                    <option value="11">Light</option>'
            }
        }
        
        if (((windowWidth >= 500) && (windowWidth < 1024)) || (windowWidth >= 1280)) {
            document.getElementById('pinFunction_' + i).style.maxWidth = "120px";
            document.getElementById('pinFunction_' + i).style.direction = "ltr";
            document.getElementById('pinLogic_' + i).style.maxWidth = "100px";
            document.getElementById('pinLogic_' + i).style.direction = "ltr";
            document.getElementById('functionLabel').innerHTML = "Function";
            document.getElementById('functionLabel').style.marginRight = "58px";
            
        }
        else {document.getElementById('pinFunction_' + i).style.maxWidth = "22px";
            document.getElementById('pinFunction_' + i).style.direction = "rtl";
            document.getElementById('pinLogic_' + i).style.maxWidth = "22px";
            document.getElementById('pinLogic_' + i).style.direction = "rtl";
            document.getElementById('functionLabel').innerHTML = "F";
            document.getElementById('functionLabel').style.marginRight = "8px";
        }
        
        if (pinAssigned[arrayID[configureDB9plug][i]] == 1) {
            document.getElementById('portEnabled_' + i).checked = true;
        }
        else {
            document.getElementById('portEnabled_' + i).checked = false;
        }
        
        if (portLogic[arrayID[configureDB9plug][i]] == 1) {
            document.getElementById('pinLogic_' + i).value = 1;
        }
        else {
            document.getElementById('pinLogic_' + i).value = 0;
        }
        
        document.getElementById('pinFunction_' + i).value = pinTypeID[arrayID[configureDB9plug][i]];
    }

}

// AC power bar -------------  0

// 6 DC 2 Sensor ------------  1
// DC 6 =  9
// DC 5 =  10
// DC 4 =  22
// DC 3 =  15
// DC 2 =  14
// DC 1 =  23
// Sensor 1 =  24
// Sensor 2 =  25

// 6 sensor 2 DC ------------  2
// Sensor 6 =  16
// Sensor 5 =  6
// Sensor 4 =  5
// Sensor 3 =  7
// Sensor 2 =  11
// Sensor 1 =  8
// DC 1 =  12
// DC 2 =  13


function configureDB9(plug) {  // configure pins on DB9 ports
    console.log('configureDB9 = ' + plug);
    configureDB9plug = plug;  // track which DB9 is being edited
    var portName = "";  // 
    var portInfo = "Select the Accessory type you have plugged in and set up each port.";

    if (plug == 0) {portName = "DB9 Port 1";}
    else if (plug == 1) {portName = "DB9 Port 2";}

    var arrayID = [[4,5,17,10,9,18,19,20],[11,1,0,2,6,3,7,8]];  // GPIOpin array location for pin number
    
    document.getElementById('driversControllerInfoBox').innerHTML =
        '<div class="driversControllerPort" id="driversControllerPort">' + portName + '</div>\
        <div class="" style="width:100%; margin-top:-15px; text-align:center;">' + portInfo + '</div>\
        <div class="driversControllerEditBox" style="margin-top:10px;" id="driversControllerEditBox">\
            <div class="driverControllerName">Accessory</div>\
            <select class="driverControllerField" style="width:200px;" name="db9Accessory" id="db9Accessory" onchange="changeDB9Accessory()">\
                <option value="0">Robo-Tank AC Power Bar</option>\
                <option value="1">Robo-Tank 6 DC / 2 Sensors Expansion</option>\
                <option value="2">Robo-Tank 2 DC / 6 Sensors Expansion</option>\
            </select>\
        </div>\
        <div class="driversEditDB9Box" id="driversEditDB9Box">\
            <div class="driverDB9tableHeader" id="">\
                <div class="driverDB9Name">&nbsp Port</div>\
                <div class="driverDB9Name" style="margin-left:8px;">Custom Name</div>\
                <div class="driverDB9Name" id="functionLabel" style="float:right; margin-right:8px;">F</div>\
                <div class="driverDB9Name" id="logicLabel" style="float:right; margin-right:20px;">L</div>\
                <div class="driverDB9Name" style="float:right; margin-right:12px;">Icon</div>\
                <div class="driverDB9Name" style="float:right;">Enable</div>\
            </div>\
            <div id="db9PinTable"></div>\
        </div>\
        <div class="widgetButtonBox">\
            <button class="button _wide" onclick="saveDB9(' + plug + ')">Save</button>\
            <button class="button _wide" onclick="settingsDrivers()">Cancel</button>\
        </div>';
    
    var db9Accessory = 0;  // track what DB9 is set for

    if (plug == 0) {document.getElementById('db9Accessory').value = db9_1; db9Accessory = db9_1;}
    else if (plug == 1) {document.getElementById('db9Accessory').value = db9_2; db9Accessory = db9_2;}
    
    for (i = 0; i < 8; i++) {  // 
        document.getElementById('db9PinTable').innerHTML +=
            `<div class="driversEditDB9Rows" id="">\
                <div class="driverDB9Name" id="pinTitle_` + i + `" style="flex: 0 0 10px;">` + (i+1) + `</div>
                <input class="driverDB9pinName" type="text" id="portCustomName_` + i + `" value="` + customPortName[arrayID[plug][i]] + `" onfocusout="" autocomplete="off">\
                <label class="switch" style="width:35px; min-width:35px; margin-left:10px;">\
                    <input type="checkbox" id="portEnabled_` + i + `" onclick="">\
                    <span class="sliderSwitch sliderSwitch2 round"></span>\
                </label>\
                <div class="tg-0pky enable_14" id="icon_14"><img class="driverDB9icon" onclick="editDB9Icon(` + arrayID[plug][i] + `)" src="images/Outlets/OutLD` + pinIconID[arrayID[plug][i]] + `S.png" alt="Assign Icon"></div>\
                <select class="driverDB9pinFunction" name="pinLogic" id="pinLogic_` + i + `"></select>\
                <select class="driverDB9pinFunction" name="pinFunction" id="pinFunction_` + i + `"></select>\
            </div>\
            <div class="fieldError" id="db9error_` + i + `"></div>`;
    }

    for (i = 0; i < 8; i++) {  // 
        document.getElementById('pinLogic_' + i).innerHTML = 
            '<option value="0">Normal</option>\
            <option value="1">Inverted</option>';
            
        if (db9Accessory == 0) {
            document.getElementById('pinTitle_' + i).innerHTML = "AC" + (i+1);

            document.getElementById('pinFunction_' + i).innerHTML = 
                '<option value="1">AC Outlet</option>\
                <option value="13">Auto Feeder</option>\
                <option value="2">DC Port</option>\
                <option value="12">Dosing Pump</option>\
                <option value="15">Dosing Pump Stirrer</option>\
                <option value="11">Light</option>'
        }
        else if (db9Accessory == 1) {  // 6 DC 2 sensors 
            if (i < 6) {  // dc port functions
                document.getElementById('pinTitle_' + i).innerHTML = "DC" + (i+1);
                document.getElementById('pinFunction_' + i).innerHTML = 
                    '<option value="1">AC Outlet</option>\
                    <option value="13">Auto Feeder</option>\
                    <option value="2">DC Port</option>\
                    <option value="12">Dosing Pump</option>\
                    <option value="15">Dosing Pump Stirrer</option>\
                    <option value="11">Light</option>'
            }
            else {  // sensor functions
                document.getElementById('pinTitle_' + i).innerHTML = "Sen" + (i+1);
                document.getElementById('pinFunction_' + i).innerHTML = 
                    '<option value="4">DHT22</option>\
                    <option value="8">Float Switch</option>\
                    <option value="6">Non-Contact Sensor</option>\
                    <option value="7">Optical Sensor</option>\
                    <option value="14">Toggle Switch</option>\
                    <option value="9">Other Water Sensor</option>'
            }
        }
        else if (db9Accessory == 2) {  // 6 sensors 2 dc
            if (i < 6) {  // sensor functions
                document.getElementById('pinTitle_' + i).innerHTML = "Sen" + (i+1);
                document.getElementById('pinFunction_' + i).innerHTML = 
                    '<option value="4">DHT22</option>\
                    <option value="8">Float Switch</option>\
                    <option value="6">Non-Contact Sensor</option>\
                    <option value="7">Optical Sensor</option>\
                    <option value="14">Toggle Switch</option>\
                    <option value="9">Other Water Sensor</option>'
            }
            else {  // dc port functions
                document.getElementById('pinTitle_' + i).innerHTML = "DC" + (i+1);
                document.getElementById('pinFunction_' + i).innerHTML = 
                    '<option value="1">AC Outlet</option>\
                    <option value="13">Auto Feeder</option>\
                    <option value="2">DC Port</option>\
                    <option value="12">Dosing Pump</option>\
                    <option value="15">Dosing Pump Stirrer</option>\
                    <option value="11">Light</option>'
            }
        }
        
        if (((windowWidth >= 500) && (windowWidth < 1024)) || (windowWidth >= 1280)) {
            document.getElementById('pinFunction_' + i).style.maxWidth = "120px";
            document.getElementById('pinFunction_' + i).style.direction = "ltr";
            document.getElementById('pinLogic_' + i).style.maxWidth = "100px";
            document.getElementById('pinLogic_' + i).style.direction = "ltr";
            document.getElementById('functionLabel').innerHTML = "Function";
            document.getElementById('functionLabel').style.marginRight = "53px";
            document.getElementById('logicLabel').innerHTML = "Logic";
            document.getElementById('logicLabel').style.marginRight = "52px";
        }
        else {document.getElementById('pinFunction_' + i).style.maxWidth = "22px";
            document.getElementById('pinFunction_' + i).style.direction = "rtl";
            document.getElementById('pinLogic_' + i).style.maxWidth = "22px";
            document.getElementById('pinLogic_' + i).style.direction = "rtl";
            document.getElementById('functionLabel').innerHTML = "F";
            document.getElementById('functionLabel').style.marginRight = "3px";
            document.getElementById('logicLabel').innerHTML = "L";
            document.getElementById('logicLabel').style.marginRight = "20px";
        }
        
        if (pinAssigned[arrayID[plug][i]] == 1) {
            document.getElementById('portEnabled_' + i).checked = true;
        }
        else {
            document.getElementById('portEnabled_' + i).checked = false;
        }
        
        if (portLogic[arrayID[plug][i]] == 1) {
            document.getElementById('pinLogic_' + i).value = 1;
        }
        else {
            document.getElementById('pinLogic_' + i).value = 0;
        }

        document.getElementById('pinFunction_' + i).value = pinTypeID[arrayID[plug][i]];
    }
}

function saveDB9(plug) {  // save DB9 pins
    var arrayID = [[4,5,17,10,9,18,19,20],[11,1,0,2,6,3,7,8]];
    console.log('saveDB9 = ' + plug);

    for (i = 0; i < 8; i++) {  // check every pin has function or warn user and stop save
        if (document.getElementById('portCustomName_' + i).value == "") {
            console.log('ABORT SAVE');
            document.getElementById('db9error_' + i).style.display = "inline-block";  // show error
            document.getElementById('db9error_' + i).innerHTML = "You need to assign a custom name to the pin!";
            return;
        }
        else if (document.getElementById('pinFunction_' + i).value == "") {
            console.log('ABORT SAVE');
            document.getElementById('db9error_' + i).style.display = "inline-block";  // show error
            document.getElementById('db9error_' + i).innerHTML = "You need to assign a function to the pin!";
            return;
        }
        else {
            document.getElementById('db9error_' + i).style.display = "none";  // hide error
        }
    }

    if (plug == 0) {db9_1 = document.getElementById('db9Accessory').value;}
    else if (plug == 1) {db9_2 = document.getElementById('db9Accessory').value;}

    for (i = 0; i < 8; i++) {  // get updated values and update variables
        var t = document.getElementById('portEnabled_' + i).checked;  // check if switch is true or false
        if (t == true) {pinAssigned[arrayID[plug][i]] = 1;}
        else {pinAssigned[arrayID[plug][i]] = 0;}

        customPortName[arrayID[plug][i]] = document.getElementById('portCustomName_' + i).value;

        pinTypeID[arrayID[plug][i]] = document.getElementById('pinFunction_' + i).value;

        // console.log('portLogic[arrayID[plug][i]] = ' + portLogic[arrayID[plug][i]]);
        portLogic[arrayID[plug][i]] = document.getElementById('pinLogic_' + i).value;
        console.log('pinTypeID[arrayID[plug][i]] = ' + pinTypeID[arrayID[plug][i]]);
        // console.log('');
    }
    
    $.ajax({  // update database pin details and add or delete equipment based on changes made
        method: "POST",
        url: "/php/driverSaveDB9.php",
        cache: false,
        dataType: "json",
        data: {
            "d1": db9_1,
            "d2": db9_2
        },
        success: function(dataWindow) {
            console.log('success - driverSaveDB9');
            console.log(dataWindow);           
        },
        error: function(dataWindow) {
            console.log('driverSaveDB9 - error');
        }
    });

    for (i = 0; i < 8; i++) {  // 
        console.log('arrayID[plug][i] = ' + arrayID[plug][i]);
        savePinDetails(arrayID[plug][i],1);
    }

}

function configurePort(source, port) {
    // console.log(customPortName);
    // document.getElementById('driversControllerEditBox').innerHTML = port;
    
    console.log('editingPort = ' + editingPort);
    console.log("savePortName     = " + savePortName);

    if (source == 0) {  // Opening port settings first time so we fill out temporary variables
        console.log("first load");
        editingPort = port;
        savePortEnabled = pinAssigned[port];
        savePortLogic = portLogic[port];
        savePortName = customPortName[port];
        saveIconID = pinIconID[port];
        prevPinTypeID = pinTypeID[port];
        savePinTypeID = pinTypeID[port];
    }

    console.log('editingPort = ' + editingPort);
    console.log('prevPinTypeID = ' + prevPinTypeID);
    
    document.getElementById('driversControllerInfoBox').innerHTML =
        '<div class="driversControllerPort" id="driversControllerPort">\
            ' + roboTankPortName[editingPort] + '\
            <span class="driversControllerPortInfo">(' + driverName[editingPort] + ' - GPIO ' + gpioPin[editingPort] + ')</span>\
        </div>\
        <div class="driversControllerEditBox" id="driversControllerEditBox">\
            <div class="driverControllerName">Name</div>\
            <input class="driverControllerField" type="text" id="portCustomName" value="' + savePortName + '" onfocusout="validatePortSettings()" autocomplete="off">\
            <div class="fieldError" id="fieldError1"></div>\
        </div>\
        <div class="driversControllerEditBox" id="driversControllerEditBox">\
            <div class="driverControllerName">Function</div>\
            <select class="driverControllerField" name="portFunction" id="portFunction" onchange="validatePortSettings()" onfocusout="validatePortSettings()"></select>\
        </div>\
        <div class="driversControllerEditBox" id="driversControllerEditBox">\
            <div class="driverControllerName">Enabled</div>\
            <label class="switch">\
                <input type="checkbox" id="portEnabled" onclick="updatePortEnabled()">\
                <span class="sliderSwitch round"></span>\
            </label>\
            <div class="driverControllerName" id="portEnabledLabel" style="padding-left:10px; text-align:left;"></div>\
        </div>\
        <div class="driversControllerEditBox" id="driversControllerEditBox">\
            <div class="driverControllerName">Invert Logic</div>\
            <label class="switch">\
                <input type="checkbox" id="portLogic" onclick="updatePortLogic()">\
                <span class="sliderSwitch round"></span>\
            </label>\
            <div class="driverControllerName" id="portLogicLabel" style="padding-left:10px; text-align:left;"></div>\
        </div>\
        <div class="driversControllerEditBox" id="driversControllerEditBox">\
            <div class="driverControllerName">Icon</div>\
            <div class="pinIconField" id="iconID" name="iconID"></div>\
            </div>\
            <div class="fieldError" id="fieldError1"></div>\
        </div>\
        <div class="widgetButtonBox">\
            <button class="button _wide" onclick="savePinDetailsConfirm(' + editingPort + ')">Save</button>\
            <button class="button _wide" onclick="settingsDrivers()">Cancel</button>\
        </div>';

    if ((pinTypeID[editingPort] == 1) || (pinTypeID[editingPort] == 13) || (pinTypeID[editingPort] == 2) || (pinTypeID[editingPort] == 12) || (pinTypeID[editingPort] == 15) || (pinTypeID[editingPort] == 11)) {
        document.getElementById('portFunction').innerHTML = 
            '<option value="1">AC Outlet</option>\
            <option value="13">Auto Feeder</option>\
            <option value="2">DC Port</option>\
            <option value="12">Dosing Pump</option>\
            <option value="15">Dosing Pump Stirrer</option>\
            <option value="11">Light</option>'
    }
    if ((pinTypeID[editingPort] == 4) || (pinTypeID[editingPort] == 5) || (pinTypeID[editingPort] == 6) || (pinTypeID[editingPort] == 7) || (pinTypeID[editingPort] == 8) || (pinTypeID[editingPort] == 9) || (pinTypeID[editingPort] == 14)) {
        
    console.log('v3EditModule = ' + v3EditModule);
        document.getElementById('portFunction').innerHTML = 
            '<option value="4">DHT22</option>';
        
        if (v3EditModule == 1) {  // viewing sensor module so we will add DS18B20 as an option for sensor port
            document.getElementById('portFunction').innerHTML += 
                '<option value="5">DS18B20 Temp Sensor</option>';
        }

        document.getElementById('portFunction').innerHTML += 
            '<option value="8">Float Switch</option>\
            <option value="6">Non-Contact Sensor</option>\
            <option value="7">Optical Sensor</option>\
            <option value="14">Toggle Switch</option>\
            <option value="9">Other Water Sensor</option>';
        
        // document.getElementById('portFunction').innerHTML = 
        //     '<option value="4">DHT22</option>\
        //     <option value="8">Float Switch</option>\
        //     <option value="6">Non-Contact Sensor</option>\
        //     <option value="7">Optical Sensor</option>\
        //     <option value="14">Toggle Switch</option>\
        //     <option value="9">Other Water Sensor</option>';
    }

    console.log('saveIconID = ' + saveIconID);
    // load icon to layout above
    document.getElementById('iconID').innerHTML = '<img id="portIcon" src="images/Outlets/OutLD' + saveIconID + 'L.png" onclick="printPortIcons()">';

    document.getElementById('portIcon').style.backgroundColor = "#FF0000";

    document.getElementById('portFunction').value = savePinTypeID;

    if (savePortEnabled == 1) {
        document.getElementById('portEnabled').checked = true;
        document.getElementById('portEnabledLabel').innerHTML = "Yes";
    }
    else {
        document.getElementById('portEnabled').checked = false;
        document.getElementById('portEnabledLabel').innerHTML = "No";
    }

    if (savePortLogic == 1) {
        document.getElementById('portLogic').checked = true;
        document.getElementById('portLogicLabel').innerHTML = "Yes";
    }
    else {
        document.getElementById('portLogic').checked = false;
        document.getElementById('portLogicLabel').innerHTML = "No";
    }    
}

function validatePortSettings() {
    console.log('validatePortSettings---------------------');
    savePortName = document.getElementById("portCustomName").value;  // get name from form
    savePinTypeID = document.getElementById("portFunction").value;  // get pinTypeID from form
    console.log('prevPinTypeID = ' + prevPinTypeID);
    console.log('savePinTypeID = ' + savePinTypeID);

    // console.log('pinTypeID     = ' + pinTypeID[port]);
    var myElem = document.getElementById('fieldError1');
    if ((portCustomName.value == null) || (portCustomName.value == "")) {  // check if password is blank.
        if (myElem != null) {
            document.getElementById('fieldError1').style.display = "inline-block";  // show error
            document.getElementById('fieldError1').innerHTML = "You need a custom name for the port!";
        }
        document.getElementById('portCustomName').style.border = "2px solid rgb(255, 0, 0)";
        document.getElementById('portCustomName').focus();
        return;
    }
    else {
        if (myElem != null) {document.getElementById('fieldError1').style.display = "none";}  // show error
        document.getElementById('portCustomName').style.border = "";
    }
    // prevPinTypeID = document.getElementById("portFunction").value;
}

function printPortIcons() {
    // console.log('printPortIcons---------------------');
    console.log("savePortName 2   = " + savePortName);
    document.getElementById('driversControllerInfoBox').innerHTML = 
        '<div class="settingsTitle">Select an Icon!</div>';
            
    for (i = 0; i <= 60; i++) {  // load all icons to screen
        document.getElementById('driversControllerInfoBox').innerHTML += 
            '<img onclick="updatePortIcon(' + i + ')" class="updatePortIcons" id="outlet_' + i + '" src="images/Outlets/OutLD' + i + 'M.png">';
    }
    console.log("savePortName 3   = " + savePortName);
}

function updatePortIcon(iconID) {
    saveIconID = iconID;
    configurePort('1,' + editingPort);
}

function updatePortEnabled() {
    console.log('updatePortEnabled---------------------');
    var myElem = document.getElementById('portEnabled');
    if (savePortEnabled == 0) {
        if (myElem != null) {
            document.getElementById('portEnabled').checked = true;
            document.getElementById('portEnabledLabel').innerHTML = "Yes";
        }
        savePortEnabled = 1;
    }
    else {
        if (myElem != null) {
            document.getElementById('portEnabled').checked = false;
            document.getElementById('portEnabledLabel').innerHTML = "No";
        }
        savePortEnabled = 0;
    }
}

function updatePortLogic() {
    // console.log('updatePortLogic---------------------');
    var myElem = document.getElementById('portLogic');
    console.log('myElem   = ' + myElem);
    if (savePortLogic == 0) {
        if (myElem != null) {
            document.getElementById('portLogic').checked = true;
            document.getElementById('portLogicLabel').innerHTML = "Yes";
        }
        savePortLogic = 1;
    }
    else {
        if (myElem != null) {
            document.getElementById('portLogic').checked = false;
            document.getElementById('portLogicLabel').innerHTML = "No";
        }
        savePortLogic = 0;
    }
}

function editDB9Icon(arrayID) {
    // console.log('printPortIcons---------------------');
    // console.log("savePortName 2   = " + savePortName);
    document.getElementById('driversControllerInfoBox').innerHTML = 
        '<div class="settingsTitle">Select an Icon!</div>';
            
    for (i = 0; i <= 60; i++) {  // load all icons to screen
        document.getElementById('driversControllerInfoBox').innerHTML += 
            '<img onclick="editDB9IconSave(' + arrayID + "," + i + ')" class="updatePortIcons" id="outlet_' + i + '" src="images/Outlets/OutLD' + i + 'M.png">';
    }
    // console.log("savePortName 3   = " + savePortName);
}

function editDB9IconSave(arrayID, iconID) {
    pinIconID[arrayID] = iconID;
    configureDB9(configureDB9plug);
}

function editIconCustom() {
    $('#popupBackground').show();  // grey out background
    $('.ds18b20Popup-body').empty();
    ds18b20Popup.style.display = "block";
    document.querySelector("body").style.overflow = 'hidden';
    $('.ds18b20PopupHeader').empty();
    $(".ds18b20PopupHeader").append("Change Icon");

    $(".ds18b20Popup-body").append(
        `<div class="driverContainer" id="driversControllerInfoBox"></div>`
    );

    document.getElementById('driversControllerInfoBox').innerHTML = 
        '<div class="settingsTitle">Select an Icon!</div>';
            
    for (i = 0; i <= 60; i++) {  // load all icons to screen
        document.getElementById('driversControllerInfoBox').innerHTML += 
            '<img onclick="updateIconCustom(' + i + ')" class="updatePortIcons" id="outlet_' + i + '" src="images/Outlets/OutLD' + i + 'M.png">';
    }
    // console.log("savePortName 3   = " + savePortName);
    // closeDs18b20Popup();
}

function updateIconCustom(iconID) {
    saveIconID = iconID;
    closeDs18b20Popup();
}

function editPinDetailsCustom(arrayID) {
    console.log('editPinDetailsCustom---------------------');

    if (editingPort == 0) {
        console.log('editingPort = ' + editingPort);
        editingPort = arrayID;
        console.log('editingPort = ' + editingPort);
        savePortEnabled = pinAssigned[arrayID];
        savePortLogic = portLogic[arrayID];
        savePortName = customPortName[arrayID];
        saveIconID = pinIconID[arrayID];
        savePinTypeID = pinTypeID[arrayID];

        document.getElementById('driverInfoBox_' + arrayID).innerHTML =
            '<div class="driverPinEditButton2" onclick="savePinDetailsConfirm(' + arrayID + ')">Save</div>\
            <div class="driverInfoCol1">\
                <div class="driverName">GPIO: </div>\
                <div class="driverName">Robo-Tank: </div>\
                <div class="driverName">Name: </div>\
                <div class="driverName">Function: </div>\
                <div class="driverName">Enabled: </div>\
                <div class="driverName">Logic: </div>\
                <div class="driverName">Icon: </div>\
            </div>\
            <div class="driverInfoCol2">\
                <div class="driverName">' + gpioPin[arrayID] + '</div>\
                <div class="driverName">' + roboTankPortName[arrayID] + '</div>\
                <div class="driverName">\
                    <input class="driverNameEdit" type="text" id="portCustomName" value="' + customPortName[arrayID] + '" onfocusout="validatePortSettings()" autocomplete="off">\
                    <div class="fieldError" id="fieldError1"></div>\
                </div>\
                <div class="driverName">\
                    <select name="pinType" id="portFunction" onfocusout="validatePortSettings()"></select>\
                </div>\
                <div class="driverName">\
                    <select name="pinAssigned" id="pinAssigned_' + arrayID + '" onchange="updatePortEnabled()">\
                        <option value="1">Yes</option>\
                        <option value="0">No</option>\
                    </select>\
                </div>\
                <div class="driverName">\
                    <select name="portLogic" id="portLogic_' + arrayID + '" onchange="updatePortLogic()">\
                        <option value="0">Normal</option>\
                        <option value="1">Inverted</option>\
                    </select>\
                </div>\
                <div class="driverName editIconDriver" onclick="editIconCustom()">Change</div>\
            </div>';

        console.log('pinAssigned[arrayID] = ' + pinAssigned[arrayID]);
        document.getElementById('pinAssigned_' + arrayID).value = pinAssigned[arrayID];
        document.getElementById('portLogic_' + arrayID).value = portLogic[arrayID];

        if (driverID[arrayID] == 2) {
            document.getElementById('portFunction').innerHTML = 
                `<option value="1">AC Outlet</option>\
                <option value="13">Auto Feeder</option>\
                <option value="2">DC Port</option>\
                <option value="12">Dosing Pump</option>\
                <option value="15">Dosing Pump Stirrer</option>\
                <option value="11">Light</option>\
                <option value="4">DHT22</option>\
                <option value="8">Float Switch</option>\
                <option value="6">Non-Contact Sensor</option>\
                <option value="7">Optical Sensor</option>\
                <option value="14">Toggle Switch</option>\
                <option value="9">Other Water Sensor</option>`;
        }
        else if (driverID[arrayID] == 3) {
            document.getElementById('portFunction').innerHTML = 
                '<option value="1">AC Outlet</option>\
                <option value="13">Auto Feeder</option>\
                <option value="2">DC Port</option>\
                <option value="12">Dosing Pump</option>\
                <option value="15">Dosing Pump Stirrer</option>\
                <option value="11">Light</option>';
        }

        // if ((pinTypeID[arrayID] == 1) || (pinTypeID[arrayID] == 13) || (pinTypeID[arrayID] == 2) || (pinTypeID[arrayID] == 12) || (pinTypeID[arrayID] == 11)) {
        //     document.getElementById('portFunction').innerHTML = 
        //         '<option value="1">AC Outlet</option>\
        //         <option value="13">Auto Feeder</option>\
        //         <option value="2">DC Port</option>\
        //         <option value="12">Dosing Pump</option>\
            //    <option value="15">Dosing Pump Stirrer</option>\
        //         <option value="11">Light</option>';
        // }
        // if ((pinTypeID[arrayID] == 4) || (pinTypeID[arrayID] == 6) || (pinTypeID[arrayID] == 7) || (pinTypeID[arrayID] == 8) || (pinTypeID[arrayID] == 9) || (sensorPinTypeID[a] == 14)) {
        //     document.getElementById('portFunction').innerHTML = 
        //         '<option value="4">DHT22</option>\
        //         <option value="8">Float Switch</option>\
        //         <option value="6">Non-Contact Sensor</option>\
        //         <option value="7">Optical Sensor</option>\
                    // <option value="14">Toggle Switch</option>\
        //         <option value="9">Other Water Sensor</option>';
        // }
        
        document.getElementById('portFunction').value = pinTypeID[arrayID];
    }
}

function savePinDetailsConfirm(port) {  // confirm save if function is or was a DS18B20 so we can restart controller
    console.log('');
    console.log('savePinDetailsConfirm---------------------');
    console.log('port = ' + port);
    
    var myElem = document.getElementById('portCustomName');
    if (myElem != null) {
        for (i = 0; i < 8; i++) {  // check every pin has function or warn user and stop save
            if (document.getElementById('portCustomName').value == "") {
                document.getElementById('fieldError1').style.display = "inline-block";  // show error
                document.getElementById('fieldError1').innerHTML = "You need to assign a custom name to the port!";
                return;
            }
            else {
                document.getElementById('fieldError1').style.display = "none";  // hide error
            }
        }
    }    

    if ((pinTypeID[port] == 5) || (document.getElementById("portFunction").value == 5)) {  // prompt user that controller needs to be restarted for extra DS18B20
        var text = "";
        if (prevPinTypeID == 5) {text = "This port was previously configured for a DS18B20 temperature sensor so the Raspberry Pi needs to be rebooted!";}
        else {text = "This port is being configured for a DS18B20 temperature sensor so the Raspberry Pi needs to be rebooted!";}

        $('#popupBackground').show();  // grey out background
        $('.ds18b20Popup-body').empty();
        ds18b20Popup.style.display = "block";
        document.querySelector("body").style.overflow = 'hidden';
        $('.ds18b20PopupHeader').empty();

        $(".ds18b20PopupHeader").append("Restart Robo-Tank");
        $(".ds18b20Popup-body").append(
            '<div style="text-align: center;">\
                <p>&nbsp;</p>\
                <p>' + text + '</p>\
                <p>Would you like to restart Robo-Tank now?</p>\
                <div class="widgetButtonBox" id="widgetButtonBox">\
                    <button class="button _wide" type="button" onclick="restartPiDS18B20(' + port + ')">Yes</button>\
                    <button class="button _wide" type="button" onclick="savePinDetailsCancel()">No</button>\
                </div></br>\
            </div>');
            
        setTimeout(function(){  
            document.getElementById("connectedIcon").src = "images/icons/disconn.png";
        },1000);
    }
    else {savePinDetails(port,0);}  // no need to prompt for controller restart
}

function savePinDetailsCancel() {  // cancel save
    
    // pinTypeID[port] = prevPinTypeID;
    // document.getElementById("portFunction").value = prevPinTypeID;
    closeDs18b20Popup();
}

function restartPiDS18B20(port) {  // 

    $('.ds18b20PopupHeader').empty();
    $('.ds18b20Popup-body').empty();

    $(".ds18b20PopupHeader").append("Restarting Robo-Tank");
    $(".ds18b20Popup-body").append(
        '<div style="text-align: center;">\
            <p>&nbsp;</p>\
            <p style="font-weight:bold">Restarting Robo-Tank...</p>\
            <p>When the controller comes back online this message will disappear.</p>\
            <p>&nbsp;</p>\
        </div>');

    console.log('--------------------------------------------------- ');
    savePinTypeID = document.getElementById("portFunction").value;  // get pinTypeID from form
    savePortName = document.getElementById("portCustomName").value;  // get name from form
    pinAssigned[port] = savePortEnabled;
    portLogic[port] = savePortLogic;
    customPortName[port] = savePortName;
    pinIconID[port] = saveIconID;
    // prevPinTypeID = pinTypeID[port];
    pinTypeID[port] = savePinTypeID;

    savePinDetails(port,0);
}

function savePinDetails(port, source) {  // save pin assignment details to database
    console.log('');
    console.log('savePinDetails---------------------');
    console.log('port = ' + port);

    if (source == 1) {
        countSaves++;
    }

    var myElem = document.getElementById('portCustomName');
    if (myElem != null) {
        for (i = 0; i < 8; i++) {  // check every pin has function or warn user and stop save
            if (document.getElementById('portCustomName').value == "") {
                document.getElementById('fieldError1').style.display = "inline-block";  // show error
                document.getElementById('fieldError1').innerHTML = "You need to assign a custom name to the port!";
                return;
            }
            else {
                document.getElementById('fieldError1').style.display = "none";  // hide error
            }
        }
        
        savePinTypeID = document.getElementById("portFunction").value;  // get pinTypeID from form
        savePortName = document.getElementById("portCustomName").value;  // get name from form
    }

    console.log("portsPinID      = " + portsPinID[port]);
    console.log("driverID        = " + driverID[port]);
    console.log("gpioPin         = " + gpioPin[port]);
    console.log("savePortEnabled = " + savePortEnabled);
    console.log("savePinTypeID   = " + savePinTypeID);
    console.log("savePortLogic   = " + savePortLogic);
    console.log("savePortName    = " + savePortName);
    console.log("saveIconID      = " + saveIconID);

    if (myElem != null) {
        console.log('--------------------------------------------------- ');
        pinAssigned[port] = savePortEnabled;
        portLogic[port] = savePortLogic;
        customPortName[port] = savePortName;
        pinIconID[port] = saveIconID;
        // prevPinTypeID = pinTypeID[port];
        pinTypeID[port] = savePinTypeID;
    }

    console.log('savePinTypeID   = ' + savePinTypeID);
    console.log('pinTypeID[port] = ' + pinTypeID[port]);
    console.log('prevPinTypeID = ' + prevPinTypeID);

    $.ajax({  // update database pin details and add or delete equipment based on changes made
        method: "POST",
        url: "/php/updatePinDetails.php",
        cache: false,
        dataType: "json",
        data: {
            "id": driverID[port],
            "p": gpioPin[port],
            "a": pinAssigned[port],
            "t": pinTypeID[port],
            "l": portLogic[port],
            "n": customPortName[port],
            "i": pinIconID[port]
        },
        success: function(dataWindow) {
            console.log('success - updatePinDetails');
            console.log(dataWindow);           
            // pinTypeName[port] = savePinTypeID;

            $.ajax({  // update database pin details and add or delete equipment based on changes made
                method: "POST",
                url: "/php/updatePinDetails2.php",
                cache: false,
                dataType: "json",
                data: {
                    "id": driverID[port],
                    "p": gpioPin[port]
                },
                success: function(dataWindow) {
                    console.log('success - updatePinDetails2');
                    console.log(dataWindow);           
                    pinTypeName[port] = dataWindow[0].pinTypeName; 

                    var myElem = document.getElementById('driverInfoBox_' + port);
                    console.log('myElem   = ' + myElem);
                    if (myElem != null) {
                        document.getElementById('driverInfoBox_' + port).innerHTML =
                            '<div class="driverPinEditButton bi bi-pencil-fill" onclick="editPinDetailsCustom(' + port + ')"></div>\
                            <div class="driverInfoCol1">\
                                <div class="driverName">GPIO: </div>\
                                <div class="driverName">Robo-Tank: </div>\
                                <div class="driverName">Name: </div>\
                                <div class="driverName">Function: </div>\
                                <div class="driverName">Enabled: </div>\
                                <div class="driverName">Logic: </div>\
                                <div class="driverName">Icon: </div>\
                            </div>\
                            <div class="driverInfoCol2">\
                                <div class="driverName">' + gpioPin[port] + '</div>\
                                <div class="driverName">' + roboTankPortName[port] + '</div>\
                                <div class="driverName">' + customPortName[port] + '</div>\
                                <div class="driverName">' + pinTypeName[port] + '</div>\
                                <div class="driverName">' + pinAssigned[port] + '</div>\
                                <div class="driverName">' + portLogic[port] + '</div>\
                                <div class="driverName">' + pinIconID[port] + '</div>\
                            </div>';
                    }
                    else {settingsDrivers();}
    
                    if ((source == 1) && (countSaves == 8)) {
                        var command = "112";
                        sendToBackend(command);  // tell backend I/O pins have changed
            
                        if (pinTypeID[port] == 5) {  // enable 1wire bus
                            command = "111,1," + gpioPin[port];
                            sendToBackend(command);
                        }
                        else if (prevPinTypeID == 5) {  // disable 1wire bus
                            command = "111,0," + gpioPin[port];
                            sendToBackend(command);
                        }
            
                        getListOfOutlets();
                        getListOfDc();
                        getListOfLights();
                        getLightModes();
                        getDosingPumps();
                        getStirrers();
                        getListOfSensors();
                        countSaves = 0;
                    }
                    else if (source == 0) {
                        var command = "112";
                        sendToBackend(command);  // tell backend I/O pins have changed
            
                        if (pinTypeID[port] == 5) {  // enable 1wire bus
                            command = "111,1," + gpioPin[port];
                            sendToBackend(command);
                        }
                        else if (prevPinTypeID == 5) {  // disable 1wire bus
                            command = "111,0," + gpioPin[port];
                            sendToBackend(command);
                        }
            
                        getListOfOutlets();
                        getListOfDc();
                        getListOfLights();
                        getLightModes();
                        getDosingPumps();
                        getStirrers();
                        getListOfSensors();
                    }
                },
                error: function(dataWindow) {
                    console.log('savePinDetails - error');
                }
            });
        },
        error: function(dataWindow) {
            console.log('savePinDetails - error');
            console.log(dataWindow);
            getListOfOutlets();
            getListOfDc();
            getListOfLights();
            getLightModes();
            getDosingPumps();
            getStirrers();
            getListOfSensors();
        }
    });

    editingPort = 0;
    savePortEnabled = "";
    savePortLogic = 0;
    savePortName = "";
    saveIconID = 0;
    savePinTypeID = 0;
    redrawTempWidget = 1;

    // redrawDashboardCol1();
    // sensorsUpdateDashboard();
}

function savePinDetailsCustom(arrayID) {
    console.log("savePortName 3   = " + savePortName);

    console.log("driverID        = " + driverID[arrayID]);
    console.log("gpioPin         = " + gpioPin[arrayID]);
    console.log("savePortEnabled = " + savePortEnabled);
    console.log("savePinTypeID   = " + savePinTypeID);
    console.log("savePortLogic   = " + savePortLogic);
    console.log("savePortName    = " + savePortName);
    console.log("saveIconID      = " + saveIconID);

    
    pinAssigned[port] = savePortEnabled;
    portLogic[port] = savePortLogic;
    customPortName[port] = savePortName;
    pinIconID[port] = saveIconID;
    pinTypeID[port] = savePinTypeID;

    editingPort = 0;
    savePortEnabled = "";
    savePortLogic = 0;
    savePortName = "";
    saveIconID = 0;
    savePinTypeID = 0;

    document.getElementById('driverInfoBox_' + arrayID).innerHTML =
        '<div class="driverPinEditButton bi bi-pencil-fill" onclick="editPinDetailsCustom(' + arrayID + ')"></div>\
        <div class="driverInfoCol1">\
            <div class="driverName">GPIO: </div>\
            <div class="driverName">Robo-Tank: </div>\
            <div class="driverName">Name: </div>\
            <div class="driverName">Function: </div>\
            <div class="driverName">Enabled: </div>\
            <div class="driverName">Logic: </div>\
            <div class="driverName">Icon: </div>\
        </div>\
        <div class="driverInfoCol2">\
            <div class="driverName">' + gpioPin[arrayID] + '</div>\
            <div class="driverName">' + roboTankPortName[arrayID] + '</div>\
            <div class="driverName">' + customPortName[arrayID] + '</div>\
            <div class="driverName">' + pinTypeName[arrayID] + '</div>\
            <div class="driverName">' + pinAssigned[arrayID] + '</div>\
            <div class="driverName">' + portLogic[arrayID] + '</div>\
            <div class="driverName">' + pinIconID[arrayID] + '</div>\
        </div>';
}

function openPortInfo(port) {
    var portName = "";
    var portInfo = "";
    
    if (port < 6) {  // DC backup ports
        portInfo = "<p>This port acts as a backup sensor for DC Port " + (port + 1) +", if no switch is connected DC Port " + (port + 1) +" will\
        not turn on. Typically people will connect a float switch but any switch will work, if you don't require this feature simply add a jumper to your\
        connector and plug in.</p>\
        <p>This backup port is hardware based, not software, if the software has the port turned on this will still turn it off however the\
        controller has no way of knowing the state of the switch.</p>";
    }
    else {  // AC backup ports
        portInfo = "<p>This port acts as a backup sensor for AC Port " + (port - 5) +" on DB9 Port 1, if no switch is connected AC Port " + (port - 5) +" will\
        not turn on. Typically people will connect a float switch but any switch will work, if you don't require this feature simply add a jumper to your\
        connector and plug in.</p>\
        <p>This backup port is hardware based, not software, if the software has the port turned on this will still turn it off however the\
        controller has no way of knowing the state of the switch.</p>";
    }

    if (port == 0) {portName = "Backup Port for DC Port 1";}
    else if (port == 1) {portName = "Backup Port for DC Port 2";}
    else if (port == 2) {portName = "Backup Port for DC Port 3";}
    else if (port == 3) {portName = "Backup Port for DC Port 4";}
    else if (port == 4) {portName = "Backup Port for DC Port 5";}
    else if (port == 5) {portName = "Backup Port for DC Port 6";}
    else if (port == 6) {portName = "Backup Port for AC Port 1";}
    else if (port == 7) {portName = "Backup Port for AC Port 2";}
    else if (port == 8) {
        portName = "Ground Pins";
        portInfo = "The are regular Ground pins you can use for anything.";
    }
    else if (port == 9) {
        portName = "DS18B20 Temperature Port";
        portInfo = "This port is for DS18B20 temperature sensors, when you plug one in it'll be automatically detected.";
    }
    else if (port == 10) {
        portName = "I2C Port";
        portInfo = "This port is for I2C sensors or devices. You can connect multiple devices however it's very important the cable \
                    between the device and the controller is as short as possible, within 3-12 inches.";
    }

    document.getElementById('driversControllerInfoBox').innerHTML =
        '<div class="driversControllerPort" id="driversControllerPort">' + portName + '</div>\
        <div class="" style="width:100%; text-align:center;">' + portInfo + '</div>\
        <div class="widgetButtonBox">\
            <button class="button _wide" onclick="settingsDrivers()">Ok</button>\
        </div>';
}

function settingsDrivers() {  // main port setting screen
    printHeaderTitle("CONFIGURE PORTS", "hardware.png", "#686767");  // name and file
    removeFooter();
    displayScreen = 1;

    document.getElementById('content').innerHTML +=
        '<div class="cleanScreen" id="cleanScreen">\
        </div>';
    
    document.getElementById('cleanScreen').innerHTML +=
        '<div class="driverSettingBox">\
            <div class="boardSelectLabel">Mode:</div>\
            <label class="driverRadioOption">\
                Simple\
                    <input type="radio" name="controller" id="type1" onclick="updateConfigPortView(0)" />\
            </label>\
            <label class="driverRadioOption">\
                Advanced\
                    <input type="radio" name="controller" id="type2" onclick="updateConfigPortView(1)" />\
            </label>\
        </div>';

        
        // '<div class="settingsTitle">Click on a port to configure it.</div>\
    if (configPortView == 0) {  // simple view
        if (controllerVersion == 0) {  // version 1 controller
            document.getElementById('cleanScreen').innerHTML +=
                '<div class="driversControllerContainer" id="driversControllerContainer">\
                    <div class="driversControllerBox" id="driversControllerBox">\
                        <img class="driversControllerMap" id="driversControllerMap" src="images/wizard/drivers_controller_v1.png" usemap="#driversControllerV1_Map">\
                        <map name="driversControllerV1_Map">\
                            <area target="_self" alt="Sensor Port 1" title="Sensor Port 1" class="driverConfigurePort" onclick="configurePort(0,12)" coords="522,274,541,268,534,310,515,319" shape="poly">\
                            <area target="_self" alt="Sensor Port 3" title="Sensor Port 3" class="driverConfigurePort" onclick="configurePort(0,14)" coords="525,179,544,174,536,221,516,229" shape="poly">\
                            <area target="_self" alt="Sensor Port 4" title="Sensor Port 4" class="driverConfigurePort" onclick="configurePort(0,15)" coords="230,47,250,44,257,80,235,83" shape="poly">\
                            <area target="_self" alt="Sensor Port 6" title="Sensor Port 6" class="driverConfigurePort" onclick="configurePort(0,16)" coords="280,40,300,37,307,73,287,76" shape="poly">\
                            <area target="_self" alt="Sensor Port 5" title="Sensor Port 5" class="driverConfigurePort" onclick="configurePort(0,21)" coords="254,43,275,40,282,76,261,78" shape="poly">\
                            <area target="_self" alt="Sensor Port 2" title="Sensor Port 2" class="driverConfigurePort" onclick="configurePort(0,22)" coords="516,228,535,224,527,271,508,278" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 1" title="PWM / Analog Port 1" class="driverConfigurePort" onclick="configurePort(0,23)" coords="300,262,318,259,316,289,299,295" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 2" title="PWM / Analog Port 2" class="driverConfigurePort" onclick="configurePort(0,24)" coords="317,259,330,255,329,285,316,289" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 3" title="PWM / Analog Port 3" class="driverConfigurePort" onclick="configurePort(0,25)" coords="330,254,342,252,340,282,329,285" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 4" title="PWM / Analog Port 4" class="driverConfigurePort" onclick="configurePort(0,26)" coords="342,251,358,248,356,278,340,282" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 5" title="PWM / Analog Port 5" class="driverConfigurePort" onclick="configurePort(0,27)" coords="358,247,373,244,370,273,355,277" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 6" title="PWM / Analog Port 6" class="driverConfigurePort" onclick="configurePort(0,28)" coords="373,244,386,239,383,270,370,273" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 7" title="PWM / Analog Port 7" class="driverConfigurePort" onclick="configurePort(0,29)" coords="386,241,398,236,394,266,382,270" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 8" title="PWM / Analog Port 8" class="driverConfigurePort" onclick="configurePort(0,30)" coords="398,238,411,233,408,263,395,266" shape="poly">\
                            <area target="_self" alt="Auto Feeder" title="Auto Feeder" class="driverConfigurePort" onclick="configurePort(0,31)" coords="369,182,412,174,407,204,365,214" shape="poly">\
                            <area target="_self" alt="DC Port 7" title="DC Port 7" class="driverConfigurePort" onclick="configurePort(0,32)" coords="356,473,381,461,381,486,353,498" shape="poly">\
                            <area target="_self" alt="DC Port 6" title="DC Port 6" class="driverConfigurePort" onclick="configurePort(0,33)" coords="328,484,356,473,353,499,326,511" shape="poly">\
                            <area target="_self" alt="DC Port 5" title="DC Port 5" class="driverConfigurePort" onclick="configurePort(0,34)" coords="299,496,328,484,326,511,297,523" shape="poly">\
                            <area target="_self" alt="DC Port 4" title="DC Port 4" class="driverConfigurePort" onclick="configurePort(0,35)" coords="269,508,297,498,297,523,269,534" shape="poly">\
                            <area target="_self" alt="DC Port 3" title="DC Port 3" class="driverConfigurePort" onclick="configurePort(0,36)" coords="194,540,225,527,225,555,194,567" shape="poly">\
                            <area target="_self" alt="DC Port 2" title="DC Port 2" class="driverConfigurePort" onclick="configurePort(0,37)" coords="159,555,191,542,193,568,159,585" shape="poly">\
                            <area target="_self" alt="DC Port 1" title="DC Port 1" class="driverConfigurePort" onclick="configurePort(0,38)" coords="123,571,157,556,157,584,124,600" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 1" title="Backup Float for DC Port 1" class="driverConfigurePort" onclick="openPortInfo(0)" coords="224,464,256,451,255,480,224,493" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 2" title="Backup Float for DC Port 2" class="driverConfigurePort" onclick="openPortInfo(1)" coords="257,451,288,439,287,468,257,480" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 3" title="Backup Float for DC Port 3" class="driverConfigurePort" onclick="openPortInfo(2)" coords="227,528,258,515,257,539,226,555" shape="poly">\
                            <area target="_self" alt="Common Grounds" title="Common Grounds" class="driverConfigurePort" onclick="openPortInfo(8)" coords="173,436,207,423,206,454,174,466" shape="poly">\
                            <area target="_self" alt="I2C Port" title="I2C Port" class="driverConfigurePort" onclick="openPortInfo(10)" coords="257,404,297,388,297,406,257,420" shape="poly">\
                            <area target="_self" alt="Temperature Port 1" title="Temperature Port 1" class="driverConfigurePort" onclick="openPortInfo(9)" coords="441,298,462,290,455,339,434,345" shape="poly">\
                            <area target="_self" alt="Temperature Port 2" title="Temperature Port 2" class="driverConfigurePort" onclick="openPortInfo(9)" coords="447,248,470,242,462,290,441,297" shape="poly">\
                            <area target="_self" alt="Temperature Port 3" title="Temperature Port 3" class="driverConfigurePort" onclick="openPortInfo(9)" coords="455,194,477,189,470,241,447,247" shape="poly">\
                            <area target="_self" alt="Power Bar 1" title="Power Bar 1" class="driverConfigurePort" onclick="configureDB9(0)" coords="38,310,65,328,70,466,41,440" shape="poly">\
                            <area target="_self" alt="Power Bar 2" title="Power Bar 2" class="driverConfigurePort" onclick="configureDB9(1)" coords="59,163,64,312,35,293,29,148" shape="poly">\
                        </map>\
                    </div>\
                    <div class="driversControllerInfoBox" id="driversControllerInfoBox"></div>\
                </div>';
        }
        else if (controllerVersion == 1) {  // version 2 controller
            document.getElementById('cleanScreen').innerHTML +=
                '<div class="driversControllerContainer" id="driversControllerContainer">\
                    <div class="driversControllerBox" id="driversControllerBox">\
                        <img class="driversControllerMap" id="driversControllerMap" src="images/wizard/drivers_controller_v2.png" usemap="#driversControllerV2_Map">\
                        <map name="driversControllerV2_Map">\
                            <area target="_self" alt="Sensor Port 1" title="Sensor Port 1" class="driverConfigurePort" onclick="configurePort(0,12)" coords="276,298,301,298,303,341,276,341" shape="poly">\
                            <area target="_self" alt="Sensor Port 2" title="Sensor Port 2" class="driverConfigurePort" onclick="configurePort(0,22)" coords="275,252,300,251,301,295,275,296" shape="poly">\
                            <area target="_self" alt="Sensor Port 3" title="Sensor Port 3" class="driverConfigurePort" onclick="configurePort(0,14)" coords="273,205,299,204,301,250,275,251" shape="poly">\
                            <area target="_self" alt="Sensor Port 4" title="Sensor Port 4" class="driverConfigurePort" onclick="configurePort(0,15)" coords="1,173,47,166,49,187,4,194" shape="poly">\
                            <area target="_self" alt="Sensor Port 5" title="Sensor Port 5" class="driverConfigurePort" onclick="configurePort(0,21)" coords="45,143,0,149,1,167,46,161" shape="poly">\
                            <area target="_self" alt="Sensor Port 6" title="Sensor Port 6" class="driverConfigurePort" onclick="configurePort(0,16)" coords="40,118,1,123,1,144,42,138" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 1" title="PWM / Analog Port 1" class="driverConfigurePort" onclick="configurePort(0,23)" coords="125,326,152,326,152,342,127,342" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 2" title="PWM / Analog Port 2" class="driverConfigurePort" onclick="configurePort(0,24)" coords="124,313,149,313,151,325,125,325" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 3" title="PWM / Analog Port 3" class="driverConfigurePort" onclick="configurePort(0,25)" coords="124,301,149,301,149,312,124,313" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 4" title="PWM / Analog Port 4" class="driverConfigurePort" onclick="configurePort(0,26)" coords="122,284,148,286,149,300,123,301" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 5" title="PWM / Analog Port 5" class="driverConfigurePort" onclick="configurePort(0,27)" coords="121,269,147,269,148,286,122,284" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 6" title="PWM / Analog Port 6" class="driverConfigurePort" onclick="configurePort(0,28)" coords="120,255,146,255,146,269,120,268" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 7" title="PWM / Analog Port 7" class="driverConfigurePort" onclick="configurePort(0,29)" coords="119,241,144,241,146,254,119,254" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 8" title="PWM / Analog Port 8" class="driverConfigurePort" onclick="configurePort(0,30)" coords="118,226,145,225,146,241,119,241" shape="poly">\
                            <area target="_self" alt="Auto Feeder" title="Auto Feeder" class="driverConfigurePort" onclick="configurePort(0,31)" coords="247,159,295,159,296,186,248,186" shape="poly">\
                            <area target="_self" alt="DC Port 1" title="DC Port 1" class="driverConfigurePort" onclick="configurePort(0,38)" coords="508,315,535,314,533,345,508,345" shape="poly">\
                            <area target="_self" alt="DC Port 2" title="DC Port 2" class="driverConfigurePort" onclick="configurePort(0,37)" coords="509,283,536,282,535,314,508,314" shape="poly">\
                            <area target="_self" alt="DC Port 3" title="DC Port 3" class="driverConfigurePort" onclick="configurePort(0,36)" coords="512,250,539,250,537,282,510,282" shape="poly">\
                            <area target="_self" alt="DC Port 4" title="DC Port 4" class="driverConfigurePort" onclick="configurePort(0,35)" coords="514,215,542,215,540,247,511,249" shape="poly">\
                            <area target="_self" alt="DC Port 5" title="DC Port 5" class="driverConfigurePort" onclick="configurePort(0,34)" coords="515,180,544,179,542,213,514,213" shape="poly">\
                            <area target="_self" alt="DC Port 6" title="DC Port 6" class="driverConfigurePort" onclick="configurePort(0,33)" coords="518,144,546,143,544,178,516,178" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 4" title="Backup Float for DC Port 4" class="driverConfigurePort" onclick="openPortInfo(3)" coords="406,237,434,236,433,269,405,269" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 5" title="Backup Float for DC Port 5" class="driverConfigurePort" onclick="openPortInfo(4)" coords="407,203,434,202,433,235,406,235" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 6" title="Backup Float for DC Port 6" class="driverConfigurePort" onclick="openPortInfo(5)" coords="408,169,435,168,434,201,407,202" shape="poly">\
                            <area target="_self" alt="Backup Float for AC Port 1" title="Backup Float for AC Port 1" class="driverConfigurePort" onclick="openPortInfo(6)" coords="332,133,359,133,359,166,331,166" shape="poly">\
                            <area target="_self" alt="Backup Float for AC Port 2" title="Backup Float for AC Port 2" class="driverConfigurePort" onclick="openPortInfo(7)" coords="332,166,359,166,359,199,332,200" shape="poly">\
                            <area target="_self" alt="Common Grounds" title="Common Grounds" class="driverConfigurePort" onclick="openPortInfo(8)" coords="424,346,457,346,455,371,424,371" shape="poly">\
                            <area target="_self" alt="I2C Port" title="I2C Port" class="driverConfigurePort" onclick="openPortInfo(10)" coords="217,354,261,353,262,376,218,376" shape="poly">\
                            <area target="_self" alt="Temperature Port 1" title="Temperature Port 1" class="driverConfigurePort" onclick="openPortInfo(9)" coords="92,125,139,124,141,151,94,152" shape="poly">\
                            <area target="_self" alt="Temperature Port 2" title="Temperature Port 2" class="driverConfigurePort" onclick="openPortInfo(9)" coords="142,124,189,124,192,151,144,151" shape="poly">\
                            <area target="_self" alt="Temperature Port 3" title="Temperature Port 3" class="driverConfigurePort" onclick="openPortInfo(9)" coords="192,124,239,124,241,151,193,151" shape="poly">\
                            <area target="_self" alt="Power Bar 2" title="Power Bar 2" class="driverConfigurePort" onclick="configureDB9(1)" coords="101,19,220,17,223,59,103,60" shape="poly">\
                            <area target="_self" alt="Power Bar 1" title="Power Bar 1" class="driverConfigurePort" onclick="configureDB9(0)" coords="228,16,346,15,348,57,230,59" shape="poly">\
                        </map>\
                    </div>\
                    <div class="driversControllerInfoBox" id="driversControllerInfoBox"></div>\
                </div>';
        }
        else if (controllerVersion == 2) {  // version 3 controller
            if (v3EditModule == 0) {
                document.getElementById('cleanScreen').innerHTML +=
                '<div class="driversControllerContainer" id="driversControllerContainer">\
                    <div class="driversControllerBox" id="driversControllerBox">\
                        <div class="driversControllerMapIconBox" id="driversControllerMapIconBox">\
                            <div class="driversControllerMapIcons" id="">Select Module</div>\
                            <img class="driversControllerMapIcon" id="v3_b1" src="images/wizard/drivers_controller_v3_b1.png" onclick="v3ChangeModule(0)">\
                            <img class="driversControllerMapIcon" id="v3_b2" src="images/wizard/drivers_controller_v3_b2.png" onclick="v3ChangeModule(1)">\
                            <img class="driversControllerMapIcon" id="v3_b3" src="images/wizard/drivers_controller_v3_b3.png" onclick="v3ChangeModule(2)">\
                        </div>\
                        <img class="driversControllerMap" id="driversControllerMap" src="images/wizard/drivers_controller_v3a.png" usemap="#driversControllerV3_Map">\
                        <map name="driversControllerV3_Map">\
                            <area target="_self" alt="Auto Feeder" title="Auto Feeder" class="driverConfigurePort" onclick="configurePort(0,31)" coords="260,332,302,317,300,345,260,359" shape="poly">\
                            <area target="_self" alt="I2C Port" title="I2C Port" class="driverConfigurePort" onclick="openPortInfo(10)" coords="256,328,255,372,226,381,226,338" shape="poly">\
                            <area target="_self" alt="Backup Float for AC Port 1" title="Backup Float for AC Port 1" class="driverConfigurePort" onclick="openPortInfo(6)" coords="310,316,335,307,334,334,309,341" shape="poly">\
                            <area target="_self" alt="Backup Float for AC Port 2" title="Backup Float for AC Port 2" class="driverConfigurePort" onclick="openPortInfo(7)" coords="335,307,361,298,359,323,334,332" shape="poly">\
                            <area target="_self" alt="Temperature Port 1" title="Temperature Port 1" class="driverConfigurePort" onclick="openPortInfo(9)" coords="232,474,272,456,272,481,233,498" shape="poly">\
                            <area target="_self" alt="Temperature Port 2" title="Temperature Port 2" class="driverConfigurePort" onclick="openPortInfo(9)" coords="272,455,310,439,309,462,272,480" shape="poly">\
                            <area target="_self" alt="Power Bar 1" title="Power Bar 1" class="driverConfigurePort" onclick="configureDB9(0)" coords="426,140,479,145,479,218,416,211" shape="poly">\
                            <area target="_self" alt="Power Bar 2" title="Power Bar 2" class="driverConfigurePort" onclick="configureDB9(1)" coords="274,24,274,78,343,124,399,117,392,77,314,23" shape="poly">\
                            <area target="_self" alt="LED Ports" title="LED Ports" class="driverConfigurePort" onclick="v3ChangeModule(2)" coords="18,133,63,152,128,165,131,243,68,236,25,212" shape="poly">\
                            <area target="_self" alt="DC Ports" title="DC Ports" class="driverConfigurePort" onclick="v3ChangeModule(2)" coords="26,221,70,248,131,265,133,331,72,321,31,291" shape="poly">\
                            <area target="_self" alt="Sensor Ports" title="Sensor Ports" class="driverConfigurePort" onclick="v3ChangeModule(1)" coords="105,82,143,96,187,144,243,138,206,89,162,78" shape="poly">\
                        </map>\
                    </div>\
                    <div class="driversControllerInfoBox" id="driversControllerInfoBox"></div>\
                </div>';
            }
            else if (v3EditModule == 1) {
                document.getElementById('cleanScreen').innerHTML +=
                '<div class="driversControllerContainer" id="driversControllerContainer">\
                    <div class="driversControllerBox" id="driversControllerBox">\
                        <div class="driversControllerMapIconBox" id="driversControllerMapIconBox">\
                            <div class="driversControllerMapIcons" id="">Select Module</div>\
                            <img class="driversControllerMapIcon" id="v3_b1" src="images/wizard/drivers_controller_v3_b1.png" onclick="v3ChangeModule(0)">\
                            <img class="driversControllerMapIcon" id="v3_b2" src="images/wizard/drivers_controller_v3_b2.png" onclick="v3ChangeModule(1)">\
                            <img class="driversControllerMapIcon" id="v3_b3" src="images/wizard/drivers_controller_v3_b3.png" onclick="v3ChangeModule(2)">\
                        </div>\
                        <img class="driversControllerMap" id="driversControllerMap" width="470px" height="389px" src="images/wizard/drivers_controller_v3b.png" usemap="#driversControllerV3_Map">\
                        <map name="driversControllerV3_Map">\
                            <area target="_self" alt="Sensor Port 1" title="Sensor Port 1" class="driverConfigurePort" onclick="configurePort(0,12)" coords="75,234,137,223,137,253,79,265" shape="poly">\
                            <area target="_self" alt="Sensor Port 2" title="Sensor Port 2" class="driverConfigurePort" onclick="configurePort(0,22)" coords="151,219,206,209,206,239,153,249" shape="poly">\
                            <area target="_self" alt="Sensor Port 3" title="Sensor Port 3" class="driverConfigurePort" onclick="configurePort(0,14)" coords="219,205,268,197,267,225,219,235" shape="poly">\
                            <area target="_self" alt="Sensor Port 4" title="Sensor Port 4" class="driverConfigurePort" onclick="configurePort(0,15)" coords="279,194,325,186,323,213,279,222" shape="poly">\
                            <area target="_self" alt="Sensor Port 5" title="Sensor Port 5" class="driverConfigurePort" onclick="configurePort(0,21)" coords="335,183,377,176,373,202,333,210" shape="poly">\
                            <area target="_self" alt="Sensor Port 6" title="Sensor Port 6" class="driverConfigurePort" onclick="configurePort(0,16)" coords="386,173,423,166,420,191,383,200" shape="poly">\
                            <area target="_self" alt="Sensor Port 1" title="Sensor Port 1" class="driverConfigurePort" onclick="configurePort(0,12)" coords="67,166,133,156,135,186,70,197" shape="poly">\
                            <area target="_self" alt="Sensor Port 2" title="Sensor Port 2" class="driverConfigurePort" onclick="configurePort(0,22)" coords="147,155,207,146,206,175,148,184" shape="poly">\
                            <area target="_self" alt="Sensor Port 3" title="Sensor Port 3" class="driverConfigurePort" onclick="configurePort(0,14)" coords="218,144,272,136,270,163,218,173" shape="poly">\
                            <area target="_self" alt="Sensor Port 4" title="Sensor Port 4" class="driverConfigurePort" onclick="configurePort(0,15)" coords="281,136,330,128,328,154,280,162" shape="poly">\
                            <area target="_self" alt="Sensor Port 5" title="Sensor Port 5" class="driverConfigurePort" onclick="configurePort(0,21)" coords="340,126,384,120,381,146,337,152" shape="poly">\
                            <area target="_self" alt="Sensor Port 6" title="Sensor Port 6" class="driverConfigurePort" onclick="configurePort(0,16)" coords="392,119,433,113,429,137,390,143" shape="poly">\
                            <area target="_self" alt="Sensor Port 1" title="Sensor Port 1" class="driverConfigurePort" onclick="configurePort(0,12)" coords="61,114,131,106,133,137,65,147" shape="poly">\
                            <area target="_self" alt="Sensor Port 2" title="Sensor Port 2" class="driverConfigurePort" onclick="configurePort(0,22)" coords="145,105,207,97,206,127,147,135" shape="poly">\
                            <area target="_self" alt="Sensor Port 3" title="Sensor Port 3" class="driverConfigurePort" onclick="configurePort(0,14)" coords="218,97,274,90,273,119,218,127" shape="poly">\
                            <area target="_self" alt="Sensor Port 4" title="Sensor Port 4" class="driverConfigurePort" onclick="configurePort(0,15)" coords="283,90,334,83,333,111,283,119" shape="poly">\
                            <area target="_self" alt="Sensor Port 5" title="Sensor Port 5" class="driverConfigurePort" onclick="configurePort(0,21)" coords="343,83,389,79,386,104,341,110" shape="poly">\
                            <area target="_self" alt="Sensor Port 6" title="Sensor Port 6" class="driverConfigurePort" onclick="configurePort(0,16)" coords="398,78,441,72,437,98,395,103" shape="poly">\
                        </map>\
                    </div>\
                    <div class="driversControllerInfoBox" id="driversControllerInfoBox"></div>\
                </div>';
            }
            else if (v3EditModule == 2) {
                document.getElementById('cleanScreen').innerHTML +=
                '<div class="driversControllerContainer" id="driversControllerContainer">\
                    <div class="driversControllerBox" id="driversControllerBox">\
                        <div class="driversControllerMapIconBox" id="driversControllerMapIconBox">\
                            <div class="driversControllerMapIcons" id="">Select Module</div>\
                            <img class="driversControllerMapIcon" id="v3_b1" src="images/wizard/drivers_controller_v3_b1.png" onclick="v3ChangeModule(0)">\
                            <img class="driversControllerMapIcon" id="v3_b2" src="images/wizard/drivers_controller_v3_b2.png" onclick="v3ChangeModule(1)">\
                            <img class="driversControllerMapIcon" id="v3_b3" src="images/wizard/drivers_controller_v3_b3.png" onclick="v3ChangeModule(2)">\
                        </div>\
                        <img class="driversControllerMap" id="driversControllerMap" src="images/wizard/drivers_controller_v3c.png" usemap="#driversControllerV3_Map">\
                        <map name="driversControllerV3_Map">\
                            <area target="_self" alt="DC Port 1" title="DC Port 1" class="driverConfigurePort" onclick="configurePort(0,38)" coords="147,95,188,91,188,128,147,133" shape="poly">\
                            <area target="_self" alt="DC Port 2" title="DC Port 2" class="driverConfigurePort" onclick="configurePort(0,37)" coords="205,89,244,86,243,121,205,126" shape="poly">\
                            <area target="_self" alt="DC Port 3" title="DC Port 3" class="driverConfigurePort" onclick="configurePort(0,36)" coords="258,84,294,80,293,115,258,119" shape="poly">\
                            <area target="_self" alt="DC Port 4" title="DC Port 4" class="driverConfigurePort" onclick="configurePort(0,35)" coords="306,79,341,75,338,109,305,113" shape="poly">\
                            <area target="_self" alt="DC Port 5" title="DC Port 5" class="driverConfigurePort" onclick="configurePort(0,34)" coords="352,75,385,72,382,104,350,107" shape="poly">\
                            <area target="_self" alt="DC Port 6" title="DC Port 6" class="driverConfigurePort" onclick="configurePort(0,33)" coords="396,70,425,67,422,99,393,101" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 1" title="Backup Float for DC Port 1" class="driverConfigurePort" onclick="openPortInfo(0)" coords="149,247,187,238,187,268,151,277" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 2" title="Backup Float for DC Port 2" class="driverConfigurePort" onclick="openPortInfo(1)" coords="203,235,238,227,237,256,203,264" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 3" title="Backup Float for DC Port 3" class="driverConfigurePort" onclick="openPortInfo(2)" coords="253,225,284,217,283,246,251,253" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 4" title="Backup Float for DC Port 4" class="driverConfigurePort" onclick="openPortInfo(3)" coords="298,215,328,209,327,237,296,244" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 5" title="Backup Float for DC Port 5" class="driverConfigurePort" onclick="openPortInfo(4)" coords="339,207,369,201,367,227,338,235" shape="poly">\
                            <area target="_self" alt="Backup Float for DC Port 6" title="Backup Float for DC Port 6" class="driverConfigurePort" onclick="openPortInfo(5)" coords="380,198,407,193,405,220,377,225" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 1" title="PWM / Analog Port 1" class="driverConfigurePort" onclick="configurePort(0,23)" coords="338,287,361,281,359,295,336,301" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 2" title="PWM / Analog Port 2" class="driverConfigurePort" onclick="configurePort(0,24)" coords="336,302,358,296,356,309,335,314" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 3" title="PWM / Analog Port 3" class="driverConfigurePort" onclick="configurePort(0,25)" coords="335,314,356,310,355,321,334,327" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 4" title="PWM / Analog Port 4" class="driverConfigurePort" onclick="configurePort(0,26)" coords="334,328,355,322,354,335,333,340" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 5" title="PWM / Analog Port 5" class="driverConfigurePort" onclick="configurePort(0,27)" coords="333,341,354,336,351,348,331,354" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 6" title="PWM / Analog Port 6" class="driverConfigurePort" onclick="configurePort(0,28)" coords="331,355,351,348,350,360,329,367" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 7" title="PWM / Analog Port 7" class="driverConfigurePort" onclick="configurePort(0,29)" coords="329,367,350,360,348,372,328,378" shape="poly">\
                            <area target="_self" alt="PWM / Analog Port 8" title="PWM / Analog Port 8" class="driverConfigurePort" onclick="configurePort(0,30)" coords="328,378,349,372,348,386,326,393" shape="poly">\
                            <area target="_self" alt="Common Grounds" title="Common Grounds" class="driverConfigurePort" onclick="openPortInfo(8)" coords="305,263,332,257,331,280,304,289" shape="poly">\
                        </map>\
                    </div>\
                    <div class="driversControllerInfoBox" id="driversControllerInfoBox"></div>\
                </div>';
            }
        }

        document.getElementById('driversControllerInfoBox').innerHTML =
            '<div class="driversControllerPort" id="driversControllerPort">\
                Click any port to configure it.\
            </div>\
            <div class="widgetButtonBox">\
                <button class="button _84 back_84" onclick="viewSettingsMenu()"></button>\
                <button class="button _84 home_84" onclick="loadLayout()"></button>\
            </div>';
    }
    else {
        editingPort = 0;
        var c = 0;
        for(var t=0; t < totalDrivers; t++) {  // go through each driver
            document.getElementById('cleanScreen').innerHTML +=
                '<div class="driverContainer" id="driverContainer">\
                    <div class="settingsTitle">' + driverName[c] + '</div>\
                </div>\
                <div class="driverContainer" id="driverContainer_' + t + '"></div>';

            for(var i=0; i < totalDriverPins[t]; i++) {  // go through each pin for driver
                document.getElementById('driverContainer_' + t).innerHTML +=
                    '<div class="driverInfoBox" id="driverInfoBox_' + c + '">\
                        <div class="driverPinEditButton bi bi-pencil-fill" onclick="editPinDetailsCustom(' + c + ')"></div>\
                        <div class="driverInfoCol1">\
                            <div class="driverName">GPIO: </div>\
                            <div class="driverName">Robo-Tank: </div>\
                            <div class="driverName">Name: </div>\
                            <div class="driverName">Function: </div>\
                            <div class="driverName">Enabled: </div>\
                            <div class="driverName">Logic: </div>\
                            <div class="driverName">Icon: </div>\
                        </div>\
                        <div class="driverInfoCol2">\
                            <div class="driverName">' + gpioPin[c] + '</div>\
                            <div class="driverName">' + roboTankPortName[c] + '</div>\
                            <div class="driverName">' + customPortName[c] + '</div>\
                            <div class="driverName">' + pinTypeName[c] + '</div>\
                            <div class="driverName">' + pinAssigned[c] + '</div>\
                            <div class="driverName">' + portLogic[c] + '</div>\
                            <div class="driverName">' + pinIconID[c] + '</div>\
                        </div>\
                    </div>';
                c++;
            }
        }
        document.getElementById('cleanScreen').innerHTML +=
            '<div class="widgetButtonBox">\
                <button class="button _48 back_48" onclick="viewSettingsMenu()"></button>\
                <button class="button _48 home_48" onclick="loadLayout()"></button>\
            </div>';
    }

    // mark configPortView radio button active
    if (configPortView == 0) {  // simple view
        document.getElementById("type1").checked = true;  // mark radio button checked
        document.getElementById("type2").checked = false;  // mark radio button checked
    }
    else if (configPortView == 1) {  // advanced view
        document.getElementById("type1").checked = false;  // mark radio button checked
        document.getElementById("type2").checked = true;  // mark radio button checked
    }

    // console.log('windowHeight = ' + windowHeight);
    // var height = (windowHeight-300);
    // console.log('height = ' + height);

    // if (windowHeight < 760) {
    //     document.getElementById("driversControllerMap").style.height = (windowHeight - 120) + "px";
    //     // document.getElementById("driversControllerBox").style.height = (windowHeight - 188) + "px";
    // }
    // if (windowWidth < 607) {
    //     document.getElementById("driversControllerMap").style.height = "auto";
    // }

        // add red box around v3 module button selected
    if (controllerVersion == 2) {
        if (v3EditModule == 0) {
            document.getElementById("v3_b1").style.border = "solid 1px #FF0000";
            document.getElementById("v3_b2").style.border = "none";
            document.getElementById("v3_b3").style.border = "none";
        }
        else if (v3EditModule == 1) {
            document.getElementById("v3_b1").style.border = "none";
            document.getElementById("v3_b2").style.border = "solid 1px #FF0000";
            document.getElementById("v3_b3").style.border = "none";
        }
        else if (v3EditModule == 2) {
            document.getElementById("v3_b1").style.border = "none";
            document.getElementById("v3_b2").style.border = "none";
            document.getElementById("v3_b3").style.border = "solid 1px #FF0000";
        }
    }
    
    setTimeout(() => {
        ImageMap('img[load]');
        ImageMap('img[usemap]');
        
    }, 100);
    // configurePort(0,0);
}

function v3ChangeModule(module) {  // change v3 controller module being viewed
    // console.log('v3ChangeModule = ' + module);
    v3EditModule = module;
    settingsDrivers();
}

function updateConfigPortView(value) {  // change simple / advanced mode for configure ports
    // console.log('updateConfigPortView');
    // console.log(board);
    if (configPortView != value) {  // add 1000ms delay after button is pressed
        $.ajax({  // update database with controller board type being used
            url: "/php/updateConfigPortView.php",
            method: "GET",
            cache: false,
            data: {"v": value },
            success: function(dataWindow) {
                // console.log('updateConfigPortView Completed ------------------');
                configPortView = value;  // store board type
                if (configPortView == 0) {
                    // document.getElementById("type2").disabled = true;
                    document.getElementById("type1").checked = true;  // mark radio button checked
                }
                else if (configPortView == 1) {
                    // document.getElementById("type1").disabled = true;
                    document.getElementById("type2").checked = true;  // mark radio button checked
                }
        
                // document.getElementById("type1").disabled = false; 
                // document.getElementById("type2").disabled = false;
                settingsDrivers();
            },
            error: function(dataWindow) {
                console.log(dataWindow);
                console.log('updateConfigPortView error');
            }
        });
    }
}