@helper ShowTree(List<FileCabinetContentObject> nodes, double leftPadding)
{
    foreach (var node in nodes.OrderBy(n => n.Ordering))
    {
        <div class="fc-content-obj fc-section">
            <div class="fc-obj-header">
                <span style="padding-left:@(leftPadding)em;">
                    <span id="nodeIcon@(node.Id)" data-filecount="@(node.FileCount)" data-nodetype="@(node.ObjectType)">
                        @switch (node.ObjectType)
                        {
                            case Enumerations.SysObjectType.FileCabinetSection:
                                if (node.FileCount > 0)
                                {
                                    <span class="node-icon">
                                        <img src="~/Content/img/icons/dot-blue.png" height="12" width="12" />
                                    </span>
                                }
                                else
                                {
                                    <span class="node-icon">
                                        <img src="~/Content/img/icons/dot-gray.png" height="12" width="12" />
                                    </span>
                                }
                                break;
                            case Enumerations.SysObjectType.FileCabinetFolder:
                                if (node.FileCount > 0)
                                {
                                    <span class="node-icon">
                                        <img src="~/Content/img/icons/folder-closed-blue.png" height="12" width="14" />
                                    </span>
                                }
                                else
                                {
                                    <span class="node-icon">
                                        <img src="~/Content/img/icons/folder-closed-gray.png" height="12" width="14" />
                                    </span>
                                }
                                break;
                        }
                    </span>
                    @node.Name
                </span>
                @if (node.ObjectType != Enumerations.SysObjectType.FileCabinetDocument &&
                     node.ObjectType != Enumerations.SysObjectType.FileCabinetLinkedRequirement)
                {
                    <span class="filecount">@node.FileCount files</span>
                }

                <select id="nodeOptions@(node.Id)" data-id="@(node.Id)" data-name="@(node.Name)" data-desc="@(node.Description)" class="options">
                    <option value="0">Options</option>
                    <option value="1">Properties</option>
                    @if (node.ObjectType == Enumerations.SysObjectType.FileCabinetSection ||
                        node.ObjectType == Enumerations.SysObjectType.FileCabinetFolder)
                    {
                        <option value="2">New Folder</option>
                        if (node.ObjectType == Enumerations.SysObjectType.FileCabinetFolder)
                        {
                            <option value="3">New Item</option>
                        }
                    }
                    else if (node.ObjectType == Enumerations.SysObjectType.FileCabinetItem)
                    {
                        <option value="4">Upload</option>
                    }
                    else if (node.ObjectType == Enumerations.SysObjectType.FileCabinetDocument ||
                             node.ObjectType == Enumerations.SysObjectType.FileCabinetLinkedRequirement)
                    {
                        <option value="5">Download</option>
                    }
                    <option value="6">Delete</option>
                </select>

                @if (node.Children.Count > 0)
                {
                    <span class="expando" data-id="@node.Id" data-collapsed="yes" style="padding-right:0.5em">@Html.Partial("icon-partials/_icon-right")</span>
                }
            </div>
        </div>
        <div class="subtree" data-parentid="@node.Id" hidden>
            @ShowTree(node.Children, leftPadding + 1.5)
        </div>
    }
}

