<% content_for :title do %>スラッシュリーディング<% end %>
<script type="text/javascript">

function display() {
  $("#separate_wrapper").hide();
  $("#normal_wrapper").hide();
  $("#comment-image").hide();
  $("#question-image").hide();

  if ($("#sentense").val() == "0") {
    $("#normal_wrapper").show();
  }
  if ($("#sentense").val() == "1") {
    $("#separate_wrapper").show();
  }

  if ($("#commentary").val() == "0") {
    $("#question-image").show();
  }

  if ($("#commentary").val() == "1") {
    $("#comment-image").show();
  }

}
$(document).ready(function(){
  display();
  <% if @exercise.pause_file.present? && @exercise.voice_file.present? %>
     $("#normal_jplayer").jPlayer({
       ready: function (event) {
         $(this).jPlayer("setMedia", {
           title: "ノーマル",
           mp3: "<%= @exercise.file_exercise_path("voice_file") %>"
         });
       },
       cssSelectorAncestor: "#jp_container_normal",
       swfPath: "<%= asset_path('jplayer') %>",
       supplied: "mp3",
       wmode: "window",
       useStateClassSkin: true,
       autoBlur: false,
       smoothPlayBar: true,
       keyEnabled: true,
     });

    $("#separate_jplayer").jPlayer({
      ready: function (event) {
        $(this).jPlayer("setMedia", {
          title: "ポーズ入り",
          mp3: "<%= @exercise.file_exercise_path("pause_file") %>"
        });
      },
      cssSelectorAncestor: "#jp_container_separate",
      swfPath: "<%= asset_path('jplayer') %>",
      supplied: "mp3",
      wmode: "window",
      useStateClassSkin: true,
      autoBlur: false,
      smoothPlayBar: true,
      keyEnabled: true,
    });
  <% end %>

  $("#sentense").change(display);
  $("#commentary").change(display);
});
</script>

<ol class="breadcrumb pull-right">
  <li><%= link_to 'TOP', top_path %></li>
  <li><%= link_to 'スラッシュリーディング', exercises_path %></li>
  <li class="active"><%= @exercise.title %></li>
</ol>

<h1 class="page-header">スラッシュリーディング</h1>
<div class="panel panel-inverse">
  <div class="panel-heading">
    <h4 class="panel-title fl"><%= @exercise.title %></h4>
    <span class="open_date"><%= display_published_weekday @exercise.published_week %></span>
  </div>
  <div class="panel-toolbar">
    <form class="form-inline">
      <div class="btn-group m-r-5 m-b-5">
        <label class="control-label">和訳</label>
        <%= select_tag :commentary, options_for_select([['OFF', 0], ['ON', 1]]), class: 'form-control', id: "commentary" %>
      </div>
      <% if @exercise.pause_file.present? && @exercise.voice_file.present? %>
        <div class="btn-group m-r-5 m-b-5">
          <label class="control-label">再生</label>
          <%= select_tag :audio, options_for_select([['ノーマル', 0], ['ポーズ入り', 1]]), class: 'form-control', id: "sentense" %>
        </div>
      <% end %>
    </form>
  </div>
  <div class="panel-body">
    <% if @exercise.pause_file.present? && @exercise.voice_file.present? %>
      <div id="normal_wrapper" class="audio-wrapper">
        <div id="normal_jplayer" class="jp-jplayer"></div>
        <div id="jp_container_normal" class="jp-audio" role="application" aria-label="media player">
          <div class="jp-type-single">
            <div class="jp-gui jp-interface">
              <div class="jp-controls ex-button">
                <button class="jp-play" role="button" tabindex="0">play</button>
                <button class="jp-stop" role="button" tabindex="0">stop</button>
              </div>
              <div class="jp-progress">
                <div class="jp-seek-bar">
                  <div class="jp-play-bar"></div>
                </div>
              </div>
              <div id="ex-volume-c" class="jp-volume-controls">
                <button class="jp-mute jp-ex1" role="button" tabindex="0">mute</button>
                <button class="jp-volume-max jp-ex2" role="button" tabindex="0">max volume</button>
                <div class="jp-volume-bar">
                  <div class="jp-volume-bar-value"></div>
                </div>
              </div>
              <div class="jp-time-holder" style="margin: 3px auto 0; position: static">
                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                <div class="jp-toggles">
                  <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                </div>
              </div>
            </div>
            <div class="jp-details">
              <div class="jp-title" aria-label="title">&nbsp;</div>
              <span class="download"><a href="<%= @exercise.file_exercise_path("voice_file") %>" download>音声ダウンロード</a></span>
            </div>
            <div class="jp-no-solution">
              <span>Update Required</span>
              To play the media you will need to either update your browser to a recent version or update your <a href="https://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>
          </div>
        </div>
      </div>
      <div id="separate_wrapper" class="audio-wrapper">
        <div id="separate_jplayer" class="jp-jplayer"></div>
        <div id="jp_container_separate" class="jp-audio" role="application" aria-label="media player">
          <div class="jp-type-single">
            <div class="jp-gui jp-interface">
              <div class="jp-controls">
                <button class="jp-play" role="button" tabindex="0">play</button>
                <button class="jp-stop" role="button" tabindex="0">stop</button>
              </div>
              <div class="jp-progress">
                <div class="jp-seek-bar">
                  <div class="jp-play-bar"></div>
                </div>
              </div>
              <div id="ex-volume-c2" class="jp-volume-controls">
                <button class="jp-mute jp-ex1" role="button" tabindex="0">mute</button>
                <button class="jp-volume-max jp-ex2" role="button" tabindex="0">max volume</button>
                <div class="jp-volume-bar">
                  <div class="jp-volume-bar-value"></div>
                </div>
              </div>
              <div class="jp-time-holder" style="margin: 3px auto 0; position: static">
                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                <div class="jp-toggles">
                  <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                </div>
              </div>
            </div>
            <div class="jp-details">
              <div class="jp-title" aria-label="title">&nbsp;</div>
              <span class="download"><a href="<%= @exercise.file_exercise_path("pause_file") %>" download>音声ダウンロード</a></span>
            </div>
            <div class="jp-no-solution">
              <span>Update Required</span>
              To play the media you will need to either update your browser to a recent version or update your <a href="https://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>
          </div>
        </div>
      </div>
    <% end %>

    <div class="exercise_sample">
      <%= image_tag(@exercise.file_exercise_path("comment_file"), id: "comment-image") %>
      <%= image_tag(@exercise.file_exercise_path("question_file"), id: "question-image") %>
    </div>
    <div>
      <h6>トレーニングステップ</h6>
      <ul>
        <li>&#9312;文の意味をカタマリごとに確認</li>
        <li>&#9313;全文を繰り返し音読or黙読</li>
        <li>&#9314;最初と最後でタイムを計り、トレーニングの成果を記録</li>
      </ul>
      <div>参考</div>
      <div>リーディングを時間内に終えるための目標スピード：160 wpm*</div>
      <div>*1分間に読める語数（words per minute）＝ 【本文の語数×60秒／かかった秒数】</div>
    </div>
    <br>
    <div class="text-center"><%= link_to "一覧に戻る", exercises_path %></div>
  </div>
</div>
