{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load permissions %}


{% block title %}
  {% trans 'Enhydris - Time series' %} -
    {% if timeseries %}
      {{ timeseries.name }} (id={{ timeseries.id }}){% endif %}
{% endblock %}


{% block extrajs %}
  <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
  <script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/excanvas.min.js"></script>
  <script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
  <script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.selection.min.js"></script>
  <script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.time.min.js"></script>
  <script type="text/javascript">

    function confirmPost(){
        var agree=confirm("Are you sure you want to delete this timeseries?");
        if (agree)
            return true ;
        else
            return false ;
	}
	// helper for returning the weekends in a period
	$(document).ready(function() {

		$("#data_holder").hide()
                    $("#progress").append("<img style=\"display: block; margin: auto auto;\" src=\"{% static "images/icons/progress.gif" %}\">");

		 $.getJSON('{% url "timeseries_data" %}', {object_id:{{timeseries.id}}}, function(chart_data){

			$("#progress").hide()
			$("#data_holder").show()
			if ( chart_data ) {
				flot_init(chart_data['data']);
			} else {
				$("#data_holder").html("<h3>No data locally available!</h3>");
			}

		});
	});

	function flot_init(chart_data) {
		var d = chart_data;
        var d_bak = d.slice();
        var from_x, to_x, tol;
        from_x = d[0][0];
        to_x = d[d.length-1][0];
        tol = (to_x-from_x)*0.01;
        from_x-=tol;
        to_x+=tol;
		var options = {
			xaxis: { mode: "time", min: from_x, max: to_x},
			selection: { mode: "x" }
		};

		var plot = $.plot($("#placeholder"), [d], options);

		var overview = $.plot($("#overview"), [d], {
			series: {
				lines: { show: true, lineWidth: 1 },
				shadowSize: 0
			},
			xaxis: { ticks: [], mode: "time", min: from_x, max: to_x },
			yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
			selection: { mode: "x" }
		});

        function get_zoomed_data(ranges, data){
            var from_pos, to_pos;
            var actual_xaxis_from, actual_xaxis_to;
            from_pos = data[0][2];
            to_pos = data[data.length-1][2];
            for(var i=0;i<data.length;i++){
                if(ranges.xaxis.from<=data[i][0]){
                    from_pos = data[i][2];
                    actual_xaxis_from = data[i][0];
                    break;
                }
            }
            for(var i=data.length-1;i>=0;i--){
                if(ranges.xaxis.to>=data[i][0]){
                    to_pos = data[i][2];
                    actual_xaxis_to = data[i][0];
                    break;
                }
            }
            $("#placeholder").append("<img style=\"display: block; margin: auto auto;\" src=\"{% static "images/progress.gif" %}\">");
            $.getJSON('{% url "timeseries_data" %}', {object_id:{{timeseries.id}},
                start_pos:from_pos, end_pos:to_pos}, function(chart_data){
                d = chart_data['data'];
                var tol=(actual_xaxis_to-actual_xaxis_from)*0.01;
			    plot = $.plot($("#placeholder"), [d],
    						  $.extend(true, {}, options, {
    							  xaxis: { min: actual_xaxis_from-tol, max: actual_xaxis_to+tol }
    						  }));
    		});
			$("placeholder").remove(":contains('img style')");
        }

		// now connect the two
		$("#placeholder").bind("plotselected", function (event, ranges) {
            get_zoomed_data(ranges, d);

		// don't fire event on the overview to prevent eternal loop
			overview.setSelection(ranges, true);
		});

		$("#overview").bind("plotselected", function (event, ranges) {
            d = d_bak;
			plot.setSelection(ranges);
		});

	};
  </script>
{% endblock %}

