{% extends "charts_app/chart_base.html" %}
{% load i18n %}
{% load dialogos_tags %}
{% load agon_ratings_tags %}
{% load bootstrap_tags %}
{% load url from future %}
{% load base_tags %}
{% load guardian_tags %}

{% block page-title %}
  {% trans "Explore Charts" %}
  <div class="btn-group pull-right">
    <a class="btn btn-primary btn-icon" href="{% url 'chart_list' %}">
      <i class="fa fa-align-justify" title="List"></i>
    </a>
    <a class="btn btn-primary" href="{% url 'chart_list' %}">
      {% trans "Charts" %}
    </a>
  </div>
{% endblock %}

{% block subheader %}
<section id="subheader">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>{{ object.title }}</h2>
                <p id="title_detail">
                  <span  style="text-transform: capitalize;"></span>
				</p>
				{% block social_links %}
				{% if SOCIAL_BUTTONS %}
				{% include "social_links.html" %}
				{% endif %}
				{% endblock %}
            </div>
        </div>
    </div>
</section>
{% endblock %}



{% block body_outer %}
<script src="/static/js/csv.js"></script>
<script src="/static/js/donut.js"></script>
<script src="/static/js/bar.js"></script>
<script src="/static/js/pie.js"></script>
<script src="/static/js/line.js"></script>
<script src="/static/js/getChart.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="/static/css/index.css">

<div class="row">
  <div class="col-md-8">
    <div id="chart_area_plain"></div>
    <h2>Abstract</h2>
    <p>{{ object.abstract }}</p>
    <div class="documents-actions">
      {% include "_actions.html" %}
    </div>

    <div class="tab-content">

      <article id="info" class="tab-pane active">

      </article>

      <article id="comments" class="tab-pane">

      </article>

      <article id="rate" class="tab-pane">
        <!-- TODO: Move this to a reusable template snippet -->

        <h4>{% trans "Rate this document" %}</h4>

        <div id="user_rating" class="category-layer" data-score="{{user_document_rating}}"></div>

        <h4>{% trans 'Average Rating' %}</h4>

        <div class="overall_rating" style="float:left" data-score="{{ document_rating }}"></div> ({{num_votes}})
        <!-- TODO: Add display of who gave what rating based -->
      </article>
    </div>
  </div>

  <div class="col-md-4">
      <li class="list-group-item">
         <a href="/table?" id="link">
              <button class="btn btn-primary btn-md btn-block">{% trans "Download CSV" %}</button>
         </a>
      </li>
      <li class="list-group-item">
            <h4>{% trans "Modify this Chart" %}</h4>
            <p>{% trans "Change type of the chart or type of aggregation." %}</p>
            <a id="updt_chart">
                <button class="btn btn-primary btn-md btn-block" data-toggle="collapse" data-target="#form" onclick="update_params();" >{% trans "Modify this Chart" %}</button>
            </a>
            <div id="form" class="collapse">
                <form name="f" method="post" class="form-horizontal" onchange="update_params();" >
                    {% csrf_token %}
                {{ form.non_field_errors }}
            <div class="form-group">
                {{ form.layer.as_hidden }}
            </div>
            <div class="form-group">
                {{ form.category.as_hidden }}
            </div>
            <div class="form-group">
                {{ form.quantity.as_hidden }}
            </div>
            <div class="form-group">
                {{ form.title.errors }}
                <label  class="control-label col-md-2" for="{{ form.title.id_for_label }}">Title:</label>
                {{ form.title }}
            </div>
            <div class="form-group">
                {{ form.type.errors }}
                <label  class="control-label col-md-2" for="{{ form.type.id_for_label }}">Type:</label>
                {{ form.type }}
            </div>
            <div class="form-group">
                {{ form.aggr_type.errors }}
                <label  class="control-label col-md-2" for="{{ form.aggr_type.id_for_label }}">Aggregation:</label>
                {{ form.aggr_type }}
            </div>
            <div class="form-group">
                {{ form.abstract.errors }}
                <label  class="control-label col-md-2" for="{{ form.abstract.id_for_label }}">Abstract:</label>
                {{ form.abstract }}
            </div>
                         <button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#chart_popup" onclick="get_chart_popup()">Display chart</button>
                         <button type="submit" class="btn btn-primary btn-block" value="Submit">Update chart in db</button>
</form>
          </div>
      </li>
      <li class="list-group-item">
         <a href="{% url 'chart_delete' object.id %}" id="del_chart">
              <button class="btn btn-primary btn-md btn-block">{% trans "Delete this Chart" %}</button>
         </a>
      </li>
      <li class="list-group-item">
         <button id='saveButton' class="btn btn-primary btn-md btn-block">Export my D3 visualization to PNG</button>
      </li>

  </div>
</div>

<div id="chart_popup" class="modal fade" role="dialog" >
        <script src="/static/js/csv.js"></script>
        <script src="/static/js/donut.js"></script>
        <script src="/static/js/bar.js"></script>
        <script src="/static/js/pie.js"></script>
        <script src="/static/js/line.js"></script>
        <script src="/static/js/getChart.js"></script>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <link rel="stylesheet" href="/static/css/index.css">
          <div class="modal-dialog" id="chart" style="width: 55%">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 id="chart_title" class="modal-title"></h4>
              </div>
              <div class="modal-body">
                <div id="chart_area" style="display: table; float: inherit;  width: 50%;">
              </div>
                  <div>
                      <h5>Abstract</h5>
                      <p id="abstract"></p>
                  </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
    </div>


