<% if (([1, 3, 5, 7, 9, 11, 15].indexOf(parseInt(channels['transferstation.ltx1_enabled'].value))  != -1 ) || ([1, 3, 5, 7, 9, 11, 15].indexOf(parseInt(channels['transferstation.ftx1_enabled'].value)) != -1)) { %>
    <div class="row row-flex box-me" id="sharedSystems">
        <div class="col-xs-12 text-center">
            <h1>Shared Devices</h1>
        </div>

        <% if ([1, 3, 5, 7, 9, 11, 15].indexOf(parseInt(channels["transferstation.ltx1_enabled"].value)) != -1) { %>
                <div class="col-xs-4 text-center">
                    <h2>Pond Level (LT01)</h2>
                    <div class="gauge-box">
                        <div data-labelheight="10"
                        style="height: 170px; background: transparent; margin: 0 auto;"
                        id="gauge-lt01_level"
                        data-chart="solidgauge"
                        data-nodename="transferstation.lt01_level"
                        data-units="ft."
                        data-min="0"
                        data-max="25"
                        data-decimalplaces="2"
                        data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                        data-valuefontsize="18px">
                        </div>
                        <div class- "timestamp-box">
                            <a href="#" data-channelId="<%= channels["transferstation.lt01_level"].channelId %>" class="data-table" title="Download Channel History">
                                <i class="fa fa-download"></i>
                            </a>
                        </div>
                        <span data-timeupdate="lt01_level">
                            <%= channels["transferstation.lt01_level"].timestamp %>
                        </span>
                    </div>
                </div>
            <% } %>


        <% if ([1, 3, 5, 7, 9, 11, 15].indexOf(parseInt(channels['transferstation.ftx1_enabled'].value)) != -1) { %>
            <div class="col-xs-4 text-center">
                <h2>System Flow (FT01)</h2>
                <div class="gauge-box">
                    <div data-labelheight="10"
                    style="height: 170px; background: transparent; margin: 0 auto;"
                    id="gauge-ft01_flow"
                    data-chart="solidgauge"
                    data-nodename="transferstation.ft01_flow"
                    data-units="BPD"
                    data-min="0"
                    data-max="50000"
                    data-decimalplaces="2"
                    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                    data-valuefontsize="18px">
                    </div>
                    <div class- "timestamp-box">
                        <a href="#" data-channelId="<%= channels['transferstation.ft01_flow'].channelId %>" class="data-table" title="Download Channel History">
                            <i class="fa fa-download"></i>
                        </a>
                    </div>
                    <span data-timeupdate="ft01_flow">
                        <%= channels["transferstation.ft01_flow"].timestamp %>
                    </span>
                </div>
            </div>
        <% } %>
    </div>
<% } %>