{% block content%}
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5>{{ timeseries.related_station }} - {{ timeseries.name }}</h5>
            <sub>
              {% if request.user|can_edit:timeseries.related_station %}
                <a class="btn btn-xs btn-primary" href='{% url "timeseries_edit" timeseries.id%}'>{% trans "Edit" %}</a>
                <a class="btn btn-xs btn-danger" onClick='return confirmPost()' href='{% url "timeseries_delete" timeseries.id%}'>{% trans "Delete" %}</a>
              {% endif %}
            <sub>
          </div>
          <div class="panel-body">
            {% if timeseries %}
              <div class="row">
                <div class="col-md-5">
                  <div class="img-responsive">
                    <div id="chartdiv" >
                      <div id="progress"></div>
                        <div id="data_holder">
                          <p> Drag over the <b>overview</b> diagram and zoom to a specific period of time.</p>
                            <div id="overview" style="margin:0;width:410px;height:50px;"></div>
                              <p style="text-align:center"> <b>Timeseries Diagram</b></p>
                                <div id="placeholder" style="margin:0;width:400px;height:300px"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-7">
                    <div style="float:left; width: 500px;">
                      {% if timeseries.original_db %}
                      <p>
                        {% blocktrans %}
                          The information for this time series has been copied from
                          another database. You may be able to download the data from the
                        {% endblocktrans %}
                          <a href='http://{{ timeseries.original_db.hostname }}{% url "timeseries_detail" timeseries.original_id %}'>{% trans "respective page of the originating database" %}</a>.
                      </p>
                      {% elif user.is_authenticated or anonymous_can_download_data %}
                        <p>
                          <a href='{% url "timeseries_text" timeseries.id %}'><i class="glyphicon glyphicon-cloud-download"></i> {% trans "Download time series" %}</a>
                        </p>
                      {% else %}
                        <p class="text-warning">
                          {% blocktrans %}
                            You don't have permission to download the time series.
                          {% endblocktrans %}
                        </p>
                      {% endif %}
                      <div class="table-responsive">
                        <table class="table table-hover table-condensed">
                          <tr>
                            <th>{% trans 'ID' %}</th>
                            <td>{{ timeseries.id }}</td>
                          </tr>
                          <tr>
                            <th>{% trans 'Related Station' %}</th>
                            {% if timeseries.related_station %}
                              <td><a href="{% url "station_detail" timeseries.related_station.id %}">{{ timeseries.related_station }}</a></td>
                            {% else %}
                              <td>{% trans 'None' %}</td>
                            {% endif %}
                          </tr>
                          <tr>
                            <th>{% trans 'Name' %}</th>
                            <td>{{ timeseries.name }}</td>
                          </tr>
                          <tr>
                            <th>{% trans 'Variable' %}</th>
                            <td>{{ timeseries.variable }}</td>
                          </tr>
                          <tr>
                            <th>{% trans 'Unit Of Measurement' %}</th>
                            <td>{{ timeseries.unit_of_measurement }}</td>
                          </tr>
                          <tr>
                            <th>{% trans 'Precision' %}</th>
                            <td>{{ timeseries.precision }}</td>
                          </tr>
                          <tr>
                            <th>{% trans 'Time Zone' %}</th>
                            <td>{{ timeseries.time_zone }}</td>
                          </tr>
                          <tr>
                            <th>{% trans 'Remarks' %}</th>
                            <td>{{ timeseries.remarks }}</td>
                          </tr>
                          <tr>
                            <th>{% trans 'Instrument' %}</th>
                            {% if timeseries.instrument %}
                              <td><a href="{% url "instrument_detail" timeseries.instrument.id %}">{{ timeseries.instrument }}</a></td>
                            {% else %}
                              <td>{% trans 'None' %}</td>
                            {% endif %}
                          </tr>
                          <tr>
                            <th>{% trans 'Start Date' %}</th>
                            <td>{{ timeseries.start_date|date:"Y/m/d H:i" }}</td>
                          </tr>
                          <tr>
                            <th>{% trans 'End Date' %}</th>
                            <td>{{ timeseries.end_date|date:"Y/m/d H:i" }}</td>
                          </tr>
                          <tr>
                            <td colspan="2" align="center"><strong>{% trans 'Time stamps properties' %}</strong></th></tr>
                          <tr>
                            <th>{% trans 'Time scale' %}</th>
                            <td>{% if not timeseries.time_step %}
                                  {% trans 'Variable step' %}
                                {% else %}
                                  {{ timeseries.time_step }}
                                {% endif %}
                            </td>
                          </tr>
                          {% ifequal timeseries.timestamp_rounding_minutes NULL %}
                            <tr>
                              <th>{% trans 'Timestamp regularity' %}</th>
                              <td>{% trans 'Time step is not strict' %}</td>
                            </tr>
                          {% else %}
                            <tr>
                              <th>{% trans 'Timestamp regularity' %}</th>
                              <td>{% trans 'Time step is strict' %}</td>
                            </tr>
                            <tr>
                              <th>{% trans ' Timestamp rounding' %}</th>
                              <td>{{ timeseries.timestamp_rounding_minutes }}
                                {% trans 'minutes' %},
                                {{ timeseries.timestamp_rounding_months }}
                                {% trans 'months' %}
                              </td>
                            </tr>
                          {% endifequal %}
                          <tr>
                            <th>{% trans 'Time stamps reference' %}</th>
                            <td>{% if not timeseries.interval_type %}
                                  {% trans 'Instantaneous values' %}
                                {% else %}
                                  {% trans 'Interval, '%}{{ timeseries.interval_type }}
                                {% endif %}
                            </td>
                          </tr>
                          {% ifnotequal timeseries.timestamp_offset_months NULL %}
                            <tr>
                              <th>{% trans 'Timestamp offset' %}</th>
                              <td>{{ timeseries.timestamp_offset_minutes }}
                                {% trans 'minutes' %},
                                {{ timeseries.timestamp_offset_months }}
                                {% trans 'months' %}
                              </td>
                            </tr>
                          {% endifnotequal %}
                        </table>
                      </div>
                      {% if display_copyright and  timeseries.related_station %}
                        <div class="panel-footer">
                          © <span class="text-warning">
                              {{ timeseries.related_station.copyright_years }}
                              {{ timeseries.related_station.copyright_holder }}
                            </span>
                          </div>
                      {% endif %}
                    </div>
                  </div>
                  {% else %}
                    <p class="lead">Currently, there is no Timeseries data available!</p>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div> <!-- row -->
  </div> <!-- container -->
{% endblock %}
