<div class="row">
    <div class="col-md-3">
        <h2>Input 0</h2>
        <% if (channels["multisensor.an0ispond"].value === "true"){ %>
            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input0_cfg.isPondLevel', 'value': 0}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-danger animated setstatic">Disable Pond Volume</a>
        <% } else { %>

            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input0_cfg.isPondLevel', 'value': 1}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-success animated setstatic">Enable Pond Volume</a>
        <% } %>
    </div>

    <div class="col-md-3">
        <h2>Input 1</h2>
        <% if (channels["multisensor.an1ispond"].value === "true"){ %>
            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input1_cfg.isPondLevel', 'value': 0}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-danger animated setstatic">Disable Pond Volume</a>
        <% } else { %>

            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input1_cfg.isPondLevel', 'value': 1}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-success animated setstatic">Enable Pond Volume</a>
        <% } %>
    </div>

    <div class="col-md-3">
        <h2>Input 2</h2>
        <% if (channels["multisensor.an2ispond"].value === "true"){ %>
            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input2_cfg.isPondLevel', 'value': 0}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-danger animated setstatic">Disable Pond Volume</a>
        <% } else { %>

            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input2_cfg.isPondLevel', 'value': 1}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-success animated setstatic">Enable Pond Volume</a>
        <% } %>
    </div>

    <div class="col-md-3">
        <h2>Input 3</h2>
        <% if (channels["multisensor.an3ispond"].value === "true"){ %>
            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input3_cfg.isPondLevel', 'value': 0}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-danger animated setstatic">Disable Pond Vlume</a>
        <% } else { %>

            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input3_cfg.isPondLevel', 'value': 1}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-success animated setstatic">Enable Pond Volume</a>
        <% } %>
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <h2>Input 4</h2>
        <% if (channels["multisensor.an4ispond"].value === "true"){ %>
            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input0_cfg.isPondLevel', 'value': 0}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-danger animated setstatic">Disable Pond Vlume</a>
        <% } else { %>

            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input4_cfg.isPondLevel', 'value': 1}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-success animated setstatic">Enable Pond Volume</a>
        <% } %>
    </div>

    <div class="col-md-3">
        <h2>Input 5</h2>
        <% if (channels["multisensor.an5ispond"].value === "true"){ %>
            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input5_cfg.isPondLevel', 'value': 0}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-danger animated setstatic">Disable Pond Vlume</a>
        <% } else { %>

            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input5_cfg.isPondLevel', 'value': 1}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-success animated setstatic">Enable Pond Volume</a>
        <% } %>
    </div>

    <div class="col-md-3">
        <h2>Input 6</h2>
        <% if (channels["multisensor.an6ispond"].value === "true"){ %>
            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input6_cfg.isPondLevel', 'value': 0}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-danger animated setstatic">Disable Pond Volume</a>
        <% } else { %>

            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input6_cfg.isPondLevel', 'value': 1}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-success animated setstatic">Enable Pond Volume</a>
        <% } %>
    </div>

    <div class="col-md-3">
        <h2>Input 7</h2>
        <% if (channels["multisensor.an7ispond"].value === "true"){ %>
            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input7_cfg.isPondLevel', 'value': 0}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-danger animated setstatic">Disable Pond Volume</a>
        <% } else { %>

            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input7_cfg.isPondLevel', 'value': 1}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-success animated setstatic">Enable Pond Volume</a>
        <% } %>
    </div>
</div>

<hr />

<div class="row row-flex">
    <% if (channels["multisensor.an0ispond"].value === "true") { %>
        <div class="col-xs-6">
            <h2>Pond 0 Calibration</h2>
            <table id="calibration-data-table-0" class="table">
                <thead>
                    <tr>
                        <th>Level (Ft.)</th>
                        <th>Volume</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    <% } %>

    <% if (channels["multisensor.an1ispond"].value === "true") { %>
        <div class="col-xs-6">
            <h2>Pond 1 Calibration</h2>
            <table id="calibration-data-table-1" class="table">
                <thead>
                    <tr>
                        <th>Level (Ft.)</th>
                        <th>Volume</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    <% } %>

    <% if (channels["multisensor.an2ispond"].value === "true") { %>
        <div class="col-xs-6">
            <h2>Pond 2 Calibration</h2>
            <table id="calibration-data-table-2" class="table">
                <thead>
                    <tr>
                        <th>Level (Ft.)</th>
                        <th>Volume</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    <% } %>

    <% if (channels["multisensor.an3ispond"].value === "true") { %>
        <div class="col-xs-6">
            <h2>Pond 3 Calibration</h2>
            <table id="calibration-data-table-3" class="table">
                <thead>
                    <tr>
                        <th>Level (Ft.)</th>
                        <th>Volume</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    <% } %>
    

    <% if (channels["multisensor.an4ispond"].value === "true") { %>
        <div class="col-xs-6">
            <h2>Pond 4 Calibration</h2>
            <table id="calibration-data-table-4" class="table">
                <thead>
                    <tr>
                        <th>Level (Ft.)</th>
                        <th>Volume</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    <% } %>
    

    <% if (channels["multisensor.an5ispond"].value === "true") { %>
        <div class="col-xs-6">
            <h2>Pond 5 Calibration</h2>
            <table id="calibration-data-table-5" class="table">
                <thead>
                    <tr>
                        <th>Level (Ft.)</th>
                        <th>Volume</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    <% } %>
    

    <% if (channels["multisensor.an6ispond"].value === "true") { %>
        <div class="col-xs-6">
            <h2>Pond 6 Calibration</h2>
            <table id="calibration-data-table-6" class="table">
                <thead>
                    <tr>
                        <th>Level (Ft.)</th>
                        <th>Volume</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    <% } %>
    

    <% if (channels["multisensor.an7ispond"].value === "true") { %>
        <div class="col-xs-6">
            <h2>Pond 7 Calibration</h2>
            <table id="calibration-data-table-7" class="table">
                <thead>
                    <tr>
                        <th>Level (Ft.)</th>
                        <th>Volume</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    <% } %>
