ea3693ba624c2bc0e7849cac3dba48ee6a1ddd30
max
  Tue May 23 21:49:46 2017 -0700
fixing multi-highlights not moving during pannings, refs #19463

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index fc40da8..94d8002 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -2057,31 +2057,31 @@
 
 
   //////////////////////////
  //// Drag Scroll code ////
 //////////////////////////
 jQuery.fn.panImages = function(){
     // globals across all panImages
     genomePos.original = genomePos.getOriginalPos(); // redundant but makes certain original is set.
     var leftLimit   = hgTracks.imgBoxLeftLabel * -1;
     var rightLimit  = (hgTracks.imgBoxPortalWidth - hgTracks.imgBoxWidth + leftLimit);
     var only1xScrolling = ((hgTracks.imgBoxWidth - hgTracks.imgBoxPortalWidth) === 0);
     var prevX       = (hgTracks.imgBoxPortalOffsetX + hgTracks.imgBoxLeftLabel) * -1;
     var portalWidth = 0;
     var portalAbsoluteX = 0;
     var savedPosition;
-    var highlightArea  = null; // Used to ensure dragSelect highlight will scroll. 
+    var highlightAreas  = null; // Used to ensure dragSelect highlight will scroll. 
 
     this.each(function(){
 
     var pic;
     var pan;
 
     if ( $(this).is("img") ) {
         pan = $(this).parent("div");
         pic = $(this);
     }
     else if ( $(this).is("div.scroller")  ) {
         pan = $(this);
         pic = $(this).children("img#panImg"); // Get the real pic
     }
 
@@ -2109,31 +2109,31 @@
             else if ( theClient.isIePre11() )     // IE will override map item cursors if this gets set
                 $(this).css('cursor',"");  // normal pointer when not over clickable item
         });
 
         panAdjustHeight(prevX);
 
         pan.mousedown(function(e){
              if (e.which > 1 || e.button > 1 || e.shiftKey || e.metaKey || e.altKey || e.ctrlKey)
                  return true;
             if (mouseIsDown === false) {
                 if (rightClick.menu) {
                     rightClick.menu.hide();
                 }
                 mouseIsDown = true;
                 mouseDownX = e.clientX;
-                highlightArea = $('#highlightItem')[0];
+                highlightAreas = $('.highlightItem');
                 atEdge = (!beyondImage && (prevX >= leftLimit || prevX <= rightLimit));
                 $(document).bind('mousemove',panner);
                 $(document).bind( 'mouseup', panMouseUp);  // Will exec only once
                 return false;
             }
         });
     }
 
     function panner(e) {
         //if (!e) e = window.event;
         if ( mouseIsDown ) {
             var relativeX = (e.clientX - mouseDownX);
 
             if (relativeX !== 0) {
                 if (posting.mapClicksAllowed()) {
@@ -2189,31 +2189,31 @@
             setTimeout(posting.allowMapClicks,50); 
 
             // Outside image?  Then abandon.
             var curY = e.pageY;
             var imgTbl = $('#imgTbl');
             var north = $(imgTbl).offset().top;
             var south = north + $(imgTbl).height();
             if (curY < north || curY > south) {
                 atEdge = false;
                 beyondImage = false;
                 if (savedPosition)
                     genomePos.set(savedPosition);
                 var oldPos = prevX.toString() + "px";
                 $(".panImg").css( {'left': oldPos });
                 $('.tdData').css( {'backgroundPosition': oldPos } );
-                if (highlightArea)
+                if (highlightAreas)
                     imageV2.highlightRegion();
                 return true;
             }
 
             // Do we need to fetch anything?
             if (beyondImage) {
                 if (imageV2.inPlaceUpdate) {
                     var pos = parsePosition(genomePos.get());
                     imageV2.navigateInPlace("position=" +
                             encodeURIComponent(pos.chrom + ":" + pos.start + "-" + pos.end),
                             null, true);
                 } else {
                     document.TrackHeaderForm.submit();
                 }
                 return true; // Make sure the setTimeout below is not called.
@@ -2375,46 +2375,48 @@
         if (dragMask) {
             $(dragMask).height( $(imgTbl).height() );
         }
     }
 
     function dragMaskClear() {        // Clears the dragMask
         $('body').css('cursor','auto');
         var  dragMask = normed($('#dragMask'));
         if (dragMask)
             $(dragMask).hide();
     }
 
     function scrollHighlight(relativeX) 
     // Scrolls the highlight region if one exists
     {        
-        if (highlightArea) {
+        if (highlightAreas) {
+            for (i=0; i<highlightAreas.length; i++) {
+                highlightArea = highlightAreas[i];
                 // Best to have a left and right, then min/max the edges, then set width
                 var hiOffset = $(highlightArea).offset();
                 var hiDefinedLeft  = $(highlightArea).data('leftPixels');
                 var hiDefinedWidth = $(highlightArea).data('widthPixels');
                 hiOffset.left = Math.max(hiDefinedLeft + relativeX,
                                          portalAbsoluteX);
                 var right     = Math.min(hiDefinedLeft + hiDefinedWidth + relativeX,
                                          portalAbsoluteX + portalWidth);
                 var newWidth = Math.max(right - hiOffset.left,0);
                 if (hiDefinedWidth !== newWidth)
                     $(highlightArea).width(newWidth);
                 $(highlightArea).offset(hiOffset);
             }
         }
-
+    }
 
 };
 
   ///////////////////////////////////////
  //// rightClick (aka context menu) ////
 ///////////////////////////////////////
 var rightClick = {
 
     menu: null,
     selectedMenuItem: null,   // currently choosen context menu item (via context menu).
     floatingMenuItem: null,
     currentMapItem:   null,
     supportZoomCodon: false,  // turns on experimental feature (currently only in larry's tree).
     clickedHighlightIdx : null,  // the index (0,1,...) of the highlight item that overlaps the last right-click