add more gridlines, which are important for people being able to see …

…the relative alignment of things

genome.css

@@ -104,11 +104,19 @@ div#static_track {
 
 div.gridline {
     position: absolute;
-    top: 0px;
+    left: 0px;
+    top: 0px
+    width: 0px;
     height: 100%;
     border-style: none none none solid;
     border-width: 1px;
-    border-color: #ddd;
+    border-color: red;
+}
+div.gridline_major {
+    border-color: #bbb;
+}
+div.gridline_minor {
+    border-color: #eee;
 }
 
 div.pos-label {

js/GridTrack.js

@@ -1,5 +1,5 @@
-//This track is for drawing the vertical gridlines
-
+// This track draws vertical gridlines, which are divs with height:
+// 100%, absolutely positioned at the very top of all the tracks
 function GridTrack(name) {
     Track.call(this, name, name, true, function() {});
 }
@@ -10,9 +10,38 @@ GridTrack.prototype.fillBlock = function(blockIndex, block,
                                          leftBlock, rightBlock,
                                          leftBase, rightBase, scale,
                                          padding, stripeWidth) {
-    var gridline = document.createElement("div");
-    gridline.className = "gridline";
-    gridline.style.cssText = "left: 0%; width: 0px;";
-    block.appendChild(gridline);
+
+    this.renderGridlines( block, leftBase, rightBase );
     this.heightUpdate(100, blockIndex);
 };
+
+GridTrack.prototype.renderGridlines = function(block,leftBase,rightBase) {
+
+    var base_span = rightBase-leftBase;
+    var minor_count =
+        !( base_span % 20 ) ? 20 :
+        !( base_span % 10 ) ? 10 :
+        !( base_span % 5  ) ? 5  :
+        !( base_span % 2  ) ? 2  :
+                              0;
+    var major_count = base_span == 20 ? 2 : base_span > 0 ? 1 : 0;
+
+    var new_gridline = function( glclass, position ) {
+        var gridline = document.createElement("div");
+        gridline.style.cssText = "left: " + position + "%; width: 0px";
+        gridline.className = "gridline "+glclass;
+        return gridline;
+    };
+
+    for( var i=0; i<minor_count; i++ ) {
+        var pos = 100/minor_count*i;
+        var cls = pos == 0 || (minor_count == 20 && i == 10)
+            ? "gridline_major"
+            : "gridline_minor";
+
+        block.appendChild( new_gridline( cls, pos) );
+    }
+
+};
+
+