<script>
var typename = "{{ object.layer.typename }}";
var lyr = "{{ object.layer.name }}"
var category = "{{ object.category }}";
var quantity = "{{ object.quantity }}";
var agg = "{{ object.aggr_type }}";
var chart_type = "{{ object.type }}";
var csv_url;
var suggestedTitle = "";
var dict_title_agg = {0:"Sum",1:"Mean",2:"Count", 3:"Max", 4:"Min"};

function update_link(){
    csv_url = '/table?lyrname=' + typename;
    csv_url = csv_url + '&category=' + category;
    csv_url = csv_url + '&quantity=' + quantity;
    document.getElementById('link').href = csv_url;
    return;
}

function attachAbstract(){
    var abstractText = document.getElementById("id_abstract").value;
    document.getElementById('abstract').innerHTML = abstractText;
}

function chart_title(){
    if (agg == dict_title_agg[2]){
        suggestedTitle = dict_title_agg[agg] + " of elements for "  + category;
    } else {
        var title = dict_title_agg[agg]
        suggestedTitle = title + " of " + quantity + " for " + category;
    }
        document.getElementById("title").innerHTML = suggestedTitle;
        return suggestedTitle;
};


function title_eval(){
    if (document.getElementById("id_title").textLength == 0){
        document.getElementById("id_title").value = suggestedTitle;
    }
}

function update_params(){
    agg = document.f.aggr_type.value;
    chart_type = document.f.type.value;
    chart_title();
}

update_link();
get_chart_detail();
title_detail();



</script>
 <script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
	 <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>

<script>


// Set-up the export button
d3.select('#saveButton').on('click', function(){
  if (!document.getElementById("chart_svg")){
      var svg_img = document.getElementById("chart_svgchart_area_plain");
      var svgString = getSVGString(document.getElementById("chart_svgchart_area_plain"));
  } else {
      var svg_img = document.getElementById("chart_svg");
      var svgString = getSVGString(document.getElementById("chart_svg"));
  }
  svgString2Image( svgString, svg_img.parentNode.clientWidth, svg_img.parentNode.clientHeight, 'png', save ); // passes Blob and filesize String to the callback

	function save( dataBlob, filesize ){
		saveAs( dataBlob, 'D3 vis exported to PNG.png' ); // FileSaver.js function
	}
});

// Below are the functions that handle actual exporting:
// getSVGString ( svgNode ) and svgString2Image( svgString, width, height, format, callback )
function getSVGString( svgNode ) {
	svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');
	var cssStyleText = getCSSStyles( svgNode );
	appendCSS( cssStyleText, svgNode );

	var serializer = new XMLSerializer();
	var svgString = serializer.serializeToString(svgNode);
	svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink='); // Fix root xlink without namespace
	svgString = svgString.replace(/NS\d+:href/g, 'xlink:href'); // Safari NS namespace fix

	return svgString;

	function getCSSStyles( parentElement ) {
		var selectorTextArr = [];

		// Add Parent element Id and Classes to the list
		selectorTextArr.push( '#'+parentElement.id );
		for (var c = 0; c < parentElement.classList.length; c++)
				if ( !contains('.'+parentElement.classList[c], selectorTextArr) )
					selectorTextArr.push( '.'+parentElement.classList[c] );

		// Add Children element Ids and Classes to the list
		var nodes = parentElement.getElementsByTagName("*");
		for (var i = 0; i < nodes.length; i++) {
			var id = nodes[i].id;
			if ( !contains('#'+id, selectorTextArr) )
				selectorTextArr.push( '#'+id );

			var classes = nodes[i].classList;
			for (var c = 0; c < classes.length; c++)
				if ( !contains('.'+classes[c], selectorTextArr) )
					selectorTextArr.push( '.'+classes[c] );
		}

		// Extract CSS Rules
		var extractedCSSText = "";
		for (var i = 0; i < document.styleSheets.length; i++) {
			var s = document.styleSheets[i];

			try {
			    if(!s.cssRules) continue;
			} catch( e ) {
		    		if(e.name !== 'SecurityError') throw e; // for Firefox
		    		continue;
		    	}

			var cssRules = s.cssRules;
			for (var r = 0; r < cssRules.length; r++) {
				if ( contains( cssRules[r].selectorText, selectorTextArr ) )
					extractedCSSText += cssRules[r].cssText;
			}
		}


		return extractedCSSText;

		function contains(str,arr) {
			return arr.indexOf( str ) === -1 ? false : true;
		}

	}

	function appendCSS( cssText, element ) {
		var styleElement = document.createElement("style");
		styleElement.setAttribute("type","text/css");
		styleElement.innerHTML = cssText;
		var refNode = element.hasChildNodes() ? element.children[0] : null;
		element.insertBefore( styleElement, refNode );
	}
}


function svgString2Image( svgString, width, height, format, callback ) {
	var format = format ? format : 'png';

	var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL

	var canvas = document.createElement("canvas");
	var context = canvas.getContext("2d");

	canvas.width = width;
	canvas.height = height;

	var image = new Image();
	image.onload = function() {
		context.clearRect ( 0, 0, width, height );
		context.drawImage(image, 0, 0, width, height);

		canvas.toBlob( function(blob) {
			var filesize = Math.round( blob.length/1024 ) + ' KB';
			if ( callback ) callback( blob, filesize );
		});


	};

	image.src = imgsrc;
}

</script>

{% endblock %}