@*******************************************************************************************************
//  ModbusConfig.cshtml - Gbtc
//
//  Copyright © 2016, Grid Protection Alliance.  All Rights Reserved.
//
//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
//  file except in compliance with the License. You may obtain a copy of the License at:
//
//      http://opensource.org/licenses/MIT
//
//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
//  License for the specific language governing permissions and limitations.
//
//  Code Modification History:
//  ----------------------------------------------------------------------------------------------------
//  07/08/2016 - J. Ritchie Carroll
//       Generated original version of source code.
//
//******************************************************************************************************
//  To use in an ASP.NET destination project, include a ModbusConfig.cshtml view with following content:
//
//  @using GSF.Web
//  @section StyleSheets{@Html.Raw(ViewBag.StyleSheetsSection?.ToString())}
//  @Html.RenderResource("ModbusAdapters.ModbusConfig.cshtml")
//  @section Scripts{@Html.Raw(ViewBag.ScriptsSection?.ToString())}
//
//******************************************************************************************************
//  To use in a self-hosted web project, include a ModbusConfig.cshtml view with following content:
//
//  @using GSF.Web.Model
//  @using <MyAppNameSpace>.Model
//  @inherits ExtendedTemplateBase<AppModel>
//  @section StyleSheets{@Html.Raw(ViewBag.StyleSheetsSection.ToString())}
//  @{Layout = "Layout.cshtml";}
//  @Html.RenderResource("ModbusAdapters.ModbusConfig.cshtml")
//  @section Scripts{@Html.Raw(ViewBag.ScriptsSection.ToString())}
//
//*****************************************************************************************************@
@* ReSharper disable UnknownCssClass *@
@* ReSharper disable Html.PathError *@
@* ReSharper disable InlineOutVariableDeclaration *@
@* ReSharper disable ArrangeAccessorOwnerBody *@
@using System
@using System.Collections.Generic
@using System.Net.Http
@using GSF
@using GSF.Data.Model
@using GSF.Security
@using GSF.Web
@using GSF.Web.Model
@using GSF.Web.Shared
@using ModbusAdapters.Model
@inherits ExtendedTemplateBase
@{
    const string ModbusRoot = "/@ModbusAdapters";

    // Layout will depend on rendering environment, so do not specify one
    ViewBag.HidePageTitle = true;
    ViewBag.Title = "Modbus Configuration Editor";

    if (ViewBag.ModbusLogo == null) {
        ViewBag.ModbusLogo = ModbusRoot + "/Images/ModbusConfigEditor.png";
    }

    const string ReadSequencePanelType = "panel-success";
    const string WriteSequencePanelType = "panel-warning";

    DataContext dataContext = ViewBag.DataContext;
    HttpRequestMessage request = ViewBag.Request;
    Dictionary<string, string> parameters = request.QueryParameters();
    string parameter;
    int deviceID;

    if (!parameters.TryGetValue("DeviceID", out parameter) || !int.TryParse(parameter, out deviceID)) {
        deviceID = 0;
    }

    parameters.TryGetValue("ShowMenu", out parameter);

    if (string.IsNullOrEmpty(parameter)) {
        parameter = "true";
    }

    ViewBag.ShowMenu = parameter.ParseBoolean();

    parameters.TryGetValue("HideLogo", out parameter);

    if (string.IsNullOrEmpty(parameter)) {
        parameter = "false";
    }

    ViewBag.HideLogo = parameter.ParseBoolean();

    bool userIsEditor = UserIsEditor();
}
@functions {
    // This function simply limits access to UI elements that the user does not have access to, server-side
    // functions will further validate user rights even if UI restriction was somehow bypassed
    public bool UserIsEditor()
    {
        SecurityPrincipal securityPrincipal = ViewBag.SecurityPrincipal as SecurityPrincipal;

        if ((object)securityPrincipal == null)
            return false;

        return securityPrincipal.IsInRole("Administrator") || securityPrincipal.IsInRole("Editor");
    }
}
@section StyleSheets {
    <link href="@Resources.Root/Shared/Content/jquery-ui.css" rel="stylesheet">
    <link href="@Resources.Root/Shared/Content/primeui-theme.css" rel="stylesheet">
    <link href="@Resources.Root/Shared/Content/font-awesome.css" rel="stylesheet">
    <link href="@Resources.Root/Shared/Content/primeui.css" rel="stylesheet">
    <style>
        /* Show move cursor over sequence panels to indicate drag-drop re-order capability */
        #sequencePanels .panel-heading {
            cursor: move;
            padding-top: 5px;
        }

        form.form-inline-sequence {
            cursor: move;
        }

            form.form-inline-sequence div label {
                cursor: move;
            }

        a.move-sequence-up {
            cursor: pointer;
            position: absolute;
            z-index: 999;
        }

        a.move-sequence-up span {
            cursor: pointer;
            color: darkgray;
            font-weight: bold;
            font-size: 12pt;
            margin-left: 3px;
            top: -12px;
        }

        a.move-sequence-up:hover span {
            color: #0000EE;
        }

        a.move-sequence-down {
            cursor: pointer;
            position: absolute;
            z-index: 999;
        }

        a.move-sequence-down span {
            cursor: pointer;
            color: darkgray;
            font-weight: bold;
            font-size: 12pt;
            margin-left: 3px;
            top: 1px;
        }

        a.move-sequence-down:hover span {
            color: #0000EE;
        }

        @@supports (-ms-accelerator:true) {
            /* Handle adjustments for Microsoft Edge */
            a.move-sequence-up span {
                margin-left: 2px;
            }

            a.move-sequence-down span {
                margin-left: -135px;
                top: 20px;
            }
        }

        @@media all and (-ms-high-contrast:none) {
            /* Handle adjustments for IE 11 */
            a.move-sequence-up span {
                margin-left: 2px;
            }

            a.move-sequence-down span {
                margin-left: -139px;
                top: 20px;
            }
        }

        span.sequence-record-count {
            color: darkgray;
            font-size: 7pt;
            position: absolute;
        }

        @@media screen {
            .sequence-name {
                margin-left: 30px;
                width: calc(100% - 30px);
                width: -o-calc(100% - 30px);
                width: -webkit-calc(100% - 30px);
                width: -moz-calc(100% - 30px);
            }

            span.sequence-record-count {
                margin-top: -15px;
            }

            span.sequence-record-count span {
                margin-left: 155px;
            }
        }

        @@media screen and (min-width: 768px) {
            .sequence-name {
                margin-left: 5px;
                width: 100%;
            }

            span.sequence-record-count {
                margin-top: 3px;
            }

            span.sequence-record-count span {
                margin-left: 40px;
            }
        }

        @@supports (-ms-accelerator:true) {
            /* Handle adjustments for Microsoft Edge */
            span.sequence-record-count {
                margin-top: 3px;
            }

            span.sequence-record-count span {
                margin-left: 15px;
            }
        }

        @@supports (-ms-accelerator:true) and (min-width: 768px) {
            /* Handle adjustments for Microsoft Edge */
            span.sequence-record-count {
                margin-top: 21px;
            }

            span.sequence-record-count span {
                margin-left: -95px;
            }
        }

        @@media all and (-ms-high-contrast:none) {
            /* Handle adjustments for IE 11 */
            span.sequence-record-count {
                margin-top: 3px;
            }

            span.sequence-record-count span {
                margin-left: 15px;
            }
        }

        @@media all and (-ms-high-contrast:none) and (min-width: 768px) {
            /* Handle adjustments for IE 11 */
            span.sequence-record-count {
                margin-top: 21px;
            }

            span.sequence-record-count span {
                margin-left: -95px;
            }
        }

        .panel {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .panel-body.warning-border {
            border-color: yellow;
            border-style: solid;
        }

        div.warning-message {
            font-size: 9.5pt;
            font-weight: bold;
            text-align: center;
            text-shadow: 1px 1px lightgray;
            margin-top: -10px;
            margin-bottom: 12px;
        }

        div.sequence-records-message {
            font-size: 9pt;
            text-align: center;
            color: darkgray;
            margin-top: -10px;
            margin-bottom: 0;
        }

        span.sequence-group-count {
            position: absolute;
            font-size: 8pt;
            margin-top: 6px;
            margin-left: -36px;
            height: 6px;
            width: 6px;
            -moz-transform: rotate(-90.0deg);
            -o-transform: rotate(-90.0deg);
            -webkit-transform: rotate(-90.0deg);
            -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
            transform: rotate(-90.0deg);
        }

        @@media screen and (min-width: 1200px) {
            span.sequence-group-count {
                margin-left: -44px;
            }
        }

        .form-group {
            padding-top: 5px;
        }

        .top-padding {
            padding-top: 5px;
        }

        .top-margin {
            margin-top: 5px;
        }

        .bottom-margin {
            margin-bottom: 5px;
        }

        .connection-status {
            background-color: black;
            padding: 10px;
            margin: 0;
            overflow: auto;
        }

        .glyphicon-interpret-type {
            color: darkgrey;
            vertical-align: middle;
            font-size: 15pt;
            margin-right: -5px;
            margin-left: -5px;
        }

        .glyphicon-interpret-result {
            color: darkgrey;
            vertical-align: middle;
            font-size: 17pt;
        }

        .glyphicon-delete-sequence {
            vertical-align: text-top;
            color: red;
            font-size: larger;
        }

        .glyphicon-action-button {
            color: #606060;
            vertical-align: text-top;
        }

        /*.model-index {
            color: lightgray;
            font-size: 7pt;
            position: relative;
            top: -24px;
            right: -8px;
            margin-left: -8px;
            height: 5px;
            float: right !important;
            opacity: 0.5;
        }*/

        /* Collapsable button style */
        .btn-collapsable.btn {
            color: #606060;
            font-family: "Glyphicons Halflings";
            font-size: 8pt;
            position: relative;
            top: -9px;
            right: -14px;
            padding: 0 2px 2px 2px;
            height: 18px;
            float: right !important;
        }

        /* Collapsable button icon when content is shown - arrow down */
        .btn-collapsable.btn:after {
            content: "\e114";
        }

        /* Collapsable button icon when content is hidden - arrow right */
        .btn-collapsable.btn.collapsed:after {
            content: "\e080";
        }

        input[type=text].exists {
            border: 3px solid #0C0;
        }

        @@media screen {
            .page-logo {
                margin-bottom: -25px;
                margin-top: -50px;
            }
        }

        @@media screen and (min-width: 567px) {
            .page-logo {
                margin-bottom: -25px;
                margin-top: -24px;
            }
        }

        @@media screen and (min-width: 992px) {
            .page-logo {
                margin-bottom: -25px;
                margin-top: -20px;
            }
        }
    </style>
    <!--[if IE]>
    <style type="text/css">
        /* Handle adjustments for older IE versions */
        a.move-sequence-up span {
            margin-left: 2px;
        }

        a.move-sequence-down span {
            margin-left: -139px;
            top: 20px;
        }

        @@media screen
        {
            span.sequence-record-count {
                margin-top: 3px;
            }

            span.sequence-record-count span {
                margin-left: 15px;
            }
        }

        @@media screen and (min-width: 768px)
        {
            span.sequence-record-count {
                margin-top: 21px;
            }

            span.sequence-record-count span {
                margin-left: -95px;
            }
        }
    </style>
    <![endif]-->
}
@section Scripts {
    <script src="@Resources.Root/Shared/Scripts/knockout.js"></script>
    <script src="@Resources.Root/Shared/Scripts/knockout.mapping.js"></script>
    <script src="@Resources.Root/Shared/Scripts/knockout.validation.js"></script>
    <script src="@Resources.Root/Shared/Scripts/knockout.reactor.js"></script>
    <script src="@Resources.Root/Shared/Scripts/gsf.web.knockout.js"></script>
    <script src="@Resources.Root/Shared/Scripts/jquery-ui.js"></script>
    <script src="@Resources.Root/Shared/Scripts/primeui.js"></script>
    <script src="@ModbusRoot/Scripts/RecordViewModel.js"></script>
    <script src="@ModbusRoot/Scripts/SequenceViewModel.js"></script>
    <script src="@ModbusRoot/Scripts/MapViewModel.js"></script>
    <script>
        "use strict";

        var deviceID = @deviceID;
        var deviceConnected = false;
        var sourceCheckbox = null;
        var loadAppendMode = false;

        // Define primary view model for page
        const viewModel = new MapViewModel();

        function addSequenceRecord(sequence, recordType) {
            if (recordType === RecordType.DerivedValue) {
                sequence.addNewSequenceRecord(null,
                {
                    recordType: recordType,
                    selected: false,
                    address: getDerivedValueAddressExpression(sequence),
                    description: "",
                    dataValue: ""
                }, true);
            } else {
                sequence.addNewSequenceRecord(recordType, null, true);
            }
        }

        function getSequence(domIndex) {
            const sequences = viewModel.sequences();

            for (let i = 0; i < sequences.length; i++) {
                const sequence = sequences[i];

                if (sequence.domIndex === domIndex)
                    return sequence;
            }

            return null;
        }

        function interpretAsSelectionChanged(domIndex) {
            const sequence = getSequence(domIndex);

            if (!sequence)
                return;

            // Notify sequence view model that interpret-as selection has changed
            sequence.interpretAsSelectionChanged();
            sequence.derivedValue("");
        }

        function selectedSequenceRecordsChanged(domIndex, selectedIndex) {
            const sequence = getSequence(domIndex);

            if (!sequence)
                return;

            // Clear any selected interpret-as option
            $("input[name=interpretAs" + domIndex + "]").prop("checked", false);

            // Wait a moment for ko processing to complete before validating selections
            setTimeout(function() {
                validateSelections(sequence, selectedIndex);
            }, 250);
        }

        function validateSelections(sequence, selectedIndex) {
            const records = sequence.sequenceRecords();

            if (!records)
                return;

            // Validate selected record types match
            let firstSelectedType = null;
            let recordTypesMatch = true;

            for (let i = 0; i < records.length; i++) {
                if (records[i].selected()) {
                    if (firstSelectedType != null) {
                        if (firstSelectedType !== records[i].recordType()) {
                            recordTypesMatch = false;
                            break;
                        }
                    } else {
                        firstSelectedType = records[i].recordType();
                    }
                }
            }

            if (!recordTypesMatch) {
                if (records[selectedIndex].selected())
                    sequence.selectOne(selectedIndex);
                else
                    sequence.selectNone();
            }

            // Validate selected records are contiguous
            let lastSelectedIndex = null;
            let recordsAreContiguous = true;

            for (let i = 0; i < records.length; i++) {
                if (records[i].selected()) {
                    if (lastSelectedIndex != null) {
                        if (i !== lastSelectedIndex + 1) {
                            recordsAreContiguous = false;
                            break;
                        }
                    }

                    lastSelectedIndex = i;
                }
            }

            if (!recordsAreContiguous) {
                if (records[selectedIndex].selected())
                    sequence.selectOne(selectedIndex);
                else
                    sequence.selectNone();
            }
        }

        function getDerivedValueAddressExpression(sequence) {
            const records = sequence.sequenceRecords();

            if (!records)
                return "";

            let address = $("input[name='interpretAs" + sequence.domIndex + "']:checked").parent().text();

            if (isEmpty(address))
                return "";

            address += "(";

            let count = 0;

            for (let i = 0; i < records.length; i++) {
                if (records[i].selected()) {
                    if (count > 0)
                        address += ",";

                    address += getRecordTypeCode(records[i].recordType());
                    address += records[i].address();
                    count++;
                }
            }

            address += ")";

            return address;
        }

        function getDerivedValueAddresses(expression) {
            const indexOfParen = expression.indexOf("(");
            const addressRefs = expression.substring(indexOfParen + 1, expression.length - 1);
            return addressRefs.split(",");
        }

        function parseDerivedValueAddressExpression(sequence, expression) {
            const indexOfParen = expression.indexOf("(");
            const derivedType = expression.substring(0, indexOfParen).toUpperCase();
            const addressList = getDerivedValueAddresses(expression);

            const parsedValue = {
                type: derivedType,
                values: []
            };

            for (let i = 0; i < addressList.length; i++) {
                const addressID = addressList[i].trim();
                const recordType = addressID.substring(0, 2).toUpperCase();
                const address = parseInt(addressID.substring(2, addressID.length));
                let record = null;

                switch (recordType) {
                    case "IR":
                        record = sequence.findSequenceRecord(RecordType.InputRegister, address);
                        break;
                    case "HR":
                        record = sequence.findSequenceRecord(RecordType.HoldingRegister, address);
                        break;
                }

                if (record) {
                    if (sequence.dataAsHex())
                        parsedValue.values.push(parseInt(record.dataValue(), 16));
                    else
                        parsedValue.values.push(parseInt(record.dataValue()));
                }
            }

            return parsedValue;
        }

        function getDerivedValue(sequence, address, dataValue) {
            if (!sequence || !address)
                return;

            const parsedValue = parseDerivedValueAddressExpression(sequence, address);

            switch (parsedValue.type) {
                case "STRING":
                    if (parsedValue.values.length > 0) {
                        dataHub.deriveString(parsedValue.values).done(function(value) {
                            dataValue(value);
                        });
                    }
                    break;
                case "SINGLE":
                    if (parsedValue.values.length > 1) {
                        dataHub.deriveSingle(parsedValue.values[0], parsedValue.values[1]).done(function(value) {
                            dataValue(value);
                        });
                    }
                    break;
                case "DOUBLE":
                    if (parsedValue.values.length > 3) {
                        dataHub.deriveDouble(parsedValue.values[0], parsedValue.values[1], parsedValue.values[2], parsedValue.values[3]).done(function(value) {
                            dataValue(value);
                        });
                    }
                    break;
                case "INT32":
                    if (parsedValue.values.length > 1) {
                        dataHub.deriveInt32(parsedValue.values[0], parsedValue.values[1]).done(function(value) {
                            if (sequence.dataAsHex())
                                dataValue(toHex(value, 8));
                            else
                                dataValue(value);
                        });
                    }
                    break;
                case "UINT32":
                    if (parsedValue.values.length > 1) {
                        dataHub.deriveUInt32(parsedValue.values[0], parsedValue.values[1]).done(function(value) {
                            if (sequence.dataAsHex())
                                dataValue(toHex(value, 8));
                            else
                                dataValue(value);
                        });
                    }
                    break;
                case "INT64":
                    if (parsedValue.values.length > 3) {
                        dataHub.deriveInt64(parsedValue.values[0], parsedValue.values[1], parsedValue.values[2], parsedValue.values[3]).done(function(value) {
                            if (sequence.dataAsHex())
                                dataValue(toHex(value, 16));
                            else
                                dataValue(value);
                        });
                    }
                    break;
                case "UINT64":
                    if (parsedValue.values.length > 3) {
                        dataHub.deriveUInt64(parsedValue.values[0], parsedValue.values[1], parsedValue.values[2], parsedValue.values[3]).done(function(value) {
                            if (sequence.dataAsHex())
                                dataValue(toHex(value, 16));
                            else
                                dataValue(value);
                        });
                    }
                    break;
            }
        }

        function postSequenceRendering(elements, sequence) {
            // Call reorder sequence panels after any rendering to make sure
            // model index always matches visible sequence ordering
            reorderSequencePanels();

            const collapsableSection = $(elements).find("div.collapse");

            if (!collapsableSection)
                return;

            // Track current expanded state such that upon any
            // re-render, expanded state is maintained
            collapsableSection.on("shown.bs.collapse", function() {
                sequence.expanded(true);
            });

            collapsableSection.on("hidden.bs.collapse", function() {
                sequence.expanded(false);
            });

            $(elements).find("tbody").sortable({
                items: "tr",
                cursor: "move",
                opacity: 0.6
            }).disableSelection();
        }

        function postRecordRendering(elements, sequenceRecord) {
            const checkbox = $(elements).find("input[type=checkbox]");

            if (!checkbox)
                return;

            const domIndex = sequenceRecord.parent.domIndex;
            const sequenceContent = $("#sequenceContent" + domIndex);

            if (!sequenceContent)
                return;

            const records = sequenceRecord.parent.sequenceRecords;
            const parentCell = checkbox.parents("td");

            // Make dragged checkbox mark all other checkboxes for easy mass selection
            checkbox.on("drag", function(event) {
                sourceCheckbox = event.target;
                parentCell.css("background-color", "lightgray");
                parentCell.css("border-style", "dashed");
                parentCell.css("border-top-width", "3px");
                parentCell.css("border-top-color", "black");
            });

            checkbox.on("dragover", function(event) {
                event.preventDefault();

                if (sourceCheckbox && event.target !== sourceCheckbox && !$(event.target).prop("disabled")) {
                    const index = $(event.target).parents("tr")[0].rowIndex - 1;
                    const record = records()[index];

                    if (record.recordType() !== RecordType.DerivedValue) {
                        record.selected(sourceCheckbox.checked);
                        validateSelections(sequenceRecord.parent, index);
                    }
                }
            });

            parentCell.on("dragover", function(event) {
                event.preventDefault();

                if (sourceCheckbox && event.target !== sourceCheckbox && !$(event.target).find("input[type=checkbox]").prop("disabled")) {
                    const index = $(event.target).parents("tr")[0].rowIndex - 1;
                    const record = records()[index];

                    if (record.recordType() !== RecordType.DerivedValue) {
                        record.selected(sourceCheckbox.checked);
                        validateSelections(sequenceRecord.parent, index);
                    }
                }
            });

            checkbox.on("dragend", function(event) {
                sourceCheckbox = null;
                parentCell.css("background-color", "");
                parentCell.css("border-style", "");
                parentCell.css("border-top-width", "");
                parentCell.css("border-top-color", "");
            });

            // Allow up/down arrow keys to change focus between each row's checkbox
            checkbox.keydown(function(event) {
                if (event.which === 38) {
                    // Arrow up
                    const previousIndex = $(event.target).parents("tr")[0].rowIndex - 1;

                    if (previousIndex > 0) {
                        const previous = sequenceContent.find("input[type=checkbox]:eq(" + previousIndex + ")");

                        if (!$.isEmptyObject(previous))
                            previous.focus();
                    }

                } else if (event.which === 40) {
                    // Arrow down
                    const nextIndex = $(event.target).parents("tr")[0].rowIndex + 1;

                    if (nextIndex < records().length) {
                        const next = sequenceContent.find("input[type=checkbox]:eq(" + nextIndex + ")");

                        if (!$.isEmptyObject(next))
                            next.focus();
                    }
                }
            });
        }

        function reorderSequencePanels(event, ui) {
            const sequencePanels = $("#sequencePanels");

            $(".panel", sequencePanels).each(function(index, elem) {
                const listItem = $(elem);
                const newIndex = listItem.index();
                const badges = listItem.find(".badge");

                if (badges.length > 0) {
                    // Update DOM section index
                    const indexBadge = $(badges[0]);
                    const oldIndex = parseInt(indexBadge.text()) - 1;

                    indexBadge.text(newIndex + 1);

                    const length = indexBadge.text().length;

                    if (length === 2)
                        indexBadge.css("margin-left", "-3px");

                    if (length > 2)
                        indexBadge.css("margin-left", "-6px");

                    // Update view model index
                    const sequence = viewModel.sequences()[oldIndex];

                    if (sequence)
                        sequence.index(newIndex);
                }
            });

            // Make sure view model is reordered to match user defined order
            viewModel.sequences().sort(function(a, b) {
                return a.index() - b.index();
            });
        }

        function moveSequenceUp(anchorElement) {
            const currentItem = $(anchorElement).parents("li");
            const index = currentItem.index();

            if (index < 1)
                return;

            currentItem.insertBefore($("#sequencePanels li:eq(" + (index - 1) + ")"));
            reorderSequencePanels();
        }

        function moveSequenceDown(anchorElement) {
            const currentItem = $(anchorElement).parents("li");
            const index = currentItem.index();

            if (index > $("#sequencePanels li").size() - 2)
                return;

            currentItem.insertAfter($("#sequencePanels li:eq(" + (index + 1) + ")"));
            reorderSequencePanels();
        }

        function expandAllSequences(restriction) {
            if (restriction)
                $(String.format("#{0} li.panel div.collapse", restriction)).collapse("show");
            else
                $("li.panel div.collapse").collapse("show");
        }

        function collapseAllSequences(restriction) {
            if (restriction)
                $(String.format("#{0} li.panel div.collapse", restriction)).collapse("hide");
            else
                $("li.panel div.collapse").collapse("hide");
        }

        function createNewMappingFile() {
            if (viewModel.isDirty() && !confirm("Are you sure you want to lose unsaved changes to current mapping?"))
                return;

            viewModel.newSequenceMap();
        }

        function loadMappingFile(event) {
            $("#loadingMappingMessage").show();

            setTimeout(function() {
                const files = event.target.files;

                if (loadAppendMode) {
                    for (let i = 0; i < files.length; i++)
                        viewModel.loadSequenceMap(files[i], loadAppendMode);
                } else {
                    viewModel.loadSequenceMap(files[0], loadAppendMode);

                    if (files.length > 1)
                        showInfoMessage("Only loaded first file from the selected set. Use \"Append Mapping\" to load multiple mappings into the current configuration.", 10000, true);
                }

                $("#loadMappingFileName").val("");
            }, 100);
        }

        function loadMappingComplete() {
            $("#loadingMappingMessage").hide();
        }

        function showLoadMappingFileNameDialog(appendMode) {
            if (!appendMode && viewModel.isDirty() && !confirm("Are you sure you want to lose unsaved changes to current mapping?"))
                return;

            loadAppendMode = appendMode;
            $("#loadMappingFileName").trigger("click");
        }

        function showSaveMappingFileNameDialog() {
            $("#saveMappingFileNameDialog").toggle();

            if ($("#saveMappingFileNameDialog").is(":visible"))
                $("#inputMappingFileName").focus();
        }

        function showConnectionBuilderDialog() {
            switch (viewModel.transport()) {
                case "TCP":
                    $("#tcpBuilderDialog").show();
                    $("#inputTcpHostName").focus();
                    break;
                case "UDP":
                    $("#udpBuilderDialog").show();
                    $("#inputUdpPort").focus();
                    break;
                case "SERIAL":
                    $("#serialBuilderDialog").show();
                    $("#inputSerialPort").focus();
                    break;
            }
        }

        function showSaveDeviceConnectionDialog() {
            // Define adapter connection string
            const adapterConnectionString = new Dictionary(viewModel.connectionString().parseKeyValuePairs());

            adapterConnectionString.set("unitID", viewModel.unitID());
            adapterConnectionString.set("pollingRate", viewModel.pollingRate());
            adapterConnectionString.set("interSequenceGroupPollDelay", viewModel.interSequenceGroupPollDelay());

            const sequences = viewModel.sequences();

            adapterConnectionString.set("sequenceCount", sequences.length);

            for (let i = 0; i < sequences.length; i++) {
                const sequence = sequences[i];
                const sequenceKey = "sequence" + i;
                const sequenceConnectionString = new Dictionary();
                const records = sequence.sequenceRecords();
                const groups = sequence.sequenceGroups();
                var derivedStart = -1;
                var derivedStop = -1;

                sequenceConnectionString.set("sequenceType", sequence.sequenceType === SequenceType.Read ? "Read" : "Write");
                sequenceConnectionString.set("groupCount", groups.length);

                // Pre-select all mappings
                for (let j = 0; j < records.length; j++) {
                    records[j].mapped(records[j].signalReference().length <= 200);
                }

                for (let j = 0; j < groups.length; j++) {
                    const group = groups[j];
                    const pointCount = group.stop - group.start + 1;

                    if (group.type === RecordType.DerivedValue) {
                        sequenceConnectionString.set("derivedCount", pointCount);
                        sequenceConnectionString.set("groupCount", groups.length - 1);
                        derivedStart = group.start;
                        derivedStop = group.stop;
                    }
                    else {
                        sequenceConnectionString.set("groupType" + j, getRecordTypeCode(group.type));
                        sequenceConnectionString.set("groupStartAddress" + j, records[group.start].address());
                        sequenceConnectionString.set("groupPointCount" + j, pointCount);
                    }

                    // Serialize group data values for write sequences
                    if (sequence.sequenceType === SequenceType.Write) {
                        for (let k = 0; k < pointCount; k++) {
                            const record = records[group.start + k];
                            sequenceConnectionString.set("group" + j + "DataValue" + k, parseInt(record.dataValue()));
                        }
                    }
                }

                adapterConnectionString.set(sequenceKey, sequenceConnectionString.joinKeyValuePairs());

                // Handle un-mapping of points that are part of derived values
                if (derivedStart > -1 && derivedStop > -1) {
                    for (let j = derivedStart; j <= derivedStop; j++) {
                        const record = records[j];
                        const addressList = getDerivedValueAddresses(record.address());

                        for (let k = 0; k < addressList.length; k++) {
                            const addressID = addressList[k].trim();
                            const recordType = addressID.substring(0, 2).toUpperCase();
                            const address = parseInt(addressID.substring(2, addressID.length));
                            let record = null;

                            switch (recordType) {
                                case "IR":
                                    record = sequence.findSequenceRecord(RecordType.InputRegister, address);
                                    break;
                                case "HR":
                                    record = sequence.findSequenceRecord(RecordType.HoldingRegister, address);
                                    break;
                            }

                            if (record)
                                record.mapped(false);
                        }
                    }
                }
            }

            viewModel.adapterConnectionString(adapterConnectionString.joinKeyValuePairs());

            expandAllSequences("deviceConnectionSequences");
            $("#saveDeviceConnectionDialog").show();
            $("#inputDeviceName").focus();
        }

        function saveDeviceMeasurements(device) {
            // Loop through and add measurements
            const sequences = viewModel.readSequences();
            var queryPromises = [];
            var addNewPromises = [];

            for (let i = 0; i < sequences.length; i++) {
                const sequence = sequences[i];
                const records = sequence.sequenceRecords();

                for (let j = 0; j < records.length; j++) {
                    const record = records[j];

                    if (isEmpty(record.signalReference()))
                        continue;

                    // Query existing measurement with specified signal reference or create a new one
                    var queryPromise = dataHub.queryMeasurement(record.signalReference());

                    queryPromise.done(function(measurement) {
                        measurement.DeviceID = device.ID;
                        measurement.HistorianID = viewModel.historianID();
                        measurement.PointTag = record.tagName();
                        measurement.SignalReference = record.signalReference();
                        measurement.Description = record.tagDescription();
                        measurement.SignalTypeID = record.signalType();
                        measurement.Internal = true;
                        measurement.Enabled = record.mapped();

                        if (measurement.PointID === 0) {
                            if (measurement.Enabled)
                                addNewPromises.push(dataHub.addNewMeasurement(measurement));
                        }
                        else {
                            addNewPromises.push(dataHub.updateMeasurement(measurement));
                        }
                    });

                    queryPromises.push(queryPromise);
                }
            }

            $(queryPromises).whenAll().done(function () {
                $(addNewPromises).whenAll().done(function () {
                    showInfoMessage("Save complete for device " + viewModel.deviceName() + ".", null, true);

                    // Intialize device after save
                    serviceHub.sendCommand("initialize " + device.Acronym);
                }).fail(function (error) {
                    showErrorMessage("Failed while saving device " + viewModel.deviceName() + " measurements: " + error, null, true);
                });
            }).fail(function (error) {
                showErrorMessage("Failed while saving device " + viewModel.deviceName() + " measurement - could not create new or lookup existing measurement: " + error, null, true);
            });
        }

        function saveDeviceConfiguration(acronym, configuration) {
            return $.ajax({
                url: "/api/ModbusConfig/SaveDeviceConfiguration/" + acronym,
                method: "POST",
                contentType: "application/json; charset=utf-8",
                data: configuration,
                dataType: "json"
            });
        }

        function loadDeviceConfiguration(acronym) {
            return $.ajax({
                url: "/api/ModbusConfig/LoadDeviceConfiguration/" + acronym,
                method: "GET",
                contentType: "application/json; charset=utf-8"
            });
        }

        function getConfigurationCacheFileName(acronym) {
            return $.ajax({
                url: "/api/ModbusConfig/GetConfigurationCacheFileName/" + acronym,
                method: "GET",
                contentType: "application/json; charset=utf-8"
            });
        }

        function getConfigurationCachePath() {
            return $.ajax({
                url: "/api/ModbusConfig/GetConfigurationCachePath",
                method: "GET",
                contentType: "application/json; charset=utf-8"
            });
        }

        function saveDeviceConnection() {
            $("#saveDeviceConnectionDialog").hide();

            if (hubIsConnected) {
                showInfoMessage("Saving device connection and new measurements, please wait...", 5000, true);

                // Query existing device with specified acronym or create a new onw
                dataHub.queryDevice(viewModel.deviceName()).done(function(device) {
                    device.Acronym = viewModel.deviceName();
                    device.HistorianID = viewModel.historianID();
                    device.Name = device.Acronym + " (Modbus)";
                    device.ConnectionString = viewModel.adapterConnectionString();
                    device.Enabled = true;

                    // Save serialized mapping to server to it can be easily modified later
                    saveDeviceConfiguration(device.Acronym, JSON.stringify(viewModel.serializeMapping(), null, 4)).done(function() {
                        dataHub.getModbusProtocolID().done(function(protocolID) {
                            device.ProtocolID = protocolID;

                            if (device.ID === 0) {
                                dataHub.addNewDevice(device).done(function() {
                                    // Get newly added device (gets device ID)
                                    dataHub.queryDevice(device.Acronym).done(function(newDevice) {
                                        // Save device measurement records...
                                        saveDeviceMeasurements(newDevice);
                                    }).fail(function(error) {
                                        showErrorMessage("Failed while querying new device " + viewModel.deviceName() + " - no measurements saved: " + error, null, true);
                                    });
                                }).fail(function(error) {
                                    showErrorMessage("Save failed for new device " + viewModel.deviceName() + ": " + error, null, true);
                                });
                            }
                            else {
                                dataHub.updateDevice(device).done(function() {
                                    // Save device measurement records...
                                    saveDeviceMeasurements(device);
                                }).fail(function(error) {
                                    showErrorMessage("Update failed for existing device " + viewModel.deviceName() + " - no measurements updated: " + error, null, true);
                                });
                            }
                        }).fail(function(error) {
                            showErrorMessage("Save failed for new device " + viewModel.deviceName() + " - could not lookup Modbus protocol ID: " + error, null, true);
                        });
                    }).fail(function(error) {
                        showErrorMessage("Failed to save device " + viewModel.deviceName() + " mapping: " + error, null, true);
                    });
                }).fail(function(error) {
                    showErrorMessage("Save failed for new device " + viewModel.deviceName() + " - could not create new or lookup existing device: " + error, null, true);
                });
            } else {
                showErrorMessage("Cannot save device connection, cannot connect to server.", -1, null, true);
            }
        }

        // Load existing device data
        function loadDeviceConnection(id) {
            if (!hubIsConnected)
                return;

            dataHub.queryDeviceByID(id).done(function(device) {
                viewModel.connectionString(device.ConnectionString);
                viewModel.deviceName(device.Acronym);
                viewModel.exists(true);

                $("#editDeviceName").html("Editing&nbsp;" + device.Acronym);

                // Parse connection string
                const connectionString = new Dictionary(device.ConnectionString.parseKeyValuePairs());

                viewModel.frameFormat(connectionString.get("frameFormat"));
                viewModel.transport(connectionString.get("transport"));
                viewModel.unitID(connectionString.get("unitID"));
                viewModel.pollingRate(connectionString.get("pollingRate"));
                viewModel.interSequenceGroupPollDelay(connectionString.get("interSequenceGroupPollDelay"));

                $("#loadingMappingMessage").show();

                setTimeout(function() {
                    showInfoMessage("Loading existing configuration...");
                    loadDeviceConfiguration(device.Acronym).done(function(mapping) {
                        viewModel.loadSequenceMap(new Blob([mapping], { type : "application/json" }), false);
                        $("#loadMappingFileName").val("");

                        showInfoMessage("Loading existing tag data...");
                        setTimeout(loadTagData, 100);
                    });
                }, 100);
            });
        }

        function loadTagData() {
            if (!hubIsConnected)
                return;

            dataHub.queryDevice(viewModel.deviceName()).done(function(device) {
               if (device.ID < 1)
                   return;

                $("#loadingTagDataMessage").show();

                // Loop through and query measurements
                const sequences = viewModel.readSequences();
                var promises = [];

                for (let i = 0; i < sequences.length; i++) {
                    const sequence = sequences[i];
                    const records = sequence.sequenceRecords();

                    for (let j = 0; j < records.length; j++) {
                        const record = records[j];

                        if (isEmpty(record.signalReference()))
                            continue;

                        // Query existing measurement with specified signal reference
                        promises.push(dataHub.queryMeasurement(record.signalReference()).done(function(measurement) {
                            if (measurement.PointID > 0) {
                                record.tagName(measurement.PointTag);
                                record.tagDescription(measurement.Description);
                                record.signalType(measurement.SignalTypeID);
                                record.mapped(measurement.Enabled);
                            }
                        }));
                    }
                }

                $(promises).whenAll().done(function() {
                    $("#loadingTagDataMessage").hide();
                }).fail(function(error) {
                    showErrorMessage("Failed while loading tag data: " + error, null, true);
                    $("#loadingTagDataMessage").hide();
                });
            });
        }

        function applyTcpConnectionSettings() {
            viewModel.connectionString(String.format("hostName = {0}; port = {1}",
                $("#inputTcpHostName").val(),
                $("#inputTcpPort").val()));

            $('#tcpBuilderDialog').hide();
        }

        function applyUdpConnectionSettings() {
            viewModel.connectionString(String.format("port = {0}; interface = {1}",
                $("#inputUdpPort").val(),
                $("#inputUdpInterface").val()));

            $('#udpBuilderDialog').hide();
        }

        function applySerialConnectionSettings() {
            viewModel.connectionString(String.format("portName = COM{0}; baudRate = {1}; dataBits = {2}; parity = {3}; stopBits = {4}",
                $("#inputSerialPort").val(),
                $("#selectSerialBaudRate").val(),
                $("#inputSerialDataBits").val(),
                $("#selectSerialParity").val(),
                $("#selectSerialStopBits").val()));

            $('#serialBuilderDialog').hide();
        }

        function connectToDevice() {
            $("#connectionStatus").collapse("hide");

            if (hubIsConnected) {
                if (deviceConnected)
                    dataHub.modbusDisconnect();
                else
                    dataHub.modbusConnect($("#inputConnectionString").val());
            } else {
                showErrorMessage("Device is inaccessible, cannot connect to server.", null, true);
            }
        }

        function scrollConnectionStatusWindowToBottom() {
            const connectionStatusWindow = $("#connectionStatusWindow");
            connectionStatusWindow.scrollTop(connectionStatusWindow[0].scrollHeight);
        }

        function processGroupValues(sequence, group, values) {
            const records = sequence.sequenceRecords();

            for (let i = group.start; i <= group.stop; i++) {
                const record = records[i];

                if (record) {
                    if (sequence.dataAsHex())
                        records[i].dataValue(toHex(values[i], 4));
                    else
                        records[i].dataValue(values[i]);
                }
            }
        }

        function getGroupValues(sequence, group, treatAsBool) {
            const values = [];
            const records = sequence.sequenceRecords();

            for (let i = group.start; i <= group.stop; i++) {
                const record = records[i];

                if (record) {
                    let value;

                    if (sequence.dataAsHex())
                        value = parseInt(records[i].dataValue(), 16);
                    else
                        value = parseInt(records[i].dataValue());

                    if (treatAsBool)
                        value = value !== 0;

                    values.push(value);
                }
            }

            return values;
        }

        function processSequenceGroup(sequence, group) {
            if (!deviceConnected || !hubIsConnected)
                return;

            const startAddress = sequence.sequenceRecords()[group.start].address();
            const pointCount = group.stop - group.start + 1;

            switch (group.type) {
                case RecordType.DiscreteInput:
                    dataHub.readDiscreteInputs(startAddress, pointCount).done(function(values) {
                        processGroupValues(sequence, group, values);
                        viewModel.totalReadsAndWrites(viewModel.totalReadsAndWrites() + 1);
                    });
                    break;
                case RecordType.Coil:
                    if (sequence.sequenceType === SequenceType.Read) {
                        dataHub.readCoils(startAddress, pointCount).done(function(values) {
                            processGroupValues(sequence, group, values);
                            viewModel.totalReadsAndWrites(viewModel.totalReadsAndWrites() + 1);
                        });
                    }
                    else {
                        dataHub.writeCoils(startAddress, getGroupValues(sequence, group, true)).done(function() {
                            viewModel.totalReadsAndWrites(viewModel.totalReadsAndWrites() + 1);
                        });
                    }
                    break;
                case RecordType.InputRegister:
                    dataHub.readInputRegisters(startAddress, pointCount).done(function(values) {
                        processGroupValues(sequence, group, values);
                        viewModel.totalReadsAndWrites(viewModel.totalReadsAndWrites() + 1);
                    });
                    break;
                case RecordType.HoldingRegister:
                    if (sequence.sequenceType === SequenceType.Read) {
                        dataHub.readHoldingRegisters(startAddress, pointCount).done(function(values) {
                            processGroupValues(sequence, group, values);
                            viewModel.totalReadsAndWrites(viewModel.totalReadsAndWrites() + 1);
                        });
                    }
                    else {
                        dataHub.writeHoldingRegisters(startAddress, getGroupValues(sequence, group, false)).done(function() {
                            viewModel.totalReadsAndWrites(viewModel.totalReadsAndWrites() + 1);
                        });
                    }
                    break;
                case RecordType.DerivedValue:
                    {
                        const records = sequence.sequenceRecords();
                        
                        for (let i = group.start; i <= group.stop; i++) {
                            const record = records[i];
                            getDerivedValue(sequence, record.address(), record.dataValue);
                        }
                    }
                    break;
            }
        }

        function startSequenceProcessing() {
            if (!deviceConnected || !hubIsConnected)
                return;

            const delay = parseInt(viewModel.interSequenceGroupPollDelay());
            const sequences = viewModel.sequences();
            const count = sequences.length;
            var index = 0;

            var next = function() {
                if (index < count) {
                    const sequence = sequences[index];
                    index++;

                    sequence.sequenceGroups().forEachWithDelay(function(group) {
                        processSequenceGroup(sequence, group);
                    }, delay, function() {
                        // Once values are read, auto-interpret selected record values as type if defined
                        const address = $("#derivedValueExpression" + sequence.domIndex).val();

                        if (notNull(address).length > 0)
                            getDerivedValue(sequence, address, sequence.derivedValue);

                        setTimeout(next, delay);
                    });
                }
                else {
                    setTimeout(startSequenceProcessing, parseInt(viewModel.pollingRate()) - viewModel.totalSequenceGroups() * delay);
                }
            };

            next();
        }

        $(window).resize(function() {
            scrollConnectionStatusWindowToBottom();
        });

        $(window).on("onMessageVisibiltyChanged", function(event) {
            scrollConnectionStatusWindowToBottom();
        });

        $(window).on("hubConnected", function(event) {
            if (deviceID > 0) {
                loadDeviceConnection(deviceID);
                deviceID = 0;
            }

            const instanceNameSelect = $("#instanceName");

            // Load available historian instance names, if not already loaded
            if (instanceNameSelect.children("option").length === 0) {
                dataHub.getInstanceNames().done(function (names) {
                    instanceNameSelect.append($("<option>", { value: null, text: 'Do Not Archive' }));

                    for (let i = 0; i < names.length; i++) {
                        const value = names[i];
                        instanceNameSelect.append($("<option>", { value: value, text: value }));
                    }

                    // Select last value
                    var lastInstanceName = Cookies.get("instanceName");

                    if (lastInstanceName === undefined) {
                        // Assume name of PPA as default, if defined
                        if (names.indexOf("PPA") !== -1)
                            lastInstanceName = "PPA";
                        // Otherwise select first available historian
                        else if (names.length > 1)
                            lastInstanceName = instanceNameSelect.eq(1).val();
                    }

                    if (!isEmpty(lastInstanceName))
                        instanceNameSelect.val(lastInstanceName);

                    setTimeout(function () {
                        viewModel.instanceName(lastInstanceName);
                    }, 200);
                });
            }
        });

        $(window).on("hubDisconnected", function(event) {
            if (deviceConnected) {
                dataHubClient.connectionStatusUpdate("Connection to server was terminated, device disconnected.", "red");
                dataHubClient.connectionFailed();
            }
        });

        $(window).on("beforeHubConnected", function(event) {
            dataHubClient.connectionStatusUpdate = function(message, color) {
                // Html encode message
                const encodedMessage = $("<div />").text(message).html();
                const connectionStatusWindow = $("#connectionStatusWindow");

                connectionStatusWindow.append("<span style='color: " + color + "'>" + encodedMessage + "</span><br/>");

                if (connectionStatusWindow[0].childElementCount > 50)
                    connectionStatusWindow.find(":first-child").remove();

                scrollConnectionStatusWindowToBottom();
            }

            dataHubClient.attemptingConnection = function() {
                $("#notConnected").hide();
                $("#connected").hide();
                $("#attemptingConnection").show();
            }

            dataHubClient.connectionSucceeded = function() {
                $("#notConnected").hide();
                $("#attemptingConnection").hide();
                $("#connected").show();

                deviceConnected = true;
                $("#connectButtonLabel").text("Disconnect");
                viewModel.totalReadsAndWrites(0);
                expandAllSequences();
                startSequenceProcessing();
            }

            dataHubClient.connectionFailed = function() {
                $("#attemptingConnection").hide();
                $("#connected").hide();
                $("#notConnected").show();
                $("#connectionStatus").collapse("show");

                deviceConnected = false;
                $("#connectButtonLabel").text("Connect");
            }

            dataHubClient.connectionTerminated = function() {
                $("#attemptingConnection").hide();
                $("#connected").hide();
                $("#notConnected").show();

                deviceConnected = false;
                $("#connectButtonLabel").text("Connect");
            }
        });

        $(function() {
            $("#pageHeader").css("margin-bottom", "-20px");

            viewModel.setReorderSequencePanels(reorderSequencePanels);
            viewModel.setLoadMappingComplete(loadMappingComplete);

            ko.validation.rules.pattern.message = "Invalid";

            ko.validation.init({
                registerExtenders: true,
                messagesOnModified: true,
                insertMessages: true,
                parseInputAttributes: true,
                allowHtmlMessages: true,
                messageTemplate: null,
                decorateElement: true,
                errorElementClass: "has-error",
                errorMessageClass: "help-block",
                grouping: { deep: true, observable: true, live: true }
            }, true);

            ko.bindingHandlers.applyVerticalText = {
                init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
                    $(element).text(ko.unwrap(valueAccessor()));
                },
                update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
                    // Adjust element height and width if element is visible
                    if (element.offsetParent !== null) {
                        element.style.height = element.offsetWidth + "px";
                        element.style.width = element.offsetHeight + "px";
                    }

                    $(element).text(ko.unwrap(valueAccessor()));

                    const length = $(element).text().length;

                    if (length === 2)
                        $(element).css("margin-top", "10px");

                    if (length > 2)
                        $(element).css("margin-top", "14px");
                }
            };

            ko.options.deferUpdates = true;

            // Initialize primary view model
            ko.applyBindings(viewModel, document.getElementsByTagName("body")[0]);

            ko.watch(viewModel.sequences, { depth: 10 }, function(parents, child, item) {
                viewModel.isDirty(true);
            });

            // Initialize jQuery based sequence reordering
            $("#sequencePanels").sortable({
                handle: ".panel-heading",
                update: reorderSequencePanels
            });

            // Setup save mapping file name dialog functionality
            $("#saveMappingFile").click(function() {
                $("#saveMappingFileNameDialog").hide();

                var fileName = $("#inputMappingFileName").val();

                if (!fileName.endsWith(".json"))
                    fileName += ".json";

                viewModel.saveSequenceMap(fileName);
            });

            // Make enter key auto-click save
            $("#inputMappingFileName").keyup(function(event) {
                if (event.keyCode === 13)
                    $("#saveMappingFile").click();
            });

            // Auto-select all text on focus
            $("#inputMappingFileName").focus(function() {
                $(this).select();
            });

            // Prevent default form submission when user presses enter
            $("#saveMappingFileNameDialog").submit(function() {
                return false;
            });

            // Auto-hide pop-up form when user clicks outside form area
            $("#saveMappingFileNameDialog").focusout(function() {
                if (!$("#saveMappingFileNameDialog").is(":hover") && !$("#showSaveMappingFileNameDialog").is(":hover"))
                    $("#saveMappingFileNameDialog").hide();
            });

            $("#connectionStatus").on("shown.bs.collapse", function() {
                scrollConnectionStatusWindowToBottom();
            });

            $("#tcpBuilderDialog").modal({
                show: false,
                backdrop: "static",
                keyboard: false
            });

            $("#udpBuilderDialog").modal({
                show: false,
                backdrop: "static",
                keyboard: false
            });

            $("#serialBuilderDialog").modal({
                show: false,
                backdrop: "static",
                keyboard: false
            });

            $("#saveDeviceConnectionDialog").modal({
                show: false,
                backdrop: "static",
                keyboard: false
            });

            $("#inputTcpHostName").focus(function() {
                $(this).select();
            });

            $("#inputTcpPort").focus(function() {
                $(this).select();
            });

            $("#inputUdpPort").focus(function() {
                $(this).select();
            });

            $("#inputUdpInterface").focus(function() {
                $(this).select();
            });

            $("#inputSerialPort").focus(function() {
                $(this).select();
            });

            $("#inputSerialDataBits").focus(function() {
                $(this).select();
            });

            $("#inputDeviceName").focus(function() {
                $(this).select();
            });
        });
    </script>
}
<h3>
Modbus Configuration Map Builder
<span class="form-inline pull-right clearfix" style="margin-top: -25px; padding-left: 15px;">
    <small>
        Instance:<br/><select class="form-control" id="instanceName" data-bind="value: instanceName; valueAllowUnset: true" style="border: 0; width: 140px"></select>
    </small>
