@* ROW 2 COL 3 - CARD: BAR CHART --------------------------------- *@
<div class="pv-menu k-content" id="perfomrmanceChartsContainer">
    <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('Bar1');">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="performanceChartMode" name="performanceChartMode" id="performanceChartMode" class="switcher px" />
            </li>
            <li>
                <label>
                    <span class="switcherLbl">Group by</span>
                </label>
                <input type="checkbox" data-key="performanceChartGroupBy" checked="checked" name="performanceChartGroupBy" id="performanceChartGroupBy" class="switcher px" />
            </li>
        </ul>
    </div>
</div>
<div class="pv-title">
    Top 5 Projects
</div>
<div id="barChartsContainer">
    <div class='loadRotator'>
        <span>
            <img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />&nbsp;&nbsp;loading...
        </span>
    </div>
    <div class="pv-chart chart-bar" id="chartBar1"></div>
    <div class="pv-chart chart-bar" id="chartBar2"></div>
    <div class="pv-chart chart-bar" id="chartBar3"></div>
</div>


<script>
    var C_PERFORMANCE_CHART_BASE_COLOR = "#bcccc7"; // "#e1ede9"; //"#31a663";
    var C_PERFORMANCE_CHART_RED_COLOR = "#d9534f";
    var C_PERFORMANCE_CHART_BLUE_COLOR = "#428bca";
    var C_PERFORMANCE_CHART_GREEN_COLOR = "#5cb85c";
    var _performanceData;

    init.push(function () {
        @if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion < 11)
        {
        <text>AmCharts.ready(function (a) { loadBarData(); });</text>
        }
        else
        {
        <text>loadBarData();</text>
        }

        initBarMenu();
        $("#cardBar1").on("maximized", function() { invalidateChartSize("chartStacked1"); });
        $("#cardBar1").on("maximizing", function (e) {
            enableCategoryAxisLables("chartBar1");
            enableCategoryAxisLables("chartBar2");
            enableCategoryAxisLables("chartBar3");
        });
        $("#cardBar1").on("restored", function (e) {
            enableCategoryAxisLables("chartBar1", false);
            enableCategoryAxisLables("chartBar2", false);
            enableCategoryAxisLables("chartBar3", false);
            invalidateChartSize("chartStacked1");
        });
    });

    function enableCategoryAxisLables(chartId, enable) {
        var chart = findChart(chartId);
        chart.categoryAxis.labelsEnabled = (enable === undefined ? true : enable);
    }

    function loadBarData(filterData) {
        $("#barChartsContainer .loadRotator").show();

        var timePoint = DateTimeConverter.getLocalNowMs();
        var url = "@Url.Action("GetPerformanceGraphData", "ForecastDashboard")";

        filterData = filterData || getFilterDataObject();
        var graphMode = $('#performanceChartGroupBy').prop('checked') ? graphMode = 1 : graphMode = 2;
        filterData["GraphMode"] = graphMode;
        filterData["TimePoint"] = timePoint;

        $.post(url, filterData)
            .done(function (data) {
                _performanceData = data;
                setBarData("chartBar1", data.CurrentPeriod);
                setBarData("chartBar2", data.PrevPeriod);
                setBarData("chartBar3", data.NextPeriod);
                $("#barChartsContainer .loadRotator").hide();

                // Set diagramm title
                if (graphMode == 1) {
                    $('#cardBar1').find('.pv-title').text("Top 5 Projects");
                }
                if (graphMode == 2) {
                    $('#cardBar1').find('.pv-title').text("Top 5 Projects by Type");
                }
            });
    }

    function setBarData(id, periodData) {
        var chart = findChart(id);
        chart.graphs = [];
        chart.clearLabels();

        var series = isCostMode() ? periodData.series : periodData.quantitySeries;
        var barOptions = isCostMode() ? periodData.barOptions : periodData.barOptionsQuantity;
        var chartData = new Array();

        chart.valueAxes[0].unit = isCostMode() ? "$" : "";
        chart.series = series;
        chart.barOptions = barOptions;
        chart.angle = 0;
        chart.depth3D = 0;

        for (var serieIndex = 0; serieIndex < 4; serieIndex++) {
            var graph = new AmCharts.AmGraph();
            graph.type = "column";
            graph.clustered = false;
            
            graph.valueField = "value" + serieIndex;
            graph.fillAlphas = 1;
            graph.lineAlpha = 0.2;
            graph.stackable = false;
            graph.columnWidth = 0.3;
            graph.balloonFunction = balloonFunction;
            chart.addGraph(graph);
            if (serieIndex == 0) {
                graph.fillColors = [C_PERFORMANCE_CHART_BASE_COLOR, C_PERFORMANCE_CHART_BASE_COLOR];
                graph.columnWidth = 0.5;

            } else if (serieIndex == 1) {
                graph.fillColors = [C_PERFORMANCE_CHART_RED_COLOR, C_PERFORMANCE_CHART_RED_COLOR];

            } else if (serieIndex == 2) {
                graph.fillColors = [C_PERFORMANCE_CHART_BLUE_COLOR, C_PERFORMANCE_CHART_BLUE_COLOR];

            } else if (serieIndex == 3) {
                graph.fillColors = [C_PERFORMANCE_CHART_GREEN_COLOR, C_PERFORMANCE_CHART_GREEN_COLOR];

            }
        }
        
        for (var i = 0; i < barOptions.length; i++) {
            var proj = barOptions[i][0];
            var dataItem = {
                proj: proj,
                projectName: barOptions[i][1]
            };

            for (var serieIndex = 0; serieIndex < series.length; serieIndex++) {
                var serie = series[serieIndex];
                for (var projIndex = 0; projIndex < serie.data.length; projIndex++) {
                    if (serie.data[projIndex][0] == proj) {
                        dataItem["value" + serieIndex] = serie.data[projIndex][1];
                    }
                }
            }
            chartData.push(dataItem);
        }
        updateChart(id, chartData);
    }

    function isCostMode() {
        return $("#performanceChartMode").prop("checked");
    }

    function balloonFunction(item, graph) {
        var chart = graph.chart;
        return getHint(chart.series, chart.barOptions, item.index);
    }

    function getHint(series, barOptions, index) {
        var hintText = barOptions[index][1] + "<br/>",
            unit = isCostMode() ? "$" : "",
            mode = isCostMode() ? "costs" : "quantity";
        if (series[1].data[index][1] > 0 || series[2].data[index][1] > 0 || series[3].data[index][1] > 0) {
            var summaryCosts = series[4].data[index][1];
            var varianceCost = 0;
            var sign = "";

            if (series[1].data[index][1] > 0) {
                varianceCost = series[1].data[index][1];
                sign = "+";
            }

            if (series[2].data[index][1] > 0) {
                varianceCost = series[2].data[index][1];
                sign = "-";
            }

            if (series[3].data[index][1] > 0) {
                varianceCost = series[3].data[index][1];
                sign = "+";
            }

            hintText += ("Actual " + mode + ": " + unit + (varianceCost != 0 ? varianceCost.formatNumber() : forecastCosts.formatNumber()));//" (" + sign + unit + varianceCost.formatNumber() + " to forecast)";
            
            if (summaryCosts != 0)
                hintText += " (" + sign + unit + summaryCosts.formatNumber() + " to forecast)";
            else
                hintText += " (the same as forecast)";
        }
        else {
            var forecastCosts = series[0].data[index][1];
            hintText += ("No actuals present (forecast " + mode + ": " + unit + forecastCosts.formatNumber() + ")");
        }
        return hintText;
    }

    function initBarMenu() {
        $('#performanceChartMode').switcher({
            on_state_content: 'Cost',
            off_state_content: 'Quantity'
        });
        $('#performanceChartGroupBy').switcher({
            on_state_content: 'Project',
            off_state_content: 'Type'
        });
        $('#performanceChartMode').click(function () {
            saveForecastDashboardPreferences();
            switchPerformanceChartMode();
        });
        $('#performanceChartGroupBy').click(function () {
            saveForecastDashboardPreferences();
            loadBarData();
        });
    }

    function switchPerformanceChartMode() {
        setBarData("chartBar1", _performanceData.CurrentPeriod);
        setBarData("chartBar2", _performanceData.PrevPeriod);
        setBarData("chartBar3", _performanceData.NextPeriod);
    }
</script>