New UI

11 files changed, 398 insertions, 456 deletions

diff --git a/src/js/chrome/manifest.json b/src/js/chrome/manifest.json
index bbd8711..40d6649 100644
--- a/src/js/chrome/manifest.json
+++ b/src/js/chrome/manifest.json
@@ -26,5 +26,12 @@
   ],
 
   // We have to relax the content security policy to allow rules to be evaluated:
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+
+  "web_accessible_resources": [
+    "data/font-awesome/font/fontawesome-webfont.eot",
+    "data/font-awesome/font/fontawesome-webfont.svg",
+    "data/font-awesome/font/fontawesome-webfont.ttf",
+    "data/font-awesome/font/fontawesome-webfont.woff"
+  ]
 }
diff --git a/src/js/fiveui/build.mk b/src/js/fiveui/build.mk
index e229eed..41d2c06 100644
--- a/src/js/fiveui/build.mk
+++ b/src/js/fiveui/build.mk
@@ -45,7 +45,8 @@ $2: $(patsubst $(fiveui-dir)/%,$1/data/%,$(wildcard $(fiveui-dir)/js/*))
 
 
 $(call fiveui-files,$1/data,css)
-$2: $1/data/css/options.css
+$2: $1/data/css/options.css \
+    $1/data/css/ui.css
 
 
 $(call fiveui-files,$1/data,images)
@@ -69,6 +70,31 @@ $2: $1/data/jquery/jquery-1.8.3.js           \
     $1/data/jquery/bundled.css
 
 
+# font awesome
+$1/data/font-awesome/css: | $1/data/font-awesome
+	$$(call cmd,mkdir)
+
+$1/data/font-awesome/css/%: $(lib-dir)/font-awesome/css/% \
+                          | $1/data/font-awesome/css
+	$$(call cmd,cp)
+
+$1/data/font-awesome/font: | $1/data/font-awesome
+	$$(call cmd,mkdir)
+
+$1/data/font-awesome/font/%: $(lib-dir)/font-awesome/font/% \
+                           | $1/data/font-awesome/font
+	$$(call cmd,cp)
+
+$1/data/font-awesome: | $1/data
+	$$(call cmd,mkdir)
+
+$2: $1/data/font-awesome/css/font-awesome.css          \
+    $1/data/font-awesome/font/fontawesome-webfont.eot  \
+    $1/data/font-awesome/font/fontawesome-webfont.svg  \
+    $1/data/font-awesome/font/fontawesome-webfont.woff \
+    $1/data/font-awesome/font/fontawesome-webfont.ttf
+
+
 # simple libraries
 $1/data/%: $(lib-dir)/% | $1/data
 	$$(call cmd,cp)
diff --git a/src/js/lib/ui.css b/src/js/fiveui/css/ui.css
index c7c6c79..0b723c9 100644
--- a/src/js/lib/ui.css
+++ b/src/js/fiveui/css/ui.css
@@ -108,5 +108,9 @@ div.fiveui-problem-body {
 }
 
 div.fiveui-severity-0 {
+  background-color: #F2FC7E;
+}
+
+div.fiveui-severity-1 {
   background-color: #F5B3B3;
 }
diff --git a/src/js/fiveui/injected/compute.js b/src/js/fiveui/injected/compute.js
index 921229e..9fc16a8 100644
--- a/src/js/fiveui/injected/compute.js
+++ b/src/js/fiveui/injected/compute.js
@@ -283,7 +283,7 @@
       * @param {DOMNode} elt
       */
      var underFiveUI = function(elt) {
-       var ancestor = $(elt).parentsUntil('#fiveui-top', 'body');
+       var ancestor = $(elt).parentsUntil('.fiveui', 'body');
        return ancestor.length == 0;
      };
 
diff --git a/src/js/fiveui/injected/jquery-plugins.js b/src/js/fiveui/injected/jquery-plugins.js
index 43cfbd6..a7dedbd 100644
--- a/src/js/fiveui/injected/jquery-plugins.js
+++ b/src/js/fiveui/injected/jquery-plugins.js
@@ -19,6 +19,8 @@
  * limitations under the License.
  */
 
+var fiveui = fiveui || {};
+
 /**
  * This module provides several useful jQuery plugins related to checking and reporting
  * UI consistency issues.
diff --git a/src/js/fiveui/injected/prelude.js b/src/js/fiveui/injected/prelude.js
index ce242f6..9f84c96 100644
--- a/src/js/fiveui/injected/prelude.js
+++ b/src/js/fiveui/injected/prelude.js
@@ -81,8 +81,8 @@ fiveui.query = function (sel, context) {
     }
   );
 
-  $filteredResults = $results.not('#fiveui-top')
-                             .not('#fiveui-top *')
+  $filteredResults = $results.not('.fiveui')
+                             .not('.fiveui *')
                              .filter(':visible');
 
   // update global stats
diff --git a/src/js/fiveui/injected/ui.js b/src/js/fiveui/injected/ui.js
index 1eecd93..60c3019 100644
--- a/src/js/fiveui/injected/ui.js
+++ b/src/js/fiveui/injected/ui.js
@@ -20,13 +20,358 @@
  */
 
 (function(){
+
    /**
     * Storage namespace for in-browser logic
     */
    var core = {};
    core.port = obtainPort();
 
-   core.ui = $('<div></div>');
+
+   /* User Interface **********************************************************/
+
+   core.UI = function() {
+     this._initialize.apply(this, arguments);
+   };
+
+
+   _.extend(core.UI, {
+
+     /**
+      * Template for the UI dialog
+      */
+     uiTemplate:_.template(
+       [ '<div class="fiveui">'
+       , '  <div class="fiveui-titlebar">'
+       , '    FiveUI<div class="fiveui-close"><span class="icon-remove"></span></div>'
+       , '  </div>'
+       , '  <div class="fiveui-controls">'
+       , '    <div class="fiveui-control fiveui-clear" title="clear"><span class="icon-ok"></span></div>'
+       , '    <div class="fiveui-control fiveui-break" title="break"><span class="icon-pause"></span></div>'
+       , '  </div>'
+       , '  <div class="fiveui-problems"></div>'
+       , '  <div class="fiveui-stats"></div>'
+       , '</div>'
+       ].join('')),
+
+     /**
+      * Template for the stats panel of the UI dialog.
+      */
+     statsTemplate:_.template(
+       [ '<table class="fiveui-table">'
+       , '  <tr>'
+       , '    <td class="fiveui-table-text">rules checked:</td>'
+       , '    <td class="fiveui-table-number"><%= numRules %></td>'
+       , '  </tr>'
+       , '  <tr>'
+       , '    <td class="fiveui-table-text">elements checked:</td>'
+       , '    <td class="fiveui-table-number"><%= numElts %></td>'
+       , '  </tr>'
+       , '  <tr>'
+       , '    <td class="fiveui-table-text">elapsed time (ms):</td>'
+       , '    <td class="fiveui-table-number"><%= time %></td>'
+       , '  </tr>'
+       , '</table>'
+       ].join('')),
+
+   });
+
+   _.extend(core.UI.prototype, {
+
+     /**
+      * Create the UI, and attach all event handlers.
+      * @private
+      */
+     _initialize:function(opts) {
+
+       // apply options
+       var optNames = [ 'port' ];
+       _.defaults(this, _.pick(opts, optNames));
+
+       this.$el       = $(core.UI.uiTemplate());
+       this.$problems = this.$el.find('.fiveui-problems');
+       this.$stats    = this.$el.find('.fiveui-stats');
+
+       this._setupButtons();
+       this._setupDragDrop();
+       this._pollResize();
+
+       this._registerBackendListeners();
+
+       // initially, keep the window hidden
+       this.$el.hide();
+     },
+
+     /**
+      * Setup the functionality of the close button on the ui
+      * @private
+      */
+     _setupButtons:function() {
+
+       var close = this.$el.find('.fiveui-close');
+       close.on('click.fiveui', _.bind(this.hide, this));
+
+       var clear = this.$el.find('.fiveui-clear');
+       clear.on('click.fiveui', _.bind(this.clearProblems, this));
+
+       // note, this only works in chrome
+       var pause = this.$el.find('.fiveui-break');
+       pause.on('click.fiveui', function() {
+         debugger;
+       });
+
+     },
+
+     /**
+      * Setup the drag and drop functionality for the problems window.
+      * @private
+      */
+     _setupDragDrop:function() {
+
+       var self   = this;
+       var header = this.$el.find('.fiveui-titlebar');
+       var offset = { x: 0, y: 0 };
+
+       // update the location of the ui
+       var mouseMove = function(e) {
+         self.$el.css({
+           left: e.originalEvent.clientX + offset.x,
+           top:  e.originalEvent.clientY + offset.y,
+         });
+       };
+
+       var cancel = function(e) {
+         e.stopPropagation();
+       };
+
+       // both of these will cause funny things to happen with the text of the title
+       // bar.
+       header.on('dragstart',   cancel);
+       header.on('selectstart', cancel);
+
+       // figure out how far the cursor is from the top-left of the ui
+       header.on('mousedown.fiveui', function(e) {
+
+         // prevent the close button from being used as a drag handle
+         if(e.target != header[0]) {
+           return false;
+         }
+
+         var pos  = self.$el.position();
+         offset.x = pos.left - e.originalEvent.clientX;
+         offset.y = pos.top  - e.originalEvent.clientY;
+
+         $(window).on('mousemove.fiveui', mouseMove);
+         header.one('mouseup.fiveui', function() {
+           $(window).off('mousemove.fiveui', mouseMove);
+
+           // deliver the new position to teh backend
+           self.port.emit('Position', self.$el.position());
+         });
+       });
+
+     },
+
+     _pollResize:function() {
+
+       var height = this.$el.height();
+
+       if(height != this.height) {
+
+         console.log('changing height');
+
+         this.height = height;
+
+         var ppos = this.$problems.position();
+         var spos = this.$stats.position();
+
+         this.$problems.height(spos.top - ppos.top)
+
+         // notify the backend about the new height
+         this.port.emit('Size', {
+           width:  this.$el.width(),
+           height: this.$el.height()
+         });
+       }
+
+       setTimeout(_.bind(this._pollResize, this), 100);
+     },
+
+     /**
+      * Setup listeners to the backend.
+      */
+     _registerBackendListeners:function() {
+
+       var self = this;
+
+       this.port.on('ShowUI', function(unused) {
+         self.show();
+       });
+
+       this.port.on('ShowProblem', _.bind(this.addProblem, this));
+
+       this.port.on('ShowStats', _.bind(this.renderStats, this));
+
+       // initialize/create the ui, set its position and size
+       this.port.on('RestoreUI', function(state) {
+
+         // set the position and size
+         self.$el.css({
+           'top':    state.winState.y,
+           'left':   state.winState.x,
+           'width':  state.winState.width + 'px',
+           'height': state.winState.height + 'px'
+         });
+
+         // optionally show the window
+         if(!state.winState.closed) {
+           self.show();
+         }
+
+         // add all problems
+         _.each(state.problems, _.bind(self.addProblem, self));
+
+         // render stats
+         self.renderStats(state.stats);
+
+       });
+     },
+
+     /**
+      * Clear the problems list
+      * @public
+      */
+     clearProblems:function() {
+       this.$el.find('.fiveui-problems').children().remove();
+       this.port.emit('ClearProblems');
+     },
+
+     /**
+      * Add an entry in the problems list.
+      * @public
+      */
+     addProblem:function(problem) {
+
+       var p = new core.Problem(problem);
+       p.appendTo(this.$el.find('.fiveui-problems'));
+
+     },
+
+     /**
+      * Attach the UI to a jquery selector.
+      * @public
+      */
+     appendTo:function(el) {
+       el.append(this.$el);
+     },
+
+     /**
+      * Hide the UI
+      * @public
+      */
+     hide:function() {
+       this.$el.hide();
+       this.port.emit('CloseUI');
+     },
+
+     /**
+      * Show the UI
+      * @public
+      */
+     show:function() {
+       this.$el.show();
+     },
+
+     /**
+      * Render statistics
+      */
+     renderStats:function(stats) {
+
+       stats = stats || {};
+       _.defaults(stats, {
+         numRules: 0,
+         numElts: 0,
+         start: 0,
+         end: 0,
+       });
+
+       stats.time = stats.end - stats.start;
+
+       this.$stats.html(core.UI.statsTemplate(stats));
+     },
+
+   });
+
+
+   /**
+    * Entries in the problem list.
+    */
+   core.Problem = function() {
+     this._initialize.apply(this, arguments);
+   };
+
+   _.extend(core.Problem, {
+
+     /**
+      * Template for entries in the problems list
+      */
+     problemTemplate:_.template(
+       [ '<div class="fiveui-problem fiveui-severity-<%= severity %>">'
+       , '  <div class="fiveui-problem-header">'
+       , '    <div class="fiveui-problem-toggle"><span></span></div>'
+       , '    <%= name %>'
+       , '  </div>'
+       , '  <div class="fiveui-problem-body">'
+       , '    <p><%= msg %></p>'
+       , '    <p><span class="fiveui-xpath"><%= xpath %></span></p>'
+       , '  </div>'
+       , '</div>'
+       ].join('')),
+
+   });
+
+   _.extend(core.Problem.prototype, {
+
+     _initialize:function(problem) {
+
+       this.problem = problem;
+
+       this.$el     = $(core.Problem.problemTemplate(problem));
+       this.$toggle = this.$el.find('.fiveui-problem-toggle');
+       this.$body   = this.$el.find('.fiveui-problem-body');
+       this.$header = this.$el.find('.fiveui-problem-header');
+
+       this.$body.hide();
+
+       this.close();
+     },
+
+     appendTo:function(el) {
+       el.append(this.$el);
+     },
+
+     /**
+      * Close the context for a problem entry.
+      * @public
+      */
+     close:function() {
+       this.$toggle.find('span').removeClass('icon-caret-down')
+                                .addClass('icon-caret-right');
+
+       this.$el.one('click', _.bind(this.open, this));
+       this.$body.slideUp(100);
+     },
+
+     open:function() {
+       this.$toggle.find('span').addClass('icon-caret-down')
+                                .removeClass('icon-caret-right');
+
+       this.$el.one('click', _.bind(this.close, this));
+       this.$body.slideDown(100);
+     },
+
+   });
+
 
    core.lockDepth = 0;
 
@@ -72,7 +417,7 @@
      } else {
        // add the rule to the list of highlighted elements, and change its style
        // to look obvious.
-       var elt      = fiveui.query('.' + prob.hash);
+       var elt      = core.query('.' + prob.hash);
        var oldStyle = elt.attr('style');
 
        core.maskRules(function() {
@@ -95,7 +440,7 @@
        obj.highlighted = obj.highlighted - 1;
 
        if(obj.highlighted == 0) {
-         var elt = fiveui.query('.' + prob.hash);
+         var elt = core.query('.' + prob.hash);
 
          // remove the fiveui style
          core.maskRules(function() {
@@ -113,33 +458,9 @@
      }
    };
 
-   core.renderStatsTemplate = _.template(
-     [ '<table class="fiveui-table">'
-     , '  <tr>'
-     , '    <td class="fiveui-table-text">rules checked:</td>'
-     , '    <td class="fiveui-table-number"><%= numRules %></td>'
-     , '  </tr>'
-     , '  <tr>'
-     , '    <td class="fiveui-table-text">elements checked:</td>'
-     , '    <td class="fiveui-table-number"><%= numElts %></td>'
-     , '  </tr>'
-     , '  <tr>'
-     , '    <td class="fiveui-table-text">elapsed time (ms):</td>'
-     , '    <td class="fiveui-table-number"><%= time %></td>'
-     , '  </tr>'
-     , '</table>'
-     ].join(''));
-
    core.renderStats = function (stats) {
 
      // give stats some sane defaults.
-     stats = stats || {};
-     _.defaults(stats, {
-       numRules: 0,
-       numElts: 0,
-       start: 0,
-       end: 0,
-     });
 
      core.maskRules(function () {
 
@@ -152,153 +473,7 @@
      });
    };
 
-   core.renderProblem = function(prob) {
-     core.maskRules(function() {
-       var probDiv = $('<div class="pr"></div>');
-
-
-       /** Problem Controls **/
-       var prControls = $('<div class="prControls"></div>');
-       probDiv.append(prControls);
-
-       var prSeverity = $('<div class="prSeverity"></div>');
-       prControls.append(prSeverity);
-
-       if (1 == prob.severity) {
-         prSeverity.addClass('prSeverity-err');
-       } else {
-         prSeverity.addClass('prSeverity-warn');
-       }
-
-       var prExpand = $('<div class="prExpand prExpand-right"></div>');
-       prControls.append(prExpand);
-
-       /** Problem Content **/
-       var prMessage = $('<div class="prMessage"></div>');
-       probDiv.append(prMessage);       
-
-       var prTitle = $('<div class="prTitle">'+prob.name+'</div>');
-       prMessage.append(prTitle);
-
-       var prDetails = $('<div class="prDetails"></div>');
-       prMessage.append(prDetails);
-
-
-       var prDescr  = $('<p>'+prob.descr+'</p>');
-       var prPath   = $('<p>'+prob.xpath+'</p>');
-       prDetails.append(prDescr);
-       if (prob.msg) {
-         var reportMsg = $('<div class="prReportMessage">'+prob.msg+'</div>');
-         prDetails.append(reportMsg);
-       }
-       prDetails.append(prPath);
-       prDetails.hide();
-
-       $('#problemList').append(probDiv);
-
-       prExpand.click(
-         function() {
-           var elt = $(this);
-           if(elt.is('.prExpand-down')) {
-             elt.removeClass('prExpand-down')
-                .addClass('prExpand-right');
-             prDetails.hide();
-             core.maskProblem(prob);
-           } else {
-             elt.addClass('prExpand-down')
-                .removeClass('prExpand-right');
-             prDetails.show();
-             core.highlightProblem(prob);
-           }
-
-           return false;
-         });
-     });
-   };
-
-   var dragStop = function(evt,e) {
-     core.port.emit('Position', core.ui.parent().position());
-   };
-
-   var resizeStop = function(evt,e) {
-     core.port.emit('Size', { width: core.ui.width(), height: core.ui.height() });
-   };
-
-   var beforeClose = function(evt,e) {
-     core.port.emit('CloseUI');
-   };
-
-   var registerBackendListeners = function(port) {
-
-     port.on('ShowUI', function(unused) {
-       core.ui.dialog('open');
-     });
-
-     port.on('ShowProblem', function(problem) {
-       core.renderProblem(problem);
-     });
-
-     port.on('ShowStats', function(stats) {
-       core.renderStats(stats);
-     });
-
-     port.on('RestoreUI', function(state) {
-       core.ui.append($('<div id="controls"></div>'));
-
-       core.ui.append($('<div id="problemList"></div>'));
-
-       var newDialog = core.ui.dialog({ title: 'FiveUI',
-                        dragStop: dragStop,
-                        resizeStop: resizeStop,
-                        beforeClose: beforeClose,
-                        position: [state.winState.x, state.winState.y],
-                        width: state.winState.width,
-                        height: state.winState.height,
-                        autoOpen: false,
-                        zIndex: 50000
-                      });
-       newDialog.parent().attr('id', 'fiveui-top');
-
-       $('#controls').append($('<div id="clearButton"></div>')
-                             .button({ label: 'clear' }));
-
-       $('#clearButton').click(function() {
-             $('#problemList').children().remove();
-             port.emit('ClearProblems');
-
-             core.renderStats();
-             $('prExpand-down').click();
-
-             // Just in case the click event on prExpand-down missde anything:
-             core.maskProblem(fiveui.query('.uic-problem'), undefined);
-             core.renderStats();
-         });
-
-       ///////////////////////////////////////////
-       // Add a button that causes a debuger break.
-       //
-       // handy for playing with Jquery on the dom.
-       // Note: This only works in Google Chrome.
-       $('#controls').append($('<div id="breakButton"></div>')
-                             .button({ label: 'break' }));
-       $('#breakButton').click(function() {
-                                 debugger;       //
-                               });               //
-       ////////////////////////////////////////////
-
-       core.ui.append($('<div id="fiveui-stats"></div>'));
-
-       if(!state.winState.closed) {
-         core.ui.dialog('open');
-       }
-
-       $(state.problems).each(function(ix,prob) {
-                                core.renderProblem(prob);
-                              });
-
-       core.renderStats(state.stats);
-     });
-   };
+   core.win = new core.UI({ port: core.port });
 
-   registerBackendListeners(core.port);
+   core.win.appendTo($('body'));
 })();
diff --git a/src/js/fiveui/js/background.js b/src/js/fiveui/js/background.js
index dfe0649..79e2512 100644
--- a/src/js/fiveui/js/background.js
+++ b/src/js/fiveui/js/background.js
@@ -160,6 +160,8 @@ fiveui.Background.prototype.pageLoad = function(tabId, url, data) {
 
     var uiScripts =
         [ this.dataLoader('underscore.js')
+        , this.dataLoader('font-awesome/css/font-awesome.css')
+        , this.dataLoader('css/ui.css')
         , this.dataLoader('jquery/bundled.css')
         , this.dataLoader('jquery/jquery-1.8.3.js')
         , this.dataLoader('jquery/jquery-ui-1.9.2.custom.js')
diff --git a/src/js/lib/font-awesome/css/font-awesome.css b/src/js/lib/font-awesome/css/font-awesome.css
index 7ede182..79e14f5 100644
--- a/src/js/lib/font-awesome/css/font-awesome.css
+++ b/src/js/lib/font-awesome/css/font-awesome.css
@@ -27,8 +27,8 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
-  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
+  src: url('chrome-extension://__MSG_@@extension_id__/data/font-awesome/font/fontawesome-webfont.eot?v=3.2.1');
+  src: url('chrome-extension://__MSG_@@extension_id__/data/font-awesome/font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('chrome-extension://__MSG_@@extension_id__/data/font-awesome/font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('chrome-extension://__MSG_@@extension_id__/data/font-awesome/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('chrome-extension://__MSG_@@extension_id__/data/font-awesome/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
   font-weight: normal;
   font-style: normal;
 }
diff --git a/src/js/lib/ui.html b/src/js/lib/ui.html
deleted file mode 100644
index 8bf6714..0000000
--- a/src/js/lib/ui.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>New UI</title>
-    <script type="text/javascript" src="underscore.js"></script>
-    <script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
-    <script type="text/javascript" src="ui.js"></script>
-    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
-    <link rel="stylesheet" type="text/css" href="ui.css" />
-  </head>
-  <body>
-  </body>
-</html>
diff --git a/src/js/lib/ui.js b/src/js/lib/ui.js
deleted file mode 100644
index eadc01e..0000000
--- a/src/js/lib/ui.js
+++ /dev/null
@@ -1,261 +0,0 @@
-
-var fiveui = fiveui || {};
-
-;(function() {
-
-/* Templates ******************************************************************/
-
-fiveui.UI = function() {
-  this._initialize.apply(this, arguments);
-};
-
-
-_.extend(fiveui.UI, {
-
-  /**
-   * Template for the UI dialog
-   */
-  uiTemplate:_.template(
-    [ '<div class="fiveui">'
-    , '  <div class="fiveui-titlebar">'
-    , '    FiveUI<div class="fiveui-close"><span class="icon-remove"></span></div>'
-    , '  </div>'
-    , '  <div class="fiveui-controls">'
-    , '    <div class="fiveui-control fiveui-clear" title="clear"><span class="icon-ok"></span></div>'
-    , '    <div class="fiveui-control fiveui-break" title="break"><span class="icon-pause"></span></div>'
-    , '  </div>'
-    , '  <div class="fiveui-problems"></div>'
-    , '  <div class="fiveui-stats"></div>'
-    , '</div>'
-    ].join('')),
-
-});
-
-
-
-_.extend(fiveui.UI.prototype, {
-
-  /**
-   * Create the UI, and attach all event handlers.
-   * @private
-   */
-  _initialize:function() {
-
-    this.$el       = $(fiveui.UI.uiTemplate());
-    this.$problems = this.$el.find('.fiveui-problems');
-    this.$stats    = this.$el.find('.fiveui-stats');
-
-    this._setupClose();
-    this._setupControls();
-    this._setupDragDrop();
-    this._pollResize();
-
-  },
-
-  /**
-   * Setup the functionality of the close button on the ui
-   * @private
-   */
-  _setupClose:function() {
-
-    var close = this.$el.find('.fiveui-close');
-    close.on('click.fiveui', _.bind(this.hide, this));
-
-  },
-
-  /**
-   * Setup the functionality for the controls part of the UI.
-   * @private
-   */
-  _setupControls:function() {
-
-
-  },
-
-  /**
-   * Setup the drag and drop functionality for the problems window.
-   * @private
-   */
-  _setupDragDrop:function() {
-
-    var self   = this;
-    var header = this.$el.find('.fiveui-titlebar');
-    var offset = { x: 0, y: 0 };
-
-
-    // update the location of the ui
-    var mouseMove = function(e) {
-      self.$el.css({
-        left: e.originalEvent.clientX + offset.x,
-        top:  e.originalEvent.clientY + offset.y,
-      });
-    };
-
-    var cancel = function(e) {
-      e.stopPropagation();
-    };
-
-    // both of these will cause funny things to happen with the text of the title
-    // bar.
-    header.on('dragstart',   cancel);
-    header.on('selectstart', cancel);
-
-    // figure out how far the cursor is from the top-left of the ui
-    header.on('mousedown.fiveui', function(e) {
-
-      // prevent the close button from being used as a drag handle
-      if(e.target != header[0]) {
-        return false;
-      }
-
-      var pos  = self.$el.position();
-      offset.x = pos.left - e.originalEvent.clientX;
-      offset.y = pos.top  - e.originalEvent.clientY;
-
-      $(window).on('mousemove.fiveui', mouseMove);
-      header.one('mouseup.fiveui', function() {
-        $(window).off('mousemove.fiveui', mouseMove);
-      });
-    });
-
-  },
-
-  _pollResize:function() {
-
-    var height = this.$el.height();
-
-    if(height != this.height) {
-      this.height = height;
-
-      var ppos = this.$problems.position();
-      var spos = this.$stats.position();
-
-      this.$problems.height(spos.top - ppos.top)
-    }
-
-    setTimeout(_.bind(this._pollResize, this), 100);
-  },
-
-  /**
-   * Clear the problems list
-   * @public
-   */
-  clearProblems:function() {
-    this.$el.find('.fiveui-problems').children().remove();
-  },
-
-  /**
-   * Add an entry in the problems list.
-   * @public
-   */
-  addProblem:function(problem) {
-
-    var p = new fiveui.Problem(problem);
-    p.appendTo(this.$el.find('.fiveui-problems'));
-
-  },
-
-  /**
-   * Attach the UI to a jquery selector.
-   * @public
-   */
-  appendTo:function(el) {
-    el.append(this.$el);
-  },
-
-  /**
-   * Hide the UI
-   * @public
-   */
-  hide:function() {
-    this.$el.hide();
-  },
-
-  /**
-   * Show the UI
-   * @public
-   */
-  show:function() {
-    this.$el.show();
-  },
-
-});
-
-
-/**
- * Entries in the problem list.
- */
-fiveui.Problem = function() {
-  this._initialize.apply(this, arguments);
-};
-
-_.extend(fiveui.Problem, {
-
-  /**
-   * Template for entries in the problems list
-   */
-  problemTemplate:_.template(
-    [ '<div class="fiveui-problem fiveui-severity-<%= severity %>">'
-    , '  <div class="fiveui-problem-header">'
-    , '    <div class="fiveui-problem-toggle"><span></span></div>'
-    , '    <%= name %>'
-    , '  </div>'
-    , '  <div class="fiveui-problem-body">'
-    , '    <%= descr %><br />'
-    , '    <span class="fiveui-xpath"><%= xpath %></span>'
-    , '  </div>'
-    , '</div>'
-    ].join('')),
-
-});
-
-_.extend(fiveui.Problem.prototype, {
-
-  _initialize:function(problem) {
-    this.$el     = $(fiveui.Problem.problemTemplate(problem));
-    this.$toggle = this.$el.find('.fiveui-problem-toggle');
-    this.$body   = this.$el.find('.fiveui-problem-body');
-    this.$header = this.$el.find('.fiveui-problem-header');
-
-    this.$body.hide();
-
-    this.close();
-  },
-
-  appendTo:function(el) {
-    el.append(this.$el);
-  },
-
-  /**
-   * Close the context for a problem entry.
-   * @public
-   */
-  close:function() {
-    this.$toggle.find('span').removeClass('icon-caret-down')
-                             .addClass('icon-caret-right');
-
-    this.$el.one('click', _.bind(this.open, this));
-    this.$body.slideUp(100);
-  },
-
-  open:function() {
-    console.log('open');
-
-    this.$toggle.find('span').addClass('icon-caret-down')
-                             .removeClass('icon-caret-right');
-
-    this.$el.one('click', _.bind(this.close, this));
-    this.$body.slideDown(100);
-  },
-
-});
-
-
-$(function() {
-
-  var ui = new fiveui.UI();
-  ui.appendTo(jQuery('body'));
-
-});
-
-})();