@using EnVisage.Code
<h4 class="modal-title" id="performanceGraphTitle">Project Performance Diagramm</h4>
<div>
<div class="col-md-4">
  <div class="graph-container form-group-margin" id="graph-container-PC">
    <div id="jq-flot-graph-PC"></div>
  </div>
</div>
<div class="col-md-4">
  <div class="graph-container form-group-margin" id="graph-container-PP">
    <div id="jq-flot-graph-PP">
       <span class="control-label" style="margin-left: 10px;"><img src="@Url.Content("~/Content/images/load.gif")" /> loading...</span>
    </div>
  </div>
</div>

<div class="col-md-4">
  <div class="graph-container form-group-margin" id="graph-container-PN">
    <div id="jq-flot-graph-PN"></div>
  </div>
</div>
</div>
<div id="performanceGraphPeriodsLabel" style="display: none;">
<div class="col-md-4">
  <div style="text-align: center;"><h4 class="modal-title">Current</h4></div>
</div>
    <div class="col-md-4">
  <div style="text-align: center;"><h4 class="modal-title">Last Quarter</h4></div>
</div>
<div class="col-md-4">
  <div style="text-align: center;"><h4 class="modal-title">Upcoming</h4></div>
</div>
</div>
<script type="text/javascript">
  var _perfDataForChart = null;

  var C_PERFORMANCE_CHART_BASE_COLOR = "#31a663";
  var C_PERFORMANCE_CHART_RED_COLOR = "#d6494a";
  var C_PERFORMANCE_CHART_BLUE_COLOR = "#3155bd";
  var C_PERFORMANCE_CHART_BAR_WIDTH = 0.75;

  function PrepareDataForPerformanceChart(periodKey)  {
    var dataStruct = [
        {
          data: _perfDataForChart[periodKey].series[0].data,
          bars: {
            order: 1,
            fillColor: {       
              colors: [C_PERFORMANCE_CHART_BASE_COLOR, C_PERFORMANCE_CHART_BASE_COLOR]
            }
          },
          color: C_PERFORMANCE_CHART_BASE_COLOR
        },
        {
          data: _perfDataForChart[periodKey].series[1].data,
          bars: {
            order: 2,
            fillColor: {
              colors: [C_PERFORMANCE_CHART_RED_COLOR, C_PERFORMANCE_CHART_RED_COLOR]
            }
          },
          color: C_PERFORMANCE_CHART_RED_COLOR
        },
        {
          data: _perfDataForChart[periodKey].series[2].data,
          bars: {
            order: 3,
            fillColor: {
              colors: [C_PERFORMANCE_CHART_BLUE_COLOR, C_PERFORMANCE_CHART_BLUE_COLOR]
            }
          },
          color: C_PERFORMANCE_CHART_BLUE_COLOR
        },
    ];

    return dataStruct;
  }

  function PrepareOptionsForPerformanceChart(periodKey) {
    for (var index = 0; index < _perfDataForChart[periodKey].barOptions.length; index++) {
      var itemName = _perfDataForChart[periodKey].barOptions[index][1];

      if (itemName.length >= 26) {
        itemName = itemName.substr(0, 23) + "...";
        _perfDataForChart[periodKey].barOptions[index][1] = itemName;
      }
    }

    
    var perfChartOptions = {
      xaxis: {
        rotateTicks: 90,
        ticks: _perfDataForChart[periodKey].barOptions,
      },
      yaxis: {
        tickFormatter: function (val, axis) {
          var formatted = '$' + val.formatNumber();

          if (formatted.indexOf('.') > 0)
            formatted = formatted.substring(0, formatted.indexOf('.'));

          return formatted;
        }
      },
      grid: {
        hoverable: true,
        clickable: false,
        borderWidth: 0,
        borderColor: '#f0f0f0',
      },
      series: {
        stack: true,
        bars: {
          show: true,
          fill: true,
          barWidth: C_PERFORMANCE_CHART_BAR_WIDTH,
          lineWidth: 0,
        }      
      },
      bars: {
        align: "center",
      },

      legend: {
        show: false,
      },
      tooltip: false,
    };

    return perfChartOptions;
  }

  function PrepareExtraOptionsForPerformanceChart(periodKey) {
    var options = {
      height: 400,
      tooltipText: "_perfDataForChart['" + periodKey + "'].hints[x]"
  }

    return options;
  }

  function PrepareHintsForPerformanceChart(periodKey)
  {
    _perfDataForChart[periodKey].hints = [];
    _perfDataForChart[periodKey].hints.push(""); // element with 0 index (set it dummy)

    for(var index = 0; index <_perfDataForChart[periodKey].series[0].data.length; index++) {
      var hintText = _perfDataForChart[periodKey].barOptions[index][1] + "<br/>";

      if (_perfDataForChart[periodKey].series[3].data[index][1] > 0) {
        var summaryCosts = _perfDataForChart[periodKey].series[3].data[index][1];
        var varianceCost = 0;
        var sign = "";
        
        hintText += ("Actual Costs: $" + summaryCosts.formatNumber());

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

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

        if (varianceCost != 0)
          hintText += " (" + sign + "$" + varianceCost.formatNumber() + " to forecast)";
        else
          hintText += " (the same as forecast)";
      }
      else {
        var forecastCosts = _perfDataForChart[periodKey].series[0].data[index][1];
        hintText += ("No actuals present (forecast costs: $" + forecastCosts.formatNumber() + ")");
      }

      _perfDataForChart[periodKey].hints.push(hintText);
    }
  }

  function DrawPerformanceGraph() {
    if (!_perfDataForChart) {
      if ($('#performanceMode').is(":checked")) {
        LoadPerformanceData();
      }
      return;
    }

    // Create hints for bars
    PrepareHintsForPerformanceChart("PrevPeriod");
    PrepareHintsForPerformanceChart("CurrentPeriod");
    PrepareHintsForPerformanceChart("NextPeriod");

    var perfChartDataPrev = PrepareDataForPerformanceChart("PrevPeriod");
    var perfChartDataCurr = PrepareDataForPerformanceChart("CurrentPeriod");
    var perfChartDataNext = PrepareDataForPerformanceChart("NextPeriod");

    var perfChartOptionsPrev = PrepareOptionsForPerformanceChart("PrevPeriod");
    var perfChartOptionsCurr = PrepareOptionsForPerformanceChart("CurrentPeriod");
    var perfChartOptionsNext = PrepareOptionsForPerformanceChart("NextPeriod");

    var perfExtraOptionsPrev = PrepareExtraOptionsForPerformanceChart("PrevPeriod");
    var perfExtraOptionsCurr = PrepareExtraOptionsForPerformanceChart("CurrentPeriod");
    var perfExtraOptionsNext = PrepareExtraOptionsForPerformanceChart("NextPeriod");

    // Init Chart
    InitPerformanceChart(false);

    $('#jq-flot-graph-PP').pixelPlot(perfChartDataPrev, perfChartOptionsPrev, perfExtraOptionsPrev);
    $('#jq-flot-graph-PC').pixelPlot(perfChartDataCurr, perfChartOptionsCurr, perfExtraOptionsCurr);
    $('#jq-flot-graph-PN').pixelPlot(perfChartDataNext, perfChartOptionsNext, perfExtraOptionsNext);

    ShowCustomLegend();
  }

  function InitPerformanceChart(showWaitPannel) {
    $('#performanceGraphPeriodsLabel').hide();

    $('#graph-container-PP').html('<div id="jq-flot-graph-PP"> </div>');
    $('#graph-container-PC').html('<div id="jq-flot-graph-PC"> </div>');
    $('#graph-container-PN').html('<div id="jq-flot-graph-PN"> </div>');

    if (showWaitPannel) {
      $('#graph-container-PP').children('div#jq-flot-graph-PP').html('<span class="control-label" style="margin-left: 10px;"><img src="@Url.Content("~/Content/images/load.gif")" /> loading...</span>');
    }
  }

  function ShowCustomLegend() {
    $('#graph-container-PP').find('.pa-flot-info').remove();
    $('#graph-container-PC').find('.pa-flot-info').remove();
    $('#graph-container-PN').find('.pa-flot-info').remove();

    $('#performanceGraphPeriodsLabel').show();
  }

  function LoadPerformanceData() {
    if (!$('#performanceChartMode').prop('checked'))
      $("#performanceGraphTitle").text("Performance for Top 5 Project Types");
    else
      $("#performanceGraphTitle").text("Performance for Top 5 Projects by Costs");

    if ($('#performanceMode').is(":checked")) {
      InitPerformanceChart(true);

      var graphMode = 0;
      
      if (!$('#performanceChartMode').prop('checked')) 
        // Top 5 Project Types
        graphMode = 2;
      else
        // Top 5 projects
        graphMode = 1;
      
      var url = '@Url.Action("GetPerformanceGraphData", "ForecastDashboard")';
      var requestData = {
          GraphMode: graphMode,
          FilterGroups: $('#group').val() || [],
          ProjectTypes: $('#filterClassification').val() || [],
          Teams: getSelectedTeamsOrViews("Teams"),
          Views: getSelectedTeamsOrViews("Views")
      };

      $.post(url, requestData, function (data) {
          _perfDataForChart = data;
          DrawPerformanceGraph();
      })
        .fail(function(jqXHR, textStatus, errorThrown) {
          alert("Error");
        });
    } 
    else {
        _perfDataForChart = null;
      }
    };
</script>