index.html

<!doctype html>
<html>
<head>
    
    <title>DevChat - A chat client for developers</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/js/functions.js"></script>
    <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
    <script>
	var URL = window.location.protocol + "//" + window.location.host;
	console.log("Connecting to " + URL);
	var socket = io.connect(URL);

	socket.on('connect', function()
	{
	    centerElement('#join-chat');
	    $("#join-chat").fadeIn();
	});

	socket.on('updateChat', function(username, messageHTML)
	{
	    $('#conversation').append(messageHTML);

	    scrollChat('#conversation');
	    $("." + username + "-status").html('<img src="images/status.png" alt="Available" />')
	});

	socket.on('updateCode', function(username, data)
	{
	    $('#code').append('<pre><code>' + data + '</code></pre>');
	    $('pre code').each(function(i, e) {hljs.highlightBlock(e)});

	    scrollChat('#code');
	});

	socket.on('updateUsers', function(data, type)
	{
	    if(type === 'single')
	    {
		$('#users').empty();
		$('#users').append('<div><span class="' + data['class_username'] + '-status status-icon"><img src="images/status.png" alt="Available" /></span>' + data['username'] + '</div>');

	    }

	    if(type === 'room')
	    {

		$('#room-users').empty();
		var roomCount = 0;
		$.each(data['users'], function(username, aUser)
		{
		    roomCount++;
		    $('#room-users').append('<div><span class="' + aUser['class_username'] + '-status status-icon"><img src="images/status.png" alt="Available" /></span>' + aUser['username'] + '</div>');
		});
		
		$('#room-count').text(roomCount);
	    }
	});

	socket.on('idleUser', function(username)
	{
	    $("." + username + "-status").html('<img src="images/status-away.png" alt="Away" />')
	});

	socket.on('duplicateUser', function()
	{
	    $('#join-chat').fadeIn();

	    $('#error-message').text('This user already exists');
	    centerElement('#error-message', 'true');
	    $('#error-message').fadeIn();
	});
	
	socket.on('updateRoom', function(room)
	{
	    $("#room-number").text('room' + room);
	});


	$(function()
	{
	    $('#chat-normal').keypress(function(e)
	    {
		if(e.which == 13)
		{
		    var message = $('#chat-normal').val();
		    $('#chat-normal').val('');

			//Make sure the message is not just whitespace
			if($.trim(message) != '')
				socket.emit('sendMessage', message, 'normal');
		}
	    });

	    $('#chat-code').keypress(function(e)
	    {
		if(e.which == 13)
		{
		    var code = $('#chat-code').val();
		    $('#chat-code').val('');

			//Make sure the message is not just whitespace
			if($.trim(code) != '')
				socket.emit('sendMessage', code, 'code');
		}
	    });

	    $("#chat-email").keypress(function(e)
	    {
		if(e.which == 13)
		{
		    var email = $('#chat-email').val();
		    $('#chat-email').val('');
		    $('#join-chat').fadeOut();

		    socket.emit('addUser', email);
		}
	    });

	    $("#open-invite").click(function()
	    {
		centerElement('#invite');
		$("#invite").show();
	    });

	    $("#invite-email").keypress(function(e)
	    {
		if(e.which == 13)
		{
		    var email = $('#invite-email').val();
		    $('#invite-email').val('');
		    $('#invite').fadeOut();

		    socket.emit('inviteUser', email);
		}
	    });

	    $(document).on("click", ".accept-invite", function(e)
	    {
		var room = $('.accept-invite span').text();

		socket.emit('acceptInvite', room);
		
		$(".invite" + room).remove();

		e.preventDefault();
	    });
	    
	    $(document).on("click", ".reject-invite", function(e)
	    {
		var room = $(this).children('span').text();

		socket.emit('rejectInvite', room);
		
		$(".invite" + room).remove();

		e.preventDefault();
	    });
	});

	setInterval(function()
	{
	    socket.emit('heartbeat');
	}, 60000);
    </script>
    <link type="text/css" rel="stylesheet" href="css/reset.css" media="screen" />
    <link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" media="screen" />
</head>
<body>

    <div id="error-message"></div>

    <!-- Open join-chat -->
    <div id="join-chat">
	<p>To join the chat please provide us with your email address</p>
	<input type="text" id="chat-email" name="chat-email" placeholder="Please enter your email address" />
    </div>
    <!-- Close join-chat -->

    <!-- Open invite -->
    <div id="invite">
	<p>Enter the email address of the person you wish to invite</p>
	<input type="text" id="invite-email" name="invite-email" placeholder="Please enter their email address" />
    </div>
    <!-- Close invite -->

    <!-- Open top -->
    <div id="top">

	<div id="users"></div>

	<div id="actions">
		<a href="#" id="open-invite">Invite</a>
		<div id="room-users"></div>
		<a href="#" id="room-count" onclick="showRoomUsers(event);"></a>
		<a href="#" id="room-number"></a> 
	</div>

	<div class="clearfix"></div>
    </div>
    <!-- Close top -->

    <!-- Open conversation-holder -->
    <div id="converstion-holder" class="holder">

	<div id="conversation"></div>
	<div id="chat-normal-holder">
	    <input id="chat-normal" class="chat-field" placeholder="Send messages here..."/>
	    <a href="#" id="open-smileys" onclick="openSmileys(event)"><img src="images/smileys/smiley.png" alt="Smileys" /></a>
	    <div id="smileys">
		<ul>
		    <li><a href=""><img src="images/smileys/smiley.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-angel.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-confuse.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-cool.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-cry.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-curly.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-draw.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-eek.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-evil.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-fat.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-glass.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-grin.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-grumpy.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-kiss.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-kitty.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-lol.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-mad.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-money.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-mr-green.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-nerd.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-neutral.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-razz.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-red.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-roll.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-sad.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-shock.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-sleep.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-slim.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-squint.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-surprise.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-sweat.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-twist.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-upset.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-wink.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-yell.png" alt="Smileys" /></a></li>
		    <li><a href=""><img src="images/smileys/smiley-zipper.png" alt="Smileys" /></a></li>
		</ul>
	    </div>
	</div>

    </div>
    <!-- Close conversation-holder -->

    <!-- Open code-holder -->
    <div id="code-holder" class="holder">

	<div id="code"></div>

	<div id="chat-code-holder">
	    <input id="chat-code" class="chat-field" placeholder="Send code here..." />
	</div>

    </div>
    <!-- Close code-holder -->

    <div class="clearfix"></div>
</body>
</html>