</div>

<hr />

<div class="row pad15">
    <div class="col-md-12 entry-top-level" id="new-entry">
        <h2>Add a new Calibration Point</h2>
        <form>
            <div class="form-group">
                <label for="input-select">Pond Number</label>
                <select class="form-control" id="input-select">
                    <option value=0 >0</option>
                    <option value=1 >1</option>
                    <option value=2 >2</option>
                    <option value=3 >3</option>
                    <option value=4 >4</option>
                    <option value=5 >5</option>
                    <option value=6 >6</option>
                    <option value=7 >7</option>
                </select>
            </div>
            <div class="form-group">
                <label for="height-box">Height</label>
                <input class="form-control height_box"
                    id="height-box"
                    type="number"
                    step="any"
                    value="0">
            </div>

            <div class="form-group">
                <label for="volume-box">Volume</label>
                <input class="form-control volume_box"
                    id="volume-box"
                    type="number"
                    step="any"
                    value="0">
            </div>

            <a href="#"
            data-confirm-message="Are you sure you want to do this?"
            data-refreshpause="1"
            data-command=""
            data-staticsend="{'input':0, 'height':0.0, 'volume':0.0}"
            data-channelId="<%= channels["multisensor.addcalibrationpoint"].channelId %>"
            data-techname="<%=channels["multisensor.addcalibrationpoint"].techName %>"
            data-name="<%= channels["multisensor.addcalibrationpoint"].name%>"
            data-nodechannelcurrentId="<%= channels["multisensor.addcalibrationpoint"].nodechannelcurrentId %>"
            id="<%= channels["multisensor.addcalibrationpoint"].channelId %>"
            class="btn btn-large btn-theme animated setstatic material-icons">send</a>
        </form>
    </div>
</div>

<script type="text/javascript">
    String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.replace(new RegExp(search, 'g'), replacement);
    };

    var configRaw = [];
    configRaw.push("<%= channels["multisensor.pond0calibration"].value %>");
    configRaw.push("<%= channels["multisensor.pond1calibration"].value %>");
    configRaw.push("<%= channels["multisensor.pond2calibration"].value %>");
    configRaw.push("<%= channels["multisensor.pond3calibration"].value %>");
    configRaw.push("<%= channels["multisensor.pond4calibration"].value %>");
    configRaw.push("<%= channels["multisensor.pond5calibration"].value %>");
    configRaw.push("<%= channels["multisensor.pond6calibration"].value %>");
    configRaw.push("<%= channels["multisensor.pond7calibration"].value %>");

    for (var j = 0; j<=7; j++){
        var configData = JSON.parse(configRaw[j].replaceAll("'", '"'));
        console.log(configData);
        var tableRows = [];
        for (var i = 0; i < configData.length; i++){
            var ptIndex = i + 1;
            var thisHtml = "<tr><td>" + configData[i].height + "</td><td>" + configData[i].volume + '</td><td><a href="#" data-confirm-message="Are you sure you want to do this?" data-refreshpause="1" data-command="" data-staticsend="{\'input\': '+ j +', \'point\': '+ ptIndex +'}" data-channelId="<%= channels["multisensor.deletecalibrationpoint"].channelId %>" data-techname="<%=channels["multisensor.deletecalibrationpoint"].techName %>" data-name="<%= channels["multisensor.deletecalibrationpoint"].name%>" data-nodechannelcurrentId="<%= channels["multisensor.deletecalibrationpoint"].nodechannelcurrentId %>" id="<%= channels["multisensor.deletecalibrationpoint"].channelId %>" class="btn btn-large btn-theme animated setstatic">Delete</a></tr>';
            tableRows.push(thisHtml);
        }
        $("#calibration-data-table-"+ j +" > tbody").html(tableRows);
    }


    $("#height-box").change(function(){
        var currentNewPoint = JSON.parse($("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend').replaceAll("'", '"'));
        currentNewPoint['height'] = $("#height-box").val();
        $("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend', JSON.stringify(currentNewPoint).replaceAll('"', "'"));
    })

    $("#volume-box").change(function(){
        var currentNewPoint = JSON.parse($("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend').replaceAll("'", '"'));
        currentNewPoint['volume'] = $("#volume-box").val();
        $("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend', JSON.stringify(currentNewPoint).replaceAll('"', "'"));
    })

    $("#input-select").change(function(){
        var currentNewPoint = JSON.parse($("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend').replaceAll("'", '"'));
        currentNewPoint['input'] = $("#input-select").val();
        $("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend', JSON.stringify(currentNewPoint).replaceAll('"', "'"));
    })

</script>
