@{
/*********************************************************
 * Node Details Start
 *********************************************************/
 }
    <fieldset data-section-id="ND">
        <legend data-role="request-header">Node Details</legend>        
        <section data-role="field-container" class="field-container">            
            <table class="fill-content">
                <thead>
                    <tr>
                        <th>Place</th>
                        <th>Waypoint Type</th>
                        <th>Km From Origin</th>
                        <th>Sequence</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="nodesDiv" data-bind="foreach: value.Nodes">
                    <tr>
                        <td><span class="rpp"></span></td>
                        <td><select data-bind="options: $root.GetLookupValues('NodeWaypointTypes'), optionsCaption:'Please select a Waypoint Type', optionsText:'Title', optionsValue:'Key', value: WaypointTypeID"></select></td>
                        <td><input type="text" id="DistanceFromOrigin" data-bind="value: DistanceFromOrigin" maxlength="5" /></td>
                        <td><input type="text" id="Sequence" class="number" data-bind="value: Sequence" maxlength="2" /></td>
                        <td><button data-bind="click: $root.RemoveNode.bind($data)">Remove Node</button></td>
                    </tr>
                </tbody>
            </table>
            <button data-bind="click: $root.AddNode" style="float:right;">Add Node</button>
        </section>
    </fieldset>

    <script type="text/javascript">
        $.extend(ViewModel.prototype, {
            /*methods are called from init.cshtml*/
            NDValidate: function (e) {
                var s = this,
                    v = s.value,
                    _v = app.utils.validator,
                    originCount = 0,
                    destinationCount = false;

                if (s.CurrentInstanceStep() <= 2) {
                    $.each(v.Nodes(), function (i, node) {
                        _v.isModelFieldEmpty("value.Nodes()[" + i + "].PlaceID", "Node Details (Node " + (i + 1) + "): Place", e.r);
                        _v.isModelFieldEmpty("value.Nodes()[" + i + "].WaypointTypeID", "Node Details (Node " + (i + 1) + "): Waypoint Type", e.r);
                        _v.isModelFieldEmpty("value.Nodes()[" + i + "].Sequence", "Node Details (Node " + (i + 1) + "): Sequence", e.r);
                        
                        if(node.WaypointTypeID() == 1) {//1	-> Origin
                            originCount += 1;
                        } else if (node.WaypointTypeID() == 4) {//4	-> Destination
                            destinationCount += 1;
                        }
                    });
                    
                    if (originCount != 1) {
                        if (originCount > 1) {
                            e.r.push("Node Details: Route Nodes must include no more than one Origin");
                        } else {
                            e.r.push("Node Details: Route Nodes must include an Origin");
                        }
                    }
                    
                    if (destinationCount != 1) {
                        if (destinationCount > 1) {
                            e.r.push("Node Details: Route Nodes must include no more than one Destination");
                        } else {
                            e.r.push("Node Details: Route Nodes must include an Destination");
                        }
                    }
                }
            },

            NDIsEnabled: function () {
                var s = this;
                return s.CurrentInstanceStep() <= 2;
            },

            NDIsHidden: function () {
                return false;
            },

            NDIsCollapsed: function () {
                return false;
            },

            AddNode: function () {
                var nodeObject = {
                    NewRouteRouteNodeID: -1, 
                    NewRouteRequestDetailID: viewModel.itemID(), 
                    PlaceID: null, 
                    WaypointTypeID: null,
                    DistanceFromOrigin: null,
                    Sequence: viewModel.value.Nodes().length + 1
                };

                var node = ko.mapping.fromJS(nodeObject);
                viewModel.value.Nodes.push(node);

                viewModel.NDSetCustomBindings();
            },

            RemoveNode: function (node) {
                viewModel.value.Nodes.remove(node);

                if (node.NewRouteRouteNodeID() > 0) {
                    viewModel.value.RemovedNodes.push(node);
                }

                viewModel.NDSetCustomBindings();
            },

            NDSetCustomBindings: function () {
                if (viewModel.value.Nodes().length > 0) {
                    $.each($("#nodesDiv tr span.rpp"), function (i, nodeContainerDiv) {
                        var fu = $(nodeContainerDiv);
                        $(fu).attr("data-picker-bind", "modelID: value.Nodes()[" + i + "].PlaceID, template: RoutePlacePicker");

                        widgets.applyPickerBindingsElement(fu, pickerTemplates);
                    });

                    $(".number").numberFormat();
                    $("button").button();
                }
            }
        });
    </script>
@{
/*********************************************************
 * Node Details End
 *********************************************************/
 }