@using EnVisage.Code.HtmlHelpers
@using Microsoft.AspNet.Identity
@using EnVisage.Code
@{
    ViewBag.Title = "Projects";
}
@section stylesheets
{
    <link href="~/Content/stylesheets/xeditable.css" rel="stylesheet" type="text/css">
    <link href="~/Content/stylesheets/bootstrap-modal-bs3patch.css" rel="stylesheet" />
    <link href="~/Content/stylesheets/bootstrap-modal.css" rel="stylesheet" />
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/CustomValidation.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/sliders.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/calendarMethods.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Plugins/ScenarioDetailsGrid.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Plugins/PageState.js")" type="text/javascript"></script>
    @Scripts.Render("~/bundles/angular-app-modules")
    <script src="@Url.Content("~/Scripts/Angular/app.js")"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/scenarioDetailController.js")"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/costSavingController.js")"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/slidersGroupController.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap-modalmanager.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap-modal.js")" type="text/javascript"></script>

    <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"})';
        @*TODO: it is unused: var _getInactiveScenariosUrl = '@Url.Action("Inactive", "ForecastDashboard", new {@id = "_rplcmnt_"})';*@
        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;
        $(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()._fnAjaxUpdate(); });
            //document.location.href = document.location.href;
            //_evdttbl.ajax.reload();
            //$('#prjcts').dataTable()._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",
                /*"sClass": "",*/
                "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 = '<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>' +
                            '           <div style="float: right;">' +
                            '               <a class="btn btn-xs btn-primary popover-warning popover-dark" onclick="ToggleStatus(\'_rplcmnt_\')" title="Activate" data-toggle="popover"><i class="fa fa-check-circle-o"></i></a>' +
                            '           </div></li>';
                            dropdownlist += strT.replace(/_rplcmnt_/g, element.Id).replace(/rank/g, full.Rank);
                        });
                        dropdownlist += '</ul></div>';
                    }

                    if (!data) {
                        if (!full.HasChildren) {
                            var id = _count;
                _count++;
                            return dropdownlist + '<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>';
                        }
                        else {
                            return '';
                        }
                    }

                    var strA = dropdownlist + ' <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>' +
                        ' <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>';
                    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",
                "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>
                    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);
                    </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);
                        }
                    }
                }
            }

            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["Actions"]) == -1) sortedColumns.push(allColumns["Actions"]);
            if (sortedColumns.indexOf(allColumns["Team"]) == -1) sortedColumns.push(allColumns["Team"]);
            //var settings = evdttbl.dataTable().fnSettings();

            _evdttbl = $('#prjcts').dataTable({
                "iDisplayLength": _pageSize,
                "iDisplayStart": _pageStart,
                "search": {
                    search: _searchStr
                },
                "order": [[_sortOrder, _sortAsc]],
                "bPaginate": true,
                "dom": 'Rlfrtip',
                //"sDom": 'R<\"clear\">lfrtip',
                "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,
                "sServerMethod": "POST",
                "lengthMenu": [[25, 50, 100], [25, 50, 100]],
                "columnDefs": [
                    { "visible": false, "targets":9 }
                ],
                "drawCallback": function (settings) {
                    unblockUI();
                    if ($('#groupByTeam').prop('checked')) {
                        var api = this.api();
                        var rows = api.rows({ page: 'current' }).nodes();
                        var last = null;
                        
                        api.column(9, { page: 'current' }).data().each(function (group, i) {
                            if (last !== group) {
                                $(rows).eq(i).before(
                                    '<tr class="group"><td colspan="9"><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_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');

            // SA. ENV-908. Begin
            // 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);
            // SA. ENV-908. End
        }

        function onPreferencesItemClick(menuItem) {
            saveProjectListPreferences();
        }

        function ToggleStatus(fieldId) {
            var url = "/ForecastDashboard/CheckIfActive/";
            var request = {
                'scenarioId': fieldId
            };
            $.get(url, request, function (data) {
                if (data == null || data == "") {
                    ToggleStatusConfirmed(fieldId);
                    return '';
                } else {
                    bootbox.confirm({
                        message: "There is an active scenario for this project already. Are you sure you want to activate this scenario instead of active one?",
                        callback: function (result) {
                            if (result) {
                                ToggleStatusConfirmed(fieldId);
                            }
                        },
                        className: "bootbox-sm"
                    });
                }
            });
        }

        function ToggleStatusConfirmed(scenarioId) {
            if (scenarioId == null || scenarioId == "")
                return "";
            var url = "/ForecastDashboard/ToggleStatus/";
            var request = {
                'scenarioId': scenarioId
            };
            $.get(url, request, function (data) {
                location.reload();
            });
            return '';
        }

        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 += 'nowrap 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 = '<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;">';
                                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(\'_rplcmnt_\')" title="Activate" data-toggle="popover"><i class="fa fa-check-circle-o"></i></a>' +
                                    '           </div></li>';
                                    dropdownlist += strT.replace(/_rplcmnt_/g, element.Id).replace(/rank/g, row.data().Rank);
                                });
                                dropdownlist += '</ul></div>';
                            }

                            var data = responseRow[dtColumn.sName];

                            if (data != null) {
                                var strA = dropdownlist + ' <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>' +
                                    ' <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>';
                                htmlToAppend += strA.replace(/_rplcmnt_/g, data.Id);
                            } else {
                                htmlToAppend += dropdownlist + '<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>';
                            }
                        }
                        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 () {
            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 = 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();

            // SA. ENV-815
            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
                        if (confirm("@EnVisage.Code.Constants.CONFIRM_CREATE_SCENARIO")) {
                            // reset change indicator
                            if (typeof resetScenarioDataChanged === 'function') {
                                resetScenarioDataChanged();
                            }
                            return true; // close modal form
                        };
                        return false; // DO NOT close modal form
                    }
                return true; // close modal form
            });
        }

        // SA. ENV-815
        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);
        }

        // SA. ENV-815
        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>
                    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 -->