@using EnVisage.Code
@using EnVisage.Models
@model EnVisage.Models.ForecastDashboardOptionsModel
	<div class="panel form-horizontal" id="criteria-container">
		<input type="hidden" id="scenarioId" name="scenarioId" />
		<input type="hidden" id="groupId" name="groupId" />
		<div class="panel-body">
			<div class="row">
				<div class="col-lg-3 col-md-4 col-sm-5">
					<div class="form-group no-margin-hr">
						<label class="control-label">Start/End Date</label>
						<div class="input-daterange input-group" id="bs-datepicker-range">
							<input class="form-control valid" id="filterStartDate" name="filterStartDate" type="text" value="@DateTime.Today.AddMonths(-1).ToString("MM/dd/yyyy")">
							<span class="input-group-addon">to</span>
							<input class="form-control" id="filterEndDate" name="filterEndDate" type="text" value="@DateTime.Today.AddMonths(11).ToString("MM/dd/yyyy")">
						</div>
					</div>
				</div>
				<div class="col-lg-2 col-md-3 col-sm-4">
					<div class="form-group no-margin-hr">
						<label class="control-label">Scenario Type</label>
						@Html.DropDownList("filterType", Utils.GetScenarioTypesPortfAndSched(), new { @id = "filterType", @class = "form-control" })
					</div>
				</div>
				<div class="col-lg-2 col-md-3 col-sm-3" id="filterGroupContainer">
					<div class="form-group no-margin-hr">
						<label class="control-label">Scenario Group</label>
						@Html.DropDownList("filterGroup", Utils.GetScenarioGroup(), new { @id = "group", @class = "form-control" })
					</div>
				</div>
				<div class="col-lg-2 col-md-3 col-sm-5">
					<div class="form-group no-margin-hr">
						<label class="control-label">Project Classification</label>
						@Html.DropDownList("filterClassification", Utils.GetProjectClassificationDropdown(), new { @id = "filterClassification", @class = "form-control" })
					</div>
				</div>
				<div class="col-lg-2 col-md-3 col-sm-4">
					<div class="form-group no-margin-hr">
						<label class="control-label">Project Status</label>
						@Html.DropDownList("filterStatus", Utils.GetProjectStatusDropdown(), new { @id = "filterStatus", @class = "form-control" })
					</div>
				</div>
			</div>
		</div>
		<div class="panel-footer text-right">
		    <a class="btn btn-primary" onclick="applyForecastDashboardFilter();">Filter</a>
            @Html.HiddenFor(t => t.AdditionalFilterParams)
		</div>
	</div>
	<div class="bs-example" id="uom_container" >
		<table class="table table-striped table-bordered dataTable-tight" id="uomtbl">
		</table>
	</div>

