ensl.org/app/views/gathers/show.html.erb

<div id="jplayer"></div>
<script type="text/javascript">
  var played = false;

  $(document).ready(function() {
    $.PeriodicalUpdater("/gathers/" + <%= @gather.id %> + ".js", {
      method: "GET",
      type: "script",
      minTimeout: 5000,
      maxTimeout: 15000,
      success: function(response) {
        if (response.match(/Gather:voting/)) {
          if (!played) {
            $("#jplayer").jPlayer({
              ready: function() {
                $(this).jPlayer("setMedia", {
                  mp3: "http://www.ensl.org/sounds/gather-5.mp3"
                }).jPlayer("play");
                
                var click = document.ontouchstart === undefined ? 'click' : 'touchstart';
                var kickoff = function () {
                  $("#jplayer").jPlayer("play");
                  document.documentElement.removeEventListener(click, kickoff, true);
                };

                document.documentElement.addEventListener(click, kickoff, true);
              },
              loop: true,
              volume: 0.6,
              swfPath: "/flash"
            });

            played = true
          }
        }
        else if (response.length > 10) {
          $("#jplayer").jPlayer("stop");
        }
      }
    });
  });
</script>

<div id="gather">
  <h1 class="fancy">
    <span>
      <%= link_to @gather do %>
        <%= @gather.category.to_s %> Gather
      <% end %>  
    </span>
  </h1>

  <div class="previous">
    <%= link_to @gather.previous_gather, class: 'button tiny' do %>
      <%= icon 'chevron-left' %> Previous
    <% end %>
  </div>

  <div class="next">
    <% if @gather.next_gather %>
      <%= link_to @gather.next_gather, class: 'button tiny' do %>
        Next <%= icon 'chevron-right' %>
      <% end %>
    <% end %>
  </div>

  <% if @gather and @gather.status != Gather::STATE_FINISHED %>
    <div id="gather-info">
      <div class="info">
        <h6>Requirements</h6>
        <ul>
          <li><a href="https://www.google.com/adsense/support/bin/answer.py?hl=en&amp;answer=12654">JavaScript</a> enabled</li>
          <li>Read the <%= link_to "Gather Rules", article_url(Article::G_RULES) %></li>
          <li>Remove yourself if you leave</li>
        </ul>
      </div>

      <div class="info">
        <h6>Captains</h6>
        <ul>
          <li>Vote for the <strong>best</strong> players</li>
          <li>Captain 1 = 2nd most voted</li>
          <li>Captain 2 = 1st most voted</li>
        </ul>
      </div>

      <div class="info">
        <h6>Voice Comunication</h6>
        <ul>
          <li><%= link_to "Teamspeak 3", "http://www.teamspeak.com/?page=downloads" %></li>
          <li><strong>Server:</strong> <a href="ts3server://ensl.org">ensl.org</a></li>
          <li><strong>Password:</strong> ns2nsl</li>
        </ul>
      </div>

      <div class="hide">
        <a id="gather-info-hide" class="button tiny">
          <%= icon 'times' %>
          Hide information
        </a>
      </div>
    </div>
  <% end  %>

  <div id="gather-area">
    <%= render_gather %>
  </div>

  <%= render partial: 'shoutmsgs/index', locals: { object: @gather } %>
</div>