8cb0eb5850ff9883a1a278c1607998f0a6046bcb
max
  Thu Aug 4 08:56:32 2016 -0700
adding internal ability to draw multiple highlights.
refs #14951. There is no way to set these currently in the UI,
as this would be a whole project of its own. Also, in multi-exon
mode, it will only draw the first region, if multiple ones are defined.

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index a8935f4..8f5bcd8 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -4179,41 +4179,45 @@
 	    var newPosition = genomePos.undisguisePosition(position);
 	    var newPos = parsePosition(newPosition);
 	    if (newPos) {
 		pos.chrom = newPos.chrom;
 		pos.start = newPos.start;
 		pos.end   = newPos.end;
 	    }
 	}
     },
 
     highlightRegion: function()
     // highlight vertical region in imgTbl based on hgTracks.highlight (#709).
     {
         var pos;
         var hexColor = '#FFAAAA';
-        $('#highlightItem').remove();
+        $('.highlightItem').remove();
         if (hgTracks.highlight) {
-            pos = parsePositionWithDb(hgTracks.highlight);
+            var hlArray = hgTracks.highlight.split("|"); // support multiple highlight items
+            for(var i = 0; i < hlArray.length; i++) {
+                hlString = hlArray[i];
+                console.log(hlString);
+                pos = parsePositionWithDb(hlString);
                 // UN-DISGUISE
                 imageV2.undisguiseHighlight(pos);
                 if (pos) {
                     pos.start--;  // make start 0-based to match hgTracks.winStart
                     if (pos.color)
                         hexColor = pos.color;
                 }
-        }
+
                 if (pos && pos.chrom === hgTracks.chromName && pos.db === getDb() 
                 &&  pos.start <= hgTracks.imgBoxPortalEnd && pos.end >= hgTracks.imgBoxPortalStart) {
                     var portalWidthBases = hgTracks.imgBoxPortalEnd - hgTracks.imgBoxPortalStart;
                     var portal = $('#imgTbl td.tdData')[0];
                     var leftPixels = $(portal).offset().left + 3; // 3 for borders and cgi item calcs ??
                     var pixelsPerBase = ($(portal).width() - 2) / portalWidthBases;
                     var clippedStartBases = Math.max(pos.start, hgTracks.imgBoxPortalStart);
                     var clippedEndBases = Math.min(pos.end, hgTracks.imgBoxPortalEnd);
                     var widthPixels = (clippedEndBases - clippedStartBases) * pixelsPerBase;
                     if (hgTracks.revCmplDisp)
                         leftPixels += (hgTracks.imgBoxPortalEnd - clippedEndBases) * pixelsPerBase - 1;
                     else
                         leftPixels += (clippedStartBases - hgTracks.imgBoxPortalStart) * pixelsPerBase;
                     // Impossible to get perfect... Okay to overrun by a pixel on each side
                     leftPixels  = Math.floor(leftPixels);
@@ -4224,30 +4228,32 @@
                     }
     
                     var area = jQuery("<div id='highlightItem' class='highlightItem'></div>");
                     $(area).css({ backgroundColor: hexColor, // display: 'none'
                                 left: leftPixels + 'px', top: $('#imgTbl').offset().top + 1 + 'px',
                                 width: widthPixels + 'px',
                                 height: $('#imgTbl').css('height') });
                     $(area).data({leftPixels: leftPixels, widthPixels: widthPixels});// needed by dragScroll
     
                     // Larry originally appended to imgTbl, but discovered that doesn't work on IE 8 and 9.
                     $('body').append($(area)); 
                     // z-index is done in css class, so highlight is beneath transparent data images.
                     // NOTE: ideally highlight would be below transparent blue-lines, but THAT is a  
                     // background-image so z-index can't get below it!  PS/PDF looks better for blue-lines!
                 }
+            }
+        }
     },
 
     backSupport: (window.History.enabled !== undefined), // support of our back button via: 
     history: null,                                     //  jquery.history.js and HTML5 history API
     
     setupHistory: function ()
     {   // Support for back-button using jquery.history.js.
         // Sets up the history and initializes a state.
     
         // Since ajax updates leave the browser cached pages different from the server state, 
         // simple back-button fails.  Using a 'dirty flag' we had forced an update from server,
         // whenever the back button was hit, meaning there was no going back from server-state!
         // NOW using the history API, the back-button triggers a 'statechange' event which can 
         // contain data.  We save the position in the data and ajax update the image when the
         // back-button is pressed.  This works great for going back through ajax-updated position