{% extends "base_visualize.html" %}
{% set active_page = 'wordcloud' %}

{% block head %}
<!-- <script type="text/javascript" src="{{ url_for('static', filename='js/d3.v3.min.js') }}?ver={{version}}"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/d3.layout.cloud.js') }}?ver={{version}}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/scripts_wordcloud.js') }}?ver={{version}}"></script>

<!-- jQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<!-- Latest compiled and minified DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.1,b-html5-1.2.1,b-print-1.2.1,fc-3.2.2,fh-3.1.2,se-1.2.0/datatables.min.css"/>

<!-- Latest compiled and minified DataTables JS -->  
<script type="text/javascript" src="https://cdn.datatables.net/u/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.1,b-html5-1.2.1,b-print-1.2.1,fc-3.2.2,fh-3.1.2,se-1.2.0/datatables.min.js"></script>

<script type="text/javascript" charset="utf8" src="{{ url_for('static', filename='DataTables-1.10.7/natural.js') }}?ver={{version}}"></script>

<script>
  var dataset = {{ JSONObj|safe or {} }};
  var numActiveDocs = {{ numActiveDocs }}
console.log(dataset);
</script>
{% endblock %}

{% block title %}visualizer{% endblock %}

{% block options %}
<legend>Word Cloud Options</legend>
{% if JSONObj %}
<script>
$(document).ready(function() {
  var data = [{% for row in columnValues %}{{ row|safe }}{%- if not loop.last %},{% endif %}{% endfor %}];
  // DataTables needs the utf-8 decoded separately
  for (var i = 0; i < data.length; i++) {
    data[i][0] = decodeURIComponent(escape(data[i][0]));
  }
  var config = {
    columns: [{ title: "Term" }, { title: "Count" }],
    data: data    
  }
  $('#termcounts').DataTable(config);
});
</script>
<style type="text/css">
#statsBtn { float: right; }
#statsTable { display: none; padding: 3px 0; width: 100%; overflow: auto; }
#termcounts { width: 99%; }
</style>


<div id="statsBtn"> 
	<a class="btn bttn bttn-action" id="viewstats" data-toggle="modal" data-target="#word-count-modal">View Word Counts</a>
</div>
<!-- Word Count Dialog -->
  <div class="modal fade" id="word-count-modal" tabindex="-1" role="dialog" aria-labelledby="word-count-modal-label">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content panel-primary">
        <div class="modal-header panel-heading">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="word-count-modal-label">Term Counts</h4>
        </div>
        <div class="modal-body" style="max-height:600px;overflow-y:auto;">
          <table id="termcounts" class="table-condensed table-striped table-bordered" style="width:100%;"></table>
        </div>
      </div>
    </div>
  </div>

{% endif %}
<!-- May want to switch dropdown script to http://davidstutz.github.io/bootstrap-multiselect/ -->
<!-- <div id="vizcreateoptions">
	<select id="segmentlist" name="segmentlist" multiple="multiple">
		{% for fileID, fileLabel in labels.items() %}
		<option value="{{ fileID }}" {{ 'selected' if fileID|unicode in session['cloudoption']['segmentlist']}}>{{ fileLabel }}</option>
		{% endfor %}
	</select>
	<span class="viz-tips">Large graphs can take a while to render.</span>
</div> -->
<legend style="width: 490px;">Select a Document <span style="display:inline;font-size:16px;">(Large graphs can take a while to render.)</span></legend>
<!-- {% if labels|len > 0 %}
    <div class="forAllCheckBox"><label><input type="checkbox" id="allCheckBoxSelector">Toggle All</label></div>
{%- endif %}
<div id="vizcreateoptions" name="segmentlistdiv" style="overflow:auto; width: 400px; float: left; max-height: 125px; min-height: 2em;">
    {% for fileID, label in labels.items() %}
    <div class="forCheckBox">
      <label>{{label}} 
        <input type="checkbox" name="segmentlist" class="minifilepreview" {{ 'checked' if fileID|unicode in session['cloudoption']['segmentlist']}} id="{{fileID}}_selector" value="{{fileID}}">
      </label>
    </div>
    {%- endfor %}
    {% if labels|len == 0 %}
      <span id="no-labels">No Documents are Selected</span>
    {%- endif %}