</span>
<span class="label label-info" id="editDeviceName"></span>
@if (!ViewBag.HideLogo) { <img class="page-logo pull-right" src="@ViewBag.ModbusLogo" /> }
</h3>
@* Connection Settings and Status Panel *@
<div class="panel panel-primary">
    <div class="panel-heading clearfix">
        <label>
            Modbus&nbsp;Device Connection&nbsp;Settings
        </label>
        <div class="pull-right">
            <span id="notConnected">Not&nbsp;Connected&nbsp;&nbsp;<span class="glyphicon glyphicon-ban-circle" style="color: #FF003B;"></span></span>&nbsp;&nbsp;
            <span id="attemptingConnection" style="display: none">Attempting&nbsp;Connection&nbsp;&nbsp;<span class="glyphicon glyphicon-refresh glyphicon-spin" style="color: yellow"></span></span>&nbsp;&nbsp;
            <span id="connected" style="display: none">Connected&nbsp;&nbsp;<span class="glyphicon glyphicon-check" style="color: chartreuse"></span></span>
            <button type="button" class="btn btn-xs btn-collapsable" data-toggle="collapse" data-target="#connectionSettings"></button>
        </div>
    </div>
    <div class="panel-body collapse in" id="connectionSettings">
        <form class="form-hortizontal" role="form">
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label top-padding text-right text-nowrap" for="selectFrameFormat">Frame Format:</label>
                    <div class="col-md-2">
                        <select class="form-control" id="selectFrameFormat" data-bind="value: frameFormat">
                            <option value="RTU">RTU</option>
                            <option value="ASCII">ASCII</option>
                            <option value="TCP">TCP</option>
                        </select>
                    </div>
                    <label class="col-md-2 control-label top-padding text-right text-nowrap" for="selectTransport">Transport:</label>
                    <div class="col-md-2">
                        <select class="form-control" id="selectTransport" data-bind="value: transport">
                            <option value="TCP" data-bind="attr: { 'disabled': frameFormat() != 'TCP' }">TCP</option>
                            <option value="UDP" data-bind="attr: { 'disabled': frameFormat() != 'TCP' }">UDP</option>
                            <option value="SERIAL" data-bind="attr: { 'disabled': frameFormat() == 'TCP' }">Serial</option>
                        </select>
                    </div>
                </div>
                <div class="form-group" style="padding-top: 0; margin-top: -15px;" data-bind="validationElement: unitID">
                    <label class="col-md-2 control-label top-padding text-right text-nowrap" for="inputUnitID">Unit ID:</label>
                    <div class="col-md-2">
                        <input type="number" class="form-control" id="inputUnitID" data-bind="integer, textInput: unitID">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label top-padding text-right text-nowrap" for="inputConnectionString">Connection String:</label>
                    <div class="col-md-10">
                        <div class="input-group">
                            <input type="text" class="form-control" id="inputConnectionString" data-bind="textInput: connectionString">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" onclick="showConnectionBuilderDialog()"><span class="glyphicon glyphicon-edit glyphicon-action-button"></span> Build...</button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group" data-bind="validationElement: pollingRate, css: { 'has-warning': pollingRateWarning }">
                    <label class="col-md-2 control-label top-padding text-right text-nowrap" for="inputPollingRate">Polling Rate:</label>
                    <div class="col-md-2">
                        <div class="input-group">
                            <input type="number" class="form-control" placeholder="Polling rate..." id="inputPollingRate" data-bind="integer, textInput: pollingRate" required>
                            <span class="input-group-addon">ms</span>
                        </div>
                    </div>
                </div>
                <div class="form-group" style="padding-top: 0; margin-top: -15px;" data-bind="validationElement: interSequenceGroupPollDelay">
                    <label class="col-md-2 control-label text-right" for="inputInterSequenceGroupDelay">Inter&nbsp;Sequence Group&nbsp;Poll&nbsp;Delay:</label>
                    <div class="col-md-2">
                        <div class="input-group">
                            <input type="number" class="form-control" placeholder="Poll delay..." id="inputInterSequenceGroupDelay" data-bind="integer, textInput: interSequenceGroupPollDelay" required>
                            <span class="input-group-addon">ms</span>
                        </div>
                    </div>
                    <div class="col-md-4 top-padding">
                        <button type="button" class="btn btn-primary pull-right" style="margin-left: 5px" onclick="connectToDevice()" title="Connect to Device" hub-dependent><span class="glyphicon glyphicon-transfer" style="vertical-align: text-top"></span> <strong id="connectButtonLabel">Connect</strong>&nbsp;</button>
                        <button type="button" class="btn btn-default pull-right" onclick="showSaveDeviceConnectionDialog()" title="Define Tags from Sequence Mapping and Add New Device Connection" @(userIsEditor ? "" : "disabled") hub-dependent><span class="glyphicon glyphicon-link glyphicon-action-button"></span> @(deviceID == 0 ? "Add" : "Save")&nbsp;Device</button>
                    </div>
                </div>
            </div>
        </form>
        <div class="panel panel-default">
            <div class="panel-heading" style="height: 30px; padding-top: 5px">
                <label>Connection&nbsp;Status</label>
                <button type="button" class="btn btn-xs btn-collapsable collapsed" style="top: 0; right: -10px" data-toggle="collapse" data-target="#connectionStatus"></button>
            </div>
            <div class="panel-body collapse" style="padding: 2px" id="connectionStatus">
                <pre id="connectionStatusWindow" class="small connection-status" style="height: 150px"></pre>
            </div>
        </div>
    </div>
