<%page args="grade_summary, grade_cutoffs, graph_div_id, show_grade_breakdown = True, show_grade_cutoffs = True, **kwargs"/>
<%!
    import bleach
    import json
    import math
    
    from openedx.core.djangolib.js_utils import (
        dump_js_escaped_json, js_escaped_string
    )
%>

$(function () {
  function showTooltip(x, y, contents) {
      $("#tooltip").remove();
      var $tooltip_div = $('<div id="tooltip"></div>').css({
          position: 'absolute',
          display: 'none',
          top: y + 5,
          left: x + 15,
          border: '1px solid #000',
          padding: '4px 6px',
          color: '#fff',
          'background-color': '#222',
          opacity: 0.90
      });

      edx.HtmlUtils.setHtml(
          $tooltip_div,
          edx.HtmlUtils.HTML(contents)
      );
      
      edx.HtmlUtils.append(
          $('body'),
          edx.HtmlUtils.HTML($tooltip_div)
      );
      
      $('#tooltip').fadeIn(200);
  }
  /* -------------------------------- Grade detail bars -------------------------------- */
    
  <%
  colors = ["#b72121", "#600101", "#666666", "#333333"]
  categories = {}

  tickIndex = 1
  sectionSpacer = 0.25
  sectionIndex = 0

  ticks = [] #These are the indices and x-axis labels for the data
  bottomTicks = [] #Labels on the bottom
  detail_tooltips = {} #This an dictionary mapping from 'section' -> array of detail_tooltips
  droppedScores = [] #These are the datapoints to indicate assignments which are not factored into the total score
  dropped_score_tooltips = []

  for section in grade_summary['section_breakdown']:
      if section.get('prominent', False):
          tickIndex += sectionSpacer
            
      if section['category'] not in categories:
          colorIndex = len(categories) % len(colors)
          categories[ section['category'] ] = {'label' : section['category'], 
                                              'data' : [], 
                                              'color' : colors[colorIndex]}
      
      categoryData = categories[ section['category'] ]

      ## Because this is Python (Mako) embedded in JavaScript, our xss linting script is
      ## thoroughly confused. We should rewrite this file to remove Python/Mako.
      ## xss-lint: disable=javascript-jquery-append
      categoryData['data'].append( [tickIndex, section['percent']] )

      ## Note that some courses had stored images in the Abbreviation. We are no longer
      ## allowing the display of such images, and remove any previously stored HTML
      ## to prevent ugly HTML from being shown to learners.
      ## xss-lint: disable=javascript-jquery-append
      ticks.append( [tickIndex, bleach.clean(section['label'], tags=[], strip=True)] )
    
      if section['category'] in detail_tooltips:
          ## xss-lint: disable=javascript-jquery-append
          detail_tooltips[ section['category'] ].append( section['detail'] )
      else:
          detail_tooltips[ section['category'] ] = [ section['detail'], ]
          
      if 'mark' in section:
          ## xss-lint: disable=javascript-jquery-append
          droppedScores.append( [tickIndex, 0.05] )
          ## xss-lint: disable=javascript-jquery-append
          dropped_score_tooltips.append( section['mark']['detail'] )
        
      tickIndex += 1
    
      if section.get('prominent', False):
          tickIndex += sectionSpacer
          
  ## ----------------------------- Grade overview bar ------------------------- ##
  tickIndex += sectionSpacer
  
  series = categories.values()
  overviewBarX = tickIndex
  extraColorIndex = len(categories) #Keeping track of the next color to use for categories not in categories[]
  
  if show_grade_breakdown:
    for section in grade_summary['grade_breakdown'].itervalues():
        if section['percent'] > 0:
            if section['category'] in categories:
                color = categories[ section['category'] ]['color']
            else:
                color = colors[ extraColorIndex % len(colors) ]
                extraColorIndex += 1
            ## xss-lint: disable=javascript-jquery-append
            series.append({
                'label' : section['category'] + "-grade_breakdown",
                'data' : [ [overviewBarX, section['percent']] ],
                'color' : color
            })
            
            detail_tooltips[section['category'] + "-grade_breakdown"] = [ section['detail'] ]
  
    ticks += [ [overviewBarX, "Total"] ]
    tickIndex += 1 + sectionSpacer
  
  totalScore = grade_summary['percent']
  detail_tooltips['Dropped Scores'] = dropped_score_tooltips
  
  
  ## ----------------------------- Grade cutoffs ------------------------- ##
  
  grade_cutoff_ticks = [ [1, "100%"], [0, "0%"] ]
  if show_grade_cutoffs:
    grade_cutoff_ticks = [ [1, "100%"], [0, "0%"] ]
    descending_grades = sorted(grade_cutoffs, key=lambda x: grade_cutoffs[x], reverse=True)
    for grade in descending_grades:
        percent = grade_cutoffs[grade]
        ## xss-lint: disable=javascript-jquery-append
        grade_cutoff_ticks.append( [ percent, u"{0} {1:.0%}".format(grade, percent) ] )
  else:
    grade_cutoff_ticks = [ ]
  %>
  
  var series = ${ series | n, dump_js_escaped_json };
  var ticks = ${ ticks | n, dump_js_escaped_json };
  var bottomTicks = ${ bottomTicks | n, dump_js_escaped_json };
  var detail_tooltips = ${ detail_tooltips | n, dump_js_escaped_json };
  var droppedScores = ${ droppedScores | n, dump_js_escaped_json };
  var grade_cutoff_ticks = ${ grade_cutoff_ticks | n, dump_js_escaped_json }
  
  var yAxisTooltips={};

    /*
    series looks like:
    [
        {
            color: "#600101",
            label: "Homework",
            data: [[1, 0.06666666666666667], [2, 1], [3.25, .53]]
        },
        ...
    ]

    detail_tooltips looks like:
    {
        "Dropped Scores": [0: "The lowest 1...:],
        "Homework": [
            0: "Homework 1 -- Homework -- Question Styles 7% (1/15)",
            1: "Homework 2 -- Homework -- Get Social 100% (1/1)",
            2: "Homework Average = 53%"
        ],
        ...
    }
    */

  // loop through the series and extract the matching tick and the series label
  for (var seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {
      for (var dataIndex = 0; dataIndex < series[seriesIndex]['data'].length; dataIndex++) {
          var tickIndex = series[seriesIndex]['data'][dataIndex][0];
          // There may be more than one detail tooltip for a given tickIndex. If so,
          // push the new tooltip on the existing list.
          if (tickIndex in yAxisTooltips) {
              yAxisTooltips[tickIndex].push(detail_tooltips[series[seriesIndex]['label']][dataIndex]);
          } else {
              yAxisTooltips[tickIndex] = [detail_tooltips[series[seriesIndex]['label']][dataIndex]];
          }
          // If this item was a dropped score, add the tooltip message about that.
          for (var droppedIndex = 0; droppedIndex < droppedScores.length; droppedIndex++) {
              if (tickIndex === droppedScores[droppedIndex][0]) {
                  yAxisTooltips[tickIndex].push(detail_tooltips["Dropped Scores"][droppedIndex]);
              }
          }
      }
  }

  // hide the vertical axis since they are audibly lacking context
  for (var i = 0; i < grade_cutoff_ticks.length; i++) {
      grade_cutoff_ticks[i][1] = edx.HtmlUtils.joinHtml(
          edx.HtmlUtils.HTML('<span aria-hidden="true">'),
          grade_cutoff_ticks[i][1],
          edx.HtmlUtils.HTML('</span>')
      ).text;
  }
    
  //Always be sure that one series has the xaxis set to 2, or the second xaxis labels won't show up
  series.push( {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "#333"} );
  
  // Allow for arbitrary grade markers e.g. ['A', 'B', 'C'], ['Pass'], etc.
  var ascending_grades = grade_cutoff_ticks.map(function (el) { return el[0]; }); // Percentage point (in decimal) of each grade cutoff
  ascending_grades.sort();

  var colors = ['#f3f3f3', '#e9e9e9', '#ddd'];
  var markings = [];
  for(var i=1; i<ascending_grades.length-1; i++) // Skip the i=0 marking, which starts from 0%
    markings.push({yaxis: {from: ascending_grades[i], to: ascending_grades[i+1]}, color: colors[(i-1) % colors.length]});

  var options = {
    series: {
        stack: true,
        lines: {
            show: false,
            steps: false
        },
        bars: {
            show: true,
            barWidth: 0.8,
            align: 'center',
            lineWidth: 0,
            fill: .8
        }
    },
    xaxis: {
        tickLength: 0,
        min: 0.0,
        max: ${tickIndex - sectionSpacer | n, dump_js_escaped_json},
        ticks: function() {
            for (var i = 0; i < ticks.length; i++) {
                var tickLabel = edx.HtmlUtils.joinHtml(
                    // The very last tick will be for the total, and it usually is composed of a number of different
                    // grading types. To help clarify, do NOT make the label ("Total") aria-hidden in that case.
                    edx.HtmlUtils.HTML(i < ticks.length - 1 ? '<span aria-hidden="true">' : '<span>'),
                    ticks[i][1],
                    edx.HtmlUtils.HTML('</span>')
                );
                var elementTooltips = yAxisTooltips[ticks[i][0]];
                if (elementTooltips) {
                    for (var tooltipIndex = 0; tooltipIndex < elementTooltips.length; tooltipIndex++) {
                        tickLabel = edx.HtmlUtils.joinHtml(
                            tickLabel,
                            edx.HtmlUtils.HTML('<span class="sr">'),
                            elementTooltips[tooltipIndex],
                            edx.HtmlUtils.HTML('<br></span>')
                        );
                    }
                }
                ticks[i][1] = tickLabel;
            }
            return ticks;
        },
        labelAngle: 90
    },
    yaxis: {
        ticks: grade_cutoff_ticks,
        min: 0.0,
        max: 1.0,
        labelWidth: 100
    },
    grid: {
        hoverable: true,
        clickable: true,
        borderWidth: 1,
        markings: markings
    },
    legend: {
        show: false
    }
  };
  
  var $grade_detail_graph = $("#${graph_div_id | n, js_escaped_string}");
  if ($grade_detail_graph.length > 0) {
    var plot = $.plot($grade_detail_graph, series, options);
    
    %if show_grade_breakdown:
      var o = plot.pointOffset(
          {x: ${overviewBarX | n, dump_js_escaped_json} , y: ${totalScore | n, dump_js_escaped_json}}
      );

      edx.HtmlUtils.append(
          $grade_detail_graph,
          edx.HtmlUtils.joinHtml(
              // xss-lint: disable=javascript-concat-html
              edx.HtmlUtils.HTML('<div class="overallGrade" style="position:absolute;left:' + (o.left - 12) + 'px;top:' + (o.top - 20) + 'px">'),
              edx.HtmlUtils.HTML('<span class=sr>'),
              gettext('Overall Score'),
              edx.HtmlUtils.HTML('<br></span>'),
              '${'{totalscore:.0%}'.format(totalscore=totalScore) | n, js_escaped_string}',
              edx.HtmlUtils.HTML('</div>')
          )
      );

    %endif

    $grade_detail_graph.find('.xAxis .tickLabel').attr('tabindex', '0').focus(function(event) {
        var $target = $(event.target), srElements = $target.find('.sr'), srText="", i;
        if (srElements.length > 0) {
            for (i = 0; i < srElements.length; i++) {
                srText += srElements[i].innerHTML;
            }
            // Position the tooltip slightly above the tick label.
            showTooltip($target.offset().left - 70, $target.offset().top - 120, srText);
        }
    });

    $grade_detail_graph.focusout(function(){
        $("#tooltip").remove();
    });
  }
  
      
  var previousPoint = null;
  $grade_detail_graph.bind("plothover", function (event, pos, item) {
    if (item) {
      if (previousPoint != (item.dataIndex, item.seriesIndex)) {
        previousPoint = (item.dataIndex, item.seriesIndex);
            
        if (item.series.label in detail_tooltips) {
          var series_tooltips = detail_tooltips[item.series.label];
          if (item.dataIndex < series_tooltips.length) {
            showTooltip(item.pageX, item.pageY, series_tooltips[item.dataIndex]);
          }
        }

      }
    } else {
      $("#tooltip").remove();
      previousPoint = null;            
    }
  });
});
