{% extends "admin/object_history.html" %}
{% load url from future %}
{% load admin_urls %}

{% block title %}Logtail {{ block.super }}{% endblock %}

{% block extrahead %}
{{ block.super }}
<style type="text/css">
  #log-tail {
    height: auto;
    overflow-x: scroll;
    white-space: pre;
    font-family: monospace;
  }
  .object-tools {
    margin-top: 5px;
  }
</style>
{% if include_jquery %}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
{% endif %}
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">Home</a>
  &rsaquo; <a href="{% url 'log_list' %}">Logtail</a>
</div>
{% endblock %}

{% block content %}
  <div id="content-main">
    <div class="module">
      <table id="change-history">
        <thead>
          <tr>
            <th scope="col">Log</th>
            <th scope="col">Path</th>
          </tr>
        </thead>
        <tbody>
          {% for log, path in object_list %}
            <tr>
              <th scope="row"><a href="#" class="logfile_change">{{ log }}</a></th>
              <td>{{ path }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div>
<div id="log-tail">
</div>
    </div>
  </div>
  <ul class="object-tools">
    <li><a href="#" id="auto-scroll-toggle" class="historylink">Turn Auto-Scroll On</a></li>
    <li><a href="#" id="auto-poll-toggle" class="historylink">Turn Auto-Poll Off</a></li>
  </ul>

  <script type="text/javascript">
    // Django logtail script

    var BASE_URL = "{% url "log_list" %}";
    var TIMEOUT = 1000 * 60 * 8;
    var UPDATE_INTERVAL = {{ update_interval }};
    var new_start = "0";
    var can_poll = true;
    var timed_out = false;
    var auto_scroll = false;
    var auto_poll = true;
    var interval;

    // Timeout the polling after eight minutes
    window.setTimeout(function() {
      alert("The polling timed out. Refresh to tail again.");
      timed_out = true;
    }, TIMEOUT);

    var tail = function(url) {
      if (timed_out == true) {
        return
      }

      // Theoretically avoid checking multiple times at once
      if (!(can_poll && auto_poll)) {
        return
      }
      can_poll = false

      var full_url = url + "/" + new_start + "/";

      $.getJSON(full_url, function(data) {
        $("#log-tail").each(function() {$(this).text($(this).text() + data["data"]);});
        new_start = data["ends"];

        if (auto_scroll) {
          $('html, body').animate({
            scrollTop: $(document).height()-$(window).height()},
            0
          );
        }
      });

      can_poll = true
    };

    $("#auto-scroll-toggle").live("click", function(e) {
      e.preventDefault();
      if (auto_scroll) {
        auto_scroll = false;
        $(this).text("Turn Auto-Scroll On");
      }
      else {
        auto_scroll = true;
        $(this).text("Turn Auto-Scroll Off");
      }
    });

    $("#auto-poll-toggle").live("click", function(e) {
        e.preventDefault();
        if (auto_poll) {
            auto_poll = false;
            $(this).text("Turn Auto-Poll On");
        }
        else {
            auto_poll = true;
            $(this).text("Turn Auto-Poll Off");
        }
    });

    $(".logfile_change").live("click", function() {
      var log = $(this).text();
      var url = (BASE_URL + log);

      if (new_start != "0") {
        window.clearInterval(interval);
        $("#log-tail").empty();
        new_start = "0";
      }

      tail(url, new_start);
      interval = window.setInterval(tail, UPDATE_INTERVAL, url);
    });
  </script>
{% endblock %}