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

<div id="jplayer"></div>
<script type="text/javascript">
  var gather_focus = true;
  var played = false;
  var leaving = true;
  <% if @gatherer and @gatherer.can_destroy? cuser %>
  var gatherer_id = <%= @gatherer.id %>;
  <% else %>
  var gatherer_id = 0;
  <% end %>

  function updateGathererStatus(status) {
    $.ajax({
      url: '/gatherers/' + gatherer_id + '/status',
      type: 'POST',
      data: {'status': status},
      async: false,
      cache: false,
      success: function() {},
      complete: function() {},
      error: function() {}
    });
  }

  var gatherAlertInterval;

  $(document).ready(function() {
    $.PeriodicalUpdater("/gathers/" + <%= @gather.id %> + ".js", {
      method: "GET",
      type: "script",
      minTimeout: 5000,
      maxTimeout: 15000,
      success: function(response, text, request) {
        if (request.getResponseHeader('Gather') == 'full') {
          // Play notification while we wait on captains
          if (!gatherAlertInterval) {
            $('#jplayer').jPlayer({
              ready: function() {
                $(this).jPlayer('setMedia', {mp3: '/sounds/gather-alert.mp3'}).jPlayer("play");
              },
              loop: false
            });
            gatherAlertInterval = setInterval(function() { $("#jplayer").jPlayer("play"); }, 10000);
          }
        } else if (request.getResponseHeader('Gather') == 'picking' && !played) {
          played = true

          if (!gather_focus) {
            $("#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"
            });
          }
        }
        else if (response.length > 10) {
          clearInterval(gatherAlertInterval);
          $("#jplayer").jPlayer("stop");
        }
      }
    });

    $(window).bind('beforeunload', function(e) {
      if (gatherer_id > 0) {
        return "You will be removed from the Gather if you leave this page.";
      }
    });

    $(window).bind('unload', function() {
      if (gatherer_id > 0) {
        updateGathererStatus('leaving');
      }
    });

    var afk = false;
    var afk_timeout;
    var afk_time = 1000 * 60 * 15; // 15 minutes
    $(window).blur(function() {
      gather_focus = false;
      afk_timeout = setTimeout(function() {
        if (gatherer_id > 0) {
          afk = true;
          updateGathererStatus('away');
        }
      }, afk_time);
    });

    $(window).focus(function() {
      gather_focus = true;

      if (played) {
        $("#jplayer").jPlayer("stop");
      }

      if (afk) {
        updateGathererStatus('active');
        $.get("/gathers/" + <%= @gather.id %> + ".js");
      }

      clearTimeout(afk_timeout);
    });
  });
</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>Commanders</h6>
        <ul>
          <li>Players choose to become commanders</li>
          <li>Commanders will pick team players</li>
          <li>Gather will not start without commanders</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>
        </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>