</div>
@* Primary Buttons Panel *@
<div class="panel panel-default">
    <div class="panel-body clearfix" style="padding-top: 5px; padding-bottom: 10px">
        <button type="button" class="btn btn-default top-margin" style="margin-left: -5px" title="Add New Modbus Read Sequence to Current Mapping" data-bind="click: addNewSequence.bind($data, SequenceType.Read, true)"><span class="glyphicon glyphicon-plus-sign glyphicon-action-button"></span> Read Sequence</button>
        <button type="button" class="btn btn-default top-margin" title="Add New Modbus Write Sequence to Current Mapping" data-bind="click: addNewSequence.bind($data, SequenceType.Write, true)"><span class="glyphicon glyphicon-plus-sign glyphicon-action-button"></span> Write Sequence</button>
        <div class="top-padding pull-right">
            <button type="button" class="btn btn-default" title="Create a New Modbus Sequence Mapping" onclick="createNewMappingFile()"><span class="glyphicon glyphicon-circle-arrow-down glyphicon-action-button"></span> New Mapping</button>
            <button type="button" class="btn btn-default" title="Load Existing Modbus Sequence Mapping" onclick="showLoadMappingFileNameDialog(false)"><span class="glyphicon glyphicon-floppy-open glyphicon-action-button"></span> Load Mapping</button>
            <input id="loadMappingFileName" type="file" accept="text/json" style="position: fixed; top: -100em" onchange="loadMappingFile(event)" multiple>
            <button type="button" class="btn btn-default" title="Save Current Modbus Sequence Mapping" onclick="showSaveMappingFileNameDialog()" id="showSaveMappingFileNameDialog" data-bind="enable: isDirty"><span class="glyphicon glyphicon-floppy-save glyphicon-action-button"></span> Save Mapping</button>
            <div class="well well-sm floating-form" id="saveMappingFileNameDialog" style="z-index: 1000">
                <form class="form-inline" role="form">
                    <div class="form-group form-group-sm">
                        <button type="button" class="close" onclick="$('#saveMappingFileNameDialog').hide()" style="margin-top: -13px; margin-left: 8px">&times;</button>
                        <label for="inputMappingFileName">Mapping file name:</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="inputMappingFileName" placeholder="File name..." />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default btn-sm" id="saveMappingFile" style="margin-right: -3px; font-weight: bold">Save</button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
            <a href="#" id="saveMappingFileLink" target="_blank" style="display: none"></a>
            <button type="button" class="btn btn-default" style="margin-right: -5px" title="Load Modbus Sequence Mapping and Append to Current Mapping" onclick="showLoadMappingFileNameDialog(true)"><span class="glyphicon glyphicon-import glyphicon-action-button"></span> Append Mapping</button>
        </div>
    </div>
