@(result: PiApprox)(implicit request: RequestHeader)

<script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/handlebars-1.0.rc.1.js")" type="text/javascript"></script>

<a style="font-size: 14px; float: right;" href="/assets/client.zip">Client downloaden (IP: 10.3.2.223)</a>

          <h3>Live demo</h3>
          <table>
            <thead>
              <tr>
                <th>[]</th>
                <th>x.x.x.x</th>
                <th>:</th>
                <th>v [Gl/s]</th>
                <th>n [Gl]</th>
                <th>&pi;</th>
              </tr>
            </thead>
            <tbody id="clients">
              <!--<tr>
                <th class="green">Up!</th>
                <td>Tim</td>
                <td>127.0.0.1</td>
                <td>31337</td>
                <td>800000</td>
                <td>2.781</td>
              </tr>-->
            </tbody>
          </table>

          <br>
          <b>Aktuelle Approximation</b>
          <div id="pi">
          </div>

<style type="text/css">
  #pi p { margin: none; font-size: 14px; }
</style>

          <br>
          <b>Anzahl Glieder</b>
          <p id="n">@result.n</p>

          <p class="grey" style="position: absolute; bottom: 42px;">
            Brought to you by WebSockets
          </p>

  <script id="client-template" type="text/x-handlebars-template">
    <tr id="c{{id}}">
      <td>{{who}}</td>
      <td>{{host}}</td>
      <td>{{port}}</td>
      <td>{{v}}</td>
      <td>{{n}}</td>
      <td>{{pi}}</td>
    </tr>
  </script>

  <script type="text/javascript" charset="utf-8">
     $(function() {
	    var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket;
	    var chatSocket = new WS("@routes.Application.result.webSocketURL()");

        var clients = [];
        var source   = $("#client-template").html();
        var template = Handlebars.compile(source);

	    var receiveEvent = function (event) {
          var data = JSON.parse(event.data);
          if(data.who) {
            //console.log("got event: " + event.data);
            var i = clients.indexOf(data.who);
            if(i >= 0) {
              data.id = i;
              $("#c" + i).replaceWith(template(data));
            } else {
              data.id = clients.length;
              clients[data.id] = data.who;
              $("#clients").append(template(data));
            }
          } else {
            $("#n").text(data.n);
            var dotPi = $("#pi");
            dotPi.html("");
            var ps = data.pi.map(function (piPart) {
              var p = $('<p></p>').text(piPart);
              dotPi.append(p);
            });
          }
	    };
	    
	    chatSocket.onmessage = receiveEvent;
        console.log("Initialized chatSocket: " + chatSocket);
	 });
</script>