<% if ([2, 3, 6, 7, 10, 11, 14, 15].indexOf(parseInt(channels["transferstation.systems_enabled"].value)) != -1) { %>
    <div class="row row-flex box-me" id="system1">
        <div class="col-xs-12 text-center">
            <h1>System 1</h1>
        </div>
        <% if ([2, 3, 6, 7, 10, 11, 14, 15].indexOf(parseInt(channels['transferstation.ltx1_enabled'].value)) != -1) { %>
            <div class="col-xs-4 text-center">
                <h2>Pond Level (LT11)</h2>
                <div class="gauge-box">
                    <div data-labelheight="10"
                    style="height: 170px; background: transparent; margin: 0 auto;"
                    id="gauge-lt11_level"
                    data-chart="solidgauge"
                    data-nodename="transferstation.lt11_level"
                    data-units="ft."
                    data-min="0"
                    data-max="25"
                    data-decimalplaces="2"
                    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                    data-valuefontsize="18px">
                    </div>
                    <div class- "timestamp-box">
                        <a href="#" data-channelId="<%= channels['transferstation.lt11_level'].channelId %>" class="data-table" title="Download Channel History">
                            <i class="fa fa-download"></i>
                        </a>
                    </div>
                    <span data-timeupdate="lt11_level">
                        <%= channels["transferstation.lt11_level"].timestamp %>
                    </span>
                </div>
            </div>
        <% } %>
        <div class="col-xs-4 text-center">
            <h2>Booster Pump Intake Pressure (PT11)</h2>
            <div class="gauge-box">
                <div data-labelheight="10"
                style="height: 170px; background: transparent; margin: 0 auto;"
                id="gauge-pt11_pressure"
                data-chart="solidgauge"
                data-nodename="transferstation.pt11_pressure"
                data-units="PSI"
                data-min="0"
                data-max="600"
                data-decimalplaces="2"
                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                data-valuefontsize="18px">
                </div>
                <div class- "timestamp-box">
                    <a href="#" data-channelId="<%= channels['transferstation.pt11_pressure'].channelId %>" class="data-table" title="Download Channel History">
                        <i class="fa fa-download"></i>
                    </a>
                </div>
                <span data-timeupdate="pt11_pressure">
                    <%= channels["transferstation.pt11_pressure"].timestamp %>
                </span>
            </div>
        </div>
        <% if ([2, 3, 6, 7, 10, 11, 14, 15].indexOf(parseInt(channels['transferstation.ptx2_enabled'].value)) != -1 ) { %>
            <div class="col-xs-4 text-center">
                <h2>Booster Pump Discharge Pressure (PT12)</h2>
                <div class="gauge-box">
                    <div data-labelheight="10"
                    style="height: 170px; background: transparent; margin: 0 auto;"
                    id="gauge-pt12_pressure"
                    data-chart="solidgauge"
                    data-nodename="transferstation.pt12_pressure"
                    data-units="PSI"
                    data-min="0"
                    data-max="600"
                    data-decimalplaces="2"
                    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                    data-valuefontsize="18px">
                    </div>
                    <div class- "timestamp-box">
                        <a href="#" data-channelId="<%= channels['transferstation.pt12_pressure'].channelId %>" class="data-table" title="Download Channel History">
                            <i class="fa fa-download"></i>
                        </a>
                    </div>
                    <span data-timeupdate="pt12_pressure">
                        <%= channels["transferstation.pt12_pressure"].timestamp %>
                    </span>
                </div>
            </div>
        <% } %>

        <% if ([2, 3, 6, 7, 10, 11, 14, 15].indexOf(parseInt(channels['transferstation.ftx1_enabled'].value)) != -1 ) { %>
            <div class="col-xs-4 text-center">
                <h2>System Flow (FT11)</h2>
                <div class="gauge-box">
                    <div data-labelheight="10"
                    style="height: 170px; background: transparent; margin: 0 auto;"
                    id="gauge-ft11_flow"
                    data-chart="solidgauge"
                    data-nodename="transferstation.ft11_flow"
                    data-units="BPD"
                    data-min="0"
                    data-max="50000"
                    data-decimalplaces="2"
                    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                    data-valuefontsize="18px">
                    </div>
                    <div class- "timestamp-box">
                        <a href="#" data-channelId="<%= channels['transferstation.ft11_flow'].channelId %>" class="data-table" title="Download Channel History">
                            <i class="fa fa-download"></i>
                        </a>
                    </div>
                    <span data-timeupdate="ft11_flow">
                        <%= channels["transferstation.ft11_flow"].timestamp %>
                    </span>
                </div>
            </div>
        <% } %>
    </div>
<% } %>