</div>
<div id="loadingMappingMessage" class="top-margin bottom-margin clearfix" style="display: none">
    <div class="pull-right" style="font-weight: bold">
        Loading&nbsp;&nbsp;<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
    </div>
</div>
@* Reorderable Mapping Sequences Panel *@
<button type="button" class="btn btn-xs btn-collapsable" onclick="collapseAllSequences()" title="Collapse All Sequences" style="top: 3px; right: 0"></button>
<button type="button" class="btn btn-xs btn-collapsable collapsed" onclick="expandAllSequences()" title="Expand All Sequences" style="top: 3px; right: 2px; margin-left: 5px"></button>
<hr class="thick-spacer" />
<div class="warning-message" data-bind="visible: pollingRateWarning">Warning: minimum total read time for all sequence groups exceeds defined polling rate.</div>
<div class="sequence-records-message">Total Sequences: <span data-bind="text: sequences().length"></span> <span style="padding-left: 25px">Total Sequence Groups: <span data-bind="text: totalSequenceGroups()"></span></span><span style="padding-left: 25px">Minimum Total Read Time: <span data-bind="text: totalSequenceGroups() * interSequenceGroupPollDelay(), style: { 'color': pollingRateWarning() ? 'red' : undefined }"></span> ms</span><span style="padding-left: 25px">Total Reads/Writes: <span data-bind="text: totalReadsAndWrites"></span></span></div>
<ul id="sequencePanels" class="list-unstyled" data-bind="foreach: { data: sequences, afterRender: postSequenceRendering }">
    <li class="panel" data-bind="css: { '@ReadSequencePanelType': sequenceType === SequenceType.Read, '@WriteSequencePanelType': sequenceType === SequenceType.Write }">
        <div class="panel-heading clearfix">
            <form class="form-inline form-inline-sequence" role="form">
                <div class="form-group" data-bind="css: {'has-error': isEmpty(sequenceName()), 'has-feedback': isEmpty(sequenceName())}">
                    <label data-bind="attr: { 'for': 'sequenceName' + domIndex }">
                        <a class="move-sequence-up" title="Move Sequence Order Up" onclick="moveSequenceUp(this)"><span class="glyphicon glyphicon-menu-up"></span></a>
                        <span class="badge"></span>&nbsp;&nbsp;<span data-bind="text: sequenceTypeDescription"></span> Sequence:<br/>
                        <span class="sequence-record-count"><span data-bind="text: 'Record&nbsp;Count:&nbsp;' + sequenceRecords().length"></span></span>
                        <a class="move-sequence-down" title="Move Sequence Order Down" onclick="moveSequenceDown(this)"><span class="glyphicon glyphicon-menu-down"></span></a>
                    </label>
                    <input type="text" class="form-control sequence-name" style="padding-right: 0" placeholder="Sequence name..." data-bind="textInput: sequenceName, attr: { 'id': 'sequenceName' + domIndex }">
                </div>
                <div class="form-group pull-right">
                    <button type="button" class="btn btn-default" title="Add New Modbus Discrete Input Record to Sequence" data-bind="click: addSequenceRecord.bind($data, $data, RecordType.DiscreteInput), visible: sequenceType === SequenceType.Read"><span class="glyphicon glyphicon-plus-sign glyphicon-action-button"></span> Discrete Input</button>
                    <button type="button" class="btn btn-default" title="Add New Modbus Coil Record to Sequence" data-bind="click: addSequenceRecord.bind($data, $data, RecordType.Coil)"><span class="glyphicon glyphicon-plus-sign glyphicon-action-button"></span> Coil</button>
                    <button type="button" class="btn btn-default" title="Add New Modbus Input Register Record to Sequence" data-bind="click: addSequenceRecord.bind($data, $data, RecordType.InputRegister), visible: sequenceType === SequenceType.Read"><span class="glyphicon glyphicon-plus-sign glyphicon-action-button"></span> Input Register</button>
                    <button type="button" class="btn btn-default" title="Add New Modbus Holding Register Record to Sequence" data-bind="click: addSequenceRecord.bind($data, $data, RecordType.HoldingRegister)"><span class="glyphicon glyphicon-plus-sign glyphicon-action-button"></span> Holding Register</button>
                    &nbsp;
                    <button type="button" class="btn btn-default" style="margin-right: -10px" title="Delete Sequence" data-bind="click: $root.removeSequence.bind($data)"><span class="glyphicon glyphicon-remove-circle glyphicon-delete-sequence"></span></button>
                    <button type="button" class="btn btn-xs btn-collapsable" data-toggle="collapse" data-bind="css: { 'collapsed': !expanded() }, attr: { 'data-target': '#sequenceContent' + domIndex }"></button>
                    @*<span class="model-index" data-bind="text: index"></span>*@
                </div>
            </form>
        </div>
        <div class="collapse" data-bind="css: { 'in': expanded }, attr: { 'id': 'sequenceContent' + domIndex }">
            <div class="panel-body" data-bind="css: { 'warning-border': groupLengthWarning }">
                <button type="button" class="btn btn-default btn-xs pull-right" style="margin-top: -10px; margin-right: -10px" title="Resort Sequence Records" data-bind="click: refreshSequenceRecords.bind($data)"><span class="glyphicon glyphicon-sort-by-attributes"></span></button>
                <div class="warning-message" data-bind="visible: groupLengthWarning">Warning: devices may not respond to reading or writing more than 100 registers in a single sequence group.</div>
                <div class="sequence-records-message">Sequence Groups: <span data-bind="text: sequenceGroups().length"></span><span style="padding-left: 25px">Minimum Read Time: <span data-bind="text: sequenceGroups().length * $parent.interSequenceGroupPollDelay()"></span> ms</span></div>
                <div class="table-responsive">
                    <table class="table table-hover table-striped table-condensed">
                        <thead>
                            <tr>
                                <th style="text-align: center">Type</th>
                                <th data-bind="if: sequenceType === SequenceType.Read"></th>
                                <th>Address</th>
                                <th>Description</th>
                                <th nowrap><span data-bind="text: sequenceType === SequenceType.Read ? 'Current Value' : 'Value'"></span>&nbsp;&nbsp;&nbsp;<label data-bind="attr: { 'for': 'dataAsHex' + domIndex }"><input type="checkbox" style="vertical-align: top" data-bind="checked: dataAsHex, attr: { 'id': 'dataAsHex' + domIndex }" />&nbsp;Hex</label></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: { data: sequenceRecords, afterRender: postRecordRendering }">
                            <tr style="cursor: move" data-bind="style: { backgroundColor:  isDuplicate() ? 'yellow' : undefined }">
                                <td style="text-align: center; vertical-align: middle" width="5%" data-bind="style: groupBorders()"><div data-bind="if: isGroupFirst"><span class="sequence-group-count" data-bind="applyVerticalText: groupCount"></span></div><span data-bind="text: getRecordTypeCode(recordType())"></span></td>
                                <td style="text-align: center; vertical-align: middle" width="5%" data-bind="if: $parent.sequenceType === SequenceType.Read">
                                    <input type="checkbox" draggable="true" style="cursor: copy" title="Drag check box to copy checked state across multiple rows..." data-bind="checked: selected, visible: recordType() === RecordType.InputRegister || recordType() === RecordType.HoldingRegister, enable: !isEmpty(address()), attr: { 'onclick': 'selectedSequenceRecordsChanged(' + $parent.domIndex + ', ' + $index() + ')' }">
                                </td>
                                <td width="20%">
                                    <div class="form-group" style="padding: 0; margin: 0" data-bind="validationElement: address, css: checkValidation()">
                                        <input class="form-control" data-bind="textInput: address, attr: { 'type': recordType() == RecordType.DerivedValue ? 'text' : 'number', 'placeholder': recordType() == RecordType.DerivedValue ? undefined : 'Number...' }" required>
                                    </div>
                                </td>
                                <td data-bind="attr: { 'width': $parent.sequenceType === SequenceType.Read ? '45%' : '50%' }">
                                    <input type="text" class="form-control" placeholder="Description..." data-bind="textInput: description">
                                </td>
                                <td width="20%">
                                    <div class="form-group" style="padding: 0; margin: 0">
                                        <span data-bind="if: $parent.sequenceType === SequenceType.Write"><input type="text" class="form-control" placeholder="New value..." data-bind="textInput: dataValue"></span>
                                        <span data-bind="if: $parent.sequenceType === SequenceType.Read"><input type="text" class="form-control" data-bind="value: dataValue" readonly></span>
                                    </div>
                                </td>
                                <td style="text-align: center" width="5%">
                                    <button type="button" class="btn btn-default" title="Delete Sequence Record" data-bind="click: $parent.removeSequenceRecord"><span class="glyphicon glyphicon-remove-circle glyphicon-delete-sequence"></span></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="panel-footer" style="padding-top: 10px; padding-bottom: 1px" data-bind="if: sequenceType === SequenceType.Read">
                <span class="text-nowrap" style="margin-left: 5px; font-style: italic"><span data-bind="text: selectedRecordCount"></span> selected, interpret as:</span>
                <div class="form-group">
                    <span class="glyphicon glyphicon-menu-left glyphicon-interpret-type"></span>
                    <label class="radio-inline text-nowrap" data-bind="css: { disabled: selectedRecordCount() === 0 }"><input type="radio" data-bind="attr: { 'name': 'interpretAs' + domIndex, 'onclick': 'interpretAsSelectionChanged(' + domIndex + ')' }, enable: selectedRecordCount() > 0">String</label>
                    <label class="radio-inline text-nowrap" data-bind="css: { disabled: selectedRecordCount() !== 2 }"><input type="radio" data-bind="attr: { 'name': 'interpretAs' + domIndex, 'onclick': 'interpretAsSelectionChanged(' + domIndex + ')' }, enable: selectedRecordCount() === 2">Single</label>
                    <label class="radio-inline text-nowrap" data-bind="css: { disabled: selectedRecordCount() !== 4 }"><input type="radio" data-bind="attr: { 'name': 'interpretAs' + domIndex, 'onclick': 'interpretAsSelectionChanged(' + domIndex + ')' }, enable: selectedRecordCount() === 4">Double</label>
                    <label class="radio-inline text-nowrap" data-bind="css: { disabled: selectedRecordCount() !== 2 }"><input type="radio" data-bind="attr: { 'name': 'interpretAs' + domIndex, 'onclick': 'interpretAsSelectionChanged(' + domIndex + ')' }, enable: selectedRecordCount() === 2">Int32</label>
                    <label class="radio-inline text-nowrap" data-bind="css: { disabled: selectedRecordCount() !== 2 }"><input type="radio" data-bind="attr: { 'name': 'interpretAs' + domIndex, 'onclick': 'interpretAsSelectionChanged(' + domIndex + ')' }, enable: selectedRecordCount() === 2">UInt32</label>
                    <label class="radio-inline text-nowrap" data-bind="css: { disabled: selectedRecordCount() !== 4 }"><input type="radio" data-bind="attr: { 'name': 'interpretAs' + domIndex, 'onclick': 'interpretAsSelectionChanged(' + domIndex + ')' }, enable: selectedRecordCount() === 4">Int64</label>
                    <label class="radio-inline text-nowrap" data-bind="css: { disabled: selectedRecordCount() !== 4 }"><input type="radio" data-bind="attr: { 'name': 'interpretAs' + domIndex, 'onclick': 'interpretAsSelectionChanged(' + domIndex + ')' }, enable: selectedRecordCount() === 4">UInt64</label>
                    <span class="text-nowrap">
                        <span class="glyphicon glyphicon-menu-right glyphicon-interpret-type"></span>
                        <span class="glyphicon glyphicon-upload glyphicon-rotate-90 glyphicon-interpret-result"></span>
                    </span>
                    &nbsp;&nbsp;
                </div>
                <form class="form-inline form-inline-sequence" role="form">
                    <div class="form-group">
                        <input type="text" class="form-control" data-bind="textInput: getDerivedValueAddressExpression($data), attr: { 'id': 'derivedValueExpression' + domIndex }" />
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Interpreted value..." data-bind="value: derivedValue" readonly />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" title="Add Derived Value as a New Record in Sequence" data-bind="click: addSequenceRecord.bind($data, $data, RecordType.DerivedValue), enable: canAddDerivedValue()"><span class="glyphicon glyphicon-plus-sign glyphicon-action-button"></span> Derived Value</button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </li>
</ul>
@* JSON Sequences Display Panel *@
<hr class="thick-spacer" data-bind="visible: sequences().length > 0" />
<div class="panel panel-default">
    <div class="panel-heading" style="height: 30px; padding-top: 5px">
        <label>Serialized&nbsp;Sequences</label>
        <button type="button" class="btn btn-xs btn-collapsable collapsed" style="top: 0; right: -10px" data-toggle="collapse" data-target="#serializedSequences"></button>
    </div>
    <div class="panel-body collapse" style="padding: 2px; margin-bottom: -10px" id="serializedSequences">
        <pre data-bind="text: JSON.stringify(serializeMapping(), null, 4)"></pre>
    </div>
