doctype 5
html
  head
    link(href='/stylesheets/style.css', rel='stylesheet')
    script(src='http://code.jquery.com/jquery-1.6.1.min.js')
    script(src='/socket.io/socket.io.js')
    script
      // socket.io specific code
      var socket = io.connect();

      socket.on('connect', function () {
        $('#chat').addClass('connected');
      });

      socket.on('announcement', function (msg) {
        console.log("Received announcement");
        $('#lines').append($('<p>').append($('<em>').text(msg)));
      });

      socket.on('nicknames', function (nicknames) {
        $('#nicknames').empty().append($('<span>Online: </span>'));
        for (var i in nicknames) {
          $('#nicknames').append($('<b>').text(nicknames[i]));
        }
      });

      socket.on('user message', function(data){
                    message('>',data);
                });
      socket.on('execute', message);
      socket.on('reconnect', function () {
        $('#lines').remove();
        message('System', 'Reconnected to the server');
      });

      socket.on('reconnecting', function () {
        message('System', 'Attempting to re-connect to the server');
      });

      socket.on('error', function (e) {
        message('System', e ? e : 'A unknown error occurred');
      });

      function message (from, msg) {
        $('#lines').append($('<p>').append($('<b>').text(from), msg));
      }

      // dom manipulation
      $(function () {
        $('#set-nickname').submit(function (ev) {
          socket.emit('nickname', $('#nick').val(), function (set) {
            if (!set) {
              clear();
              return $('#chat').addClass('nickname-set');
            }
            $('#nickname-err').css('visibility', 'visible');
          });
          return false;
        });

        $('#send-message').submit(function () {
          var msg = $('#message').val();
          if(msg.charAt(0)=='/'){
                var i = msg.indexOf(' ');
                var data = {};
                data['name'] = msg.substring(1,i);
                var payload = msg.substring(i);
                try{
                    payload = jQuery.parseJSON(payload);
                }catch(err){
                    console.log("Not json");
                }
                data['payload'] = payload;
                message('Exec:', msg);
                socket.emit('execute', data);
          }
          else if(msg.charAt(0)=='$'){
                var i = msg.indexOf(' ');
                var data = msg.substring(1);
                console.log("Client:"+data);
                message("Client:"+data);
                try{
                    data = jQuery.parseJSON(data);
                }catch(err){
                    console.log("Not json"+err);
                }
                console.log("Client(final):"+JSON.stringify(data));
                socket.emit('client', data);
          }
          else{
                message('me', msg);
                socket.emit('user message', msg);
         }

          clear();
          $('#lines').get(0).scrollTop = 10000000;
          return false;
        });

        function clear () {
          $('#message').val('').focus();
        };
      });
  body
    #chat
      #nickname
        form.wrap#set-nickname
          p Please type in your nickname and press enter.
          input#nick
          p#nickname-err Nickname already in use
      #connecting
        .wrap Connecting to socket.io server
      #messages
        #nicknames
        #lines
      form#send-message
        input#message
        button Send