extends layout

block append head
    link(rel='stylesheet', href='/stylesheets/chatty.css')
    script(src="http://code.jquery.com/jquery-1.7.1.js",type="text/javascript")
    script(src="/socket.io/socket.io.js")
    script(type='text/javascript')
        var socket = io.connect();

        socket.on('msg', function(data) {
            var msg = JSON.parse(data);
            appendMsg(msg);
        });

        socket.on('init', function(data) {
            var messages = JSON.parse(data)
            for (i in messages)
                appendMsg(messages[i])
        });

        function appendMsg(msg) {
            $('#msgs').append(function() {
                var div = $('<div>');
                div.html('<b>' + msg.username + ':</b> ' + msg.message);
                return div;
            });
            $('#msgs')[0].scrollTop = $('#msgs')[0].scrollHeight;
        }

        function sendMsg() {
            var msg = {};
            $.each($('#chat').serializeArray(), function(i,v) {
                msg[v.name] = v.value;
            });
            $("#msg").val("");
            appendMsg(msg);
            socket.emit('msg', JSON.stringify(msg));
        }

block content
    h1 #{title} chatting away
    #msgs
    #form
        form(id="chat",onsubmit="sendMsg(); return false;")
            label(for="username") Username:
            input(name="username",type="text")
            br
            label(for="msg") Message:
            input(id="msg",type="text",name="message")
            br
            input(type="submit")