</div>
@* TCP Connection String Builder *@
<div id="tcpBuilderDialog" class="modal" role="dialog">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="$('#tcpBuilderDialog').hide()">&times;</button>
                <h4 class="modal-title">Define TCP Connection Parameters</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group" data-bind="validationElement: hostName">
                        <label for="inputTcpHostName">Host Name or IP:</label>
                        <input type="text" class="form-control" id="inputTcpHostName" maxlength="200" size="200" data-bind="textInput: hostName">
                    </div>
                    <div class="form-group" data-bind="validationElement: ipPort">
                        <label for="inputTcpPort">Port:</label>
                        <input type="number" class="form-control" id="inputTcpPort" maxlength="5" size="5" data-bind="integer, textInput: ipPort">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" onclick="applyTcpConnectionSettings()">Save</button>
                <button type="button" class="btn btn-default" onclick="$('#tcpBuilderDialog').hide()">Cancel</button>
            </div>
        </div>
    </div>
</div>
@* UDP Connection String Builder *@
<div id="udpBuilderDialog" class="modal" role="dialog">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="$('#udpBuilderDialog').hide()">&times;</button>
                <h4 class="modal-title">Define UDP Connection Parameters</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group" data-bind="validationElement: ipPort">
                        <label for="inputUdpPort">Port:</label>
                        <input type="number" class="form-control" id="inputUdpPort" maxlength="5" size="5" data-bind="integer, textInput: ipPort">
                    </div>
                    <div class="form-group" data-bind="validationElement: interface">
                        <label for="inputUdpInterface">Interface IP:</label>
                        <input type="text" class="form-control" id="inputUdpInterface" maxlength="200" size="200" data-bind="textInput: interface">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" onclick="applyUdpConnectionSettings()">Save</button>
                <button type="button" class="btn btn-default" onclick="$('#udpBuilderDialog').hide()">Cancel</button>
            </div>
        </div>
    </div>
