<script>
  var taskProgressReloader = {
    timeoutId: null,
    reload: function () {
      $.ajax({
        url: "",
        context: document.body,
        success: function (s, x) {
          $(this).html(s);
          taskProgressReloader.start();
        }
      });
    },

    start: function () {
      if (!this.timeoutId) {
        this.timeoutId = setTimeout(this.reload, 5000);
      }
     var button = $('.reload-button');
     button.html('<span class="glyphicon glyphicon-refresh spin"></span> <%= _('Stop auto-reloading') %>');
     button.show();
    },

    stop: function () {
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
      }
      this.timeoutId = null;
      var button = $('.reload-button');
      button.html('<span class="glyphicon glyphicon-refresh"></span> <%= _('Start auto-reloading') %>');
      button.show();
    },

    toggle: function () {
      if (this.timeoutId) {
        this.stop();
      } else {
        this.start();
      }
    }
  };

  $(document).ready(function () {
    $('.reload-button').click(function (event) {
      taskProgressReloader.toggle();
      event.preventDefault();
    });

    $('.reload-button-stop').click(function (event) {
      taskProgressReloader.stop();
    });

    $('ul.nav-tabs a' ).click(function (event) {
      taskProgressReloader.stop();
    });

  <% if @task.state == 'running' %>
    taskProgressReloader.start();
  <% else %>
    taskProgressReloader.stop();
  <% end %>
  });
</script>

<div class="task-details">

  <%= form_for @task, :url => "#" do %>

  <ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#primary" data-toggle="tab"><%= _("Task") %></a></li>
    <li><a href="#running-steps" data-toggle="tab"><%= _("Running Steps") %></a></li>
    <li><a href="#errors" data-toggle="tab"><%= _("Errors") %></a></li>
    <li><a href="#locks" data-toggle="tab"><%= _("Locks") %></a></li>
    <li><a href="#raw" data-toggle="tab"><%= _("Raw") %></a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="primary">
      <%= render :partial => 'details' %>
    </div>
    <div class="tab-pane" id="running-steps">
      <%= render :partial => 'running_steps' %>
    </div>
    <div class="tab-pane" id="errors">
      <%= render :partial => 'errors' %>
    </div>
    <div class="tab-pane" id="raw">
      <%= render :partial => 'raw' %>
    </div>
    <div class="tab-pane" id="locks">
      <%= render :partial => 'locks' %>
    </div>

  <% end %>
</div>