<!-- recording play controls -->
<div class="recording recording-controls has-mix">

  <div class="jam-track-get-ready">
    <div class="spinner-small"></div>
    <span>Get Ready!</span>
  </div>
  <!-- play button -->
  <div class="left play-buttons">
    <a class="play-button" href="#">
      <%= image_tag "content/icon_playbutton.png", {:height => 20, :width => 20, :class=> "playbutton"} %>
      <%= image_tag "content/icon_pausebutton.png", {:height => 20, :width => 20, :class=> "pausebutton"} %>
    </a>

    <a class="stop-button" href="#">
      <%= image_tag "content/icon_stopbutton.png", {:height => 20, :width => 20, :class=> "stopbutton"} %>
    </a>

  </div>

  <!-- playback position -->
  <div class="recording-position">

    <!-- start time -->
    <div class="recording-time">0:00</div>

    <!-- playback background & slider -->
    <div class="recording-playback">
      <div class="recording-slider"><%= image_tag "content/slider_playcontrols.png", {:height => 16, :width => 5} %></div>
    </div>

    <!-- end time -->
    <div class="recording-time duration-time">0:00</div>
  </div>
  <!-- end playback position -->

  <!-- current playback time -->
  <div class="recording-current">0:00</div>

  <div class="playback-mode-buttons icheckbuttons">
    <input type="radio" name="playback-mode" checked="checked" value="preview-to-all" class="preview-to-all" /><label for="playback-mode-preview-all" class="radio-text">Preview to All</label>
    <input type="radio" name="playback-mode" value="preview-to-me" class="preview-to-me" /><label for="playback-mode-preview-me" class="radio-text">Preview Only to Me</label>
  </div>

  <div class="metronome-playback-options">
    <span id="metronome-playback-select"></span>
    <span id="metronome-playback-help">?</span>
  </div>
</div>
<!-- end recording play controls -->