Allow selecting inside tooltips, remove jquery-ui dependency, position tooltips near points.

website/index.html

@@ -5,10 +5,8 @@
  <meta http-equiv="content-language" content="en">
  <title>ARE WE FAST YET?</title>
  <link rel="stylesheet" title="Default Stylesheet" type="text/css" href="style.css">
- <link rel="stylesheet" title="Default Stylesheet" type="text/css" href="jquery/css/jquery-ui-1.9.2.custom.css">
  <link rel="shortcut icon" href="http://www.arewefastyet.com/awfy_favicon.png">
  <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
- <script type="text/javascript" src="jquery/jquery-ui-1.9.2.custom.min.js"></script>
  <script type="text/javascript" src="flot/jquery.flot.js"></script>
  <script type="text/javascript" src="data/master.js"></script>
  <script type="text/javascript" src="awfy.js"></script>
@@ -25,6 +23,7 @@
   </script>
 
  <div class="graph-row">
+  <ul id="legend"></ul>
   <div class="graph-container">
     <div id="kraken-label">kraken time</div>
     <div class="graph" id="kraken-graph"><h2>Loading...</h2></div>

website/jquery/css/jquery-ui-1.9.2.custom.css

@@ -1,33 +0,0 @@
-/*! jQuery UI - v1.9.2 - 2012-11-28
-* http://jqueryui.com
-* Includes: jquery.ui.core.css
-* Copyright (c) 2012 jQuery Foundation and other contributors Licensed MIT */
-
-/* Layout helpers
-----------------------------------*/
-.ui-helper-hidden { display: none; }
-.ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
-.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
-.ui-helper-clearfix:after { clear: both; }
-.ui-helper-clearfix { zoom: 1; }
-.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
-
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-disabled { cursor: default !important; }
-
-
-/* Icons
-----------------------------------*/
-
-/* states and images */
-.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
-
-
-/* Misc visuals
-----------------------------------*/
-
-/* Overlays */
-.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

website/jquery/css/jquery-ui-1.9.2.custom.min.css

@@ -1,6 +0,0 @@
-/*! jQuery UI - v1.9.2 - 2012-11-28
-* http://jqueryui.com
-* Includes: jquery.ui.core.css
-* Copyright (c) 2012 jQuery Foundation and other contributors Licensed MIT */
-
-.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{zoom:1}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:absolute;top:0;left:0;width:100%;height:100%}

website/style.css

@@ -52,16 +52,23 @@ h1 {
  padding: 15px;
  opacity: 1.0;
  text-align: left;
+ padding-top: 8px;
 }
 
 .closeButton {
  color:#CCC;
- position: absolute;
- top: 5px;
- right: 5px;
  font-family: monospace;
  cursor: pointer;
- display: inline-block;
+ float: right;
+}
+
+.tiptext {
+ background: #222;
+ -moz-border-radius:.35em;
+ -webkit-border-radius:.35em;
+ border-radius: .35em;
+ padding: 10px;
+ clear: both;
 }
 
 #legend {
@@ -81,3 +88,4 @@ h1 {
  margin-bottom: .2em;
  font-size: 1.2em;
 }
+

website/tooltip.js

@@ -11,20 +11,44 @@ ToolTip.prototype.drawFloating = function () {
     var text = '<div class="tooltip closeable"></div>';
     this.elt = $(text);
 
-    var ruler = $('<div class="tooltipRuler"></div>');
-    ruler.appendTo(this.elt);
-
     var button = $('<a class="closeButton" href="#"></a>');
     button.text('[x]');
     button.appendTo(this.elt);
     button.css('text-decoration', 'none');
-    button.click(this.remove.bind(this));
+    button.click((function () {
+        this.remove();
+        return false;
+    }).bind(this));
 
-    var span = $('<span>' + this.contents + '</span>');
+    var span = $('<div class="tiptext">' + this.contents + '</div>');
     span.appendTo(this.elt);
 
     this.draw(true);
-    this.elt.draggable({ drag: this.onDrag.bind(this) });
+    this.elt.mousedown(
+        (function (event) {
+            if ($(event.target).hasClass('tiptext') ||
+                $(event.target).parents('.tiptext').length)
+            {
+                return;
+            }
+            var x = event.clientX - parseInt(this.elt.css('left'));
+            var y = event.clientY - parseInt(this.elt.css('top'));
+            $('html').mousemove(
+                (function (event) {
+                    this.elt.css({ left: (event.clientX - x) + 'px',
+                                   top: (event.clientY - y) + 'px'})
+                    this.onDrag(event);
+                }).bind(this));
+            event.preventDefault();
+        }).bind(this));
+    $('html').mouseup(function () {
+        $('html').unbind('mousemove');
+        });
+
+    // Re-orient the box so it looks like it's directly underneath the point.
+    var width = this.elt.width();
+    var x = this.x - width / 2;
+    this.elt.css({ left: x });
 }
 
 ToolTip.prototype.drawBasic = function () {
@@ -36,7 +60,7 @@ ToolTip.prototype.drawBasic = function () {
 ToolTip.prototype.draw = function (expanded) {
     var tipWidth = 165;
     var tipHeight = 75;
-    var xOffset = expanded ? -80 : -10;
+    var xOffset = -10;
     var yOffset = 15;
 
     var ie = document.all && !window.opera;
@@ -74,7 +98,7 @@ ToolTip.prototype.midpoint = function () {
     return { x: offset.left + width / 2, y: offset.top };
 }
 
-ToolTip.prototype.onDrag = function (event, ui) {
+ToolTip.prototype.onDrag = function (event) {
     if (!this.line)
         return;
     this.line.setAttribute('x2', this.midpoint().x);