Trackster: better handling when data has a message -- (a) if there's data, show it; and (b) add border to all canvas elements so that they line up when messages are shown and error borders are drawn.

static/june_2007_style/blue/trackster.css

@@ -25,7 +25,7 @@
 .track-content{overflow:hidden;text-align:center;border-bottom:1px solid #bbb;background:#eee url('/static/images/tracks/diag_bg.gif');min-height:16px;}
 .label-track .track-content{background:white;}
 .track-tile{background:white;}
-.track-tile canvas{position:relative;z-index:100;}
+.track-tile canvas{position:relative;z-index:100;border:solid white;border-width: 2px 0px;}
 .track.error .track-content{background-color:#ECB4AF;background-image:none;padding:2px 0;}
 .track.nodata .track-content{background-color:#eee;background-image:none;padding:2px 0;}
 .loading{min-height:100px;}

static/june_2007_style/trackster.css.tmpl

@@ -163,6 +163,8 @@
 .track-tile canvas {
     position: relative;
     z-index: 100;
+    border: solid white;
+    border-width: 2px 0px;
 }
 
 .track.error .track-content {

static/scripts/trackster.js

@@ -2259,7 +2259,7 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
             draw_offset += cig_len;
         }
     },
-    draw_tile: function( resolution, tile_index, parent_element, w_scale ) {
+    draw_tile: function(resolution, tile_index, parent_element, w_scale) {
         var tile_low = tile_index * DENSITY * resolution,
             tile_high = ( tile_index + 1 ) * DENSITY * resolution,
             tile_span = tile_high - tile_low;
@@ -2359,7 +2359,7 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
             max_label.css({ position: "absolute", top: "22px", left: "10px" });
             max_label.prependTo(this.container_div);
                 
-            for ( var i = 0, len = points.length; i < len; i++ ) {
+            for (var i = 0, len = points.length; i < len; i++) {
                 var x = Math.floor( (points[i][0] - tile_low) * w_scale );
                 var y = points[i][1];
                 
@@ -2380,18 +2380,23 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
             return canvas;
         }
         
+        
         //
         // Show message. If there is a message, return canvas.
         // FIXME: Why is this drawn on a canvas instead of a div?
         if (result.message) {
             canvas.css({
-                border: "solid red",
-                "border-width": "2px 2px 2px 0px"
+                "border-color": "red"
             });
+
             ctx.fillStyle = "red";
             ctx.textAlign = "left";
             ctx.fillText(result.message, 100 + left_offset, y_scale);
-            return canvas;
+
+            // If there's no data, return.
+            if (!result.data) {
+                return canvas;
+            }
         }
 
         //