jxson/adding-the-messages-template.html

## account-key.js
var spire = require('./spire.io.js');

spire.options.key = '<your account key>';

## adding-the-messages-template.html

<script id="message" type="text/html">
  <div class="message {{ type }}" id="{{ cssID }}">
    <time datetime="{{ time }}">{{ humanTime }}</time>

    <span class="name {{#isYou}} current-user {{/isYou}}">
      {{ author }}:
    </span>

    <span class="body">{{ content }}</span>
  </div>
</script>

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

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

  <title>CHAT</title>

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

  <script src="/javascripts/application.js"></script>
</head>

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

## interface-elements-with-overlay.html
<div class="overlay">
  <form action="#" method="post">
    <input type="text" name="nick" placeholder="Name" />

    <input type="submit" value="Join &rarr;">
  </form>
</div>

<div class="messages"></div>

<footer>
  <form action="#" method="post">
    <input type="text" name="content" />
  </form>
</footer>

## interface-elements.html
<div class="messages"></div>

<footer>
  <form action="#" method="post">
    <input type="text" name="content" />
  </form>
</footer>

## join-chat-form-submission.js

$('.overlay form').submit(function(event){
  event.stopPropagation();
  event.preventDefault();

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

  // 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.
  window.currentUser = nick;

  message = { channel: 'spire.io chat example'
    , content: { type: 'system'
      , body: 'joined'
      , author: nick
      }
  };

  // Send the message above, once it's sent trigger the passed in callback.
  spire.messages.publish(message, function(err, message){
    if (err) throw err; // really, you could do better

    // Hide the overlay with the initial form.
    $('.overlay').hide();

    // Focus the input in the footer for a smoother User Experience.
    $('footer form input').focus();
  });
});

## new-application.js

$(document).ready(function(){
  // The rest of the javascript will go here
});

## new-message-submission.js

$('footer form').submit(function(event){
  event.stopPropagation();
  event.preventDefault();

  var form = this
    , message = { channel: 'spire.io chat example'
      , content: { author: currentUser
        , body: $(form).find('input[name="content"]').val()
        }
    };

  // No message content? don't do anything.
  if (! message.content.body) return;

  // Send the message constructed above, once the message is sent the
  // `callback` will remove the submitted text and re-focus the input
  spire.messages.publish(message, function(err, message){
    if (err) throw err;

    $(form).find('input').val('').focus();
  });
});

## subscribe.js
spire.messages.subscribe('spire.io chat example', function(err, messages){
  if (err) throw err; // you can do better...

  $(messages).each(function(i, message){
    var date = new Date(message.timestamp)
      , element
    ;

    // Add some helpers to the message object so the template
    // can add some style hooks (classes).
    message.content.isYou = message.author === currentUser;
    message.content.cssID = 'message-' + message.id;
    message.content.humanTime = [ date.getHours()
    , ':'
    , ('0' + date.getMinutes()).slice(-2)
    ].join('');

    element = $(ich.message(message.content));

    $('.messages')
      .append(element)
      .scrollTo(element);
  });
});
	var spire = require('./spire.io.js');

	spire.options.key = '<your account key>';

	<script id="message" type="text/html">
	<div class="message {{ type }}" id="{{ cssID }}">
	<time datetime="{{ time }}">{{ humanTime }}</time>

	<span class="name {{#isYou}} current-user {{/isYou}}">
	{{ author }}:
	</span>

	<span class="body">{{ content }}</span>
	</div>
	</script>

	<script src="/javascripts/lib/icanhaz.js"></script>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>CHAT</title>

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

	<script src="/javascripts/application.js"></script>
	</head>

	<body>
	<!-- more here later -->
	</body>
	</html>
	<div class="overlay">
	<form action="#" method="post">
	<input type="text" name="nick" placeholder="Name" />

	<input type="submit" value="Join →">
	</form>
	</div>

	<div class="messages"></div>

	<footer>
	<form action="#" method="post">
	<input type="text" name="content" />
	</form>
	</footer>

	$('.overlay form').submit(function(event){
	event.stopPropagation();
	event.preventDefault();

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

	// 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.
	window.currentUser = nick;

	message = { channel: 'spire.io chat example'
	, content: { type: 'system'
	, body: 'joined'
	, author: nick
	}
	};

	// Send the message above, once it's sent trigger the passed in callback.
	spire.messages.publish(message, function(err, message){
	if (err) throw err; // really, you could do better

	// Hide the overlay with the initial form.
	$('.overlay').hide();

	// Focus the input in the footer for a smoother User Experience.
	$('footer form input').focus();
	});
	});

	$(document).ready(function(){
	// The rest of the javascript will go here
	});

	$('footer form').submit(function(event){
	event.stopPropagation();
	event.preventDefault();

	var form = this
	, message = { channel: 'spire.io chat example'
	, content: { author: currentUser
	, body: $(form).find('input[name="content"]').val()
	}
	};

	// No message content? don't do anything.
	if (! message.content.body) return;

	// Send the message constructed above, once the message is sent the
	// `callback` will remove the submitted text and re-focus the input
	spire.messages.publish(message, function(err, message){
	if (err) throw err;

	$(form).find('input').val('').focus();
	});
	});