diff --git a/layouts/articles.html b/layouts/articles.html
index c1c2b11..c10d381 100644
--- a/layouts/articles.html
+++ b/layouts/articles.html
@@ -14,7 +14,7 @@
         WezM.showJavascriptWidgets();
         <% if @item.identifier =~ %r{/page/$} %>
         $(window).bind('hashchange', function(e) {
-          WezM._hashChanged(e)
+          WezM.hashChanged(e)
         });
         // Since the event is only triggered when the hash changes, we need to trigger
         // the event now, to handle the hash the page may have loaded with.
diff --git a/output/js/application.js b/output/js/application.js
new file mode 100644
index 0000000..9b27cf4
--- /dev/null
+++ b/output/js/application.js
@@ -0,0 +1,98 @@
+var WezM = {
+  articles: undefined,
+  _months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+  per_page: 10,
+  showJavascriptWidgets: function() {
+    $('.pagination').show();
+    $('#search').show();
+    $('#search input').jsonSuggest(this.articles, {
+      onSelect: this._searchItemSelected,
+      width: 400
+    });
+    if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) {
+      $('#search input').css('paddingTop', 0);
+    }
+  },
+  _searchItemSelected: function() {},
+  _renderArticle: function(o) {
+    return '<li>\n\
+      <abbr class="calender date" title="' + (Mojo.escape(Mojo.normalize(o.date))) + '">\n\
+        <span class="day">' + (Mojo.escape(Mojo.normalize(o.day))) + '</span>\n\
+        <span class="month">' + (Mojo.escape(Mojo.normalize(o.month))) + '</span>\n\
+        <span class="year">' + (Mojo.escape(Mojo.normalize(o.year))) + '</span>\n\
+      </abbr>\n\
+      <p>\n\
+        <strong><a href="' + (Mojo.escape(Mojo.normalize(o.path))) + '">' + (Mojo.escape(Mojo.normalize(o.title))) + '</a></strong>\n\
+        ' + (Mojo.escape(Mojo.normalize(o.summary))) + '\n\
+      </p>\n\
+    </li>';
+  },
+  _updatePaginationControls: function(page) {
+    var older = $('.pagination .older').attr('href', '#' + (page + 1));
+    var newer = $('.pagination .newer').attr('href', '#' + (page - 1));
+
+    // Hide if out of range
+    older.css('visibility', page * this.per_page >= this.articles.length ? 'hidden' : 'visible');
+    newer.css('visibility', page <= 1 ? 'hidden' : 'visible');
+  },
+  loadArticles: function(callback) {
+    if(!this.articles) {
+      var path = 'json/articles.json';
+      if(document.location.pathname.match(/page\/$/)) {
+        path = '../json/articles.json';
+      }
+      jQuery.getJSON(path, {}, function(data) {
+        WezM.articles = data;
+        if(callback) callback();
+      });
+    }
+    else if(callback) {
+      callback();
+    }
+  },
+  hashChanged: function(e) {
+    // Get the hash (fragment) as a string, with any leading # removed. Note that
+    // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
+    var page;
+    var matches;
+    var page_fragment = e.fragment;
+    if(!page_fragment) {
+      page_fragment = $.param.fragment();
+    }
+    if(matches = page_fragment.match(/(\d+)$/)) {
+      page = new Number(matches[1]);
+    }
+    else {
+      page = 1;
+    }
+
+    var container = $('ul.articles');
+    container.empty();
+
+    // Generate the items
+    var i = (page - 1) * this.per_page;
+    for(; i < page * this.per_page && i < this.articles.length; i++) {
+      var article = this.articles[i];
+      var date = new Date(Date.parse(article.date));
+      var article_view = {
+        date: article.date,
+        day: date.getDate(),
+        month: this._months[date.getMonth()],
+        year: date.getYear() + 1900,
+        path: article.path,
+        title: article.title,
+        summary: article.summary
+      };
+      var li = this._renderArticle(article_view);
+      container.append(li);
+    }
+
+    this._updatePaginationControls(page);
+    window.document.title = "All Articles - Page " + page; // TODO: Make this title better
+    // Scroll to top of page
+    if(window.scrollTo) {
+      window.scrollTo(0,0);
+    }
+  }
+}
+