@section Scripts {
        <script>
        var arrowRight = $("#arrowRight").html();
        var arrowDown = $("#arrowDown").html();
        var iconFolderOpenBlue = $("#iconFolderOpenBlue").html();
        var iconFolderClosedBlue = $("#iconFolderClosedBlue").html();
        var iconFolderOpenGray = $("#iconFolderOpenGray").html();
        var iconFolderClosedGray = $("#iconFolderClosedGray").html();

        $(document).ready(function (e) {
            $('.expando').on("click", function (e) {
                var nodeId = $(this).data("id");
                var collapsed = $(this).attr("data-collapsed");
                var icon = $("#nodeIcon" + nodeId);

                if (icon.data("nodetype") == "@(Enumerations.SysObjectType.FileCabinetFolder.ToString())") {
                    if (icon.data("filecount") > 0) {
                        if (collapsed == "yes")
                            icon.html(iconFolderOpenBlue);
                        else
                            icon.html(iconFolderClosedBlue);
                    }
                    else {
                        if (collapsed == "yes")
                            icon.html(iconFolderOpenGray);
                        else
                            icon.html(iconFolderClosedGray);
                    }
                }

                if (collapsed == "no") {
                    $(this).html(arrowRight);
                    $("div[data-parentid='" + nodeId + "'").attr("hidden", true);
                    $(this).attr("data-collapsed", "yes");
                }
                else {
                    $(this).html(arrowDown);
                    $("div[data-parentid='" + nodeId + "'").attr("hidden", false);
                    $(this).attr("data-collapsed", "no");
                }
            });

            ExpandNodes("@Model.ExpandedNodes");
        });

        function ExpandNodes(nodesToExpand) {
            var nodeIdArray = nodesToExpand.split(",");

            nodeIdArray.forEach(function (nodeId) {
                var node = $(".expando[data-id='" + nodeId + "']")[0];
                //$(node).attr("data-collapsed", "no");
                $(node).click();
            });
        }

        $('.options').on("change", function (e) {
            var selectedOption = $("option:selected", this).text();
            var nodeId = $(this).data("id");
            switch (selectedOption) {
                case "Properties":
                    $("#modal-file-cabinet-object-title").html("Properties");
                    $("#modal-file-cabinet-object-save").attr("data-modaltype", "properties");
                    $("#modal-fco-name").val($(this).data("name"));
                    $("#modal-fco-desc").val($(this).data("desc"));
                    break;
                case "New Folder":
                    $("#modal-file-cabinet-object-title").html("New Folder");
                    $("#modal-file-cabinet-object-save").attr("data-modaltype", "newfolder");
                    $("#modal-file-cabinet-object-save").attr("data-id", $(this).data("id"));
                    $("#modal-fco-name").val("");
                    $("#modal-fco-desc").val("");
                    break;
            }

            $("#modal-file-cabinet-object").modal("show");
            $(this).val(0);
        });

        $("#modal-file-cabinet-object-cancel").on("click", function (e) {
            $("#modal-file-cabinet-object").modal("hide");
        });

        $("#modal-file-cabinet-object-save").on("click", function (e) {
            switch ($(this).attr("data-modaltype")) {
                case "properties":
                    break;
                case "newfolder":
                    $.ajax({
                        type: "POST",
                        url: '/FileCabinet/CreateFileCabinetObject',
                        data: {
                            Name: $("#modal-fco-name").val(),
                            Description: $("#modal-fco-desc").val(),
                            ParentObjectId: $(this).data("id"),
                            ObjectType: @((int)Enumerations.SysObjectType.FileCabinetFolder)
                        },
                        success: function (data) {
                            window.location.assign("@Url.Action("Content", "FileCabinet")?id=" + @Model.Cabinet.Id + "&expandedNodes=" + BuildExpandedNodesString());
                        }
                    });
                    break;
            }
        });

        //Builds a comma-delimited string containing the IDs of all the expanded nodes (will be sent to and returned from server to re-expand on page refresh)
        function BuildExpandedNodesString() {
            var nodesArray = [];
            var expandedNodes = $(".expando[data-collapsed='no']");

            $.each(expandedNodes, function (index, node) {
                nodesArray.push($(node).attr("data-id"));
            });

            return nodesArray.join(",");
        }

        function FileCabinetObjectPropertiesViewModel() {
            var self = this;
            self.editingItem = ko.observable();
            self.parentOfItem;

            self.ShowFor = function (item, parent) {
                self.editingItem(item);
                self.parentOfItem = parent;
                $('#modal-file-cabinet-object').modal('show');
            };

            self.btnSave = function () {
                if (self.editingItem().Id() < 1) {
                    //TODO depperson actually call the DB
                    self.editingItem().Id(Math.round(Math.random()*10000));
                    self.parentOfItem.push(self.editingItem());
                    $('#modal-file-cabinet-object').modal('hide');
                } else {
                    //TODO depperson actually call the DB
                    $('#modal-file-cabinet-object').modal('hide');
                }
            };

            self.btnCancel = function () {
                $('#modal-file-cabinet-object').modal('hide');
            };
        }
	</script>
}