</div>
@* Serial Connection String Builder *@
<div id="serialBuilderDialog" class="modal" role="dialog">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="$('#serialBuilderDialog').hide()">&times;</button>
                <h4 class="modal-title">Define Serial Connection Parameters</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group" data-bind="validationElement: comPort">
                        <label for="inputSerialPort">Port:</label>
                        <div class="input-group">
                            <span class="input-group-addon">COM</span>
                            <input type="number" class="form-control" id="inputSerialPort" maxlength="5" size="5" data-bind="integer, textInput: comPort">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="selectSerialBaudRate">Baud Rate:</label>
                        <select class="form-control" id="selectSerialBaudRate">
                            <option value="115200">115200</option>
                            <option value="57600" selected>57600</option>
                            <option value="38400">38400</option>
                            <option value="19200">19200</option>
                            <option value="9600">9600</option>
                            <option value="4800">4800</option>
                            <option value="2400">2400</option>
                            <option value="1200">1200</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="selectSerialParity">Parity:</label>
                        <select class="form-control" id="selectSerialParity">
                            <option value="None" selected>None</option>
                            <option value="Odd">Odd</option>
                            <option value="Even">Even</option>
                            <option value="Mark">Mark</option>
                            <option value="Space">Space</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="selectSerialStopBits">Stop Bits:</label>
                        <select class="form-control" id="selectSerialStopBits">
                            <option value="One" selected>One</option>
                            <option value="Two">Two</option>
                            <option value="OnePointFive">OnePointFive</option>
                        </select>
                    </div>
                    <div class="form-group" data-bind="validationElement: dataBits">
                        <label for="inputSerialDataBits">Data Bits:</label>
                        <input type="number" class="form-control" id="inputSerialDataBits" maxlength="200" size="200" data-bind="integer, textInput: dataBits">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" onclick="applySerialConnectionSettings()">Save</button>
                <button type="button" class="btn btn-default" onclick="$('#serialBuilderDialog').hide()">Cancel</button>
            </div>
        </div>
    </div>
