Refactor frontend

* restructured JavaScript using backbone.js * replaced highlight.js with CodeMirror for its editor * added CodeMirror Solarized (dark) theme based on Ethan Schoonover's solarized.vim * changed `POST /document` to accept real JSON * cleaned up template and stylesheet
2012-03-19 18:18:45 -04:00
10 changed files with 426 additions and 681 deletions
--- a/lib/document_handler.js
+++ b/lib/document_handler.js
@ -55,7 +55,7 @@ DocumentHandler.prototype.handlePost = function(request, response) {
    if (!buffer) {
      response.writeHead(200, { 'content-type': 'application/json' });
    }
-    buffer += data.toString();
+    buffer += JSON.parse(data.toString()).data;
    if (_this.maxLength && buffer.length > _this.maxLength) {
      cancelled = true;
      winston.warn('document >maxLength', { maxLength: _this.maxLength });
--- a/static/application.css
+++ b/static/application.css
@ -1,168 +1,201 @@
+html, body, div, pre, textarea, header, h1, a, nav, ul, li {
+  margin: 0;
+  padding: 0;
+}
+
 body {
-	background: #002B36;
-	padding: 20px 50px;
-	margin: 0px;
+  font: 13px monospace;
 }

-/* textarea */
-
-textarea {
-	background: transparent;
-	border: 0px;
-	color: #fff;
-	padding: 0px;
-	width: 100%;
-	height: 100%;
-	font-family: monospace;
-	outline: none;
-	resize: none;
-	font-size: 13px;
+header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1000;
 }

-/* the line numbers */
-
-#linenos {
-  color: #7d7d7d;
-	z-index: -1000;
-	position: absolute;
-	top: 20px;
-	left: 0px;
-	width: 30px; /* 30 to get 20 away from box */
-	font-size: 13px;
-	font-family: monospace;
-	text-align: right;
+header h1 {
+  background: #00222b;
+  padding: 5px 22px;
 }

-/* code box when locked */
-
-#box {
-	padding: 0px;
-	margin: 0px;
-	width: 100%;
-	border: 0px;
-	outline: none;
-	font-size: 13px;
+header h1 a {
+  background: transparent url('logo.png') no-repeat top center;
+  display: block;
+  overflow: hidden;
+  text-indent: -9999px;
+  width: 126px;
+  height: 42px;
 }

-#box code {
-	padding: 0px;
-	background: transparent !important; /* don't hide hastebox */
+header h1 a:hover {
+  background-position: bottom center;
 }

-/* key */
-
-#key {
-	position: fixed;
-	top: 0px;
-	right: 0px;
-	z-index: +1000; /* watch out */
+header ul {
+  background: #08323c;
+  font-size: 0;
+  list-style: none;
+  /*overflow: hidden;*/
+  text-align: center;
 }

-#box1 {
-	padding: 5px;
-	text-align: center;
-	background: #00222b;
+header ul li {
+  display: inline-block;
+  position: relative;
 }

-#box2 {
-	background: #08323c;
-	font-size: 0px;
-	padding: 0px 5px;
+header ul li .pointer {
+  background: transparent url('hover-dropdown-tip.png') no-repeat;
+  display: inline-block;
+  text-align: center;
+  width: 10px;
+  height: 5px;
 }

-#box1 a.logo, #box1 a.logo:visited {
-	display: inline-block;
-	background: url(logo.png);
-	width: 126px;
-	height: 42px;
+header ul li a {
+  background: transparent url('function-icons.png');
+  display: block;
+  overflow: hidden;
+  text-indent: -9999px;
+  width: 32px;
+  height: 37px;
 }

-#box1 a.logo:hover {
-	background-position: 0 bottom;
+header ul li a.disabled {
+  cursor: default;
 }

-#box2 .function {
-	background: url(function-icons.png);
-	width: 32px;
-	height: 37px;
-	display: inline-block;
-	position: relative;
+header li a.save { background-position: -5px center; }
+header li a.save:hover { background-position: -5px bottom; }
+header li a.save.disabled { background-position: -5px top; }
+
+header li a.new { background-position: -42px center; }
+header li a.new:hover { background-position: -42px bottom; }
+header li a.new.disabled { background-position: -42px top; }
+
+header li a.edit { background-position: -79px center; }
+header li a.edit:hover { background-position: -79px bottom; }
+header li a.edit.disabled { background-position: -79px top; }
+
+header li a.raw { background-position: -116px center; }
+header li a.raw:hover { background-position: -116px bottom; }
+header li a.raw.disabled { background-position: -116px top; }
+
+header li a.twitter { background-position: -153px center; }
+header li a.twitter:hover { background-position: -153px bottom; }
+header li a.twitter.disabled { background-position: -153px top; }
+
+#editor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }

-#box2 .link embed {
-	vertical-align: bottom; /* fix for zeroClipboard style */
+.CodeMirror {
+  line-height: 1em;
+  height: 100%;
 }

-#box2 .function.enabled:hover {
-	cursor: hand;
-	cursor: pointer;
+.CodeMirror-scroll {
+  height: 100%;
+  overflow: auto;
+  position: relative;
 }

-#pointer {
-	display: block;
-	height: 5px;
-	width: 10px;
-	background: url(hover-dropdown-tip.png);
-	bottom: 0px;
-	position: absolute;
-	margin: auto;
-	left: 0px;
-	right: 0px;
+.CodeMirror-gutter {
+  height: 100%;
+  min-width: 2em;
+  position: absolute;
+  top: 0;
+  left: 0;
 }

-#box3, #messages li {
-	background: #173e48;
-	font-family: Helvetica, sans-serif;
-	font-size: 12px;
-	line-height: 14px;
-	padding: 10px 15px;
+.CodeMirror-gutter-text {
+  text-align: right;
+  padding: 0.4em 0.2em 0.4em 0.4em;
+  white-space: pre;
 }

-#box3 .label, #messages li {
-	color: #fff;
-	font-weight: bold;
+.CodeMirror-lines {
+  padding: 0.4em;
 }

-#box3 .shortcut {
-	color: #c4dce3;
-	font-weight: normal;
+.CodeMirror textarea {
+  outline: 0;
 }

-#box2 .function.save { background-position: -5px top; }
-#box2 .function.enabled.save { background-position: -5px center; }
-#box2 .function.enabled.save:hover { background-position: -5px bottom; }
-
-#box2 .function.new { background-position: -42px top; }
-#box2 .function.enabled.new { background-position: -42px center; }
-#box2 .function.enabled.new:hover { background-position: -42px bottom; }
-
-#box2 .function.duplicate { background-position: -79px top; }
-#box2 .function.enabled.duplicate { background-position: -79px center; }
-#box2 .function.enabled.duplicate:hover { background-position: -79px bottom; }
-
-#box2 .function.raw { background-position: -116px top; }
-#box2 .function.enabled.raw { background-position: -116px center; }
-#box2 .function.enabled.raw:hover { background-position: -116px bottom; }
-
-#box2 .function.twitter { background-position: -153px top; }
-#box2 .function.enabled.twitter { background-position: -153px center; }
-#box2 .function.enabled.twitter:hover { background-position: -153px bottom; }
-
-#messages {
-	position:fixed;
-	top:0px;
-	right:138px;
-	margin:0;
-	padding:0;
-	width:400px;
+.CodeMirror pre.CodeMirror-cursor {
+  position: absolute;
+  visibility: hidden;
+  z-index: 10;
 }

-#messages li {
-	background:rgba(23,62,72,0.8);
-	margin:0 auto;
-	list-style:none;
+.CodeMirror-focused pre.CodeMirror-cursor {
+  visibility: visible;
 }

-#messages li.error {
-	background:rgba(102,8,0,0.8);
+span.cm-header, span.cm-strong {
+  font-weight: bold;
 }
+
+span.cm-em {
+  font-style: italic;
+}
+
+span.cm-emstrong {
+  font-style: italic; font-weight: bold;
+}
+
+span.cm-link {
+  text-decoration: underline;
+}
+
+/* Solarized (dark) theme */
+
+.cm-s-solarized-dark {
+  background: #002b36;
+  color: #839496;
+}
+
+.cm-s-solarized-dark div.CodeMirror-selected {
+  background: #586e75;
+}
+
+.cm-s-solarized-dark .CodeMirror-gutter {
+  background: #073642;
+}
+
+.cm-s-solarized-dark .CodeMirror-gutter-text {
+  color: #586e75;
+}
+
+.cm-s-solarized-dark .CodeMirror-cursor {
+  border-left: 1px solid #839496;
+}
+
+.cm-s-solarized-dark span.cm-keyword    { color: #268bd2; }
+.cm-s-solarized-dark span.cm-atom       { color: #b58900; }
+.cm-s-solarized-dark span.cm-number     { color: #2aa198; }
+.cm-s-solarized-dark span.cm-def        { color: #839496; }
+.cm-s-solarized-dark span.cm-variable   { color: #839496; }
+.cm-s-solarized-dark span.cm-variable-2 { color: #b58900; }
+.cm-s-solarized-dark span.cm-variable-3 { color: #268bd2; }
+.cm-s-solarized-dark span.cm-property   { color: #859900; }
+.cm-s-solarized-dark span.cm-operator   { color: #2aa198; }
+.cm-s-solarized-dark span.cm-comment    { color: #586e75; }
+.cm-s-solarized-dark span.cm-string     { color: #2aa198; }
+.cm-s-solarized-dark span.cm-string-2   { color: #2aa198; }
+.cm-s-solarized-dark span.cm-meta       { color: #586e75; }
+.cm-s-solarized-dark span.cm-error      { color: #dc322f; }
+.cm-s-solarized-dark span.cm-qualifier  { color: #268bd2; }
+.cm-s-solarized-dark span.cm-builtin    { color: #b58900; }
+.cm-s-solarized-dark span.cm-bracket    { color: #dc322f; }
+.cm-s-solarized-dark span.cm-tag        { color: #268bd2; }
+.cm-s-solarized-dark span.cm-attribute  { color: #839496; }
+.cm-s-solarized-dark span.cm-header     { color: #cb4b16; }
+.cm-s-solarized-dark span.cm-quote      { color: #586e75; }
+.cm-s-solarized-dark span.cm-hr         { color: #cb4b16; }
+.cm-s-solarized-dark span.cm-link       { color: #6c71c4; }
--- a/static/application.js
+++ b/static/application.js
@ -1,396 +1,171 @@
-///// represents a single document
+window.Haste = {
+  Models: {},
+  Views: {},
+  Routers: {},

-var haste_document = function() {
-  this.locked = false;
-};
+  extensionMap: {
+    clj: 'clojure', coffee: 'coffeescript', css: 'css', diff: 'diff', go: 'go',
+    hs: 'haskell', html: 'htmlmixed', js: 'javascript', lua: 'lua',
+    md: 'markdown', markdown: 'markdown', sql: 'mysql', pl: 'perl', php: 'php',
+    py: 'python', r: 'r', rb: 'ruby', scm: 'scheme', xml: 'xml', yml: 'yaml'
+  },

-// Escapes HTML tag characters
-haste_document.prototype.htmlEscape = function(s) {
-  return s
-    .replace(/&/g, '&amp;')
-    .replace(/>/g, '&gt;')
-    .replace(/</g, '&lt;')
-    .replace(/"/g, '&quot;');
-};
-
-// Get this document from the server and lock it here
-haste_document.prototype.load = function(key, callback, lang) {
-  var _this = this;
-  $.ajax('/documents/' + key, {
-    type: 'get',
-    dataType: 'json',
-    success: function(res) {
-      _this.locked = true;
-      _this.key = key;
-      _this.data = res.data;
-      try {
-        var high;
-        if (lang === 'txt') {
-          high = { value: _this.htmlEscape(res.data) };
-        }
-        else if (lang) {
-          high = hljs.highlight(lang, res.data);
-        }
-        else {
-          high = hljs.highlightAuto(res.data);
-        }
-      } catch(err) {
-        // failed highlight, fall back on auto
-        high = hljs.highlightAuto(res.data);
-      }
-      callback({
-        value: high.value,
-        key: key,
-        language: high.language || lang,
-        lineCount: res.data.split("\n").length
-      });
-    },
-    error: function(err) {
-      callback(false);
-    }
-  });
-};
-
-// Save this document to the server and lock it here
-haste_document.prototype.save = function(data, callback) {
-  if (this.locked) {
-    return false;
-  }
-  this.data = data;
-  var _this = this;
-  $.ajax('/documents', {
-    type: 'post',
-    data: data,
-    dataType: 'json',
-    contentType: 'application/json; charset=utf-8',
-    success: function(res) {
-      _this.locked = true;
-      _this.key = res.key;
-      var high = hljs.highlightAuto(data);
-      callback(null, {
-        value: high.value,
-        key: res.key,
-        language: high.language,
-        lineCount: data.split("\n").length
-      });
-    },
-    error: function(res) {
-      try {
-        callback($.parseJSON(res.responseText));
-      }
-      catch (e) {
-        callback({message: 'Something went wrong!'});
-      }
-    }
-  });
-};
-
-///// represents the paste application
-
-var haste = function(appName, options) {
-  this.appName = appName;
-  this.$textarea = $('textarea');
-  this.$box = $('#box');
-  this.$code = $('#box code');
-  this.$linenos = $('#linenos');
-  this.options = options;
-  this.configureShortcuts();
-  this.configureButtons();
-  // If twitter is disabled, hide the button
-  if (!options.twitter) {
-    $('#box2 .twitter').hide();
+  init: function() {
+    new Haste.Routers.Document();
+    Backbone.history.start({ pushState: true });
  }
 };

-// Set the page title - include the appName
-haste.prototype.setTitle = function(ext) {
-  var title = ext ? this.appName + ' - ' + ext : this.appName;
-  document.title = title;
-};
-
-// Show a message box
-haste.prototype.showMessage = function(msg, cls) {
-  var msgBox = $('<li class="'+(cls || 'info')+'">'+msg+'</li>');
-  $('#messages').prepend(msgBox);
-  setTimeout(function() {
-    msgBox.slideUp('fast', function() { $(this).remove(); });
-  }, 3000);
-};
-
-// Show the light key
-haste.prototype.lightKey = function() {
-  this.configureKey(['new', 'save']);
-};
-
-// Show the full key
-haste.prototype.fullKey = function() {
-  this.configureKey(['new', 'duplicate', 'twitter', 'raw']);
-};
-
-// Set the key up for certain things to be enabled
-haste.prototype.configureKey = function(enable) {
-  var $this, i = 0;
-  $('#box2 .function').each(function() {
-    $this = $(this);
-    for (i = 0; i < enable.length; i++) {
-      if ($this.hasClass(enable[i])) {
-        $this.addClass('enabled');
-        return true;
-      }
-    }
-    $this.removeClass('enabled');
-  });
-};
-
-// Remove the current document (if there is one)
-// and set up for a new one
-haste.prototype.newDocument = function(hideHistory) {
-  this.$box.hide();
-  this.doc = new haste_document();
-  if (!hideHistory) {
-    window.history.pushState(null, this.appName, '/');
-  }
-  this.setTitle();
-  this.lightKey();
-  this.$textarea.val('').show('fast', function() {
-    this.focus();
-  });
-  this.removeLineNumbers();
-};
-
-// Map of common extensions
-// Note: this list does not need to include anything that IS its extension,
-// due to the behavior of lookupTypeByExtension and lookupExtensionByType
-// Note: optimized for lookupTypeByExtension
-haste.extensionMap = {
-  rb: 'ruby', py: 'python', pl: 'perl', php: 'php', scala: 'scala', go: 'go',
-  xml: 'xml', html: 'xml', htm: 'xml', css: 'css', js: 'javascript', vbs: 'vbscript',
-  lua: 'lua', pas: 'delphi', java: 'java', cpp: 'cpp', cc: 'cpp', m: 'objectivec',
-  vala: 'vala', cs: 'cs', sql: 'sql', sm: 'smalltalk', lisp: 'lisp', ini: 'ini',
-  diff: 'diff', bash: 'bash', sh: 'bash', tex: 'tex', erl: 'erlang', hs: 'haskell',
-  md: 'markdown', txt: '', coffee: 'coffee'
-};
-
-// Look up the extension preferred for a type
-// If not found, return the type itself - which we'll place as the extension
-haste.prototype.lookupExtensionByType = function(type) {
-  for (var key in haste.extensionMap) {
-    if (haste.extensionMap[key] === type) return key;
-  }
-  return type;
-};
-
-// Look up the type for a given extension
-// If not found, return the extension - which we'll attempt to use as the type
-haste.prototype.lookupTypeByExtension = function(ext) {
-  return haste.extensionMap[ext] || ext;
-};
-
-// Add line numbers to the document
-// For the specified number of lines
-haste.prototype.addLineNumbers = function(lineCount) {
-  var h = '';
-  for (var i = 0; i < lineCount; i++) {
-    h += (i + 1).toString() + '<br/>';
-  }
-  $('#linenos').html(h);
-};
-
-// Remove the line numbers
-haste.prototype.removeLineNumbers = function() {
-  $('#linenos').html('&gt;');
-};
-
-// Load a document and show it
-haste.prototype.loadDocument = function(key) {
-  // Split the key up
-  var parts = key.split('.', 2);
-  // Ask for what we want
-  var _this = this;
-  _this.doc = new haste_document();
-  _this.doc.load(parts[0], function(ret) {
-    if (ret) {
-      _this.$code.html(ret.value);
-      _this.setTitle(ret.key);
-      _this.fullKey();
-      _this.$textarea.val('').hide();
-      _this.$box.show().focus();
-      _this.addLineNumbers(ret.lineCount);
-    }
-    else {
-      _this.newDocument();
-    }
-  }, this.lookupTypeByExtension(parts[1]));
-};
-
-// Duplicate the current document - only if locked
-haste.prototype.duplicateDocument = function() {
-  if (this.doc.locked) {
-    var currentData = this.doc.data;
-    this.newDocument();
-    this.$textarea.val(currentData);
-  }
-};
-
-// Lock the current document
-haste.prototype.lockDocument = function() {
-  var _this = this;
-  this.doc.save(this.$textarea.val(), function(err, ret) {
-    if (err) {
-      _this.showMessage(err.message, 'error');
-    }
-    else if (ret) {
-      _this.$code.html(ret.value);
-      _this.setTitle(ret.key);
-      var file = '/' + ret.key;
-      if (ret.language) {
-        file += '.' + _this.lookupExtensionByType(ret.language);
-      }
-      window.history.pushState(null, _this.appName + '-' + ret.key, file);
-      _this.fullKey();
-      _this.$textarea.val('').hide();
-      _this.$box.show().focus();
-      _this.addLineNumbers(ret.lineCount);
-    }
-  });
-};
-
-haste.prototype.configureButtons = function() {
-  var _this = this;
-  this.buttons = [
-    {
-      $where: $('#box2 .save'),
-      label: 'Save',
-      shortcutDescription: 'control + s',
-      shortcut: function(evt) {
-        return evt.ctrlKey && (evt.keyCode === 83);
-      },
-      action: function() {
-        if (_this.$textarea.val().replace(/^\s+|\s+$/g, '') !== '') {
-          _this.lockDocument();
-        }
-      }
-    },
-    {
-      $where: $('#box2 .new'),
-      label: 'New',
-      shortcut: function(evt) {
-        return evt.ctrlKey && evt.keyCode === 78  
-      },
-      shortcutDescription: 'control + n',
-      action: function() {
-        _this.newDocument(!_this.doc.key);
-      }
-    },
-    {
-      $where: $('#box2 .duplicate'),
-      label: 'Duplicate & Edit',
-      shortcut: function(evt) {
-        return _this.doc.locked && evt.ctrlKey && evt.keyCode === 68;
-      },
-      shortcutDescription: 'control + d',
-      action: function() {
-        _this.duplicateDocument();
-      }
-    },
-    {
-      $where: $('#box2 .raw'),
-      label: 'Just Text',
-      shortcut: function(evt) {
-        return evt.ctrlKey && evt.shiftKey && evt.keyCode === 82;
-      },
-      shortcutDescription: 'control + shift + r',
-      action: function() {
-        window.location.href = '/raw/' + _this.doc.key;
-      }
-    },
-    {
-      $where: $('#box2 .twitter'),
-      label: 'Twitter',
-      shortcut: function(evt) {
-        return _this.options.twitter && _this.doc.locked && evt.ctrlKey && evt.keyCode == 84;
-      },
-      shortcutDescription: 'control + t',
-      action: function() {
-        window.open('https://twitter.com/share?url=' + encodeURI(window.location.href));
-      }
-    }
-  ];
-  for (var i = 0; i < this.buttons.length; i++) {
-    this.configureButton(this.buttons[i]);
-  }
-};
-
-haste.prototype.configureButton = function(options) {
-  // Handle the click action
-  options.$where.click(function(evt) {
-    evt.preventDefault();
-    if (!options.clickDisabled && $(this).hasClass('enabled')) {
-      options.action();
-    }
-  });
-  // Show the label
-  options.$where.mouseenter(function(evt) {
-    $('#box3 .label').text(options.label);
-    $('#box3 .shortcut').text(options.shortcutDescription || '');
-    $('#box3').show();
-    $(this).append($('#pointer').remove().show());
-  });
-  // Hide the label
-  options.$where.mouseleave(function(evt) {
-    $('#box3').hide();
-    $('#pointer').hide();
-  });
-};
-
-// Configure keyboard shortcuts for the textarea
-haste.prototype.configureShortcuts = function() {
-  var _this = this;
-  $(document.body).keydown(function(evt) {
-    var button;
-    for (var i = 0 ; i < _this.buttons.length; i++) {
-      button = _this.buttons[i];
-      if (button.shortcut && button.shortcut(evt)) {
-        evt.preventDefault();
-        button.action();
-        return;
-      }
-    }
-  });
-};
-
-///// Tab behavior in the textarea - 2 spaces per tab
-$(function() {
-
-  $('textarea').keydown(function(evt) {
-    if (evt.keyCode === 9) {
-      evt.preventDefault();
-      var myValue = '  ';
-      // http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery
-      // For browsers like Internet Explorer
-      if (document.selection) {
-        this.focus();
-        sel = document.selection.createRange();
-        sel.text = myValue;
-        this.focus();
-      }
-      // Mozilla and Webkit
-      else if (this.selectionStart || this.selectionStart == '0') {
-        var startPos = this.selectionStart;
-        var endPos = this.selectionEnd;
-        var scrollTop = this.scrollTop;
-        this.value = this.value.substring(0, startPos) + myValue +
-          this.value.substring(endPos,this.value.length);
-        this.focus();
-        this.selectionStart = startPos + myValue.length;
-        this.selectionEnd = startPos + myValue.length;
-        this.scrollTop = scrollTop;
-      }
-      else {
-        this.value += myValue;
-        this.focus();
-      }
-    }
-  });
-
+Haste.Models.Document = Backbone.Model.extend({
+  idAttribute: 'key',
+  urlRoot: '/documents'
+});
+
+Haste.Routers.Document = Backbone.Router.extend({
+  routes: {
+    ':id.:extension': 'show',
+    ':id': 'show',
+    '': 'new'
+  },
+
+  initialize: function() {
+    this.editor = new Haste.Views.EditorView();
+  },
+
+  show: function(id, extension) {
+    this.editor.load(id, extension);
+  },
+
+  new: function() {
+    this.editor.new();
+  }
+});
+
+Haste.Views.ActionsView = Backbone.View.extend({
+  el: 'header',
+
+  events: {
+    'click .new': 'new',
+    'click .save': 'save',
+    'click .edit': 'edit',
+    'click .raw': 'raw',
+    'click .twitter': 'raw'
+  },
+
+  initialize: function() {
+    this.parent = this.options.parent;
+  },
+
+  toggleActions: function() {
+    var klass = 'disabled';
+
+    if (this.parent.model.isNew()) {
+      $('.save', this.el).removeClass(klass);
+      $('.edit, .raw, .twitter', this.el).addClass(klass);
+    } else {
+      $('.save', this.el).addClass(klass);
+      $('.edit, .raw, .twitter', this.el).removeClass(klass);
+    }
+
+    this.setLink('.raw', 'raw/' + this.parent.model.id);
+    this.setLink('.twitter', 'https://twitter.com/share?url=' + encodeURI(window.location.href));
+  },
+
+  setLink: function(el, href) {
+    if (this.parent.model.isNew()) {
+      href = '#';
+    }
+
+    $(el, this.el).attr('href', href);
+  },
+
+  new: function(event) {
+    event.preventDefault();
+    this.parent.new();
+    Backbone.history.navigate('');
+  },
+
+  save: function(event) {
+    event.preventDefault();
+
+    if (!this.parent.model.isNew()) { return; }
+
+    this.parent.save();
+  },
+
+  edit: function(event) {
+    event.preventDefault();
+
+    if (this.parent.model.isNew()) { return; }
+
+    this.parent.model.set('key', null);
+    Backbone.history.navigate('/');
+  },
+
+  raw: function(event) {
+    if (this.model.isNew()) {
+      event.preventDefault();
+    }
+  },
+});
+
+Haste.Views.EditorView = Backbone.View.extend({
+  el: 'textarea',
+
+  initialize: function() {
+    this.codeMirror = CodeMirror.fromTextArea(this.el, {
+      mode: 'null',
+      lineNumbers: true,
+      theme: 'solarized-dark'
+    });
+
+    this.actionsView = new Haste.Views.ActionsView({ parent: this });
+  },
+
+  render: function() {
+    this.codeMirror.setOption('mode', this.model.get('mode') || 'null');
+    this.codeMirror.setValue(this.model.get('data') || '');
+
+    return this;
+  },
+
+  new: function() {
+    this.model = new Haste.Models.Document();
+
+    this.model.on('change', this.render, this);
+    this.model.on('change', this.toggleLock, this);
+    this.model.on('change', this.actionsView.toggleActions, this.actionsView);
+
+    this.model.trigger('change');
+  },
+
+  load: function(key, extension) {
+    this.new();
+
+    var mode = Haste.extensionMap[extension];
+    this.model.set({ key: key, mode: mode }, { silent: true });
+
+    this.model.fetch();
+  },
+
+  save: function() {
+    var data = this.codeMirror.getValue();
+
+    if (!data) { return; }
+
+    this.model.save('data', data, {
+      success: function(model, response) {
+        Backbone.history.navigate(model.id);
+      }
+    });
+  },
+
+  toggleLock: function() {
+    this.codeMirror.setOption('readOnly', !this.model.isNew());
+    this.actionsView.toggleActions();
+  }
+});
+
+$(function() {
+  Haste.init();
 });
--- a/static/application.min.js
+++ b/static/application.min.js
--- a/static/backbone.min.js
+++ b/static/backbone.min.js
@ -0,0 +1,37 @@
+// Backbone.js 0.9.1
+
+// (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc.
+// Backbone may be freely distributed under the MIT license.
+// For all details and documentation:
+// http://backbonejs.org
+(function(){var i=this,r=i.Backbone,s=Array.prototype.slice,t=Array.prototype.splice,g;g="undefined"!==typeof exports?exports:i.Backbone={};g.VERSION="0.9.1";var f=i._;!f&&"undefined"!==typeof require&&(f=require("underscore"));var h=i.jQuery||i.Zepto||i.ender;g.setDomLibrary=function(a){h=a};g.noConflict=function(){i.Backbone=r;return this};g.emulateHTTP=!1;g.emulateJSON=!1;g.Events={on:function(a,b,c){for(var d,a=a.split(/\s+/),e=this._callbacks||(this._callbacks={});d=a.shift();){d=e[d]||(e[d]=
+{});var f=d.tail||(d.tail=d.next={});f.callback=b;f.context=c;d.tail=f.next={}}return this},off:function(a,b,c){var d,e,f;if(a){if(e=this._callbacks)for(a=a.split(/\s+/);d=a.shift();)if(f=e[d],delete e[d],b&&f)for(;(f=f.next)&&f.next;)if(!(f.callback===b&&(!c||f.context===c)))this.on(d,f.callback,f.context)}else delete this._callbacks;return this},trigger:function(a){var b,c,d,e;if(!(d=this._callbacks))return this;e=d.all;for((a=a.split(/\s+/)).push(null);b=a.shift();)e&&a.push({next:e.next,tail:e.tail,
+event:b}),(c=d[b])&&a.push({next:c.next,tail:c.tail});for(e=s.call(arguments,1);c=a.pop();){b=c.tail;for(d=c.event?[c.event].concat(e):e;(c=c.next)!==b;)c.callback.apply(c.context||this,d)}return this}};g.Events.bind=g.Events.on;g.Events.unbind=g.Events.off;g.Model=function(a,b){var c;a||(a={});b&&b.parse&&(a=this.parse(a));if(c=j(this,"defaults"))a=f.extend({},c,a);b&&b.collection&&(this.collection=b.collection);this.attributes={};this._escapedAttributes={};this.cid=f.uniqueId("c");if(!this.set(a,
+{silent:!0}))throw Error("Can't create an invalid model");delete this._changed;this._previousAttributes=f.clone(this.attributes);this.initialize.apply(this,arguments)};f.extend(g.Model.prototype,g.Events,{idAttribute:"id",initialize:function(){},toJSON:function(){return f.clone(this.attributes)},get:function(a){return this.attributes[a]},escape:function(a){var b;if(b=this._escapedAttributes[a])return b;b=this.attributes[a];return this._escapedAttributes[a]=f.escape(null==b?"":""+b)},has:function(a){return null!=
+this.attributes[a]},set:function(a,b,c){var d,e;f.isObject(a)||null==a?(d=a,c=b):(d={},d[a]=b);c||(c={});if(!d)return this;d instanceof g.Model&&(d=d.attributes);if(c.unset)for(e in d)d[e]=void 0;if(!this._validate(d,c))return!1;this.idAttribute in d&&(this.id=d[this.idAttribute]);var b=this.attributes,k=this._escapedAttributes,n=this._previousAttributes||{},h=this._setting;this._changed||(this._changed={});this._setting=!0;for(e in d)if(a=d[e],f.isEqual(b[e],a)||delete k[e],c.unset?delete b[e]:b[e]=
+a,this._changing&&!f.isEqual(this._changed[e],a)&&(this.trigger("change:"+e,this,a,c),this._moreChanges=!0),delete this._changed[e],!f.isEqual(n[e],a)||f.has(b,e)!=f.has(n,e))this._changed[e]=a;h||(!c.silent&&this.hasChanged()&&this.change(c),this._setting=!1);return this},unset:function(a,b){(b||(b={})).unset=!0;return this.set(a,null,b)},clear:function(a){(a||(a={})).unset=!0;return this.set(f.clone(this.attributes),a)},fetch:function(a){var a=a?f.clone(a):{},b=this,c=a.success;a.success=function(d,
+e,f){if(!b.set(b.parse(d,f),a))return!1;c&&c(b,d)};a.error=g.wrapError(a.error,b,a);return(this.sync||g.sync).call(this,"read",this,a)},save:function(a,b,c){var d,e;f.isObject(a)||null==a?(d=a,c=b):(d={},d[a]=b);c=c?f.clone(c):{};c.wait&&(e=f.clone(this.attributes));a=f.extend({},c,{silent:!0});if(d&&!this.set(d,c.wait?a:c))return!1;var k=this,h=c.success;c.success=function(a,b,e){b=k.parse(a,e);c.wait&&(b=f.extend(d||{},b));if(!k.set(b,c))return!1;h?h(k,a):k.trigger("sync",k,a,c)};c.error=g.wrapError(c.error,
+k,c);b=this.isNew()?"create":"update";b=(this.sync||g.sync).call(this,b,this,c);c.wait&&this.set(e,a);return b},destroy:function(a){var a=a?f.clone(a):{},b=this,c=a.success,d=function(){b.trigger("destroy",b,b.collection,a)};if(this.isNew())return d();a.success=function(e){a.wait&&d();c?c(b,e):b.trigger("sync",b,e,a)};a.error=g.wrapError(a.error,b,a);var e=(this.sync||g.sync).call(this,"delete",this,a);a.wait||d();return e},url:function(){var a=j(this.collection,"url")||j(this,"urlRoot")||o();return this.isNew()?
+a:a+("/"==a.charAt(a.length-1)?"":"/")+encodeURIComponent(this.id)},parse:function(a){return a},clone:function(){return new this.constructor(this.attributes)},isNew:function(){return null==this.id},change:function(a){if(this._changing||!this.hasChanged())return this;this._moreChanges=this._changing=!0;for(var b in this._changed)this.trigger("change:"+b,this,this._changed[b],a);for(;this._moreChanges;)this._moreChanges=!1,this.trigger("change",this,a);this._previousAttributes=f.clone(this.attributes);
+delete this._changed;this._changing=!1;return this},hasChanged:function(a){return!arguments.length?!f.isEmpty(this._changed):this._changed&&f.has(this._changed,a)},changedAttributes:function(a){if(!a)return this.hasChanged()?f.clone(this._changed):!1;var b,c=!1,d=this._previousAttributes,e;for(e in a)if(!f.isEqual(d[e],b=a[e]))(c||(c={}))[e]=b;return c},previous:function(a){return!arguments.length||!this._previousAttributes?null:this._previousAttributes[a]},previousAttributes:function(){return f.clone(this._previousAttributes)},
+isValid:function(){return!this.validate(this.attributes)},_validate:function(a,b){if(b.silent||!this.validate)return!0;var a=f.extend({},this.attributes,a),c=this.validate(a,b);if(!c)return!0;b&&b.error?b.error(this,c,b):this.trigger("error",this,c,b);return!1}});g.Collection=function(a,b){b||(b={});b.comparator&&(this.comparator=b.comparator);this._reset();this.initialize.apply(this,arguments);a&&this.reset(a,{silent:!0,parse:b.parse})};f.extend(g.Collection.prototype,g.Events,{model:g.Model,initialize:function(){},
+toJSON:function(){return this.map(function(a){return a.toJSON()})},add:function(a,b){var c,d,e,g,h,i={},j={};b||(b={});a=f.isArray(a)?a.slice():[a];for(c=0,d=a.length;c<d;c++){if(!(e=a[c]=this._prepareModel(a[c],b)))throw Error("Can't add an invalid model to a collection");if(i[g=e.cid]||this._byCid[g]||null!=(h=e.id)&&(j[h]||this._byId[h]))throw Error("Can't add the same model to a collection twice");i[g]=j[h]=e}for(c=0;c<d;c++)(e=a[c]).on("all",this._onModelEvent,this),this._byCid[e.cid]=e,null!=
+e.id&&(this._byId[e.id]=e);this.length+=d;t.apply(this.models,[null!=b.at?b.at:this.models.length,0].concat(a));this.comparator&&this.sort({silent:!0});if(b.silent)return this;for(c=0,d=this.models.length;c<d;c++)if(i[(e=this.models[c]).cid])b.index=c,e.trigger("add",e,this,b);return this},remove:function(a,b){var c,d,e,g;b||(b={});a=f.isArray(a)?a.slice():[a];for(c=0,d=a.length;c<d;c++)if(g=this.getByCid(a[c])||this.get(a[c]))delete this._byId[g.id],delete this._byCid[g.cid],e=this.indexOf(g),this.models.splice(e,
+1),this.length--,b.silent||(b.index=e,g.trigger("remove",g,this,b)),this._removeReference(g);return this},get:function(a){return null==a?null:this._byId[null!=a.id?a.id:a]},getByCid:function(a){return a&&this._byCid[a.cid||a]},at:function(a){return this.models[a]},sort:function(a){a||(a={});if(!this.comparator)throw Error("Cannot sort a set without a comparator");var b=f.bind(this.comparator,this);1==this.comparator.length?this.models=this.sortBy(b):this.models.sort(b);a.silent||this.trigger("reset",
+this,a);return this},pluck:function(a){return f.map(this.models,function(b){return b.get(a)})},reset:function(a,b){a||(a=[]);b||(b={});for(var c=0,d=this.models.length;c<d;c++)this._removeReference(this.models[c]);this._reset();this.add(a,{silent:!0,parse:b.parse});b.silent||this.trigger("reset",this,b);return this},fetch:function(a){a=a?f.clone(a):{};void 0===a.parse&&(a.parse=!0);var b=this,c=a.success;a.success=function(d,e,f){b[a.add?"add":"reset"](b.parse(d,f),a);c&&c(b,d)};a.error=g.wrapError(a.error,
+b,a);return(this.sync||g.sync).call(this,"read",this,a)},create:function(a,b){var c=this,b=b?f.clone(b):{},a=this._prepareModel(a,b);if(!a)return!1;b.wait||c.add(a,b);var d=b.success;b.success=function(e,f){b.wait&&c.add(e,b);d?d(e,f):e.trigger("sync",a,f,b)};a.save(null,b);return a},parse:function(a){return a},chain:function(){return f(this.models).chain()},_reset:function(){this.length=0;this.models=[];this._byId={};this._byCid={}},_prepareModel:function(a,b){a instanceof g.Model?a.collection||
+(a.collection=this):(b.collection=this,a=new this.model(a,b),a._validate(a.attributes,b)||(a=!1));return a},_removeReference:function(a){this==a.collection&&delete a.collection;a.off("all",this._onModelEvent,this)},_onModelEvent:function(a,b,c,d){("add"==a||"remove"==a)&&c!=this||("destroy"==a&&this.remove(b,d),b&&a==="change:"+b.idAttribute&&(delete this._byId[b.previous(b.idAttribute)],this._byId[b.id]=b),this.trigger.apply(this,arguments))}});f.each("forEach,each,map,reduce,reduceRight,find,detect,filter,select,reject,every,all,some,any,include,contains,invoke,max,min,sortBy,sortedIndex,toArray,size,first,initial,rest,last,without,indexOf,shuffle,lastIndexOf,isEmpty,groupBy".split(","),
+function(a){g.Collection.prototype[a]=function(){return f[a].apply(f,[this.models].concat(f.toArray(arguments)))}});g.Router=function(a){a||(a={});a.routes&&(this.routes=a.routes);this._bindRoutes();this.initialize.apply(this,arguments)};var u=/:\w+/g,v=/\*\w+/g,w=/[-[\]{}()+?.,\\^$|#\s]/g;f.extend(g.Router.prototype,g.Events,{initialize:function(){},route:function(a,b,c){g.history||(g.history=new g.History);f.isRegExp(a)||(a=this._routeToRegExp(a));c||(c=this[b]);g.history.route(a,f.bind(function(d){d=
+this._extractParameters(a,d);c&&c.apply(this,d);this.trigger.apply(this,["route:"+b].concat(d));g.history.trigger("route",this,b,d)},this));return this},navigate:function(a,b){g.history.navigate(a,b)},_bindRoutes:function(){if(this.routes){var a=[],b;for(b in this.routes)a.unshift([b,this.routes[b]]);b=0;for(var c=a.length;b<c;b++)this.route(a[b][0],a[b][1],this[a[b][1]])}},_routeToRegExp:function(a){a=a.replace(w,"\\$&").replace(u,"([^/]+)").replace(v,"(.*?)");return RegExp("^"+a+"$")},_extractParameters:function(a,
+b){return a.exec(b).slice(1)}});g.History=function(){this.handlers=[];f.bindAll(this,"checkUrl")};var m=/^[#\/]/,x=/msie [\w.]+/,l=!1;f.extend(g.History.prototype,g.Events,{interval:50,getFragment:function(a,b){if(null==a)if(this._hasPushState||b){var a=window.location.pathname,c=window.location.search;c&&(a+=c)}else a=window.location.hash;a=decodeURIComponent(a);a.indexOf(this.options.root)||(a=a.substr(this.options.root.length));return a.replace(m,"")},start:function(a){if(l)throw Error("Backbone.history has already been started");
+this.options=f.extend({},{root:"/"},this.options,a);this._wantsHashChange=!1!==this.options.hashChange;this._wantsPushState=!!this.options.pushState;this._hasPushState=!(!this.options.pushState||!window.history||!window.history.pushState);var a=this.getFragment(),b=document.documentMode;if(b=x.exec(navigator.userAgent.toLowerCase())&&(!b||7>=b))this.iframe=h('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo("body")[0].contentWindow,this.navigate(a);this._hasPushState?h(window).bind("popstate",
+this.checkUrl):this._wantsHashChange&&"onhashchange"in window&&!b?h(window).bind("hashchange",this.checkUrl):this._wantsHashChange&&(this._checkUrlInterval=setInterval(this.checkUrl,this.interval));this.fragment=a;l=!0;a=window.location;b=a.pathname==this.options.root;if(this._wantsHashChange&&this._wantsPushState&&!this._hasPushState&&!b)return this.fragment=this.getFragment(null,!0),window.location.replace(this.options.root+"#"+this.fragment),!0;this._wantsPushState&&this._hasPushState&&b&&a.hash&&
+(this.fragment=a.hash.replace(m,""),window.history.replaceState({},document.title,a.protocol+"//"+a.host+this.options.root+this.fragment));if(!this.options.silent)return this.loadUrl()},stop:function(){h(window).unbind("popstate",this.checkUrl).unbind("hashchange",this.checkUrl);clearInterval(this._checkUrlInterval);l=!1},route:function(a,b){this.handlers.unshift({route:a,callback:b})},checkUrl:function(){var a=this.getFragment();a==this.fragment&&this.iframe&&(a=this.getFragment(this.iframe.location.hash));
+if(a==this.fragment||a==decodeURIComponent(this.fragment))return!1;this.iframe&&this.navigate(a);this.loadUrl()||this.loadUrl(window.location.hash)},loadUrl:function(a){var b=this.fragment=this.getFragment(a);return f.any(this.handlers,function(a){if(a.route.test(b))return a.callback(b),!0})},navigate:function(a,b){if(!l)return!1;if(!b||!0===b)b={trigger:b};var c=(a||"").replace(m,"");this.fragment==c||this.fragment==decodeURIComponent(c)||(this._hasPushState?(0!=c.indexOf(this.options.root)&&(c=
+this.options.root+c),this.fragment=c,window.history[b.replace?"replaceState":"pushState"]({},document.title,c)):this._wantsHashChange?(this.fragment=c,this._updateHash(window.location,c,b.replace),this.iframe&&c!=this.getFragment(this.iframe.location.hash)&&(b.replace||this.iframe.document.open().close(),this._updateHash(this.iframe.location,c,b.replace))):window.location.assign(this.options.root+a),b.trigger&&this.loadUrl(a))},_updateHash:function(a,b,c){c?a.replace(a.toString().replace(/(javascript:|#).*$/,
+"")+"#"+b):a.hash=b}});g.View=function(a){this.cid=f.uniqueId("view");this._configure(a||{});this._ensureElement();this.initialize.apply(this,arguments);this.delegateEvents()};var y=/^(\S+)\s*(.*)$/,p="model,collection,el,id,attributes,className,tagName".split(",");f.extend(g.View.prototype,g.Events,{tagName:"div",$:function(a){return this.$el.find(a)},initialize:function(){},render:function(){return this},remove:function(){this.$el.remove();return this},make:function(a,b,c){a=document.createElement(a);
+b&&h(a).attr(b);c&&h(a).html(c);return a},setElement:function(a,b){this.$el=h(a);this.el=this.$el[0];!1!==b&&this.delegateEvents();return this},delegateEvents:function(a){if(a||(a=j(this,"events"))){this.undelegateEvents();for(var b in a){var c=a[b];f.isFunction(c)||(c=this[a[b]]);if(!c)throw Error('Event "'+a[b]+'" does not exist');var d=b.match(y),e=d[1],d=d[2],c=f.bind(c,this),e=e+(".delegateEvents"+this.cid);""===d?this.$el.bind(e,c):this.$el.delegate(d,e,c)}}},undelegateEvents:function(){this.$el.unbind(".delegateEvents"+
+this.cid)},_configure:function(a){this.options&&(a=f.extend({},this.options,a));for(var b=0,c=p.length;b<c;b++){var d=p[b];a[d]&&(this[d]=a[d])}this.options=a},_ensureElement:function(){if(this.el)this.setElement(this.el,!1);else{var a=j(this,"attributes")||{};this.id&&(a.id=this.id);this.className&&(a["class"]=this.className);this.setElement(this.make(this.tagName,a),!1)}}});g.Model.extend=g.Collection.extend=g.Router.extend=g.View.extend=function(a,b){var c=z(this,a,b);c.extend=this.extend;return c};
+var A={create:"POST",update:"PUT","delete":"DELETE",read:"GET"};g.sync=function(a,b,c){var d=A[a],e={type:d,dataType:"json"};c.url||(e.url=j(b,"url")||o());if(!c.data&&b&&("create"==a||"update"==a))e.contentType="application/json",e.data=JSON.stringify(b.toJSON());g.emulateJSON&&(e.contentType="application/x-www-form-urlencoded",e.data=e.data?{model:e.data}:{});if(g.emulateHTTP&&("PUT"===d||"DELETE"===d))g.emulateJSON&&(e.data._method=d),e.type="POST",e.beforeSend=function(a){a.setRequestHeader("X-HTTP-Method-Override",
+d)};"GET"!==e.type&&!g.emulateJSON&&(e.processData=!1);return h.ajax(f.extend(e,c))};g.wrapError=function(a,b,c){return function(d,e){e=d===b?e:d;a?a(b,e,c):b.trigger("error",b,e,c)}};var q=function(){},z=function(a,b,c){var d;d=b&&b.hasOwnProperty("constructor")?b.constructor:function(){a.apply(this,arguments)};f.extend(d,a);q.prototype=a.prototype;d.prototype=new q;b&&f.extend(d.prototype,b);c&&f.extend(d,c);d.prototype.constructor=d;d.__super__=a.prototype;return d},j=function(a,b){return!a||!a[b]?
+null:f.isFunction(a[b])?a[b]():a[b]},o=function(){throw Error('A "url" property or function must be specified');}}).call(this);
--- a/static/codemirror.min.js
+++ b/static/codemirror.min.js
--- a/static/highlight.min.js
+++ b/static/highlight.min.js
--- a/static/index.html
+++ b/static/index.html
@ -1,68 +1,35 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />

-	<head>
+    <title>Hastebin</title>

-		<title>hastebin</title>
+    <link rel="stylesheet" href="application.css" />

-		<link rel="stylesheet" type="text/css" href="solarized_dark.css"/>
-		<link rel="stylesheet" type="text/css" href="application.css"/>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="codemirror.min.js"></script>
+    <script src="underscore.min.js"></script>
+    <script src="backbone.min.js"></script>
+    <script src="application.min.js"></script>
+  </head>
+  <body>
+    <header>
+      <h1><a href="about.md">Hastebin</a></h1>

-		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-		<script type="text/javascript" src="highlight.min.js"></script>
-		<script type="text/javascript" src="application.min.js"></script>
-
-		<meta name="robots" content="noindex,nofollow"/>
-
-		<script type="text/javascript">
-			var app = null;
-			// Handle pops
-			var handlePop = function(evt) {
-				var path = evt.target.location.pathname;
-				if (path === '/') { app.newDocument(true); }
-				else { app.loadDocument(path.substring(1, path.length)); }
-			};
-			// Set up the pop state to handle loads, skipping the first load
-			// to make chrome behave like others:
-			// http://code.google.com/p/chromium/issues/detail?id=63040
-			setTimeout(function() {
-				window.onpopstate = function(evt) {
-					try { handlePop(evt); } catch(err) { /* not loaded yet */ }
-				};
-			}, 1000);
-			// Construct app and load initial path
-			$(function() {
-				app = new haste('hastebin', { twitter: true });
-				handlePop({ target: window });
-			});
-		</script>
-
-	</head>
-
-	<body>
-		<ul id="messages"></ul>
-
-		<div id="key">
-		  <div id="pointer" style="display:none;"></div>
-			<div id="box1">
-				<a href="/about.md" class="logo"></a>
-			</div>
-			<div id="box2">
-				<div class="save function"></div>
-				<div class="new function"></div>
-				<div class="duplicate function"></div>
-				<div class="raw function"></div>
-				<div class="twitter function"></div>
-			</div>
-			<div id="box3" style="display:none;">
-				<div class="label"></div>
-				<div class="shortcut"></div>
-			</div>
-		</div>
-
-		<div id="linenos"></div>
-		<pre id="box" style="display:none;" tabindex="0"><code></code></pre>
-		<textarea spellcheck="false" style="display:none;"></textarea>
-
-	</body>
+      <nav>
+        <ul>
+          <li><a href="#" class="save">Save</a></li>
+          <li><a href="#" class="new">New</a></li>
+          <li><a href="#" class="edit">Edit</a></li>
+          <li><a href="#" class="raw">Raw</a></li>
+          <li><a href="#" class="twitter">Twitter</a></li>
+        </ul>
+      </nav>
+    </header>

+    <div id="editor">
+      <textarea></textarea>
+    </div>
+  </body>
 </html>
--- a/static/solarized_dark.css
+++ b/static/solarized_dark.css
@ -1,98 +0,0 @@
-/*
-
-Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
-
-*/
-
-pre code {
-  display: block; padding: 0.5em;
-  background: #002b36; color: #92a0a0;
-}
-
-pre .comment,
-pre .template_comment,
-pre .diff .header,
-pre .doctype,
-pre .lisp .string,
-pre .javadoc {
-  color: #586e75;
-  font-style: italic;
-}
-
-pre .keyword,
-pre .css .rule .keyword,
-pre .winutils,
-pre .javascript .title,
-pre .method,
-pre .addition,
-pre .css .tag,
-pre .lisp .title {
-  color: #859900;
-}
-
-pre .number,
-pre .command,
-pre .string,
-pre .tag .value,
-pre .phpdoc,
-pre .tex .formula,
-pre .regexp,
-pre .hexcolor {
-  color: #2aa198;
-}
-
-pre .title,
-pre .localvars,
-pre .function .title,
-pre .chunk,
-pre .decorator,
-pre .builtin,
-pre .built_in,
-pre .lisp .title,
-pre .identifier,
-pre .title .keymethods,
-pre .id,
-pre .header {
-  color: #268bd2;
-}
-
-pre .tag .title,
-pre .rules .property,
-pre .django .tag .keyword {
-  font-weight: bold;
-}
-
-pre .attribute,
-pre .variable,
-pre .instancevar,
-pre .lisp .body,
-pre .smalltalk .number,
-pre .constant,
-pre .class .title,
-pre .parent,
-pre .haskell .label {
-  color: #b58900;
-}
-
-pre .preprocessor,
-pre .pi,
-pre .shebang,
-pre .symbol,
-pre .diff .change,
-pre .special,
-pre .keymethods,
-pre .attr_selector,
-pre .important,
-pre .subst,
-pre .cdata {
-  color: #cb4b16;
-}
-
-pre .deletion {
-  color: #dc322f;
-}
-
-pre .tex .formula,
-pre .code {
-  background: #073642;
-}
--- a/static/underscore.min.js
+++ b/static/underscore.min.js
@ -0,0 +1,31 @@
+// Underscore.js 1.3.1
+// (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc.
+// Underscore is freely distributable under the MIT license.
+// Portions of Underscore are inspired or borrowed from Prototype,
+// Oliver Steele's Functional, and John Resig's Micro-Templating.
+// For all details and documentation:
+// http://documentcloud.github.com/underscore
+(function(){function q(a,c,d){if(a===c)return a!==0||1/a==1/c;if(a==null||c==null)return a===c;if(a._chain)a=a._wrapped;if(c._chain)c=c._wrapped;if(a.isEqual&&b.isFunction(a.isEqual))return a.isEqual(c);if(c.isEqual&&b.isFunction(c.isEqual))return c.isEqual(a);var e=l.call(a);if(e!=l.call(c))return false;switch(e){case "[object String]":return a==String(c);case "[object Number]":return a!=+a?c!=+c:a==0?1/a==1/c:a==+c;case "[object Date]":case "[object Boolean]":return+a==+c;case "[object RegExp]":return a.source==
+c.source&&a.global==c.global&&a.multiline==c.multiline&&a.ignoreCase==c.ignoreCase}if(typeof a!="object"||typeof c!="object")return false;for(var f=d.length;f--;)if(d[f]==a)return true;d.push(a);var f=0,g=true;if(e=="[object Array]"){if(f=a.length,g=f==c.length)for(;f--;)if(!(g=f in a==f in c&&q(a[f],c[f],d)))break}else{if("constructor"in a!="constructor"in c||a.constructor!=c.constructor)return false;for(var h in a)if(b.has(a,h)&&(f++,!(g=b.has(c,h)&&q(a[h],c[h],d))))break;if(g){for(h in c)if(b.has(c,
+h)&&!f--)break;g=!f}}d.pop();return g}var r=this,G=r._,n={},k=Array.prototype,o=Object.prototype,i=k.slice,H=k.unshift,l=o.toString,I=o.hasOwnProperty,w=k.forEach,x=k.map,y=k.reduce,z=k.reduceRight,A=k.filter,B=k.every,C=k.some,p=k.indexOf,D=k.lastIndexOf,o=Array.isArray,J=Object.keys,s=Function.prototype.bind,b=function(a){return new m(a)};if(typeof exports!=="undefined"){if(typeof module!=="undefined"&&module.exports)exports=module.exports=b;exports._=b}else r._=b;b.VERSION="1.3.1";var j=b.each=
+b.forEach=function(a,c,d){if(a!=null)if(w&&a.forEach===w)a.forEach(c,d);else if(a.length===+a.length)for(var e=0,f=a.length;e<f;e++){if(e in a&&c.call(d,a[e],e,a)===n)break}else for(e in a)if(b.has(a,e)&&c.call(d,a[e],e,a)===n)break};b.map=b.collect=function(a,c,b){var e=[];if(a==null)return e;if(x&&a.map===x)return a.map(c,b);j(a,function(a,g,h){e[e.length]=c.call(b,a,g,h)});if(a.length===+a.length)e.length=a.length;return e};b.reduce=b.foldl=b.inject=function(a,c,d,e){var f=arguments.length>2;a==
+null&&(a=[]);if(y&&a.reduce===y)return e&&(c=b.bind(c,e)),f?a.reduce(c,d):a.reduce(c);j(a,function(a,b,i){f?d=c.call(e,d,a,b,i):(d=a,f=true)});if(!f)throw new TypeError("Reduce of empty array with no initial value");return d};b.reduceRight=b.foldr=function(a,c,d,e){var f=arguments.length>2;a==null&&(a=[]);if(z&&a.reduceRight===z)return e&&(c=b.bind(c,e)),f?a.reduceRight(c,d):a.reduceRight(c);var g=b.toArray(a).reverse();e&&!f&&(c=b.bind(c,e));return f?b.reduce(g,c,d,e):b.reduce(g,c)};b.find=b.detect=
+function(a,c,b){var e;E(a,function(a,g,h){if(c.call(b,a,g,h))return e=a,true});return e};b.filter=b.select=function(a,c,b){var e=[];if(a==null)return e;if(A&&a.filter===A)return a.filter(c,b);j(a,function(a,g,h){c.call(b,a,g,h)&&(e[e.length]=a)});return e};b.reject=function(a,c,b){var e=[];if(a==null)return e;j(a,function(a,g,h){c.call(b,a,g,h)||(e[e.length]=a)});return e};b.every=b.all=function(a,c,b){var e=true;if(a==null)return e;if(B&&a.every===B)return a.every(c,b);j(a,function(a,g,h){if(!(e=
+e&&c.call(b,a,g,h)))return n});return e};var E=b.some=b.any=function(a,c,d){c||(c=b.identity);var e=false;if(a==null)return e;if(C&&a.some===C)return a.some(c,d);j(a,function(a,b,h){if(e||(e=c.call(d,a,b,h)))return n});return!!e};b.include=b.contains=function(a,c){var b=false;if(a==null)return b;return p&&a.indexOf===p?a.indexOf(c)!=-1:b=E(a,function(a){return a===c})};b.invoke=function(a,c){var d=i.call(arguments,2);return b.map(a,function(a){return(b.isFunction(c)?c||a:a[c]).apply(a,d)})};b.pluck=
+function(a,c){return b.map(a,function(a){return a[c]})};b.max=function(a,c,d){if(!c&&b.isArray(a))return Math.max.apply(Math,a);if(!c&&b.isEmpty(a))return-Infinity;var e={computed:-Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;b>=e.computed&&(e={value:a,computed:b})});return e.value};b.min=function(a,c,d){if(!c&&b.isArray(a))return Math.min.apply(Math,a);if(!c&&b.isEmpty(a))return Infinity;var e={computed:Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;b<e.computed&&(e={value:a,computed:b})});
+return e.value};b.shuffle=function(a){var b=[],d;j(a,function(a,f){f==0?b[0]=a:(d=Math.floor(Math.random()*(f+1)),b[f]=b[d],b[d]=a)});return b};b.sortBy=function(a,c,d){return b.pluck(b.map(a,function(a,b,g){return{value:a,criteria:c.call(d,a,b,g)}}).sort(function(a,b){var c=a.criteria,d=b.criteria;return c<d?-1:c>d?1:0}),"value")};b.groupBy=function(a,c){var d={},e=b.isFunction(c)?c:function(a){return a[c]};j(a,function(a,b){var c=e(a,b);(d[c]||(d[c]=[])).push(a)});return d};b.sortedIndex=function(a,
+c,d){d||(d=b.identity);for(var e=0,f=a.length;e<f;){var g=e+f>>1;d(a[g])<d(c)?e=g+1:f=g}return e};b.toArray=function(a){return!a?[]:a.toArray?a.toArray():b.isArray(a)?i.call(a):b.isArguments(a)?i.call(a):b.values(a)};b.size=function(a){return b.toArray(a).length};b.first=b.head=function(a,b,d){return b!=null&&!d?i.call(a,0,b):a[0]};b.initial=function(a,b,d){return i.call(a,0,a.length-(b==null||d?1:b))};b.last=function(a,b,d){return b!=null&&!d?i.call(a,Math.max(a.length-b,0)):a[a.length-1]};b.rest=
+b.tail=function(a,b,d){return i.call(a,b==null||d?1:b)};b.compact=function(a){return b.filter(a,function(a){return!!a})};b.flatten=function(a,c){return b.reduce(a,function(a,e){if(b.isArray(e))return a.concat(c?e:b.flatten(e));a[a.length]=e;return a},[])};b.without=function(a){return b.difference(a,i.call(arguments,1))};b.uniq=b.unique=function(a,c,d){var d=d?b.map(a,d):a,e=[];b.reduce(d,function(d,g,h){if(0==h||(c===true?b.last(d)!=g:!b.include(d,g)))d[d.length]=g,e[e.length]=a[h];return d},[]);
+return e};b.union=function(){return b.uniq(b.flatten(arguments,true))};b.intersection=b.intersect=function(a){var c=i.call(arguments,1);return b.filter(b.uniq(a),function(a){return b.every(c,function(c){return b.indexOf(c,a)>=0})})};b.difference=function(a){var c=b.flatten(i.call(arguments,1));return b.filter(a,function(a){return!b.include(c,a)})};b.zip=function(){for(var a=i.call(arguments),c=b.max(b.pluck(a,"length")),d=Array(c),e=0;e<c;e++)d[e]=b.pluck(a,""+e);return d};b.indexOf=function(a,c,
+d){if(a==null)return-1;var e;if(d)return d=b.sortedIndex(a,c),a[d]===c?d:-1;if(p&&a.indexOf===p)return a.indexOf(c);for(d=0,e=a.length;d<e;d++)if(d in a&&a[d]===c)return d;return-1};b.lastIndexOf=function(a,b){if(a==null)return-1;if(D&&a.lastIndexOf===D)return a.lastIndexOf(b);for(var d=a.length;d--;)if(d in a&&a[d]===b)return d;return-1};b.range=function(a,b,d){arguments.length<=1&&(b=a||0,a=0);for(var d=arguments[2]||1,e=Math.max(Math.ceil((b-a)/d),0),f=0,g=Array(e);f<e;)g[f++]=a,a+=d;return g};
+var F=function(){};b.bind=function(a,c){var d,e;if(a.bind===s&&s)return s.apply(a,i.call(arguments,1));if(!b.isFunction(a))throw new TypeError;e=i.call(arguments,2);return d=function(){if(!(this instanceof d))return a.apply(c,e.concat(i.call(arguments)));F.prototype=a.prototype;var b=new F,g=a.apply(b,e.concat(i.call(arguments)));return Object(g)===g?g:b}};b.bindAll=function(a){var c=i.call(arguments,1);c.length==0&&(c=b.functions(a));j(c,function(c){a[c]=b.bind(a[c],a)});return a};b.memoize=function(a,
+c){var d={};c||(c=b.identity);return function(){var e=c.apply(this,arguments);return b.has(d,e)?d[e]:d[e]=a.apply(this,arguments)}};b.delay=function(a,b){var d=i.call(arguments,2);return setTimeout(function(){return a.apply(a,d)},b)};b.defer=function(a){return b.delay.apply(b,[a,1].concat(i.call(arguments,1)))};b.throttle=function(a,c){var d,e,f,g,h,i=b.debounce(function(){h=g=false},c);return function(){d=this;e=arguments;var b;f||(f=setTimeout(function(){f=null;h&&a.apply(d,e);i()},c));g?h=true:
+a.apply(d,e);i();g=true}};b.debounce=function(a,b){var d;return function(){var e=this,f=arguments;clearTimeout(d);d=setTimeout(function(){d=null;a.apply(e,f)},b)}};b.once=function(a){var b=false,d;return function(){if(b)return d;b=true;return d=a.apply(this,arguments)}};b.wrap=function(a,b){return function(){var d=[a].concat(i.call(arguments,0));return b.apply(this,d)}};b.compose=function(){var a=arguments;return function(){for(var b=arguments,d=a.length-1;d>=0;d--)b=[a[d].apply(this,b)];return b[0]}};
+b.after=function(a,b){return a<=0?b():function(){if(--a<1)return b.apply(this,arguments)}};b.keys=J||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var c=[],d;for(d in a)b.has(a,d)&&(c[c.length]=d);return c};b.values=function(a){return b.map(a,b.identity)};b.functions=b.methods=function(a){var c=[],d;for(d in a)b.isFunction(a[d])&&c.push(d);return c.sort()};b.extend=function(a){j(i.call(arguments,1),function(b){for(var d in b)a[d]=b[d]});return a};b.defaults=function(a){j(i.call(arguments,
+1),function(b){for(var d in b)a[d]==null&&(a[d]=b[d])});return a};b.clone=function(a){return!b.isObject(a)?a:b.isArray(a)?a.slice():b.extend({},a)};b.tap=function(a,b){b(a);return a};b.isEqual=function(a,b){return q(a,b,[])};b.isEmpty=function(a){if(b.isArray(a)||b.isString(a))return a.length===0;for(var c in a)if(b.has(a,c))return false;return true};b.isElement=function(a){return!!(a&&a.nodeType==1)};b.isArray=o||function(a){return l.call(a)=="[object Array]"};b.isObject=function(a){return a===Object(a)};
+b.isArguments=function(a){return l.call(a)=="[object Arguments]"};if(!b.isArguments(arguments))b.isArguments=function(a){return!(!a||!b.has(a,"callee"))};b.isFunction=function(a){return l.call(a)=="[object Function]"};b.isString=function(a){return l.call(a)=="[object String]"};b.isNumber=function(a){return l.call(a)=="[object Number]"};b.isNaN=function(a){return a!==a};b.isBoolean=function(a){return a===true||a===false||l.call(a)=="[object Boolean]"};b.isDate=function(a){return l.call(a)=="[object Date]"};
+b.isRegExp=function(a){return l.call(a)=="[object RegExp]"};b.isNull=function(a){return a===null};b.isUndefined=function(a){return a===void 0};b.has=function(a,b){return I.call(a,b)};b.noConflict=function(){r._=G;return this};b.identity=function(a){return a};b.times=function(a,b,d){for(var e=0;e<a;e++)b.call(d,e)};b.escape=function(a){return(""+a).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;").replace(/\//g,"&#x2F;")};b.mixin=function(a){j(b.functions(a),
+function(c){K(c,b[c]=a[c])})};var L=0;b.uniqueId=function(a){var b=L++;return a?a+b:b};b.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var t=/.^/,u=function(a){return a.replace(/\\\\/g,"\\").replace(/\\'/g,"'")};b.template=function(a,c){var d=b.templateSettings,d="var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('"+a.replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(d.escape||t,function(a,b){return"',_.escape("+
+u(b)+"),'"}).replace(d.interpolate||t,function(a,b){return"',"+u(b)+",'"}).replace(d.evaluate||t,function(a,b){return"');"+u(b).replace(/[\r\n\t]/g," ")+";__p.push('"}).replace(/\r/g,"\\r").replace(/\n/g,"\\n").replace(/\t/g,"\\t")+"');}return __p.join('');",e=new Function("obj","_",d);return c?e(c,b):function(a){return e.call(this,a,b)}};b.chain=function(a){return b(a).chain()};var m=function(a){this._wrapped=a};b.prototype=m.prototype;var v=function(a,c){return c?b(a).chain():a},K=function(a,c){m.prototype[a]=
+function(){var a=i.call(arguments);H.call(a,this._wrapped);return v(c.apply(b,a),this._chain)}};b.mixin(b);j("pop,push,reverse,shift,sort,splice,unshift".split(","),function(a){var b=k[a];m.prototype[a]=function(){var d=this._wrapped;b.apply(d,arguments);var e=d.length;(a=="shift"||a=="splice")&&e===0&&delete d[0];return v(d,this._chain)}});j(["concat","join","slice"],function(a){var b=k[a];m.prototype[a]=function(){return v(b.apply(this._wrapped,arguments),this._chain)}});m.prototype.chain=function(){this._chain=
+true;return this};m.prototype.value=function(){return this._wrapped}}).call(this);