<script type="text/javascript">
    var _dataForChart;
    var _pagePreferences;
    var _allScenarioGroups = [];
    var _evdttbl;
    var _menu;
    var _savePrefUrl = '@Url.Action("SavePagePreferences", "User")';
    var _pageKey = '@Model.Source';
    var _getPrefUrl = '@Url.Action("GetPagePreferences", "User")';
    var _scenDetailsUrl = '@Url.Action("Details", "Scenarios", new { @id = "_rplcmnt_", @ref = "/", @back = "dashboard" })';
    var _getInactiveScenariosUrl = '@Url.Action("Inactive", "ForecastDashboard", new { @id = "_rplcmnt_" })';
    var _loadingGifUrl = '@Url.Content("~/Content/images/load.gif")';
    var _additionalFiltersId = '@Html.IdFor(t=>t.AdditionalFilterParams)';
    var _hideTeamGroupping = false;
    
    @foreach (var item in Utils.GetScenarioGroup().Where(item => !item.Text.Equals("Default")))
    {
        @:_allScenarioGroups.push("@item.Value" + ":" + "@item.Text");
    }

    function ToggleStatus(scenarioId, control) {
        if (scenarioId == null || scenarioId == "")
            return "";
        var url = "/ForecastDashboard/CheckIfActive/";
        var request = {
            'scenarioId': scenarioId
        };
        $.get(url, request, function(data) {
            if (data == null || data == "") {
                ToggleStatusConfirmed(scenarioId, control);
                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(scenarioId, control);
                        }
                    },
                    className: "bootbox-sm"
                });
            }
        });
    }

    function CopyToGroup(scenarioId, groupId, element) {
        $(element).children('input[type="checkbox"]').addClass('hide');
        $(element).children('span.glyphicon').removeClass('hide');
        var isChecked = $(element).children('input[type="hidden"]').val() == 'checked';
        var url = '';
        if (!isChecked)
            url = '/ForecastDashboard/CopyScenarioToGroup';
        else
            url = '/ForecastDashboard/ExtractFromGroup';
        var request = {
            'scenarioId': scenarioId,
            'groupId': groupId
        };
        $.post(url, request, function(data) {
            var result = data;
            if (data.Status == 'Ok') {
                $(element).children('input[type="hidden"]').val(isChecked ? "unchecked" : "checked");
            } else if (data.Status == 'Error') { // Show error message
                showErrorModal('An error occurred while try to change scenario group.', data.ErrorMsg);
                console.log(data.ErrorDetails);
            }
            $(element).children('span.glyphicon').addClass('hide');
            $(element).children('input[type="checkbox"]').removeClass('hide');
        });
    }

    function onMenuItemClick(e, element) { //debugger;
        if ($(element).hasClass('dropdown-menu-form')) {
            e.stopPropagation();
        }
        if (e.target.className != 'hide' && e.target.type == 'checkbox') {
            var li = $(e.target).parent()[0];
            var scenarioId = li.getAttribute('data-scenarioid');
            var groupId = li.getAttribute('data-groupid');
            CopyToGroup(scenarioId, groupId, $(li));
        }
    }

    function ToggleStatusConfirmed(scenarioId, control) {
        if (scenarioId == null || scenarioId == "")
            return "";
        var url = "/ForecastDashboard/ToggleStatus/";
        var request = {
            'scenarioId': scenarioId
        };
        $.get(url, request, function(data) {
            if (typeof LoadGraphData === 'function')
            LoadGraphData();
            if (typeof LoadPieData === 'function')
            LoadPieData();
            _evdttbl.DataTable().ajax.reload();
        });
        return '';
    }

    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 switchFDGraph() {
        changeUomModeForecastSwitcherState($('#expendituresMode').prop('checked'));
        if (typeof DrawGraph === 'function')
        DrawGraph();
    }

    function dropDownFixPosition(button, dropdown) {
        var dropDownLeft = button.offset().left - window.pageXOffset - dropdown.width() + button.outerWidth();
        var dropDownTop = button.offset().top + button.outerHeight() - window.pageYOffset;
        dropdown.css('position', 'fixed');
        dropdown.css('top', dropDownTop + "px");
        dropdown.css('left', dropDownLeft + "px");
    }

    function ToggleChart() {
        if ($('#graph-container').css('display') == 'none') {
            $('#graph-container').css('display', 'block');
            if (typeof DrawGraph === 'function')
            DrawGraph();
            if (typeof DrawPie === 'function')
                DrawPie();
        } else
            $('#graph-container').css('display', 'none');
        redrawFreezeColumn();
    }

    function ToggleCriteria() {
        if ($('#criteria-container').css('display') == 'none')
            $('#criteria-container').show();
        else
            $('#criteria-container').hide();
        redrawFreezeColumn();
    }

    function switchExpenditureMode() {
        if (!$('#expendituresMode').prop('checked')) {
            $('#uomModeForecast').switcher('enable');
            $('#uomModeForecast').switcher('on');
        }
        changeUomModeForecastSwitcherState($('#expendituresMode').prop('checked'));
        if (typeof LoadGraphData === 'function')
            LoadGraphData();
        if (typeof LoadPieData === 'function')
            LoadPieData();
    }

    function switchGroupByTeamMode() {
        onPreferencesItemClick();
        var settings = _evdttbl.dataTable().fnSettings();
        settings.sAjaxSource = '/ForecastDashboard/?startDate=' + $('#filterStartDate').val() + '&endDate=' + $('#filterEndDate').val() + '&type=' + $('#filterType').val() + '&status=' + $('#filterStatus').val() + '&classification=' + $('#filterClassification').val() + '&filterGroupByTeam=' + (_hideTeamGroupping ? 'false' : $('#groupByTeamMode').prop('checked')) + '&filterGroup=' + $('#group').val() + '&additionalParams=' + $('#' + _additionalFiltersId).val();
        _evdttbl.DataTable().ajax.reload();
    }


    function changeUomModeForecastSwitcherState(laborMode) {
        if ($('#chFDGraphMode').prop('checked') && laborMode)
            $('#uomModeForecast').switcher('enable');
        else
            $('#uomModeForecast').switcher('disable'); //console.log("costMode: " + costMode + "; laborMode: " + laborMode + "; uom:" + $('#uomModeForecast').prop('checked'));
    }

    function applyForecastDashboardFilter(skipChart) {
        if (!skipChart && typeof LoadGraphData === 'function')
            LoadGraphData();
        var settings = _evdttbl.dataTable().fnSettings();
        settings.sAjaxSource = '/ForecastDashboard/?startDate=' + $('#filterStartDate').val() + '&endDate=' + $('#filterEndDate').val() + '&type=' + $('#filterType').val() + '&status=' + $('#filterStatus').val() + '&classification=' + $('#filterClassification').val() + '&filterGroupByTeam=' + (_hideTeamGroupping ? 'false' : $('#groupByTeamMode').prop('checked')) + '&filterGroup=' + $('#group').val() + '&additionalParams=' + $('#' + _additionalFiltersId).val();
        _evdttbl.DataTable().ajax.reload();
    }

    function initDataTable() {
        var additionalParams = $('#' + _additionalFiltersId).val();
    	var mode = "main";
    	if (additionalParams != null && additionalParams != "") {
    		var paramsObj = JSON.parse(additionalParams);
    		if (paramsObj != null && paramsObj.mode != null && paramsObj.mode != "") {
    			mode = paramsObj.mode;
    		}
    	}
    	var allColumns = [];
        allColumns["ProjectName"] = {
            "sTitle": "Project Name",
            "sClass": "bigCol",
            "mData": "ProjectName",
            "sName": "ProjectName",
            "mRender": function(data, type, full) {
                if (full.InactiveCount > 0)
                    return '<a data-id="id_' + full.TeamId + full.ProjectId + '" class="rowexpander" href="javascript:;"><i class="fa fa-big-caret-right" title="Expand"></i></a> ' + data;
                else return data;
            }
        };
        allColumns["Name"] = {
            "sTitle": "Scenario Name",
            "sClass": "bigCol",
            "mData": "Name",
            "sName": "Name",
            "bVisible": isColumnVisible("col_Name"),
            "mRender": function(data, type, full) {
                var strA = '<a id="aN__rplcmnt_" onclick="return CheckLock(this.id, \'Scenario\', \'_rplcmnt_\')" class="popover-warning popover-dark" href="' + _scenDetailsUrl + '">' + data + '</a>';
                return strA.replace(/_rplcmnt_/g, full.Id);
            }
        };
        
        allColumns["ProjectedRevenue"] = {
            "sTitle": "Projected Revenue",
            "mData": "ProjectedRevenue",
            "sName": "ProjectedRevenue",
            "bVisible": isColumnVisible("col_ProjectedRevenue"),
            "mRender": function(data, type, full) {
                return (!data) ? "" : '$' + data.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
            }
        };
        allColumns["ExpectedGrossMargin"] = {
            "sTitle": "Expected Margin",
            "sClass": "smallCol",
            "mData": "ExpectedGrossMargin",
            "sName": "ExpectedGrossMargin",
            "bVisible": isColumnVisible("col_ExpectedGrossMargin"),
            "mRender": function(data, type, full) {
                return ((full.UseLMMargin) ? Math.round(full.ExpectedGrossMargin_LM * 1000) / 10 + ' % (L&M)' : Math.round(full.ExpectedGrossMargin * 1000) / 10 + ' %');
            }
        };
        allColumns["CalculatedGrossMargin"] = {
            "sTitle": "Calculated Gross",
            "sClass": "smallCol",
            "mData": "CalculatedGrossMargin",
            "sName": "CalculatedGrossMargin",
            "bVisible": isColumnVisible("col_CalculatedGrossMargin"),
            "mRender": function(data, type, full) { return ((!data) ? "0%" : Math.round(data * 1000) / 10 + ' %'); }
        };
        allColumns["CalculatedGrossMargin_LM"] = {
            "sTitle": "L&M Margin",
            "sClass": "smallCol",
            "mData": "CalculatedGrossMargin_LM",
            "sName": "CalculatedGrossMargin_LM",
            "bVisible": isColumnVisible("col_CalculatedGrossMargin_LM"),
            "mRender": function(data, type, full) { return ((!data) ? "0%" : Math.round(data * 1000) / 10 + ' %'); }
        };
        allColumns["CGSplit"] = {
            "sTitle": "Labor / Materials",
            "sClass": "smallCol",
            "mData": "CGSplit",
            "sName": "CGSplit",
            "bVisible": isColumnVisible("col_CGSplit"),
            "mRender": function(data, type, full) { return ((!full.CGSplit) ? "0%" : full.CGSplit * 100 + ' %') + " / " + ((!full.EFXSplit) ? "0%" : full.EFXSplit * 100 + ' %'); }
        };
        allColumns["StartDate"] = {
            "sTitle": "Start Date",
            "mData": "StartDate",
            "sName": "StartDate",
            "bVisible": isColumnVisible("col_StartDate"),
            "mRender": function(data, type, full) { return ((!data) ? "0" : formatFDDate(data)); }
        };
        allColumns["EndDate"] = {
            "sTitle": "End Date",
            "mData": "EndDate",
            "sName": "EndDate",
            "bVisible": isColumnVisible("col_EndDate"),
            "mRender": function(data, type, full) { return ((!data) ? "0" : formatFDDate(data)); }
        };
        allColumns["Priority"] = {
            "sTitle": "Priority",
            "sClass": "smallCol",
            "mData": "Priority",
            "sName": "Priority",
            "bVisible": isColumnVisible("col_Priority"),
            "mRender": function(data, type, full) { return data; }
        };
        allColumns["Probability"] = {
            "sTitle": "Probability",
            "sClass": "smallCol",
            "mData": "Probability",
            "sName": "Probability",
            "bVisible": isColumnVisible("col_Probability"),
            "mRender": function(data, type, full) {
                var txt = '';
                if (data * 100 > 0 && data * 100 <= 25)
                    txt = " (Low)";
                if (data * 100 > 25 && data * 100 <= 75)
                    txt = " (Medium)";
                if (data * 100 > 75 && data * 100 <= 99)
                    txt = " (High)";
                if (data * 100 == 100)
                    txt = " (Expected)";
                return ((!data) ? "0%" : Math.round(data * 100) + ' %' + txt);
            }
        };
        allColumns["TDDirectCosts"] = {
            "sTitle": "Top Down Direct Costs",
            "mData": "TDDirectCosts",
            "sName": "TDDirectCosts",
            "bVisible": isColumnVisible("col_TDDirectCosts"),
            "mRender": function(data, type, full) { return ((!data) ? "" : '$' + data.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')); }
        };
        allColumns["TDDirectCosts_LM"] = {
            "sTitle": "Top Down Direct Costs L&M",
            "mData": "TDDirectCosts_LM",
            "sName": "TDDirectCosts_LM",
            "bVisible": isColumnVisible("col_TDDirectCosts_LM"),
            "mRender": function(data, type, full) { return ((!data) ? "" : '$' + data.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')); }
        };
        allColumns["BUDirectCosts"] = {
            "sTitle": "Bottom Up Direct Costs",
            "mData": "BUDirectCosts",
            "sName": "BUDirectCosts",
            "bVisible": isColumnVisible("col_BUDirectCosts"),
            "mRender": function(data, type, full) {
                return ((!data) ? "" : '$' + data.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
            }
        };
        allColumns["BUDirectCosts_LM"] = {
            "sTitle": "Bottom Up Direct Costs L&M",
            "mData": "BUDirectCosts_LM",
            "sName": "BUDirectCosts_LM",
            "bVisible": isColumnVisible("col_BUDirectCosts_LM"),
            "mRender": function(data, type, full) { return ((!data) ? "" : '$' + data.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')); }
        };
        allColumns["CostSavings"] = {
            "sTitle": "Cost Savings",
            "mData": "CostSavings",
            "sName": "CostSavings",
            "bVisible": isColumnVisible("col_CostSavings"),
            "mRender": function (data, type, full) { return ((!data) ? "" : '$' + data.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')); }
        };
        allColumns["CostSavingsDuration"] = {
            "sTitle": "Cost Savings Duration",
            "mData": "CostSavingsDuration",
            "sName": "CostSavingsDuration",
            "bVisible": isColumnVisible("col_CostSavingsDuration"),
            "mRender": function (data, type, full) { return full.CostSavingsDuration; }
        };
        allColumns["ROIDate"] = {
            "sTitle": "ROI Date",
            "mData": "ROIDate",
            "sName": "ROIDate",
            "bVisible": isColumnVisible("col_ROIDate"),
            "mRender": function (data, type, full) { return ((!data) ? "" : formatFDDate(data)); }
        };
        allColumns["HardSoftSavings"] = {
            "sTitle": "Hard/Soft Savings",
            "mData": "HardSoftSavings",
            "sName": "HardSoftSavings",
            "bVisible": isColumnVisible("col_HardSoftSavings"),
            "mRender": function (data, type, full) { return full.HardSoftSavings; }
        };

       


        allColumns["ScenarioStatus"] = {
            "sTitle": "",
            "mData": "ScenarioStatus",
            "sName": "ScenarioStatus",
            "bVisible": isColumnVisible("col_ScenarioStatus"),
            "sClass": "nowrap bigCol",
            "mRender": function(data, type, full) {
                var cellhtml = "";
                if (full.ScenarioStatus != null) {
                    var options = "";
                    if (mode == "main") {
                        for (i = 0; i < _allScenarioGroups.length; i++) {

                            var arr = _allScenarioGroups[i].split(":");
                            var isFound = false;
                            for (j = 0; j < full.Groups.length; j++) {
                                if (arr[0] == full.Groups[j].substr(full.Groups[j].lastIndexOf(">") + 1)) {
                                    isFound = true;
                                    break;
                                }
                            }

                            options += "<li data-scenarioId='" + full.Id + "' data-groupId='" + arr[0] + "'>" +
                                "<input type='checkbox' style='margin-right: 5px;' id='" + full.Id + '_' + arr[0] + "' ";
                            if (isFound)
                                options += "checked";
                            options += "/><input type='hidden' value='";
                            if (isFound)
                                options += "checked";
                            else
                                options += "unchecked";
                            options += "'/><span class='glyphicon glyphicon-refresh glyphicon-refresh-animate hide'></span><label for='" + full.Id + '_' + arr[0] + "'>" + arr[1] + "</label></li>";
                        }

                        if (options.length > 0) {
                            options = "<div class=\"btn-group dropdown scenarioGroupDropdown\" id=\"copyto_" + full.Id + "\">" +
                                "<button type='button' class='btn btn-xs dropdown-toggle dropdown-fix-pos' data-toggle='dropdown'>Groups&nbsp;<i class='fa fa-caret-down'></i></button>" +
                                "<ul class='dropdown-menu dropdown-menu-form dropdown-menu-right' role='menu' onclick='onMenuItemClick(event, $(this))'>" + options + "</ul>" +
                                "</div>";
                        }
                    }

                    cellhtml = ((full.ScenarioStatus == 1) ? "<a class=\"btn btn-xs btn-warning popover-warning popover-dark\" id=\"" + full.Id + "\" onclick=\"if(CheckLock(this.id, 'Scenario', '" + full.Id + "')) {ToggleStatus('" + full.Id + "',  this);}\" title=\"Deactivate\" data-toggle=\"popover\" data-placement=\"left\"><i class=\"fa fa-times-circle-o\"></i></a>" : "<a class=\"btn btn-xs btn-primary popover-warning popover-dark\" id=\"" + full.Id + "\"  onclick=\"if(CheckLock(this.id, 'Scenario', '" + full.Id + "')) {ToggleStatus('" + full.Id + "', this);}\" title=\"Activate\" data-toggle=\"popover\" data-placement=\"left\"><i class=\"fa fa-check-circle-o\"></i></a>");
                    cellhtml += "&nbsp;" + options;
                }

                return cellhtml;
            }
        };

        allColumns["TeamName"] = {
            "sTitle": "Team Name",
            "sClass": "bigCol",
            "mData": "TeamName",
            "sName": "TeamName",
            "bVisible": false,
            "mRender": function (data, type, full) { return data; }
        };
        var sortedColumns = [];
        $.each(_pagePreferences, function (i, obj) {
            if (obj.key === 'tblColOrder') {
                $.each(obj.val, function (colIndex, colKey) {
                    var col = allColumns[colKey];
                    if (col)
                        sortedColumns.push(col);
                });
            }
        });
        if (sortedColumns.indexOf(allColumns["ProjectName"]) == -1) sortedColumns.push(allColumns["ProjectName"]);
        if (sortedColumns.indexOf(allColumns["Name"]) == -1) sortedColumns.push(allColumns["Name"]);
        if (sortedColumns.indexOf(allColumns["TeamName"]) == -1) sortedColumns.push(allColumns["TeamName"]);
        if (sortedColumns.indexOf(allColumns["ProjectedRevenue"]) == -1) sortedColumns.push(allColumns["ProjectedRevenue"]);
        if (sortedColumns.indexOf(allColumns["ExpectedGrossMargin"]) == -1) sortedColumns.push(allColumns["ExpectedGrossMargin"]);
        if (sortedColumns.indexOf(allColumns["CalculatedGrossMargin"]) == -1) sortedColumns.push(allColumns["CalculatedGrossMargin"]);
        if (sortedColumns.indexOf(allColumns["CalculatedGrossMargin_LM"]) == -1) sortedColumns.push(allColumns["CalculatedGrossMargin_LM"]);
        if (sortedColumns.indexOf(allColumns["CGSplit"]) == -1) sortedColumns.push(allColumns["CGSplit"]);
        if (sortedColumns.indexOf(allColumns["StartDate"]) == -1) sortedColumns.push(allColumns["StartDate"]);
        if (sortedColumns.indexOf(allColumns["EndDate"]) == -1) sortedColumns.push(allColumns["EndDate"]);
        if (sortedColumns.indexOf(allColumns["Priority"]) == -1) sortedColumns.push(allColumns["Priority"]);
        if (sortedColumns.indexOf(allColumns["Probability"]) == -1) sortedColumns.push(allColumns["Probability"]);
        if (sortedColumns.indexOf(allColumns["TDDirectCosts"]) == -1) sortedColumns.push(allColumns["TDDirectCosts"]);
        if (sortedColumns.indexOf(allColumns["TDDirectCosts_LM"]) == -1) sortedColumns.push(allColumns["TDDirectCosts_LM"]);
        if (sortedColumns.indexOf(allColumns["BUDirectCosts"]) == -1) sortedColumns.push(allColumns["BUDirectCosts"]);
        if (sortedColumns.indexOf(allColumns["BUDirectCosts_LM"]) == -1) sortedColumns.push(allColumns["BUDirectCosts_LM"]);
        if (sortedColumns.indexOf(allColumns["CostSavings"]) == -1) sortedColumns.push(allColumns["CostSavings"]);
        if (sortedColumns.indexOf(allColumns["CostSavingsDuration"]) == -1) sortedColumns.push(allColumns["CostSavingsDuration"]);
        if (sortedColumns.indexOf(allColumns["ROIDate"]) == -1) sortedColumns.push(allColumns["ROIDate"]);
        if (sortedColumns.indexOf(allColumns["HardSoftSavings"]) == -1) sortedColumns.push(allColumns["HardSoftSavings"]);
        if (sortedColumns.indexOf(allColumns["ScenarioStatus"]) == -1) sortedColumns.push(allColumns["ScenarioStatus"]);
        
        _evdttbl = $('#uomtbl').dataTable({
        	"bPaginate": false,
        	"dom": 'Rlfrtip',
        	"colReorder": {/*do not allow to reorder first column*/
        		"fixedColumnsLeft": 1,
        		"fixedColumnsRight": 0,
        		"reorderCallback": function () {
        			//also hide all expanded rows
        			$(_evdttbl.DataTable().rows()[0]).each(function (i, e) {
        				var row = _evdttbl.DataTable().row(e);
        				if (row.child.isShown()) {
        					row.child.hide();
        					$("tr[id*='additionalTR" + row.data().TeamId + row.data().ProjectId + "_']").remove();
        					$("#uomtbl").find("a[data-id='id_" + row.data().ProjectId + "']").children("i.fa").removeClass("fa-big-caret-down").addClass("fa-big-caret-right");
        				}
        			});
        			redrawFreezeColumn();
        		    onPreferencesItemClick();
        		}
        	},
        	"bSort": true,
        	"bFilter": false,
        	"bInfo": false,
        	"sScrollY": "",
        	"sScrollX": "",
        	"bScrollCollapse": true,
        	"bProcessing": false,
        	"bServerSide": true,
        	"bAutoWidth": false,
        	"sAjaxSource": '/ForecastDashboard/?startDate=' + $('#filterStartDate').val() + '&endDate=' + $('#filterEndDate').val() + '&type=' + $('#filterType').val() + '&status=' + $('#filterStatus').val() + '&classification=' + $('#filterClassification').val() + '&filterGroup=' + $('#group').val() + '&filterGroupByTeam=' + (_hideTeamGroupping ? 'false' : $('#groupByTeamMode').prop('checked')) + '&additionalParams=' + $('#' + _additionalFiltersId).val(),
            "sServerMethod": "POST",
            "drawCallback": function (settings) {
                //debugger;
                if (!_hideTeamGroupping && $('#groupByTeamMode').prop('checked')) {
                    var api = this.api();
                    var rows = api.rows({ page: 'current' }).nodes();
                    var last = null;
                    //debugger;
                    api.column(api.column(':contains(Team)')[0], { page: 'current' }).data().each(function (group, i) {

                        if (last !== group) {

                            $(rows).eq(i).before(

                                '<tr class="group"><td><strong>' + group + '</strong></td><td colspan="19"></td></tr>'
                            );

                            last = group;
                        }
                    });
                }

                $(window).scroll(function () {
                	$('.scenarioGroupDropdown').removeClass('open');
                });

                $('.dropdown-fix-pos').click(function () {
                	dropDownFixPosition($(this), $(this).parent().find('.dropdown-menu'));
                });

                $('.rowexpander').click(expandRow);
                $(window).resize(redrawFreezeColumn);

                redrawFreezeColumn();
            },
            "aoColumns": sortedColumns
        });
        
        //init column trigger
        if (_menu.find("label:contains('Column visibility')").length < 1) {
            var htmlToAppend = "<label class='padding-xs-hr'>Column visibility:</label><br/>";
            $(_evdttbl.dataTable().fnSettings().aoColumns).each(function (i, e) {
                //console.log(e);
                var text = e.sTitle;
                if (text != "Project Name" && text != "Team Name") {
                    if (text == "")
                        text = "Options";
                    //I've added inline style margin considering this block will be completely moved to "..." menu and these styles will be not needed going forward
                    htmlToAppend += '<li data-key="col_' + e.sName + '" class="padding-xs-hr"><div class="checkbox"><nobr><label><input type="checkbox" checked class="columnVisibilityTrigger px" data-column="' + e.sName + '"> <span class="lbl">' + text + '</span></label></nobr></div></li>';
                }
            });
            _menu.append(htmlToAppend);
        }

        _menu.find("input:checkbox").change(function () {
            onPreferencesItemClick($(this));
            var dtColumn = _evdttbl.DataTable().column($(this).attr('data-column') + ":name");
            var checked = $(this).is(":checked");
            if (dtColumn != null) {
                dtColumn.visible(checked);
                //also hide columns of expanded main rows
                $(".inactv-" + $(this).attr('data-column')).css("display", checked ? "" : "none");
            }
            redrawFreezeColumn();
        });
        
        $('#uom_wrapper .dataTables_processing').addClass("table-caption");
        $(".table-header").hide();
        $(".table-footer").hide();
        $(_evdttbl.dataTable()).attr("data-dashboardMode", mode);

		var options2 = {
			orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto'
		};
		$('#bs-datepicker-range').datepicker(options2);
		$('#filterStartDate').addClass('form-control');
		$('#filterEndDate').addClass('form-control');
		$('#filterStartDate').removeClass('text-box');
		$('#filterEndDate').removeClass('text-box');
		$('#filterStartDate').removeClass('single-line');
		$('#filterEndDate').removeClass('single-line');
        if (mode != "main") {
			$('#filterGroupContainer').hide();
		}
    }
    
    function isColumnVisible(key) {
        var result = true;
        $.each(_pagePreferences, function (i, obj) {
            if (obj.key === key) {
                result = obj.val;
                return false;//break each loop
            }
        });
        return result;
    }

	function redrawFreezeColumn() {
		$("#uom_freeze").remove();

		var div = $("<div id='uom_freeze'/>")
                .css({
                    "position": "absolute",
                    "top": $("#uom_container").position().top,
                    "left": $("#uom_container").position().left,
                    "border": "0",
                    "margin": "0"
                })
                .html($("#uom_container").html()
                .replace(/uomtbl/g, 'uomtbl_freeze'));
		div.find("td").css({
			//"margin-top": "-1px",
			//"border-color":"red"
			//"margin-left": "-1px"
		});

		div.find("table").css({
			"border-width": "0px"
		});
		$.each(div.find("tr"), function (i, o) {
			var tr = $(o);
			$.each(tr.find("th"), function (j, o1) {
				if (j > 0) {
					$(o1).remove();
				} else {
					$(o1).addClass("fixed")
                        .height($("#uom_container").find("th").eq(j).height() + (isMSIE() ? 1 : 0))
                        .width($("#uom_container").find("th").eq(j).width()+1)
                        .on("click", function () {
                            $("#uom_container").find("th").eq(0).click();
                        })
						.css("max-width", $("#uom_container").find("th").eq(j).width());

					div.width($("#uom_container").find("th").eq(j).outerWidth()+1);
				}
			});
			$.each(tr.find("td"), function (j, o1) {
				if (j > 0) {
					$(o1).remove();
				} else {
					$(o1).addClass("fixed")
                        .height($("#uom_container").find("tr").eq(i).find("td").eq(j).height() - (isMSIE() ? 0 : 0))
                        .width($("#uom_container").find("tr").eq(i).find("td").eq(j).width()+1)
						.css("max-width", $("#uom_container").find("tr").eq(i).find("td").eq(j).width()+1);
				}
			});
		});

		$("#uom_container").append(div);

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

		//show tooltips for clipped cells
		$('#uomtbl_freeze').on('mouseenter', 'td,th', function () {
			var $this = $(this);

			if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
				$this.attr('title', $this.text());
			}
		});
	}

	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;
	}

	function expandRow() {
	    //debugger;
		var mode = $(_evdttbl.dataTable()).attr("data-dashboardMode");
		var a = $(this).closest('a');
		var projectTr = $("#uomtbl").find("a[data-id='" + a.attr("data-id") + "']").closest("tr");
		var row = _evdttbl.DataTable().row(projectTr);
		var thisA = projectTr.find(".rowexpander");
		if (row.child.isShown()) {
		    $(thisA).children("i.fa").removeClass("fa-big-caret-down").addClass("fa-big-caret-right");
			row.child.hide();
			$("tr[id*='additionalTR" + row.data().TeamId + row.data().ProjectId + "_']").remove();
			redrawFreezeColumn();
		}
		else {
		    $(thisA).children("i.fa").removeClass("fa-big-caret-right").addClass("fa-big-caret-down");
		    row.child("<div id='infoPanel" + row.data().TeamId + row.data().ParentId + "'></div>").show();
		    var tr = $('#infoPanel' + row.data().TeamId + row.data().ParentId).closest('tr');
			var loadUrl = _getInactiveScenariosUrl.replace(/_rplcmnt_/g, row.data().ProjectId + '?startDate=' + $('#filterStartDate').val() + '&endDate=' + $('#filterEndDate').val() + '&type=' + $('#filterType').val() + '&status=' + $('#filterStatus').val() + '&classification=' + $('#filterClassification').val() + '&filterGroup=' + $('#group').val() + '&shown=' + row.data().Id + '&additionalParams=' + $('#' + _additionalFiltersId).val());
			$.get(loadUrl, function (response, status, xhr) {
				if (status == "error") {
					showErrorModal('Loading error', 'We are sorry but there was an error, please try again later.');
				}
				else {
					var dtColumns = _evdttbl.dataTable().fnSettings().aoColumns;
					$(response).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 == "ScenarioStatus")
						        htmlToAppend += 'nowrap bigCol ';
						    if (dtColumn.sName == "ProjectName" || dtColumn.sName == "Name")
						        htmlToAppend += 'bigCol ';
						    if (dtColumn.sName == "ExpectedGrossMargin" || dtColumn.sName == "CalculatedGrossMargin" || dtColumn.sName == "CalculatedGrossMargin_LM" || dtColumn.sName == "CGSplit" ||
						        dtColumn.sName == "Priority" || dtColumn.sName == "Probability" || dtColumn.sName == "CostSavings" || dtColumn.sName == "CostSavingsDuration" || dtColumn.sName == "ROIDate" || dtColumn.sName == "HardSoftSavings")
						        htmlToAppend += 'smallCol ';
							htmlToAppend += '"';
							htmlToAppend += '>';
							if (dtColumn.sName == "ScenarioStatus") {
								//"options" column
            					if (responseRow.ScenarioStatus != null) {
            						var options = "";
            						if (mode == "main") {
            							for (var i = 0; i < _allScenarioGroups.length; i++) {
            								var arr = _allScenarioGroups[i].split(":");
            								var isFound = false;
            								for (var j = 0; j < responseRow.Groups.length; j++) {
            									if (arr[0] == responseRow.Groups[j].substr(responseRow.Groups[j].lastIndexOf(">") + 1)) {
            										isFound = true;
            										break;
            									}
            								}
            								options += "<li data-scenarioId='" + responseRow.Id + "' data-groupId='" + arr[0] + "'>" +
												"<input type='checkbox' style='margin-right: 5px;' id='" + responseRow.Id + '_' + arr[0] + "' ";
            								if (isFound)
            									options += "checked";
            								options += "/><input type='hidden' value='";
            								if (isFound)
            									options += "checked";
            								else
            									options += "unchecked";
            								options += "'/><span class='glyphicon glyphicon-refresh glyphicon-refresh-animate hide'></span><label for='" + responseRow.Id + '_' + arr[0] + "'>" + arr[1] + "</label></li>";
            							}
            							if (options.length > 0) {
            								options = "<div class=\"btn-group dropdown scenarioGroupDropdown\" id=\"copyto_" + responseRow.Id + "\">" +
														"<button type='button' class='btn btn-xs dropdown-toggle dropdown-fix-pos' data-toggle='dropdown' onclick='dropDownFixPosition($(this), $(this).parent().find(\".dropdown-menu\"));'>Groups&nbsp;<i class='fa fa-caret-down'></i></button>" +
														"<ul class='dropdown-menu dropdown-menu-form dropdown-menu-right' role='menu' onclick='onMenuItemClick(event, $(this))'>" + options + "</ul>" +
														"</div>";
            							}
            						}
            						htmlToAppend += ((responseRow.ScenarioStatus == 1) ? "<a class=\"btn btn-xs btn-warning popover-warning popover-dark\" id=\"" + responseRow.Id + "\" onclick=\"if(CheckLock(this.id, 'Scenario', '" + responseRow.Id + "')) {ToggleStatus('" + responseRow.Id + "',  this);}\" title=\"Deactivate\" data-toggle=\"popover\" data-placement=\"left\"><i class=\"fa fa-times-circle-o\"></i></a>" : "<a class=\"btn btn-xs btn-primary popover-warning popover-dark\" id=\"" + responseRow.Id + "\"  onclick=\"if(CheckLock(this.id, 'Scenario', '" + responseRow.Id + "')) {ToggleStatus('" + responseRow.Id + "', this);}\" title=\"Activate\" data-toggle=\"popover\" data-placement=\"left\"><i class=\"fa fa-check-circle-o\"></i></a>");
            						htmlToAppend += "&nbsp;" + options;
            					}
							}
							else if (dtColumn.sName == "ProjectName") {
								//first column/project name
								htmlToAppend += '';//no project name in inner rows
							}
							else if (dtColumn.sName == "Name") {
								//scenario name
							    var strA = '<a id="aN__rplcmnt_" onclick="return CheckLock(this.id, \'Scenario\', \'_rplcmnt_\')" class="popover-warning popover-dark" href="' + _scenDetailsUrl + '">' + responseRow.Name + '</a>';
							    htmlToAppend += strA.replace(/_rplcmnt_/g, responseRow.Id);
							}
							else if (dtColumn.sName == "ProjectedRevenue" || dtColumn.sName == "TDDirectCosts" || dtColumn.sName == "TDDirectCosts_LM" 
								|| dtColumn.sName == "BUDirectCosts" || dtColumn.sName == "BUDirectCosts_LM") {
								//money
								htmlToAppend += (!responseRow[dtColumn.sName]) ? "" : '$' + responseRow[dtColumn.sName].toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
							}
							else if (dtColumn.sName == "ExpectedGrossMargin") {
								//ExpectedGrossMargin
								htmlToAppend += ((responseRow.UseLMMargin != 0) ? Math.round(responseRow.ExpectedGrossMargin_LM * 1000) / 10 + ' % (L&M)' : Math.round(responseRow.ExpectedGrossMargin * 1000) / 10 + ' %');
							}
							else if (dtColumn.sName == "CalculatedGrossMargin" || dtColumn.sName == "CalculatedGrossMargin_LM" ) {
								//other percents
								htmlToAppend += ((!responseRow[dtColumn.sName]) ? "0%" : Math.round(responseRow[dtColumn.sName] * 1000) / 10 + ' %');
							}
							else if (dtColumn.sName == "CGSplit") {
								//CGSplit
								htmlToAppend += ((!responseRow.CGSplit) ? "0%" : responseRow.CGSplit * 100 + ' %') + " / " + ((!responseRow.EFXSplit) ? "0%" : responseRow.EFXSplit * 100 + ' %');
							}
							else if (dtColumn.sName == "StartDate" || dtColumn.sName == "EndDate") {
								//dates
								htmlToAppend += ((!responseRow[dtColumn.sName]) ? "0" : formatFDDate(responseRow[dtColumn.sName]));
							}
							else if (dtColumn.sName == "CostSavings" || dtColumn.sName == "CostSavingsDuration" || dtColumn.sName == "HardSoftSavings") {
							    htmlToAppend += ((!responseRow[dtColumn.sName]) ? "" : responseRow[dtColumn.sName]);
							}
							else if (dtColumn.sName == "Probability") {
								//Probability
                				var txt = '';
                				if (responseRow.Probability * 100 > 0 && responseRow.Probability * 100 <= 25)
                					txt = " (Low)";
                				if (responseRow.Probability * 100 > 25 && responseRow.Probability * 100 <= 75)
                					txt = " (Medium)";
                				if (responseRow.Probability * 100 > 75 && responseRow.Probability * 100 <= 99)
                					txt = " (High)";
                				if (responseRow.Probability * 100 == 100)
                					txt = " (Expected)";
                				htmlToAppend += ((!responseRow.Probability) ? "0%" : Math.round(responseRow.Probability * 100) + ' %' + txt);
							}
							else if (dtColumn.sName == "ROIDate") {
								htmlToAppend += (!responseRow[dtColumn.sName]) ? "" : formatFDDate(responseRow[dtColumn.sName]);
							}
							else {
								//"regular" columns: Priority, 
								htmlToAppend += responseRow[dtColumn.sName];
							}
							htmlToAppend += "</td>";
						});
						if (responseRowIndex == 0) {
							$(tr).html(htmlToAppend);
						} 
						else {
						    $(tr).after('<tr id="additionalTR' + row.data().TeamId + responseRow.ProjectId + '_' + responseRowIndex + '">' + htmlToAppend + '</tr>');
						}
					});
					if (response.length == 0) {
						$(tr).html("<td></td><td colspan='15'>No records found</td>");
					}
					redrawFreezeColumn();
				}
	        });
	        }
	        }

	function onPreferencesItemClick(menuItem) {
	    var postData = { pageKey: _pageKey };
	    var items = [];
	    _menu.children('li').each(function (index, li) {
	        var key = $(li).data('key');
	        if (!!key) {
	            var item = $(li).find('input[type=checkbox]');
	            var val = item.prop('checked');
	            if (!!val)
	                items.push({ key: key, val: val });
	            else
	                items.push({ key: key, val: false });
	        }
	    });
	    var colOrder = [];
	    $.each(_evdttbl.dataTable().fnSettings().aoColumns, function(i, obj) {
	        colOrder.push(obj.mData);
	    });
	    items.push({ key: 'tblColOrder', val: colOrder });
	    postData.data = JSON.stringify(items);
	    $.post(_savePrefUrl, postData, function (data) {
	        console.log('save: ' + data);
	    }).error(function (h, e) {
	        console.log("save. h = " + h);
	        console.log("save. e = " + e);
	    });
	}

	function initMenuItems() {
	    if (_menu.find("label:contains('Show Criteria')").length < 1) {
	        if (typeof LoadGraphData === 'function')
	            _menu.append('<li class="padding-xs-hr" data-key="showChart"><div class="checkbox"><label><input type="checkbox" id="chkShowChart" checked class="columnVisibilityTrigger px" onclick="ToggleChart()"/> <span class="lbl">Show Chart</span></label></div></li>');
	        _menu.append('<li class="padding-xs-hr" data-key="showCriteria"><div class="checkbox"><label><input type="checkbox" id="chkShowCriteria" checked class="columnVisibilityTrigger px" onclick="ToggleCriteria()"/> <span class="lbl">Show Criteria</span></label></div></li>');
	        if (typeof LoadGraphData === 'function') {
	            _menu.append('<li class="padding-xs-hr" data-key="chartMode"><label><span class="switcherLbl">Chart mode</span><input type="checkbox" onclick="switchFDGraph()" name="chMode" id="chFDGraphMode" class="switcher" /></label></li>');
	            _menu.append('<li class="padding-xs-hr" data-key="uomMode"><label><span class="switcherLbl">Quantity as</span><input type="checkbox" checked name="uomModeForecast" id="uomModeForecast" class="switcher px" onclick="LoadGraphData()"/></label></li>');
	        }
	        _menu.append('<li class="padding-xs-hr" data-key="expendituresMode"><label><span class="switcherLbl">Expenditures</span><input type="checkbox" checked name="expendituresMode" id="expendituresMode" class="switcher px" onclick="switchExpenditureMode()"/></label></li>');
	        if (!_hideTeamGroupping)
	            _menu.append('<li class="padding-xs-hr" data-key="groupByTeamMode"><label><span class="switcherLbl">Group By Team</span><input type="checkbox" checked name="groupByTeamMode" id="groupByTeamMode" class="switcher px" onclick="switchGroupByTeamMode()"/></label></li>');
	        if (typeof LoadPieData === 'function') {
	            _menu.append('<li class="padding-xs-hr" data-key="pieMode"><label><span class="switcherLbl">Pie Chart mode</span><input type="checkbox" checked name="pieModeForecast" id="pieModeForecast" class="switcher px" onclick="DrawPie()"/></label></li>');
	            _menu.append('<li class="padding-xs-hr" data-key="pieReloadMode"><label><span class="switcherLbl">Reload Chart</span><input type="checkbox" checked name="pieReload" id="pieReload" class="switcher px"/></label></li>');
	        }
	        _menu.append('<li class="divider"></li>');
	    }
	}
	
    function initForecastDashboard() {
        $.post(_getPrefUrl, { key: _pageKey }, function (response) {
            console.log(response);
            //debugger;
            if ($('#' + _additionalFiltersId).val() != '') {
                if (JSON.parse($('#' + _additionalFiltersId).val()).mode == 'team')
                    _hideTeamGroupping = true;
            }
            if (response.Data == null || response.Data == '')
                _pagePreferences = [];
            else
                _pagePreferences = JSON.parse(response.Data);
            if (_menu == null)
                _menu = $("#@Model.MenuId");
            initMenuItems();
            _menu.click(function (event) {
                event.stopPropagation();
            });

            //initDataTable();

            //show tooltips for clipped cells
            for (var i = 0; i < _pagePreferences.length; i++) {
                if (!_pagePreferences[i].key)
                    continue;
                var li = _menu.find('li[data-key=' + _pagePreferences[i].key + ']');
                if (li == null)
                    continue;
                var val = _pagePreferences[i].val != null ? _pagePreferences[i].val : null;
                li.find('input[type=checkbox]').prop('checked', val != null ? val : false);
            }

            initDataTable();

            $('#uomModeForecast').switcher({
                on_state_content: '# Hours',
                off_state_content: '# Resources'
            });
            $('#uomModeForecast').parent().css("width", "93px");
            $('#chFDGraphMode').switcher({
                on_state_content: 'Quantity',
                off_state_content: 'Cost'
            });
            $('#chFDGraphMode').parent().css("width", "90px");
            $('#expendituresMode').switcher({
                on_state_content: 'Labor',
                off_state_content: 'Non-labor'
            });
            $('#expendituresMode').parent().css("width", "82px");

            if (!_hideTeamGroupping) {
                $('#groupByTeamMode').switcher({
                    on_state_content: 'On',
                    off_state_content: 'Off'
                });
                $('#groupByTeamMode').parent().css("width", "82px");
            }

            if ($('#chkShowChart').prop('checked'))
                $('#graph-container').show();
            else
                $('#graph-container').hide();
            if ($('#chkShowCriteria').prop('checked'))
                $('#criteria-container').show();
            else
                $('#criteria-container').hide();
            $('#uomtbl').on('mouseenter', 'td,th', function () {
                var $this = $(this);
                if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
                    $this.attr('title', $this.text());
                }
            });
            if (typeof LoadPieData === 'function') {
                $('#pieModeForecast').switcher({
                    on_state_content: 'Cost',
                    off_state_content: 'Time'
                });
                $('#pieModeForecast').parent().css("width", "82px");
                $('#pieReload').switcher({
                    on_state_content: 'Yes',
                    off_state_content: 'No'
                });
                $('#pieReload').parent().css("width", "82px");
            }

            changeUomModeForecastSwitcherState($('#expendituresMode').prop('checked'));
            if (typeof LoadGraphData === 'function')
            LoadGraphData();
            if (typeof LoadPieData === 'function')
            LoadPieData();
        }).error(function (h, e) {
            console.log("h = " + h);
            console.log("e = " + e);
        });
    }
	init.push(function () {
	    initForecastDashboard();
	});
</script>