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

{% 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/scripts_viz.js') }}?ver={{version}}"></script>

<!-- QTip2 CSS and Javascript -->
<link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css">
<script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>

<script>
	var dataset = {{ JSONObj|safe or {} }};
    var numActiveDocs = {{ numActiveDocs }};
</script>
<style type="text/css">
.node {cursor: pointer;}
#viz {margin-top:-30px;padding-top:0;}
.bubble {
	/* Normalises tooltip orientation on the top and right edges of the graph */
	width:110%;
	height:103%;
	padding-top:3%;
	padding-right:10%;
}
</style>
{% endblock %}

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

{% block options %}
<div id="status-prepare"><img src="{{ url_for('static', filename='images/loading_icon.svg') }}?ver={{version}}" alt="Loading..."></div>

<legend>BubbleViz Options</legend>
<div class="col-md-6">
	<legend style="width:250px;">Select a Document</legend>
	{% if labels|len > 0 %}
   		<label><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;">
		<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>
</div>
<div class="col-md-6">	
	<legend>Filtering Options</legend>
		<label>Graph Size:
			<input type="number" min="100" max="3000" step="100" id="graphsize" name="graphsize" value="{{ session['bubblevisoption']['graphsize']}}"/>
		</label>
		<br/>
		<label>Maximum Number of Words:
			<input type="number" min="1" id="maxwords" name="maxwords" value="{{ session['bubblevisoption']['maxwords'] or '100' }}"/>
		</label>
		<br/>
		<label>Minimum Word Length:
			<input type="number" min="0" id="minlength" name="minlength" value="{{ session['bubblevisoption']['minlength'] or '0' }}"/>
		</label>
</div>

{% endblock %}

{% block results %}
{% if words == "" %}
<h4 id="nosegments">Please select the segments for the graph.</h4>

{% else %}

<div id="viz"></div>

<!-- 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;"/>
<!-- -->

{% endif %}
{% endblock %}

{% block submit %}
<a class="btn bttn bttn-action" id="getviz" role="button" style="float: left; margin-right: 10px;">Get Graph</a>
<a class="btn bttn bttn-action" id="save" role="button" style="width: 105px; float: left; display:none;">Save as PNG</a>
{% endblock %}