aavegmit/index.html

## index.html
<!doctype html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Collaborative Text Editor</title>

  <script src="/javascripts/lib/modernizr.js"></script>
  <script src="/javascripts/lib/underscore.js"></script>
  <script src="/javascripts/lib/eventemmitter2.js"></script>
  <script src="/javascripts/lib/jquery.js"></script>
  <script src="jquery.spire.js"></script>
  <script src="/javascripts/lib/jquery.scrollto.js"></script>

  <script src="/javascripts/lib/icanhaz.js"></script>

  <script src="text-editor.js"></script>
  <script src="application.js"></script>

  <script src="/javascripts/lib/less.js"></script>
</head>

<body>
  <!-- more here later -->
</body>
</html>

## interface-elements-with-overlay.html
<div class="overlay">
   <form id="overlay-form" action="#" method="post">
     <p id="overlay-text">Choose a Nick...</p>
     <input type="text" name="nick" placeholder="Name" />
     <input type="submit" value="Join &rarr;">
   </form>
</div>

## interface.html
<form action="#" method="post" >
    <textarea  id="common-textarea" rows="46" cols="170"></textarea>
</form>

## join-text-editor-form-submission.js
$('.overlay form').submit(function(event){
    event.stopPropagation();
    event.preventDefault();

    var form = this
      , nick = $(form).find('input[name="nick"]').val() || 'Anonymous'
      , message
    ;

    message = {
        author: nick
      , type: 'join'
    };

    // keep track of who you are for later, this will allow us to check if the
    // person chatting is mentioned in another person's message.
    text_editor.currentUser = nick;

    // Send the message above, once it's sent trigger the passed in callback.
    text_editor.send(message);
    $("#overlay-text").html("Joining the network...") ;

    // Sets a timeout of 3 sec for the response of "Join" message.
    // If no response is received within 3 sec, it implies that the current user
    // might be the only one present on this channel.
    text_editor.joinTimeout = setTimeout(function(){text_editor.processHello(nick, nick,"")}, 3000) ;
  });

## new-message-submission.js
  // The text editor is bound to its keyup event.
  // Anything a person types into the text editor will be
  // displayed to everyone in the room.
  $('#common-textarea').keyup(function(event){
    ++text_editor.current_seq_num ;

    var form = this
      , message = {
          author: text_editor.currentUser
        , content: $('#common-textarea').val()
	, type: 'replace'
      }
    ;
    console.debug(event) ;

    // Send the message constructed above
    text_editor.send(message, function(){
    });
  });

## subscribe.js
 $.spire.messages.subscribe('spire.io text editor example', function(err, messages){

    if (err) throw err;

    $(messages).each(function(i, rawMessage){
      var message = rawMessage.content ;

      // Handles the "Join" message
      if(message.type === "join"){
  	if (text_editor.currentUser != message.author &&
  	    text_editor.clientsList[message.author] === undefined &&
              text_editor.clientsList[text_editor.currentUser] != undefined ){
  	      text_editor.updateUsersList(message.author) ;
  	      text_editor.sendHello(message.author, $("#common-textarea").val()) ;
  	      text_editor.clientsList[message.author] = new Client({name : message.author}) ;
  	}
	// Send a "NickExists" message if the nick requested is already
	// used
  	else if(text_editor.currentUser === message.author &&
  	    text_editor.clientsList[message.author] != undefined ){
  	      text_editor.sendNickExists(message.author) ;
  	}
      }
      // "Hello" message is used to create the existing users list
      else if(message.type === "hello"){
  	text_editor.processHello(message.author, message.to, message.content) ;
      }
      // "NickExists" message is received if the Nick requested is already
      // in use
      else if(message.type === "nickExists"){
  	text_editor.processNickExists(message.author) ;
      }
      // "Replace" message contains the updated text
      else if(message.type === "replace"){
  	if (message.author != text_editor.currentUser &&
  		text_editor.clientsList[message.author] != undefined)
  	    text_editor.clientsList[message.author].sequenceCheck(message) ;
      }
      else{
      	console.debug("Unrecognized message received") ;
      }
    });
  });
	<!doctype html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Collaborative Text Editor</title>

	<script src="/javascripts/lib/modernizr.js"></script>
	<script src="/javascripts/lib/underscore.js"></script>
	<script src="/javascripts/lib/eventemmitter2.js"></script>
	<script src="/javascripts/lib/jquery.js"></script>
	<script src="jquery.spire.js"></script>
	<script src="/javascripts/lib/jquery.scrollto.js"></script>

	<script src="/javascripts/lib/icanhaz.js"></script>

	<script src="text-editor.js"></script>
	<script src="application.js"></script>

	<script src="/javascripts/lib/less.js"></script>
	</head>

	<body>
	<!-- more here later -->
	</body>
	</html>
	<div class="overlay">
	<form id="overlay-form" action="#" method="post">
	<p id="overlay-text">Choose a Nick...</p>
	<input type="text" name="nick" placeholder="Name" />
	<input type="submit" value="Join →">
	</form>
	</div>
	<form action="#" method="post" >
	<textarea id="common-textarea" rows="46" cols="170"></textarea>
	</form>
	$('.overlay form').submit(function(event){
	event.stopPropagation();
	event.preventDefault();

	var form = this
	, nick = $(form).find('input[name="nick"]').val() \|\| 'Anonymous'
	, message
	;

	message = {
	author: nick
	, type: 'join'
	};

	// keep track of who you are for later, this will allow us to check if the
	// person chatting is mentioned in another person's message.
	text_editor.currentUser = nick;

	// Send the message above, once it's sent trigger the passed in callback.
	text_editor.send(message);
	$("#overlay-text").html("Joining the network...") ;

	// Sets a timeout of 3 sec for the response of "Join" message.
	// If no response is received within 3 sec, it implies that the current user
	// might be the only one present on this channel.
	text_editor.joinTimeout = setTimeout(function(){text_editor.processHello(nick, nick,"")}, 3000) ;
	});
	// The text editor is bound to its keyup event.
	// Anything a person types into the text editor will be
	// displayed to everyone in the room.
	$('#common-textarea').keyup(function(event){
	++text_editor.current_seq_num ;

	var form = this
	, message = {
	author: text_editor.currentUser
	, content: $('#common-textarea').val()
	, type: 'replace'
	}
	;
	console.debug(event) ;

	// Send the message constructed above
	text_editor.send(message, function(){
	});
	});