</div>
@* Save Device Connection Dialog *@
<div id="saveDeviceConnectionDialog" class="modal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="$('#saveDeviceConnectionDialog').hide()">&times;</button>
                <h4 class="modal-title">Save Device Connection</h4>
            </div>
            <div class="modal-body" style="max-height: calc(100vh - 212px); overflow-y: auto;">
                <form role="form">
                    <div class="form-group" data-bind="validationElement: deviceName">
                        <label for="inputDeviceName">
                            Device Name:
                            @if (deviceID == 0)
                            {
                                <span class="pull-right" style="margin-top: -1px" data-bind="visible: exists">&nbsp;&nbsp;<button type="button" class="btn btn-xs" onclick="loadTagData()"><b>Load Tag Data</b></button></span><span class="pull-right" data-bind="visible: exists">&nbsp;&nbsp;&nbsp;&nbsp;<i>Device already exists</i></span>
                            }
                        </label>
                        <input type="text" class="form-control" id="inputDeviceName" maxlength="200" size="15" data-bind="textInput: deviceName, css: { 'exists': exists }">
                    </div>
                    <div id="loadingTagDataMessage" class="top-margin bottom-margin clearfix" style="display: none">
                        <div class="pull-right" style="font-weight: bold">
                            Loading&nbsp;&nbsp;<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
                        </div>
                    </div>
                    <div class="form-group" data-bind="validationElement: adapterConnectionString">
                        <label for="textConnectionString">Connection String:</label>
                        <textarea class="form-control" id="textConnectionString" rows="4" data-bind="textInput: adapterConnectionString"></textarea>
                    </div>
                </form>
                <button type="button" class="btn btn-xs btn-collapsable" onclick="collapseAllSequences('deviceConnectionSequences')" title="Collapse All Sequences" style="top: -6px; right: 0"></button>
                <button type="button" class="btn btn-xs btn-collapsable collapsed" onclick="expandAllSequences('deviceConnectionSequences')" title="Expand All Sequences" style="top: -6px; right: 2px; margin-left: 5px"></button>
                <hr class="thick-spacer" />
                <label for="deviceConnectionSequences" style="margin-bottom: 0">Define Device Tags:</label>
                <ul class="list-unstyled" data-bind="foreach: readSequences()" id="deviceConnectionSequences">
                    <li class="panel @ReadSequencePanelType">
                        <div class="panel-heading clearfix" style="padding-bottom: 0">
                            <strong><span data-bind="text: sequenceName"></span></strong>
                            <div class="form-group pull-right" style="padding: 0">
                                <button type="button" class="btn btn-xs btn-collapsable" data-toggle="collapse" data-bind="attr: { 'data-target': '#deviceConnectionSequenceContent' + domIndex }"></button>
                            </div>
                        </div>
                        <div class="collapse in" data-bind="attr: { 'id': 'deviceConnectionSequenceContent' + domIndex }">
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table table-hover table-striped table-condensed">
                                        <thead>
                                            <tr>
                                                <th style="text-align: center">Type</th>
                                                <th></th>
                                                <th>Tag&nbsp;Name</th>
                                                <th>Signal&nbsp;Type</th>
                                                <th style="text-align: center">Address</th>
                                                <th>Description</th>
                                            </tr>
                                        </thead>
                                        <tbody data-bind="foreach: sequenceRecords">
                                            <tr style="cursor: move" data-bind="style: { backgroundColor:  isDuplicate() ? 'yellow' : undefined }">
                                                <td style="text-align: center; vertical-align: middle" width="5%" data-bind="style: groupBorders()">
                                                    <div data-bind="if: isGroupFirst"><span class="sequence-group-count" data-bind="applyVerticalText: groupCount"></span></div>
                                                    <span data-bind="text: getRecordTypeCode(recordType())"></span>
                                                </td>
                                                <td style="text-align: center; vertical-align: middle" width="5%">
                                                    <input type="checkbox" data-bind="checked: mapped, enable: !isEmpty(address())">
                                                </td>
                                                <td style="text-align: center; vertical-align: middle" width="25%">
                                                    <input type="text" class="form-control" data-bind="textInput: tagName, enable: mapped() && !isEmpty(address())">
                                                </td>
                                                <td style="text-align: center; vertical-align: middle" width="25%">
                                                    <select class="form-control" data-bind="value: signalType, valueAllowUnset: false" required>
                                                        @{
                                                            foreach (SignalType record in dataContext.Table<SignalType>().QueryRecords())
                                                            {
                                                                <option value="@record.ID">@(string.Format("{0}: {1}", record.Acronym, record.Name))</option>
                                                            }
                                                        }
                                                    </select>
                                                </td>
                                                <td style="text-align: center; vertical-align: middle" width="10%">
                                                    <span data-bind="text: String(address()).truncate(15), attr: { title: address }"></span>
                                                </td>
                                                <td style="text-align: center; vertical-align: middle" width="30%">
                                                    <input type="text" class="form-control" placeholder="Description..." data-bind="textInput: tagDescription, enable: mapped() && !isEmpty(address())">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveDeviceConnection()" data-bind="enable: deviceConnectionValues.isValid() && totalSequenceGroups() > 0" hub-dependent>Save</button>
                <button type="button" class="btn btn-default" onclick="$('#saveDeviceConnectionDialog').hide()">Cancel</button>
            </div>
        </div>
    </div>
</div>
@{
    ViewBag.StyleSheetsSection = RenderSection("StyleSheets").ToString();
    ViewBag.ScriptsSection = RenderSection("Scripts").ToString();
}