</div> -->
{% if labels|len > 0 %}
  <label style="position: relative; top: -8px; width: 200px;"><input type="checkbox" id="allCheckBoxSelector">Toggle All</label>
  <br/>
{%- endif %}
<div id="vizoptionscontainer" name="segmentlist" style="overflow:auto; width: 300px; float: left; max-height: 125px; min-height: 2em; position: relative; top: -8px">
  <div id="vizcreateoptions">
    {% for fileID, label in labels.items() %}
      <label>{{label}} 
        <input type="checkbox" name="segmentlist" class="minifilepreview" {{ 'checked' if fileID|unicode in session['cloudoption']['segmentlist']}} id="{{fileID}}_selector" value="{{fileID}}">
      </label><br/>
    {%- endfor %}
    {% if labels|len == 0 %}
      <span id="no-labels">No Documents are Selected</span>
  {%- endif %}
  </div>
</div>

{% endblock %}

{% block results %}

{% if not JSONObj %}
<h4 id="nosegments">Please select the documents for the word cloud.</h4>
{% else %}

<div id="wordcloudoptionswrapper">
<div id="vis"></div>

  <p id="status"></p>

<hr>

<div id="rightsideoptions">
  <p><label for="maxwords">Number of words:</label> <input type="number" value="250" min="1" id="maxwords">
  <!--<p><label for="colours">Colours:</label> <a href="#" id="random-palette">get random palette</a>-->
  <p><label>Download:</label>
    <a id="download-svg" href="#" target="_blank">SVG</a> |
    <a style="cursor:pointer" id="download-png" target="_blank">PNG</a>
  </p>
</div>

<div id="leftsideoptions">
  <p><label>Spiral:</label>
    <label for="archimedean"><input type="radio" name="spiral" id="archimedean" value="archimedean" checked="checked"> Archimedean</label>
    <label for="rectangular"><input type="radio" name="spiral" id="rectangular" value="rectangular"> Rectangular</label>
  </p>
  <p><label for="scale">Scale:</label>
    <label for="scale-log"><input type="radio" name="scale" id="scale-log" value="log" checked="checked"> log n</label>
    <label for="scale-sqrt"><input type="radio" name="scale" id="scale-sqrt" value="sqrt"> √n</label>
    <label for="scale-linear"><input type="radio" name="scale" id="scale-linear" value="linear"> n</label>
  </p>
  <p><label for="font">Font:</label> <input type="text" id="font" value="Impact"></p>
</div>

<div id="angles">
  <p><input type="number" id="angle-count" value="5" min="1"> <label for="angle-count">orientations</label>
    <label for="angle-from">from</label> <input type="number" id="angle-from" value="-60" min="-90" max="90"> &deg;
    <label for="angle-to">to</label> <input type="number" id="angle-to" value="60" min="-90" max="90"> &deg;
  </p>
</div>
</div>

<hr>

<p id="wordcloudcopyright"><a href="http://www.jasondavies.com/wordcloud/about/" target="_blank">How the Word Cloud Generator Works</a>.
<p>Copyright &copy; <a href="http://www.jasondavies.com/" target="_blank">Jason Davies</a> 2012.<br />
Modified slightly to use Lexos data.</p>
</form>

<!-- Leave this script at the bottom so the cloud is computed/generated/shown AFTER the page loads and shows -->

{% endif %}

<!-- Canvg Used for Save to PNG -->
<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>
<canvas id="svg-canvas" style="display:none;"></canvas>
<img id="svg-img" style="display:none;"/>
<!-- -->

{% endblock %}

{% block submit %}
<a class="btn bttn bttn-action" id="getviz" role="button" style="margin-left: 0px;">Get Graph</a>
<!-- <span class="viz-tips">Large graphs can take a while to render.</span> -->
{% endblock %}