<%= content_tag(
  :canvas,
  nil,
  :id => "image",
  :width => post.image_width,
  :height => post.image_height,
  "data-original-width" => post.image_width,
  "data-original-height" => post.image_height,
  "data-large-width" => post.image_width,
  "data-large-height" => post.image_height,
  "data-tags" => post.tag_string,
  "data-uploader" => post.uploader_name,
  "data-rating" => post.rating,
  "data-flags" => post.status_flags,
  "data-parent-id" => post.parent_id,
  "data-has-children" => post.has_children?,
  "data-has-active-children" => post.has_active_children?,
  "data-score" => post.score,
  "data-fav-count" => post.fav_count,
  "data-ugoira-frames" => post.pixiv_ugoira_frame_data.data.to_json,
  "data-ugoira-content-type" => post.pixiv_ugoira_frame_data.content_type.to_json,
) %>

<div id="ugoira-controls">
  <div id="ugoira-control-panel" style="width: <%= [@post.image_width, 350].max %>px;">
    <%= button_tag "Play", :id => "ugoira-play", :style => "display: none;" %>
    <%= button_tag "Pause", :id => "ugoira-pause" %>
    <div id="seek-slider" style="width: <%= [@post.image_width, 350].max - 81 %>px;"></div>
  </div>
  <p id="save-video-link">
    <% if post.has_ugoira_webm? %>
      <%= link_to "Save as video (right click and save)", post.large_file_url %>
    <% else %>
      WebM conversion pending
    <% end %>
  </p>
</div>

<% content_for(:html_header) do %>
  <script type="text/javascript">
    Danbooru.Ugoira = {};

    Danbooru.Ugoira.create_player = function() {
      var meta_data = {
        mime_type: <%= raw @post.pixiv_ugoira_frame_data.content_type.to_json %>,
        frames: <%= raw @post.pixiv_ugoira_frame_data.data.to_json %>
      };
      var options = {
        canvas: document.getElementById("image"),
        source: "<%= @post.file_url %>",
        metadata: meta_data,
        chunkSize: 300000,
        loop: true,
        autoStart: true,
        debug: false,
      }
      this.player = new ZipImagePlayer(options);
    }

    Danbooru.Ugoira.player = null;

    $(function() {
      Danbooru.Ugoira.create_player();
      $(Danbooru.Ugoira.player).on("loadProgress", function(ev, progress) {
        $("#seek-slider").progressbar("value", Math.floor(progress * 100));
      });

      var player_manually_paused = false;
      $("#ugoira-play").click(function(e) {
        Danbooru.Ugoira.player.play();
        $(this).hide();
        $("#ugoira-pause").show();
        player_manually_paused = false;
        e.preventDefault();
      })
      $("#ugoira-pause").click(function(e) {
        Danbooru.Ugoira.player.pause();
        $(this).hide();
        $("#ugoira-play").show();
        player_manually_paused = true;
        e.preventDefault();
      });

      $("#seek-slider").progressbar({
        value: 0
      });

      $("#seek-slider").slider({
        min: 0,
        max: Danbooru.Ugoira.player._frameCount-1,
        start: function(event, ui) {
          // Need to pause while slider is being dragged or playback speed will bug out
          Danbooru.Ugoira.player.pause();
        },
        slide: function(event, ui) {
          Danbooru.Ugoira.player._frame = ui.value;
          Danbooru.Ugoira.player._displayFrame();
        },
        stop: function(event, ui) {
          // Resume playback when dragging stops, but only if player was not paused by the user earlier
          if (!(player_manually_paused)) {
            Danbooru.Ugoira.player.play();
          }
        }
      });
      $(Danbooru.Ugoira.player).on("frame", function(frame, frame_number) {
        $("#seek-slider").slider("option", "value", frame_number);
      });
    });
  </script>
<% end %>
