@using EnVisage.Code
@{
    ViewBag.Title = "Projects";
}
@section scripts
{
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "flot-scripts"))
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "prevu-angularservices"))
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "prevu-scenariodetails"))
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "prevu-projectlistpage"))

    <script type="text/javascript">
        var listindex = 0;
        var liHeight = 30;
        var ctr = 0;
        var _evdttbl = null;
        var _pagePreferences = [];
        var _dataSectionName;
        var _scenDetailsUrl = '@Url.Action("Details", "Scenarios", new { @id = "_rplcmnt_", @backUrl = (@Request.Url.AbsolutePath), @backName = "projects" })';
        var _loadingGifUrl = '@Url.Content("~/Content/images/load.gif")';
        var _pageState = null;
        var _pageStateData = null;
        var _pageSize = 25;
        var _pageStart = 0;
        var _searchStr = '';
        var _sortOrder = 0;
        var _sortAsc = 'asc';
        var _expandAll = true;
        var _count = 0;
        var _retryCount = 0;
        
        $(window).scroll(function () {
            $('.menuGroup').removeClass('open');
        });

        function initSwitchers() {

            $('#groupByTeam').switcher({
                on_state_content: 'On',
                off_state_content: 'Off'
            });
        }

        function switchGroupByTeam() {
            blockUI();
            saveProjectListPreferences(function () { $('#prjcts').dataTable({
                ajax: {
                    url: "/myUrl",
                    error: function (xhr, error, thrown) {
                        alert( 'You are not logged in' );
                    }
                }
            })._fnAjaxUpdate(); });
        }

        function formatFDDate(jsonDate) {
            if (jsonDate == null || jsonDate == "")
                return "";
            var dt = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10));
            return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
        }

        function initDataTable() {
            var allColumns = [];
            allColumns["ProjectName"] = {
                "sTitle": "Project Name",
                "sClass": "",
                "mData": "ProjectName",
                "sName": "ProjectName",
                "mRender": function (data, type, full) {
                    var teamId = full.Team == null ? '' : full.TeamId;
                    var ret = ('<a id="lnkEdit_' + full.Id + full.Rank + teamId + '" onclick="return CheckLock(this.id, \'Project\', \'_rplcmnt_\')" data-toggle="popover" data-placement="right" class="popover-warning popover-dark" href="@Url.Action("Edit", "Project", new { @id = "_rplcmnt_", @backUrl = (@Request.Url.AbsolutePath), @backName = "projects" })">' + data + '</a> ').replace(/_rplcmnt_/g, full.Id);
                    if (full.ProjectParts && full.ProjectParts.length > 0)
                        ret = '<a data-id="id_' + full.Id + full.Rank + teamId + '" class="rowexpander" href="javascript:;"><i class="fa fa-big-caret-right" title="Expand"></i></a> ' + ret;
                    _count++;
                    return ret;
                }
            };

            allColumns["ActiveScenario"] = {
                "sTitle": "Active Scenario",
                "sWidth": "300px",
                "mData": "ActiveScenario",
                "sName": "ActiveScenario",
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";

                    var dropdownlist = "";
                    if (!!full.InactiveScenarios && full.InactiveScenarios.length > 0) {
                        dropdownlist = '<table><tr><td valign="top"><div class="btn-group menuGroup">' +
                        '<button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown" onclick=\'dropDownFixPositionCalendar($(this), $(this).parent().find(".dropdown-menu"));\'  ><i class="fa fa-caret-down"></i></button>' +
                        '<ul id=\'' + getID() + '\' class="dropdown-menu dropdown-menu-form dropdown-menu-left dropdown-menu-scroll" style="width: 300px; clear: both; z-index: 499;">';
                        full.InactiveScenarios.forEach(function (element, index, array) {
                            var strT = '<li><div style="-ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; max-width: 215px; float: left;">' +
                            '               <a id="aN__rplcmnt_rank" onclick="return CheckLock(this.id, \'Scenario\', \'_rplcmnt_\')"   class="popover-warning popover-dark" data-toggle="popover" title="' + element.Name + '" href="' + _scenDetailsUrl + '">' + element.Name + '</a>' +
                            '           </div>';

                            if ((full.ReadOnly !== undefined) && (!full.ReadOnly)) {
                                strT +=
                                    '<div style="float: right;">' +
                                    '   <a class="btn btn-xs btn-primary popover-warning popover-dark" onclick="ToggleStatus(this, \'_projectId_\', \'_rplcmnt_\', _startDate_, _endDate_)" title="Activate" data-toggle="popover"><i class="fa fa-check-circle-o"></i></a>' +
                                    '</div>';
                            }
                            
                            strT += '</li>';
                            dropdownlist += strT.replace(/_projectId_/g, full.Id)
                                                .replace(/_rplcmnt_/g, element.Id)
                                                .replace(/_startDate_/g, element.StartDate)
                                                .replace(/_endDate_/g, element.EndDate)
                                                .replace(/rank/g, full.Rank);
                        });
                        dropdownlist += '</ul></div></td>';
                    }
                    else dropdownlist = '<table><tr><td valign="top">&nbsp;</td>';
                    if (!data) {
                        if (!full.HasChildren) {
                            var id = _count;
                            _count++;

                            if ((full.ReadOnly !== undefined) && (!full.ReadOnly)) {
                                dropdownlist += '<td style="padding: 0px 5px;width:100%;">&nbsp;</td><td><a id="btnAddScenario' + full.Id + full.Rank + id + '" onclick="loadScenario(\'' + full.Id + '\');" data-toggle="popover" data-placement="right" class="btn btn-xs btn-success popover-warning popover-dark pull-right" href="#" title="Add Scenario"><i class="fa fa-plus"></i></a></td>';
                            }
                            
                            return dropdownlist += '</tr></table>';
                        }
                        else {
                            return '';
                        }
                    }

                    var strA = dropdownlist + '<td style="padding: 0px 5px;width:100%;"><a style="margin-left:' + (dropdownlist.length == 0 ? '25px' : '0px') + ';" id="aN__rplcmnt_" onclick="return CheckLock(this.id, \'Scenario\', \'_rplcmnt_\')" class="popover-warning popover-dark" href="' + _scenDetailsUrl + '">' + data.Name + '</a></td>';

                    if ((full.ReadOnly !== undefined) && (!full.ReadOnly)) {
                        strA += '<td valign="top"><a id="btnAddScenario' + full.Id + full.Rank + '" onclick="loadScenario(\'' + full.Id + '\');" data-toggle="popover" data-placement="right" class="btn btn-xs btn-success popover-warning popover-dark pull-right" href="#" title="Add Scenario"><i class="fa fa-plus"></i></a></td>';
                    }

                    strA += '</tr></table>';
                    return strA.replace(/_rplcmnt_/g, data.Id);
                }
            };
            allColumns["ProjectNumber"] = {
                "sTitle": "Number",
                "mData": "ProjectNumber",
                "sName": "ProjectNumber",
                "mRender": function (data, type, full) {
                    return data;
                }
            };
            allColumns["Status"] = {
                "sTitle": "Status",
                "sClass": "",
                "mData": "Status",
                "sName": "Status",
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";
                    return data;
                }
            };
            allColumns["Priority"] = {
                "sTitle": "Priority",
                "sClass": "",
                "mData": "Priority",
                "sName": "Priority",
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";
                    return data;
                }
            };
            allColumns["Deadline"] = {
                "sTitle": "Deadline",
                "sClass": "",
                "mData": "Deadline",
                "sName": "Deadline",
                "mRender": function (data, type, full) {

                    if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";
                    return ((!data) ? "N/A" : formatFDDate(data));
                }
            };
            allColumns["Classification"] = {
                "sTitle": "Classification",
                "sClass": "",
                "mData": "Classification",
                "sName": "Classification",
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";
                    return data;
                }
            };
            allColumns["Teams"] = {
                "sTitle": "Teams",
                "sClass": "",
                "mData": "Teams",
                "sName": "Teams",
                "bSortable": false,
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0)
                        return "";

                    return data;
                }
            };
            allColumns["Client"] = {
                "sTitle": "Client",
                "sClass": "",
                "mData": "Client",
                "sName": "Client",
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0)
                        return "";

                    return data;
                }
            };
            allColumns["Actions"] = {
                "sTitle": "",
                "sClass": "nowrap ",
                "mData": "Id",
                "sName": "Id",
                "bSortable": false, //'aTargets': [ 1 ]
                "mRender": function (data, type, full) {
                    @if (SecurityManager.CheckSecurityObjectPermission(Areas.Projects, AccessLevel.Write))
                    {
					<text>
                    if ((full.ReadOnly !== undefined) && (!full.ReadOnly)) {
                        ctr++;
                        var ret = '<a id="btnDelete_' + ctr + '_' + full.Rank + '" onclick="return CheckLock(this.id, \'Project\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-xs btn-danger popover-warning popover-dark" href="@Url.Action("Delete", "Project", new { @id = "_rplcmnt_" })" title="Delete"><i class="fa fa-trash-o"></i></a> ' +
                		    '<a id="btnCopy_' + ctr + '_' + full.Rank + '" onclick="return CheckCopy(this.id, \'Project\', \'_rplcmnt_\',\'_rplcmntPname\')" data-toggle="popover" data-placement="left" class="btn btn-xs popover-warning popover-dark" href="# title="Copy"><i class="fa fa-copy"></i></a> ';

                        if (full.HasChildren) {
                            ret += '<a id="btnAddPart_' + ctr + '_' + full.Rank + '" onclick="return CheckLock(this.id, \'Project\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-xs btn-success popover-warning popover-dark" href="@Url.Action("Edit", "Project", new { @id = "_rplcmnt_", @ptab = "addpart" })" title="Add Part"><i class="fa fa-plus"></i></a> ';
                        }

                        return ret.replace(/_rplcmnt_/g, data).replace(/_rplcmntPname/g, full.ProjectName.replace(/'/g, "\\'"));
                    }
                    else {
                        return "";
                    }
                    </text>
                    }
                    else
                    {
					<text>
                    return "";
                    </text>
                    }
                }
            };
            allColumns["Team"] = {
                "sTitle": "Team",
                "sClass": "",
                "mData": "Team",
                "sName": "Team",
                "mRender": function (data, type, full) {
                    return data;
                }
            };

            var sortedColumns = [];
            if (_pagePreferences && (_pagePreferences.length > 0)) {
                var columnsText = "";

                for (var index = 0; index < _pagePreferences.length; index++)
                    if (_pagePreferences[index].Key == "projectsGridColOrder") {
                        columnsText = _pagePreferences[index].Value;
                        break;
                    }

                if (columnsText.length > 0) {
                    var columns = columnsText.split(";");

                    for (var index = 0; index < columns.length; index++) {
                        var colName = columns[index];

                        if (colName in allColumns) {
                            var colObj = allColumns[colName];
                            sortedColumns.push(colObj);
                        }
                    }
                }
                for (var index = 0; index < _pagePreferences.length; index++) {
                    if (_pagePreferences[index].Key == "projectFilterSearch") {
                        _searchStr = _pagePreferences[index].Value;
                        break;
                    }
                }
            }

            if (sortedColumns.indexOf(allColumns["ProjectName"]) == -1) sortedColumns.push(allColumns["ProjectName"]);
            if (sortedColumns.indexOf(allColumns["ActiveScenario"]) == -1) sortedColumns.push(allColumns["ActiveScenario"]);
            if (sortedColumns.indexOf(allColumns["ProjectNumber"]) == -1) sortedColumns.push(allColumns["ProjectNumber"]);
            if (sortedColumns.indexOf(allColumns["Status"]) == -1) sortedColumns.push(allColumns["Status"]);
            if (sortedColumns.indexOf(allColumns["Priority"]) == -1) sortedColumns.push(allColumns["Priority"]);
            if (sortedColumns.indexOf(allColumns["Classification"]) == -1) sortedColumns.push(allColumns["Classification"]);
            if (sortedColumns.indexOf(allColumns["Teams"]) == -1) sortedColumns.push(allColumns["Teams"]);
            if (sortedColumns.indexOf(allColumns["Deadline"]) == -1) sortedColumns.push(allColumns["Deadline"]);
            if (sortedColumns.indexOf(allColumns["Client"]) == -1) sortedColumns.push(allColumns["Client"]);
            if (sortedColumns.indexOf(allColumns["Actions"]) == -1) sortedColumns.push(allColumns["Actions"]);
            if (sortedColumns.indexOf(allColumns["Team"]) == -1) sortedColumns.push(allColumns["Team"]);
            
            _evdttbl = $('#prjcts').dataTable({
                "iDisplayLength": _pageSize,
                "iDisplayStart": _pageStart,
                "search": {
                    search: _searchStr
                },
                "iSearchDelay": 1000,
                "order": [[_sortOrder, _sortAsc]],
                "bPaginate": true,
                "dom": 'Rlfrtip',
                "colReorder": {
                    /*do not allow to reorder first column*/
                    "fixedColumns": 1,
                    "fixedColumnsRight": 0,
                    "reorderCallback": function () {
                        // we should call this for table redrawing without broken of event listeners in rows
                        // and without collapsing main project rows; with preserving of current page
                        $(_evdttbl).DataTable().draw(false);
                        onPreferencesItemClick();
                    }
                },
                "bSort": true,
                "bFilter": true,
                "bInfo": true,
                "sScrollY": "",
                "sScrollX": "",
                "bScrollCollapse": true,
                "bProcessing": true,
                "bServerSide": true,
                "bAutoWidth": false,
                "sAjaxSource": document.URL,
                "fnServerData": DoDataRequest,
                //"sServerMethod": "POST",
                "lengthMenu": [[25, 50, 100], [25, 50, 100]],
                "columnDefs": [
                    { "visible": false, "targets": 10 }
                ],
                "drawCallback": function (settings) {
                    unblockUI();
                    _retryCount = 0;
                    if ($('#groupByTeam').prop('checked')) {
                        var api = this.api();
                        var rows = api.rows({ page: 'current' }).nodes();
                        var last = null;

                        api.column(10, { page: 'current' }).data().each(function (group, i) {
                            if (last !== group) {
                                $(rows).eq(i).before(
                                    '<tr class="group"><td colspan="10"><strong>' + (group == "" ? "N/A" : group) + '</strong></td></tr>'
                            );
                                last = group;
                            }
                        });
                    }

                    // save current page settings on each grid reload
                    _pageState.pageState('setData', ['page-size', settings._iDisplayLength]);
                    _pageState.pageState('setData', ['page-start', settings._iDisplayStart]);
                    //_pageState.pageState('setData', ['search-string', $('#prjcts_filter input').val()]);
                    _pageState.pageState('setData', ['sort-order', settings.aLastSort[0].col]);
                    _pageState.pageState('setData', ['sort-dir', settings.aLastSort[0].dir]);
                    _pageState.pageState('saveData');

                    $('.rowexpander').click(expandRow);

                    $('.rowexpander').each(function (idx, obj) {
                        // by default we should expand rows according to expandAll flag
                        if (!_pageStateData || _pageStateData[$(obj).data('id')] == undefined) {
                            if (_expandAll === true)
                                $(obj).trigger('click', true);
                        }
                        else {
                            if (_pageStateData[$(obj).data('id')] === true)
                                $(obj).trigger('click', true);
                        }
                    });
                },
                "aoColumns": sortedColumns,
                "orderMulti": false
            });

            var headingHtml = "<div class=\"table-header clearfix\">" +
                "	<div class=\"table-caption\" id=\"prjcts_header_button\"></div>" +
				"	<div class=\"DT-lf-right\"><div class=\"DT-per-page\"><div><label id=\"prjcts_header_collapse\"></label></div></div><div class=\"DT-per-page\" id=\"prjcts_header_length\"></div><div class=\"DT-search\" style=\"vertical-align: middle\" id=\"prjcts_header_filter\"></div></div>" +
                "	<div id=\"prjcts_processing\" class=\"dataTables_processing table-caption\" style=\"visibility: hidden;\"></div>" +
                "</div>";
            $('#prjcts_wrapper').prepend(headingHtml);
            @if (SecurityManager.CheckSecurityObjectPermission(Areas.Projects, AccessLevel.Write))
            {
			<text>
            $('#prjcts_header_button').html('<a id="btnAddProject" class="btn btn-primary" href="@Url.Action("Edit", "Project")"><i class="fa fa-plus"></i> Add Project</a>');
            </text>
            };
            $('#prjcts_wrapper .dataTables_length').appendTo("#prjcts_header_length");
            $('#prjcts_wrapper .dataTables_filter').appendTo("#prjcts_header_filter");
            $('#prjcts_wrapper .dataTables_processing').appendTo("#prjcts_wrapper .table-header");
            $('#prjcts_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
            $('#prjcts_wrapper .dataTables_filter input').attr('data-key', 'projectFilterSearch');
            $('#prjcts_wrapper .dataTables_filter input').blur(function () {
                onPreferencesItemClick();
            });
            if (_pagePreferences && (_pagePreferences.length > 0)) {

                for (var index = 0; index < _pagePreferences.length; index++) {
                    if (_pagePreferences[index].Key == "projectFilterSearch") {
                        $('#prjcts_wrapper .dataTables_filter input').val(_pagePreferences[index].Value);
                        _pagePreferences[index].Value;
                        break;
                    }
                }
            }
            //_pageState.pageState('setData', ['search-string', $('#prjcts_filter input').val()]);
            $('#prjcts_wrapper .dataTables_processing').addClass("table-caption");
            $('#prjcts_wrapper .dataTables_processing').html('<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');
            $("#prjcts_header_collapse").append('<a href="javascript:;" id="btnExpandAll" class="btn btn-sm"><i class="fa fa-plus-square-o"></i> Expand all</a> <a href="javascript:;" id="btnCollapseAll" class="btn btn-sm"><i class="fa fa-minus-square-o"></i> Collapse all</a>');

            $("#btnExpandAll").click(function () {
                _expandAll = true;
                $(".rowexpander").each(function (i, e) {
                    $(this).trigger('click', true);
                });
            });
            $("#btnCollapseAll").click(function () {
                _expandAll = false;
                $(".rowexpander").each(function (i, e) {
                    $(this).trigger('click', false);
                });
            });

            $('#prjcts_wrapper').append("<div class=\"table-footer clearfix\"><div id=\"prjcts_footer_label\" class=\"DT-label\"></div><div id=\"prjcts_footer_paging\"  class=\"DT-pagination\"></div></div>");
            $('#prjcts_wrapper .dataTables_info').appendTo('#prjcts_footer_label');
            $('#prjcts_wrapper .dataTables_paginate').appendTo('#prjcts_footer_paging');

            // Move projects table into new created div with auto overflow style
            $('<div id="project-table-container"></div>').insertAfter('div.table-header');
            var table = $('table#prjcts');
            $('div#project-table-container').html(table);
        }
            DoDataRequest=function ( sSource, aoData, fnCallback, oSettings ) {
                oSettings.jqXHR = $.ajax( {
                    "dataType": 'json',
                    "type": "POST",
                    "url": document.URL,
                    "data": aoData,
                    "success": fnCallback,
                }).fail(function ($xhr) {
                    @if (User.Identity.isSSO()) {
                    <text>
                    _retryCount++;
                    HandleSSOAjaxReAuth($xhr, function() { DoDataRequest(sSource, aoData, fnCallback, oSettings); }, _retryCount);
                    </text>
                    }
                });
            }
        function onPreferencesItemClick(menuItem) {
            saveProjectListPreferences();
        }

        function ToggleStatus(btn, projectId, scenarioId, startDateMs, endDateMs) {
            $(btn).scenarioStatusToggle({
                scenario: {
                    scenarioId: scenarioId,
                    projectId: projectId,
                    startDate: startDateMs ? DateTimeConverter.msFormatAsUtcString(startDateMs) : null,
                    endDate: endDateMs ? DateTimeConverter.msFormatAsUtcString(endDateMs) : null,
                },
                minStartDate: '@Constants.MIN_SELECTABLE_DATE',
                maxEndDate: '@Constants.MAX_SELECTABLE_DATE',
                runType: 'OnDemand',
                success: function (args) {
                    location.reload();
                },
                error: function (args) {
                    showErrorModal();
                },
            });
            $(btn).scenarioStatusToggle('toggleStatus');
        }
        function closeSSOPopup() {
            $('#refreshSSO').modal('hide');
        }
        function expandRow(evt, bExpand) {
            var a = $(this).closest('a');
            var projectTr = $("#prjcts").find("a[data-id='" + a.attr("data-id") + "']").closest("tr");
            var row = _evdttbl.DataTable().row(projectTr);
            var thisA = projectTr.find(".rowexpander");
            if (bExpand != null) {
                if (bExpand == true && row.child.isShown())
                    return;
                if (bExpand == false && !row.child.isShown())
                    return;
            }

            if (row.child.isShown()) {
                $(thisA).children("i.fa").removeClass("fa-big-caret-down").addClass("fa-big-caret-right");

                row.child.hide();
                var team = row.data().Team == null ? "" : row.data().TeamId;
                $("tr[id*='additionalTR" + row.data().ProjectId + row.data().Rank + team + "_']").remove();
                _pageState.pageState('setData', [a.data('id'), false]);
                _pageState.pageState('saveData');
            } else {
                _pageState.pageState('setData', [a.data('id'), true]);
                _pageState.pageState('saveData');
                $(thisA).children("i.fa").removeClass("fa-big-caret-right").addClass("fa-big-caret-down");
                var team = row.data().Team == null ? "" : row.data().TeamId;
                row.child("<div id='infoPanel" + row.data().ProjectId + row.data().Rank + team + "'></div>").show();
                var tr = $('#infoPanel' + row.data().ProjectId + row.data().Rank + team).closest('tr');
                var dtColumns = _evdttbl.dataTable().fnSettings().aoColumns;
                $(row.data().ProjectParts).each(function (responseRowIndex, responseRow) {
                    var htmlToAppend = "";
                    $(dtColumns).each(function (dtColumnIndex, dtColumn) {
                        htmlToAppend += '<td';
                        //styles
                        htmlToAppend += ' style="';
                        htmlToAppend += 'background-color:#f0f0f0;';
                        if (dtColumn.bVisible == false)
                            htmlToAppend += 'display:none;';
                        htmlToAppend += '"';
                        //CSS classes
                        htmlToAppend += ' class="';
                        //column identifier
                        htmlToAppend += 'inactv-' + dtColumn.sName + ' ';
                        if (dtColumn.sName == "Id" || dtColumn.sName == "ActiveScenario")
                            htmlToAppend += ' bigCol ';
                        if (dtColumn.sName == "ProjectName")
                            htmlToAppend += 'bigCol ';
                        else
                            htmlToAppend += 'smallCol ';
                        htmlToAppend += '"';
                        htmlToAppend += '>';
                        if (dtColumn.sName == "ProjectName") {
                            var url = '@Url.Action("Edit", "Project", new {@id = "_place0_", @partId = "_place1_"})'
                            .replace("_place0_", responseRow.ProjectId).replace("_place1_", responseRow.Id);

                            var partEditLink = "<a class='popover-warning popover-dark' id='prtLnkEdt_" + responseRow.Id +
                              "' onclick='return CheckLock(this.id, \"Project\", \"" + responseRow.ProjectId + "\")' " +
                              "href='" + url + "' data-toggle='popover' data-placement='right' style='margin-left:15px;'>" +
                              responseRow.ProjectName + "</a>";

                            htmlToAppend += partEditLink;
                            // htmlToAppend += "<span style='margin-left:15px;'>" + responseRow.ProjectName + "</span>";
                        } else if (dtColumn.sName == "Deadline") {

                            var d = responseRow[dtColumn.sName];
                            htmlToAppend += ((!d) ? "N/A" : formatFDDate(d));

                        } else if (dtColumn.sName == "ActiveScenario") {
                            //htmlToAppend += responseRow[dtColumn.sName];
                            var dropdownlist = "";

                            if (!!responseRow.InactiveScenarios && responseRow.InactiveScenarios.length > 0) {
                                dropdownlist = '<table><tr><td valign="top"><div class="btn-group menuGroup" style="float:left;">' +
                                '<button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown" onclick=\'dropDownFixPositionCalendar($(this), $(this).parent().find(".dropdown-menu"));\' ><i class="fa fa-caret-down"></i></button>' +
                                '<ul id=\'' + getID() + '\' class="dropdown-menu dropdown-menu-form dropdown-menu-left dropdown-menu-scroll" style="width: 300px; clear: both; z-index: 499;">';
                                responseRow.InactiveScenarios.forEach(function (element, index, array) {
                                    var strT = '<li><div style="-ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; max-width: 215px; float: left;">' +
                                    '               <a id="aN__rplcmnt_rank" onclick="return CheckLock(this.id, \'Scenario\', \'_rplcmnt_\')"   class="popover-warning popover-dark" data-toggle="popover" title="' + element.Name + '" href="' + _scenDetailsUrl + '">' + element.Name + '</a>' +
                                    '           </div>' +
                                    '           <div style="float: right;">' +
                                    '               <a class="btn btn-xs btn-primary popover-warning popover-dark" onclick="ToggleStatus(this, \'_projectId_\', \'_rplcmnt_\', _startDate_, _endDate_)" title="Activate" data-toggle="popover"><i class="fa fa-check-circle-o"></i></a>' +
                                    '           </div></li>';
                                    dropdownlist += strT.replace(/_projectId_/g, responseRow.Id)
                                                        .replace(/_rplcmnt_/g, element.Id)
                                                        .replace(/_startDate_/g, element.StartDate)
                                                        .replace(/_endDate_/g, element.EndDate)
                                                        .replace(/rank/g, row.data().Rank);
                                });
                                dropdownlist += '</ul></div></td>';
                            }
                            else dropdownlist = '<table><tr><td valign="top">&nbsp;</td>';
                            var data = responseRow[dtColumn.sName];

                            if (data != null) {
                                var strA = dropdownlist + '<td style="padding: 0px 5px;width:100%;"><a style="margin-left:' + (dropdownlist.length == 0 ? '25px' : '0px') + '" id="aN__rplcmnt_" onclick="return CheckLock(this.id, \'Scenario\', \'_rplcmnt_\')" class="popover-warning popover-dark" href="' + _scenDetailsUrl + '">' + data.Name + '</a></td>' +
                                    '<td valign="top" width="25"><a id="btnAddScenario' + responseRow.Id + row.data().Rank + '" onclick="loadScenario(\'' + responseRow.Id + '\');" data-toggle="popover" data-placement="left" class="btn btn-xs btn-success popover-warning popover-dark  pull-right" href="#" title="Add Scenario"><i class="fa fa-plus"></i></a></td></tr></table>';
                                htmlToAppend += strA.replace(/_rplcmnt_/g, data.Id);
                            } else {
                                htmlToAppend += dropdownlist + '<td style="padding: 0px 5px;width:100%;">&nbsp;</td><td valign="top"><a id="btnAddScenario' + responseRow.Id + row.data().Rank + '" onclick="loadScenario(\'' + responseRow.Id + '\');" data-toggle="popover" data-placement="left" class="btn btn-xs btn-success popover-warning popover-dark  pull-right" href="#" title="Add Scenario"><i class="fa fa-plus"></i></a></td></tr></table>';
                            }
                        }
                        else if (dtColumn.sName == "Teams") {
                            var data = ((!responseRow[dtColumn.sName]) ? [] : responseRow[dtColumn.sName]);
                            htmlToAppend += (data || '');

                        } else if (dtColumn.sName == "Id") {

                        } else {
                            //"regular" columns: Priority,
                            htmlToAppend += responseRow[dtColumn.sName];
                        }
                        htmlToAppend += "</td>";
                    });
                    var team = row.data().Team == null ? "" : row.data().TeamId;
                    if (responseRowIndex == 0) {
                        $(tr).attr('id', 'additionalTR' + responseRow.ProjectId + row.data().Rank + team + '_' + responseRowIndex);
                        $(tr).html(htmlToAppend);
                    } else {
                        var prevRow = $('#additionalTR' + responseRow.ProjectId + row.data().Rank + team + '_' + (responseRowIndex - 1));
                        prevRow.after('<tr id="additionalTR' + responseRow.ProjectId + row.data().Rank + team + '_' + responseRowIndex + '">' + htmlToAppend + '</tr>');
                    }
                });
            }
        }

        function loadScenario(projectId) {
            var url = "?Id=" + projectId;
            $('#reloadForm').load('@Url.Action("LoadScenario", "Scenarios")' + url, function () {
                if (typeof initScenario === 'function')
                    initScenario();
                $('#createScenario').modal('show');
            });
        }

        function isMSIE() {
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");
            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer, return version number
                return true;
            return false;
        }

        init.push(function () {
            saveLastPageVisited(window.location.pathname);
            loadTable();
        });

        function loadTable() {
            _dataSectionName = loadProjectListPreferences();
            _pageState = $('[data-section=projectsTable]').pageState({
                pageKey: _dataSectionName,
                initCallback: function (state) {
                    if (!!state) {
                        var ps = state['page-size'];
                        if (!!ps && parseInt(ps) > 0)
                            _pageSize = parseInt(ps);
                        var pst = state['page-start'];
                        if (!!pst && parseInt(pst) > 0)
                            _pageStart = parseInt(pst);
                        var str = $('#prjcts_wrapper .dataTables_filter input').val();  //state['search-string'];
                        if (!!str && str.length > 0)
                            _searchStr = str;
                        var so = state['sort-order'];
                        if (!!so && parseInt(so) > 0)
                            _sortOrder = parseInt(so);
                        var soasc = state['sort-dir'];
                        if (!!soasc && soasc.length > 0)
                            _sortAsc = soasc;
                    }
                    _pageStateData = state;
                }
            });

            initDataTable();

            if (_dataSectionName && (_dataSectionName.length > 0))
                restorePreferences(_dataSectionName, _pagePreferences);
            initSwitchers();
            $('#prjcts').on('mouseenter', 'td,th', function () {
                var $this = $(this);
                if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
                    $this.attr('title', $this.text());
                }
            });
            $(document).on('hide.bs.modal', '#createScenario', function (e) {
                // skip modal hide event from datepickers
                if ($(e.target).attr('id') != 'createScenario')
                    return true; // close modal form
                // check that form has been changed
                if (typeof isScenarioDataChanged === 'function')
                // if form has been changed
                    if (isScenarioDataChanged()) {
                        // ask user for confirmation of form close
                        var msg = "@Resources.Messages.Scenario_Create_Confirm";
                        bootbox.confirm(msg, function (result) {
                            if (result) {
                                if (typeof resetScenarioDataChanged === 'function') {
                                    resetScenarioDataChanged();
                                }
                                $('#createScenario').modal('hide');
                            }
                        });
                        return false; // DO NOT close modal form
                    }
                return true; // close modal form
            });
        }

        function saveProjectListPreferences(callback) {
            var section = getDataSection(_evdttbl);
            var sectionMenu = getDataSection($("#visibilitydropdown_project"));
            var prefs = collectPreferences(section);

            // Add grid columns order
            var columns = "";
            var dataKey = "projectsGridColOrder";

            $.each(_evdttbl.dataTable().fnSettings().aoColumns, function (i, obj) {
                if (obj.mData != "Team")
                    columns += (";" + obj.mData);
            });

            columns = columns.substr(1);

            prefs.push({
                Key: dataKey,
                Value: columns
            });
            
            saveUserPagePreferences(prefs, section, "", callback);
        }

        function loadProjectListPreferences() {
            var section = getDataSection($('#prjcts'));
            _pagePreferences = loadUserPagePreferences(section);
            return section;
        }

        function CheckCopy(id, Project, projectID, projectName) {
            CheckLock(id, Project, projectID);
            bootbox.confirm("You are about to copy " + projectName + ".  Click ok to continue", function (e) {
                if (e == true)
                    window.location.href = "@Url.Action("Copy", "Project")" + "/" + projectID;
            });
        }
        function getID() {
            listindex = listindex + 1;
            return 'UL_DDL' + listindex;
        }
        function dropDownFixPositionCalendar(button, dropdown) {
            setDropdownProps(button, dropdown, liHeight);
        }

    </script>
}
@section pagemenu
{
    <ul class="nav navbar-nav navbar-right" data-section="projectsTable">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
                <i class="fa fa-bars"></i><span>Page Options</span>&nbsp;<i class="fa fa-caret-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-right" id="visibilitydropdown_project">
                <li class="padding-xs-hr">
                    <label><span class="switcherLbl">Group by Team</span><input type="checkbox" data-key="groupByTeam" name="groupByTeam" id="groupByTeam" class="switcher px" onclick="switchGroupByTeam()" /></label>
                </li>
            </ul>
        </li>
    </ul>
}
<div class="table-light table-responsive" data-section="projectsTable">
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered dataTable-tightXXX" id="prjcts">
        <thead>
            <tr>
                <th>
                    Project Name
                </th>
                <th>
                    Active Scenario
                </th>
                <th>
                    Number
                </th>
                <th>
                    Status
                </th>
                <th>
                    Priority
                </th>
                <th>
                    Classification
                </th>
                <th>
                    Teams
                </th>
                <th>
                    Client
                </th>
                <th>
                    Actions
                </th>
                <th>
                    Team
                </th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>
<!-- Modal -->
<div id="createScenario" class="modal fade" data-width="900" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-content" id="reloadForm">
    </div>
    <!-- / .modal-content -->
</div>
<!-- /.modal -->
<!-- / Modal -->