<div id="manage-series">
  <%= form_tag update_positions_series_path, method: :post do %>
  <ul id="sortable_series_list">
    <% @serial_works.each_with_index do |serial, i| %>
      <li id="serial_<%= serial.id %>" class="serial-position-list">
        <%= text_field_tag 'serial_works[]', nil, :size => 3, :maxlength => 3, :class => 'number serial-position-field', :id => "serial_#{i}" %>
        <span id='position-for-<%= serial.id %>'><%= serial.position %></span>.
        <h3 class="heading">
          <%= serial.work.posted? ? serial.work.title : t(".draft_work_title", title: serial.work.title) %>
        </h3>
      </li>
    <% end %>
  </ul>
  <p class="submit actions"><%= submit_tag "Update Positions" %></p>
  <% end %>
</div>

<%= content_for :footer_js do %>
  <%= javascript_tag do %>
     $j("#sortable_series_list").sortable({
            delay: 300,
            update: function(event, ui) {
                $j(".serial-position-list").each(function(index, li){
                    var serialId = $j(li).attr("id").replace("serial_","");
                    $j("#position-for-"+serialId).html(index+1);
                  });
                $j.ajax({
                  type: 'post',
                  data: $j("#sortable_series_list").sortable("serialize"),
                  dataType: 'json',
                  url: "<%= update_positions_series_path %>"})
              }
      })
  <% end %>
<% end %>
