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

{% 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 %}
<script type="text/javascript">
  function LogTailer(baseUrl, updateInterval, timeout, autoScroll, autoPoll) {
    this.baseUrl = baseUrl;
    this.timeout = timeout || (1000 * 60 * 8);
    this.updateInterval = updateInterval || 4000;
    this.autoScroll = autoScroll || false;
    this.autoPoll = autoPoll || true;
    this.requesting = false;
    this.position = 0;
    this.$textElement = $("#log-tail");
  }

  LogTailer.prototype = {

    poll: function(log) {
      this.log = log;
      this.position = 0;
      this.requesting = false;

      if (this.interval) {
        clearInterval(this.interval);
      }
      this.$textElement.text('');

      var thisTailer = this;
      this.interval = setInterval(function() {
        thisTailer.makeRequest();
      }, this.updateInterval);

      // Make a request now to avoid waiting
      thisTailer.makeRequest();
    },

    stop: function() {
      if (this.interval) {
        clearInterval(this.interval);
      }
    },

    makeRequest: function() {
      if (!this.requesting && this.autoPoll) {
        this.requesting = true;

        var fullUrl = this.baseUrl + this.log + "/" + this.position + "/",
            thisTailer = this;

        $.getJSON(fullUrl, function(data) {
          thisTailer.handleResponse(data);
        });
      }
    },

    handleResponse: function(data) {
      if (this.requesting) {
        this.position = data['ends'];
        this.$textElement.text(this.$textElement.text() + data["data"]);

        if (this.autoScroll) {
          this.scrollBottom();
        }
      }
      this.requesting = false;
    },

    scrollBottom: function() {
      $('html, body').animate(
        {scrollTop: $(document).height()-$(window).height()},
        0
      );
    }
  }
</script>
{% 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">
    (function() {
      var baseUrl = "{% url "log_list" %}";
      var updateInterval = {{ update_interval }};
      window.tailer = new LogTailer(baseUrl, updateInterval);
    })();

    // Configure JQuery Events
    $('.logfile_change').live('click', function() {
      var log = $(this).text();
      window.tailer.poll(log);
    });

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

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

  </script>
{% endblock %}