@* ROW 1 COL 2 - CARD: STACKED CHART ------------------------------------ *@

<div class="pv-menu k-content">
    <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-ellipsis-h"></i>
        </button>
        <ul class="dropdown-menu">
            <li class="widget-full-screen"><a href="#" class="full-screen" onclick="pv.chart.menu.select('Stacked1');">Full Screen</a></li>
            <li role="separator" class="divider widget-full-screen"></li>
            <li>
                <label>
                    <span class="switcherLbl">Mode</span>
                </label>
                <input type="checkbox" data-key="chartMode" name="chMode" id="chFDGraphMode" checked class="switcher" />
            </li>
            <li>
                <label>
                    <span class="switcherLbl">Quantity As</span>
                </label>
                <input type="checkbox" data-key="uomMode" name="uomModeForecast" id="uomModeForecast" class="switcher px" />
            </li>
        </ul>
    </div>
</div>
<div class="pv-chart" id="chartStacked1" style="height: 100%;">
    <div class="loadRotator">
        <span>
            <img class="valign-middle" src="@Url.Content("~/Content/images/loadFA.gif")" />&nbsp;&nbsp;loading...
        </span>
    </div>
</div>

<script>
    // this partial view should be extracted into the jquery widget and store data in the private cache
    var _projectsByStatusChartData = null;
    init.push(function () {
        @if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion < 11)
        {
        <text>AmCharts.ready(function (a) { projectsByStatusShowChartData(); });</text>
        }
        else
        {
        <text>projectsByStatusShowChartData();</text>
        }

        initChartMenu();
        $("#cardStacked1").on("maximized", function () { invalidateChartSize("chartStacked1"); });
        $("#cardStacked1").on("restored", function () { invalidateChartSize("chartStacked1"); });
    });

    function initChartMenu() {
        $('#chFDGraphMode').switcher({
            on_state_content: 'Quantity',
            off_state_content: 'Cost'
        });
        $('#uomModeForecast').switcher({
            on_state_content: '# Hours',
            off_state_content: '# Resources'
        });

        //TODO: redraw chart without getting data from server. put loaded data into local variable and use it. chart.validateNow() clears bar charts;
        $('#chFDGraphMode').click(function () {
            saveForecastDashboardPreferences();
            projectsByStatusShowChartData();

            uomModeForecastEnable();
        });
        $('#uomModeForecast').click(function () {

            $('#cardOpt1').optimuse('showPreloader');
            $('#cardOpt1').optimuse('changeUOMMode', $(this).is(':checked'));
            $('#cardOpt1').optimuse('hidePreloader');
            $('#cardOpt1').optimuse('mouveBarTitles');

            saveForecastDashboardPreferences();
            projectsByStatusShowChartData();
        });

        uomModeForecastEnable();
    }

    function uomModeForecastEnable() {
        var chFDGraphMode = $("input#chFDGraphMode.switcher");
        if (chFDGraphMode.length > 0) {
            var cheked = chFDGraphMode[0].checked;
            if (cheked) {
                $('#uomModeForecast').switcher('enable');
            } else {
                $('#uomModeForecast').switcher('disable');
            }
        }
    }

    // should be extracted as method of jquery widget
    function projectsByStatusShowPreloader() {
        //TODO: use the same approach for all charts. There is a problem with barChart (performance chart).
        $("#chartStacked1").html("<div class='loadRotator'>\
        <span>\
            <img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />&nbsp;&nbsp;loading...\
        </span>\
        </div>");
    };
    function projectsByStatusSetData(projectsByStatusChartData) {
        _projectsByStatusChartData = projectsByStatusChartData;
    };
    function projectsByStatusShowChartData() {
        var chart = findChart("chartStacked1");
        chart.graphs = [];

        var chartData = new Array();
        var isQuantityMode = $('#chFDGraphMode').prop('checked');
        var isUOMHoursMode = $('#uomModeForecast').prop('checked');
        var graphMode = isQuantityMode ? (isUOMHoursMode ? "Hours" : "Resources") : "Cost";

        if (_projectsByStatusChartData && _projectsByStatusChartData.Headers && _projectsByStatusChartData.Headers.length > 0) {
            var offset = (new Date()).getTimezoneOffset() * 60 * 1000;
            // gather all existing project status
            var clrs = [];
            var labels = {};
            var uniqueColorIndex = 0;
            for (var i = 0; i < _projectsByStatusChartData.Headers.length; i++) {
                if (_projectsByStatusChartData.Headers[i].color && clrs.indexOf(_projectsByStatusChartData.Headers[i].color) == -1)
                    clrs.push(_projectsByStatusChartData.Headers[i].color);
            }
            // build graph lines
            for (var i = 0; i < _projectsByStatusChartData.Headers.length; i++) {
                var graphData = _projectsByStatusChartData.Headers[i];
                if (graphData.type === graphMode) {
                    var graph = new AmCharts.AmGraph();
                    graph.title = graphData.label;
                    graph.balloonText = (isQuantityMode ? "" : "$") + "[[total]] at [[(new Date(category)).toDateString()]]";
                    graph.balloonFunction = function (graphDataItem, graph) {
                        var value = graphDataItem.values.close;
                        value = value || graphDataItem.values.value;
                        return (isQuantityMode ? "" : "$") + value.formatNumber(false) + " at " + (new Date(graphDataItem.category)).toDateString();
                    };
                    graph.valueField = "value" + i;
                    graph.bullet = "round";
                    graph.bulletAlpha = 0;
                    graph.bulletBorderColor = "#FFFFFF";
                    graph.bulletBorderThickness = 1;
                    graph.bulletSize = 5;
                    graph.lineThickness = 2;
                    graph.lineAlpha = 1;

                    if (graphData.color) {
                        graph.lineColor = graphData.color;
                    }
                    else {
                        if (labels[graphData.label])
                            graph.lineColor = labels[graphData.label];
                        else {
                            graph.lineColor = getUniqueColor(uniqueColorIndex++, clrs);
                            labels[graphData.label] = graph.lineColor;
                        }
                    }
                    graph.fillAlphas = graphData.lines.fill ? 0.7 : 0;
                    graph.stackable = graphData.stack;

                    var legend = new AmCharts.AmLegend();

                    legend.markerType = "square";
                    legend.markerSize = 11;
                    legend.marginRight = 10;
                    legend.marginLeft = 10;
                    legend.autoMargins = false;
                    legend.valueWidth = 5;
                    legend.align = "center";
                    chart.addLegend(legend);

                    chart.addGraph(graph);

                    var categoryAxis = chart.categoryAxis;
                    categoryAxis.gridAlpha = 0;

                    chart.valueAxes[0].unit = isQuantityMode ? "" : "$";

                    // in case when there is only one week in the result we should show two points: range start date - range end date
                    if (graphData.data.length === 1 && graphData.data[0] && graphData.data[0].length === 2) {
                        graphData.data.push(graphData.data[0].slice());
                        graphData.data[0][0] = _projectsByStatusChartData.PeriodStartDate;
                    }

                    for (var week = 0; week < graphData.data.length; week++) {
                        var date = graphData.data[week][0] + offset + 1;
                        var value = graphData.data[week][1];

                        var dataItem = {};
                        var addedItems = $.grep(chartData, function (x, index) {
                            return x.category && x.category == date;
                        });
                        if (addedItems.length > 0) {
                            dataItem = addedItems[0];
                        }
                        else {
                            chartData.push(dataItem);
                        }
                        dataItem.category = date;
                        dataItem["value" + i] = value;
                    }
                }
            }
        }

        chart.validateNow();
        updateChart("chartStacked1", chartData);

        //var tspans = $("#chartStacked1").find('.amcharts-chart-div').find("text[text-anchor='end']").find("tspan[y='6']");
        //if (!isQuantityMode) {
        //    tspans.append("$");
        //}
    }
</script>