<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JitC Report</title>
    <link rel="stylesheet" href="report_assets{{ sep }}report.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
      $( function() {
        $(".tabs").tabs();
      } );
    </script>
  </head>
  <body>
    <h1>Jewel in the Clouds Report</h1>

    <p>The following report shows the amount of overlap between pairs
    of works within a set, after removing those overlaps that also
    occur when comparing the works with a second set of works.</p>

    <p>The content of each work, in comparison with another work, has
    three categories:</p>

    <dl>
      <dt>common</dt>
      <dd>Text that is shared between both works, and that also occurs
      in at least one works in the second set of works.</dd>

      <dt>shared</dt>
      <dd>Text that is shared between both works, and that does not
      occur in any of the works in the second set of works.</dd>

      <dt>unique</dt>
      <dd>Text that is unique to the work, occuring neither in the
      other work, nor in any of the works in the second set of
      works.</dd>
    </dl>

    <h2>Works analysed for overlap</h2>

    <ul>
      {% for index, work in works %}
      <li><a href="#work-{{ index }}">{{ work }}</a></li>
      {% endfor %}
    </ul>

    <h2>Works used to find unwanted overlap</h2>

    <ul>
      {% for work in other_works %}
      <li>{{ work }}</li>
      {% endfor %}
    </ul>

    <h2>Shared tokens: chord</h2>

    <div id="chord"></div>

    <h2>Shared tokens: matrix</h2>

    <p>Order: <select id="order">
      <option value="name">by work name</option>
      <option value="count">by most overlapping</option>
    </select></p>

    <div id="matrix"></div>

    {% for index, work in works %}
    <div id="work-{{ index }}" type="text">
      <h2>{{ work }}</h2>

      <div class="tabs">
        <ul>
          <li><a href="#tabs-{{ index }}-1">Breakdown chart</a></li>
          <li><a href="#tabs-{{ index }}-2">Related chart</a></li>
          <li><a href="#tabs-{{ index }}-3">Data</a></li>
        </ul>
        <div id="tabs-{{ index }}-1">
          <div id="breakdown_{{ index }}"></div>
        </div>
        <div id="tabs-{{ index }}-2">
          <div id="related_{{ index }}"></div>
        </div>
        <div id="tabs-{{ index }}-3">
          {{ tables[index] }}
        </div>
      </div>
    </div>
    {% endfor %}

    <script src="report_data{{ sep }}matrix_data.js"></script>
    <script src="report_assets{{ sep }}matrix.js"></script>
    <script src="report_data{{ sep }}chord_data.js"></script>
    <script src="report_assets{{ sep }}chord.js"></script>
    <script src="report_assets{{ sep }}stacked_bar.js"></script>
    <script src="report_assets{{ sep }}grouped_bar.js"></script>
    {% for index, work in works %}
    <script>
      var breakdown_chart_{{ index }} = stackedBarChart();
      d3.csv("report_data{{ sep }}breakdown_{{ work }}.csv", function(data) {
        d3.select("#breakdown_{{ index }}").datum(data).call(
          breakdown_chart_{{ index }});
      });
    </script>
    <script>
      var related_chart_{{ index }} = groupedBarChart();
      d3.csv("report_data{{ sep }}related_{{ work }}.csv", function(data) {
        d3.select("#related_{{ index }}").datum(data).call(
          related_chart_{{ index }});
      });
    </script>
    {% endfor %}
  </body>
</html>
