@using EnVisage.Models
@model object
@{	// SA. ENV-492. Team dashboard beautifying
    if (!(Model is TeamboardModel) && !(Model is ViewBoardModel))
	{
		<text>
		<h4 class="modal-title">Projects by Status</h4>
		</text>
	}
}

<div class="graph-container form-group-margin" id="graph-container-FD" style="min-height:260px;min-width:400px;">
	<div id="jq-flot-graph-FD"></div>
</div>
<script type="text/javascript">
	var _dataForChart = null;
	function DrawGraph() {
        if (!_dataForChart) {
            if ($('#chkShowChart').is(":checked")) {
                LoadGraphData();
            }
            return;
        }
        var chartData = new Array();
        var i;
        if (!$('#chFDGraphMode').prop('checked')) {
            for (i = 0; i < _dataForChart.length; i++) {
                if (_dataForChart[i].type == "Cost") {
                    chartData.push(_dataForChart[i]);
                }
            }
        } else {
            for (i = 0; i < _dataForChart.length; i++) {
                if (_dataForChart[i].type == "Quantity") {
                    chartData.push(_dataForChart[i]);
                }
            }
        }

		// Init Chart
        $('#graph-container-FD').html(' <div id="jq-flot-graph-FD"> </div> ');
        $('#jq-flot-graph-FD').pixelPlot(chartData, {
            series: {
                points: {
                    show: false
                },
                lines: {
                    show: true,
                    fill: true,
                    steps: false
                },
                stack: true
            },
            xaxis: {
                mode: "time",
                tickSize: [1, "month"],
                tickLength: 0
            }
        }, {
            height: 205,
            tooltipText: "y + ' units at ' + (new Date(x)).toDateString()"
        });

	    //triggering finished drawing graph event
        $(document).trigger('finishedDrawing');
    }

    function LoadGraphData() {
        if ($('#chkShowChart').is(":checked")) {
            
			@{	// SA. ENV-492. Team dashboard beautifying
				if (!(Model is TeamboardModel) && !(Model is ViewBoardModel))
				{
					<text>
        				$('#graph-container-FD').html('<div id="jq-flot-graph-FD"><span class="control-label" style="margin-left: 10px;"><img src="@Url.Content("~/Content/images/load.gif")" /> loading...</span></div>');
        			</text>
				}
				else
				{
					<text>
        				$('#graph-container-FD').html('<div id="jq-flot-graph-FD"><div class="loadRotator"><span>' +
							'<img class="valign-middle" src="@Url.Content("~/Content/images/loadFA.gif")" />&nbsp;&nbsp;loading...</span>' +
							'</div></div>');
        			</text>
				}
			}

            var additionalFilters = $('#' + _additionalFiltersId).val();
            var requestData = {
                StartDate: $('#filterStartDateChart').val(),
                EndDate: $('#filterEndDateChart').val(),
                Type: $('#filterType').val(),
                ProjectStatuses: $('#filterStatus').val() || [],
                Teams: getSelectedTeamsOrViews("Teams"),
                Views: getSelectedTeamsOrViews("Views"),
                ProjectTypes: $('#filterClassification').val() || [],
                FilterGroups: $('#group').val() || [],
                IsLaborMode: $('#expendituresMode').prop('checked'),
                IsUOMHours: $('#uomModeForecast').prop('checked'),
                StrategicGoals: $('#filterGoal').val() || [],
                AdditionalParams: additionalFilters ? JSON.parse(additionalFilters) : {}
            };
            $.post('/ForecastDashboard/GetGraphData', requestData, function (data) {
                _dataForChart = data;
                DrawGraph();
            });
        } else {
            _dataForChart = null;
        }
    };
</script>