Toys section and a character counter for Krista.

_includes/head.html

@@ -7,3 +7,5 @@
 <link href="http://feeds2.feedburner.com/jbarnette"
   rel="alternate" title="John Barnette"
   type="application/atom+xml" />
+
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

_includes/presence.html

@@ -1,5 +1,6 @@
 <ul class="presence">
   <li class="about"><a href="/about.html">about</a></li>
+  <li class="toys"><a href="/toys/index.html">toys</a></li>
   <li class="email"><a href="mailto:jbarnette@gmail.com">email</a></li>
   <li><a href="http://twitter.com/jbarnette">twitter</a></li>
   <li><a href="http://github.com/jbarnette">github</a></li>

about.markdown

@@ -5,7 +5,7 @@ title: About
 
 <style>
 li.about { display:none; }
-li.email { border-left: 0; }
+li.toys { border-left: 0; }
 </style>
 
 ## About Me

toys/characters.markdown

@@ -0,0 +1,31 @@
+---
+layout: post
+title: Character Counter
+---
+
+<div style="text-align:center">
+  <textarea id="text" rows="10" cols="60">Type stuff here.</textarea>
+
+  <h2>
+    about
+    <span id="words">0</span> words,
+    <span id="chars">0</span> characters.
+  </h2>
+</div>
+
+<script type="text/javascript">
+  function updateCounts() {
+    var text = $("#text")
+    var chars = $("#chars")
+    var words = $("#words")
+
+    words.html(text.val().split(/\s+/).length)
+    chars.html(text.val().length)
+  }
+
+  $(document).ready(function() {
+    $("#text").keyup(updateCounts)
+    updateCounts()
+    $("#text").focus().select()
+  })
+</script>

toys/index.markdown

@@ -0,0 +1,12 @@
+---
+layout: default
+title: Toys
+---
+
+<style>
+li.toys { display:none; }
+</style>
+
+## Toys
+
+* [Character Counter](/toys/characters.html)