<% if ([4, 5, 6, 7, 12, 13, 14, 15].indexOf(parseInt(channels["transferstation.systems_enabled"].value)) != -1 ) { %>
    <div class="row row-flex box-me" id="system2">
        <div class="col-xs-12 text-center">
            <h1>System 2</h1>
        </div>
        <% if ([4, 5, 6, 7, 12, 13, 14, 15].indexOf(parseInt(channels['transferstation.ltx1_enabled'].value)) != -1 ) { %>
            <div class="col-xs-4 text-center">
                <h2>Pond Level (LT21)</h2>
                <div class="gauge-box">
                    <div data-labelheight="10"
                    style="height: 170px; background: transparent; margin: 0 auto;"
                    id="gauge-lt21_level"
                    data-chart="solidgauge"
                    data-nodename="transferstation.lt21_level"
                    data-units="ft."
                    data-min="0"
                    data-max="25"
                    data-decimalplaces="2"
                    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                    data-valuefontsize="18px">
                    </div>
                    <div class- "timestamp-box">
                        <a href="#" data-channelId="<%= channels['transferstation.lt21_level'].channelId %>" class="data-table" title="Download Channel History">
                            <i class="fa fa-download"></i>
                        </a>
                    </div>
                    <span data-timeupdate="lt21_level">
                        <%= channels["transferstation.lt21_level"].timestamp %>
                    </span>
                </div>
            </div>
        <% } %>
        <div class="col-xs-4 text-center">
            <h2>Booster Pump Intake Pressure (PT21)</h2>
            <div class="gauge-box">
                <div data-labelheight="10"
                style="height: 170px; background: transparent; margin: 0 auto;"
                id="gauge-pt21_pressure"
                data-chart="solidgauge"
                data-nodename="transferstation.pt21_pressure"
                data-units="PSI"
                data-min="0"
                data-max="600"
                data-decimalplaces="2"
                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                data-valuefontsize="18px">
                </div>
                <div class- "timestamp-box">
                    <a href="#" data-channelId="<%= channels['transferstation.pt21_pressure'].channelId %>" class="data-table" title="Download Channel History">
                        <i class="fa fa-download"></i>
                    </a>
                </div>
                <span data-timeupdate="pt21_pressure">
                    <%= channels["transferstation.pt21_pressure"].timestamp %>
                </span>
            </div>
        </div>
        <% if ([4, 5, 6, 7, 12, 13, 14, 15].indexOf(parseInt(channels['transferstation.ptx2_enabled'].value)) != -1 ) { %>
            <div class="col-xs-4 text-center">
                <h2>Booster Pump Discharge Pressure (PT22)</h2>
                <div class="gauge-box">
                    <div data-labelheight="10"
                    style="height: 170px; background: transparent; margin: 0 auto;"
                    id="gauge-pt22_pressure"
                    data-chart="solidgauge"
                    data-nodename="transferstation.pt22_pressure"
                    data-units="PSI"
                    data-min="0"
                    data-max="600"
                    data-decimalplaces="2"
                    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                    data-valuefontsize="18px">
                    </div>
                    <div class- "timestamp-box">
                        <a href="#" data-channelId="<%= channels['transferstation.pt22_pressure'].channelId %>" class="data-table" title="Download Channel History">
                            <i class="fa fa-download"></i>
                        </a>
                    </div>
                    <span data-timeupdate="pt22_pressure">
                        <%= channels["transferstation.pt22_pressure"].timestamp %>
                    </span>
                </div>
            </div>
        <% } %>

        <% if ([4, 5, 6, 7, 12, 13, 14, 15].indexOf(parseInt(channels['transferstation.ftx1_enabled'].value)) != -1 ) { %>
            <div class="col-xs-4 text-center">
                <h2>System Flow (FT21)</h2>
                <div class="gauge-box">
                    <div data-labelheight="10"
                    style="height: 170px; background: transparent; margin: 0 auto;"
                    id="gauge-ft21_flow"
                    data-chart="solidgauge"
                    data-nodename="transferstation.ft21_flow"
                    data-units="BPD"
                    data-min="0"
                    data-max="50000"
                    data-decimalplaces="2"
                    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                    data-valuefontsize="18px">
                    </div>
                    <div class- "timestamp-box">
                        <a href="#" data-channelId="<%= channels['transferstation.ft21_flow'].channelId %>" class="data-table" title="Download Channel History">
                            <i class="fa fa-download"></i>
                        </a>
                    </div>
                    <span data-timeupdate="ft21_flow">
                        <%= channels["transferstation.ft21_flow"].timestamp %>
                    </span>
                </div>
            </div>
        <% } %>
    </div>
<% } %>

<% if ([8, 9, 10, 11, 12, 13, 14, 15].indexOf(parseInt(channels["transferstation.systems_enabled"].value)) != -1 ) { %>
    <div class="row row-flex box-me" id="system3">
        <div class="col-xs-12 text-center">
            <h1>System 3</h1>
        </div>
        <% if ([8, 9, 10, 11, 12, 13, 14, 15].indexOf(parseInt(channels['transferstation.ltx1_enabled'].value)) != -1 ) { %>
            <div class="col-xs-4 text-center">
                <h2>Pond Level (LT31)</h2>
                <div class="gauge-box">
                    <div data-labelheight="10"
                    style="height: 170px; background: transparent; margin: 0 auto;"
                    id="gauge-lt31_level"
                    data-chart="solidgauge"
                    data-nodename="transferstation.lt31_level"
                    data-units="ft."
                    data-min="0"
                    data-max="25"
                    data-decimalplaces="2"
                    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                    data-valuefontsize="18px">
                    </div>
                    <div class- "timestamp-box">
                        <a href="#" data-channelId="<%= channels['transferstation.lt31_level'].channelId %>" class="data-table" title="Download Channel History">
                            <i class="fa fa-download"></i>
                        </a>
                    </div>
                    <span data-timeupdate="lt31_level">
                        <%= channels["transferstation.lt31_level"].timestamp %>
                    </span>
                </div>
            </div>
        <% } %>
        <div class="col-xs-4 text-center">
            <h2>Booster Pump Intake Pressure (PT31)</h2>
            <div class="gauge-box">
                <div data-labelheight="10"
                style="height: 170px; background: transparent; margin: 0 auto;"
                id="gauge-pt31_pressure"
                data-chart="solidgauge"
                data-nodename="transferstation.pt31_pressure"
                data-units="PSI"
                data-min="0"
                data-max="600"
                data-decimalplaces="2"
                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                data-valuefontsize="18px">
                </div>
                <div class- "timestamp-box">
                    <a href="#" data-channelId="<%= channels['transferstation.pt31_pressure'].channelId %>" class="data-table" title="Download Channel History">
                        <i class="fa fa-download"></i>
                    </a>
                </div>
                <span data-timeupdate="pt31_pressure">
                    <%= channels["transferstation.pt31_pressure"].timestamp %>
                </span>
            </div>
        </div>
        <% if ([8, 9, 10, 11, 12, 13, 14, 15].indexOf(parseInt(channels['transferstation.ptx2_enabled'].value)) != -1 ) { %>
            <div class="col-xs-4 text-center">
                <h2>Booster Pump Discharge Pressure (PT32)</h2>
                <div class="gauge-box">
                    <div data-labelheight="10"
                    style="height: 170px; background: transparent; margin: 0 auto;"
                    id="gauge-pt32_pressure"
                    data-chart="solidgauge"
                    data-nodename="transferstation.pt32_pressure"
                    data-units="PSI"
                    data-min="0"
                    data-max="600"
                    data-decimalplaces="2"
                    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                    data-valuefontsize="18px">
                    </div>
                    <div class- "timestamp-box">
                        <a href="#" data-channelId="<%= channels['transferstation.pt32_pressure'].channelId %>" class="data-table" title="Download Channel History">
                            <i class="fa fa-download"></i>
                        </a>
                    </div>
                    <span data-timeupdate="pt32_pressure">
                        <%= channels["transferstation.pt32_pressure"].timestamp %>
                    </span>
                </div>
            </div>
        <% } %>

        <% if ([8, 9, 10, 11, 12, 13, 14, 15].indexOf(parseInt(channels['transferstation.ftx1_enabled'].value)) != -1 ) { %>
            <div class="col-xs-4 text-center">
                <h2>System Flow (FT31)</h2>
                <div class="gauge-box">
                    <div data-labelheight="10"
                    style="height: 170px; background: transparent; margin: 0 auto;"
                    id="gauge-ft31_flow"
                    data-chart="solidgauge"
                    data-nodename="transferstation.ft31_flow"
                    data-units="BPD"
                    data-min="0"
                    data-max="50000"
                    data-decimalplaces="2"
                    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                    data-valuefontsize="18px">
                    </div>
                    <div class- "timestamp-box">
                        <a href="#" data-channelId="<%= channels['transferstation.ft31_flow'].channelId %>" class="data-table" title="Download Channel History">
                            <i class="fa fa-download"></i>
                        </a>
                    </div>
                    <span data-timeupdate="ft31_flow">
                        <%= channels["transferstation.ft31_flow"].timestamp %>
                    </span>
                </div>
            </div>
        <% } %>
    </div>
<% } %>




<style>

.box-me {
    position: relative;
    padding: 0.5em;
    padding-bottom: 1.5em;
    border: 1px solid #eee;
    /*margin: 1em 0;*/
}

.box-me .gauge-box {
    margin-top: -0.25em;
}

.pad15 {
    margin: 15px 15px;
}

.box-me h2 {
    text-transform: uppercase;
    font-size: 14px;
    color: #666;
    font-weight: 400;
    letter-spacing: 1px;
    z-index: 100;
}

.dynamic-chart-form {
    background-color: whiteSmoke;
    padding: 1em 0.5em;
    margin-top: 1em;
}

.row-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.row-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

#systemStatusTimelineContainer h2 {
    text-transform: uppercase;
    font-size: 14px;
    color: #666;
    font-weight: 400;
    letter-spacing: 1px;
    z-index: 100;
}

.slice.node-detail hr {
    border-color: #ccc;
}
.slice.node-detail #alarms li {
    margin-bottom: 1em;
    padding: 0.5em;
}
.slice.node-detail #alarms li:nth-child(even){
    background-color: whiteSmoke;
}
.slice.node-detail #alarms li span {
    margin-left: 1em;
    color: #aaa;
}
</style>

<script>

$('.val_box').each(function(topLevel){
    $(this).change(function(){
        var id = "#" + $(this).closest(".entry-top-level").attr('id');
        if (id !== "#undefined"){
            var val = $(id).find('.val_box').val();
            var tag = $(id).find('.setstatic').attr('data-staticsend', val);
            console.log($(id).find('.setstatic').attr('data-staticsend'));
        }
    });
});

</script>
