8a3891b32fa630eddb3808ab704836d5c9e1ffe8
larrym
  Sun Jul 10 20:58:40 2011 -0700
move javascript globals from hiddens to an object
diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index 0eb6a12..3f4f162 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -1,27 +1,23 @@
 // Javascript for use in hgTracks CGI
 
 var debug = false;
 var originalPosition;
 var originalSize;
 var originalCursor;
 var originalMouseOffset = {x:0, y:0};
-var clickClipHeight;
-var revCmplDisp;
-var insideX;
 var startDragZoom = null;
-var newWinWidth;
 var imageV2 = false;
 var imgBoxPortal = false;
 var blockUseMap = false;
 var mapItems;
 var trackImg;               // jQuery element for the track image
 var trackImgTbl;            // jQuery element used for image table under imageV2
 var imgAreaSelect;          // jQuery element used for imgAreaSelect
 var originalImgTitle;
 var autoHideSetting = true; // Current state of imgAreaSelect autoHide setting
 var selectedMenuItem;       // currently choosen context menu item (via context menu).
 var browser;                // browser ("msie", "safari" etc.)
 var mapIsUpdateable = true;
 var currentMapItem;
 var floatingMenuItem;
 var visibilityStrsOrder = new Array("hide", "dense", "full", "pack", "squish");     // map browser numeric visibility codes to strings
@@ -113,122 +109,112 @@
     if(size) {
         $('#size').text(size);
     }
 }
 
 function checkPosition(img, selection)
 {
 // return true if user's selection is still w/n the img (including some slop).
     var imgWidth = jQuery(img).width();
     var imgHeight = jQuery(img).height();
     var imgOfs = jQuery(img).offset();
     var slop = 10;
 
     // We ignore clicks in the gray tab and track title column (we really should suppress all drag activity there,
     // but I don't know how to do that with imgAreaSelect).
-    var leftX = revCmplDisp ? imgOfs.left - slop : imgOfs.left + insideX - slop;
-    var rightX = revCmplDisp ? imgOfs.left + imgWidth - insideX + slop : imgOfs.left + imgWidth + slop;
+    var leftX = hgTracks.revCmplDisp ? imgOfs.left - slop : imgOfs.left + hgTracks.insideX - slop;
+    var rightX = hgTracks.revCmplDisp ? imgOfs.left + imgWidth - hgTracks.insideX + slop : imgOfs.left + imgWidth + slop;
 
     return (selection.event.pageX >= leftX) && (selection.event.pageX < rightX)
         && (selection.event.pageY >= (imgOfs.top - slop)) && (selection.event.pageY < (imgOfs.top + imgHeight + slop));
 }
 
 function pixelsToBases(img, selStart, selEnd, winStart, winEnd)
 // Convert image coordinates to chromosome coordinates
 {
-var insideX = parseInt(document.getElementById("hgt.insideX").value);
-var imgWidth = jQuery(img).width() - insideX;
-var width = winEnd - winStart;
+var imgWidth = jQuery(img).width() - hgTracks.insideX;
+var width = hgTracks.winEnd - hgTracks.winStart;
 var mult = width / imgWidth;   // mult is bp/pixel multiplier
 var startDelta;                // startDelta is how many bp's to the right/left
-if(revCmplDisp) {
+if(hgTracks.revCmplDisp) {
     var x1 = Math.min(imgWidth, selStart);
     startDelta = Math.floor(mult * (imgWidth - x1));
 } else {
-    var x1 = Math.max(insideX, selStart);
-    startDelta = Math.floor(mult * (x1 - insideX));
+    var x1 = Math.max(hgTracks.insideX, selStart);
+    startDelta = Math.floor(mult * (x1 - hgTracks.insideX));
 }
 var endDelta;
-if(revCmplDisp) {
+if(hgTracks.revCmplDisp) {
     endDelta = startDelta;
     var x2 = Math.min(imgWidth, selEnd);
     startDelta = Math.floor(mult * (imgWidth - x2));
 } else {
-    var x2 = Math.max(insideX, selEnd);
-    endDelta = Math.floor(mult * (x2 - insideX));
+    var x2 = Math.max(hgTracks.insideX, selEnd);
+    endDelta = Math.floor(mult * (x2 - hgTracks.insideX));
 }
-var newStart = winStart + startDelta;
-var newEnd = winStart + 1 + endDelta;
+var newStart = hgTracks.winStart + startDelta;
+var newEnd = hgTracks.winStart + 1 + endDelta;
 if(newEnd > winEnd) {
     newEnd = winEnd;
 }
 return {chromStart : newStart, chromEnd : newEnd};
 }
 
 function selectionPixelsToBases(img, selection)
 // Convert selection x1/x2 coordinates to chromStart/chromEnd.
 {
-var winStart = parseInt(document.getElementById("hgt.winStart").value);
-var winEnd = parseInt(document.getElementById("hgt.winEnd").value);
-return pixelsToBases(img, selection.x1, selection.x2, winStart, winEnd);
+return pixelsToBases(img, selection.x1, selection.x2, hgTracks.winStart, hgTracks.winEnd);
 }
 
 function updatePosition(img, selection, singleClick)
 {
-var chromName = document.getElementById("hgt.chromName").value;
-var winStart = parseInt(document.getElementById("hgt.winStart").value);
-var winEnd = parseInt(document.getElementById("hgt.winEnd").value);
-var pos = pixelsToBases(img, selection.x1, selection.x2, winStart, winEnd);
-if(typeof imgBoxPortalStart != "undefined" && imgBoxPortalStart) {
-    winStart = imgBoxPortalStart;
-    winEnd = imgBoxPortalEnd;
-}
+    var pos = pixelsToBases(img, selection.x1, selection.x2, hgTracks.winStart, hgTracks.winEnd);
 // singleClick is true when the mouse hasn't moved (or has only moved a small amount).
 if(singleClick) {
     var center = (pos.chromStart + pos.chromEnd)/2;
-    pos.chromStart = Math.floor(center - newWinWidth/2);
-    pos.chromEnd = pos.chromStart + newWinWidth;
+        pos.chromStart = Math.floor(center - hgTracks.newWinWidth/2);
+        pos.chromEnd = pos.chromStart + hgTracks.newWinWidth;
 }
-setPositionByCoordinates(chromName, pos.chromStart+1, pos.chromEnd);
+    setPositionByCoordinates(hgTracks.chromName, pos.chromStart+1, pos.chromEnd);
 return true;
 }
 
 function selectChange(img, selection)
 {
     initVars();
     if(selection.x1 != selection.x2) { // TODO: Larry could you examine this?
         if(checkPosition(img, selection)) {
             updatePosition(img, selection, false);
             jQuery('body').css('cursor', originalCursor);
         } else {
             jQuery('body').css('cursor', 'not-allowed');
         }
     }
     return true;
 }
 
 function selectEnd(img, selection)
 {
     var now = new Date();
     var doIt = false;
     if(originalCursor != null)
         jQuery('body').css('cursor', originalCursor);
     // ignore releases outside of the image rectangle (allowing a 10 pixel slop)
     if(autoHideSetting && checkPosition(img, selection)) {
        // ignore single clicks that aren't in the top of the image (this happens b/c the clickClipHeight test in selectStart
        // doesn't occur when the user single clicks).
-       doIt = startDragZoom != null || selection.y1 <= clickClipHeight;
+       doIt = startDragZoom != null || selection.y1 <= hgTracks.clickClipHeight;
     }
     if(doIt) {
         // startDragZoom is null if mouse has never been moved
 	if(updatePosition(img, selection, (selection.x2 == selection.x1) || startDragZoom == null || (now.getTime() - startDragZoom) < 100)) {
             jQuery('body').css('cursor', 'wait');
 	    document.TrackHeaderForm.submit();
 	}
     } else {
         setPosition(originalPosition, originalSize);
         originalPosition = originalSize = null;
 //        if(mapHtml) {
 //            $('#map').append(mapHtml);
 //        }
     }
 //    mapHtml = null;
@@ -282,71 +268,62 @@
                 function (e) {
                     mapEvent(e);
                 }
             );
             trackImg.mousedown(
                 function (e) {
                     mapMouseDown(e);
                 }
             );
         }
     }
 });
 
 function loadImgAreaSelect(firstTime)
 {
-    var rulerEle = document.getElementById("hgt.rulerClickHeight");
-    var dragSelectionEle = document.getElementById("hgt.dragSelection");
-
     // disable if ruler is not visible.
-    if((dragSelectionEle != null) && (dragSelectionEle.value == '1') && (rulerEle != null)) {
+    if(typeof(hgTracks) != "undefined" && hgTracks.dragSelection && hgTracks.rulerClickHeight > 0) {
         var imgHeight = 0;
         trackImg = $('#img_data_ruler');
 
         if(trackImg == undefined || trackImg.length == 0) {  // Revert to old imageV1
             trackImg = $('#trackMap');
             imgHeight = jQuery(trackImg).height();
         } else {
             imageV2   = true;
             trackImgTbl = $('#imgTbl');
             imgHeight = trackImg.height();
             // XXXX Tim, I think we should get height from trackImgTbl, b/c it automatically adjusts as we add/delete items.
             imgHeight = trackImgTbl.height();
         }
 
-        clickClipHeight = parseInt(rulerEle.value);
-        newWinWidth = parseInt(document.getElementById("hgt.newWinWidth").value);
-        revCmplDisp = parseInt(document.getElementById("hgt.revCmplDisp").value) == 0 ? false : true;
-        insideX = parseInt(document.getElementById("hgt.insideX").value);
-
         imgAreaSelect = jQuery((trackImgTbl || trackImg).imgAreaSelect({ selectionColor: 'blue', outerColor: '',
             minHeight: imgHeight, maxHeight: imgHeight,
             onSelectStart: selectStart, onSelectChange: selectChange, onSelectEnd: selectEnd,
             autoHide: autoHideSetting, movable: false,
-            clickClipHeight: clickClipHeight}));
+            clickClipHeight: hgTracks.rulerClickHeight}));
     }
 }
 
 function makeItemsEnd(img, selection)
 {
 var image = $(img);
 var imageId = image.attr('id');
 var trackName = imageId.substring('img_data_'.length);
-var chrom = document.getElementById("hgt.chromName").value;
 var pos = selectionPixelsToBases(image, selection);
 var command = document.getElementById('hgt_doJsCommand');
-command.value = "makeItems " + trackName + " " + chrom + " " + pos.chromStart + " " + pos.chromEnd;
+command.value = "makeItems " + trackName + " " + hgTracks.chromName + " " + pos.chromStart + " " + pos.chromEnd;
 document.TrackHeaderForm.submit();
 return true;
 }
 
 function setUpMakeItemsDrag(trackName)
 {
 // Set up so that they can drag out to define a new item on a makeItems track.
 var img = $("#img_data_" + trackName);
 if(img != undefined && img.length != 0) {
     var trackImgTbl = $('#imgTbl');
     var imgHeight = trackImgTbl.height();
     jQuery(img.imgAreaSelect( { selectionColor: 'green', outerColor: '',
 	minHeight: imgHeight, maxHeight: imgHeight, onSelectEnd: makeItemsEnd,
 	autoHide: true, movable: false}));
     }
@@ -473,33 +450,31 @@
                     if( isWithin(chr.left,pxUp,chr.right+1) ) {
 
                         selRange.beg = convertToBases(pxDown);
                         selRange.end = convertToBases(pxUp);
 
                         if(Math.abs(selRange.end - selRange.beg) < 20)
                             mouseHasMoved = false; // Drag so small: treat as simple click
                         else
                             dontAsk = false;
                     }
                     //else warn("chromIdeo("+chr.name+") NOT WITHIN HORIZONTAL RANGE\n selected range (pix):"+pxDown+"-"+pxUp+" chrom range (pix):"+chr.left+"-"+chr.right);
                 }
                 if(mouseHasMoved == false) { // Not else because small drag turns this off
 
                     hiliteShow(pxUp,pxUp);
-                    var curBeg = parseInt($("#hgt\\.winStart").val());  // Note the escaped '.'
-                    var curEnd = parseInt($("#hgt\\.winEnd").val());
-                    var curWidth = curEnd - curBeg;
+                    var curWidth = hgTracks.winEnd - hgTracks.winStart;
                     selRange.beg = convertToBases(pxUp) - Math.round(curWidth/2); // Notice that beg is based upon up position
                     selRange.end  = selRange.beg + curWidth;
                 }
                 if(selRange.end > -1) {
                     // prompt, then submit for new position
                     selRange = rangeNormalizeToChrom(selRange,chr);
                     if(mouseHasMoved == false) { // Update highlight by converting bp back to pix
                         pxDown = convertFromBases(selRange.beg)
                         pxUp = convertFromBases(selRange.end)
                         hiliteShow(pxDown,pxUp);
                     }
                     //if((selRange.end - selRange.beg) < 50000)
                     //    dontAsk = true;
                     if(dontAsk || confirm("Jump to new position:\n\n"+chr.name+":"+commify(selRange.beg)+"-"+commify(selRange.end)+" size:"+commify(selRange.width)) ) {
                         setPositionByCoordinates(chr.name, selRange.beg, selRange.end)
@@ -1073,31 +1048,31 @@
         // Updates the 'position/search" display with change due to panning
         var portalWidthBases = imgBoxPortalEnd - imgBoxPortalStart;
         var portalScrolledX  = (imgBoxPortalOffsetX+imgBoxLeftLabel) + newOffsetX;
 
         var newPortalStart = imgBoxPortalStart - Math.round(portalScrolledX*imgBoxBasesPerPixel); // As offset goes down, bases seen goes up!
         if( newPortalStart < imgBoxChromStart && bounded)     // Stay within bounds
             newPortalStart = imgBoxChromStart;
         var newPortalEnd = newPortalStart + portalWidthBases;
         if( newPortalEnd > imgBoxChromEnd && bounded) {
             newPortalEnd = imgBoxChromEnd;
             newPortalStart = newPortalEnd - portalWidthBases;
         }
         if(newPortalStart > 0) {
             // XXXX ? imgBoxPortalStart = newPortalStart;
             // XXXX ? imgBoxPortalEnd = newPortalEnd;
-            var newPos = document.getElementById("hgt.chromName").value + ":" + commify(newPortalStart) + "-" + commify(newPortalEnd);
+            var newPos = hgTracks.chromName + ":" + commify(newPortalStart) + "-" + commify(newPortalEnd);
             setPosition(newPos, (newPortalEnd - newPortalStart + 1));
         }
         return true;
     }
     function mapTopAndBottom(mapName,left,right)
     {
     // Find the top and bottom px given left and right boundaries
         var span = { top: -10, bottom: -10 };
         var items = $("map[name='"+mapName+"']").children();
         if($(items).length>0) {
             $(items).each(function(t) {
                 var loc = this.coords.split(",");
                 var aleft   = parseInt(loc[0]);
                 var aright  = parseInt(loc[2]);
                 if(aleft < right && aright >= left) {
@@ -1593,31 +1568,31 @@
 function contextMenuHitFinish(menuItemClicked, menuObject, cmd, args)
 {
 // dispatcher for context menu hits
     var id = selectedMenuItem.id;
     if(menuObject.shown) {
         // showWarning("Spinning: menu is still shown");
         setTimeout(function() { contextMenuHitFinish(menuItemClicked, menuObject, cmd); }, 10);
         return;
     }
     if(cmd == 'selectWholeGene' || cmd == 'getDna') {
             // bring whole gene into view or redirect to DNA screen.
             var href = selectedMenuItem.href;
             var chromStart, chromEnd;
             var a = /hgg_chrom=(\w+)&/.exec(href);
             // Many links leave out the chrom (b/c it's in the server side cart as "c")
-            var chrom = document.getElementById("hgt.chromName").value;
+            var chrom = hgTracks.chromName;
             if(a) {
                 if(a && a[1])
                     chrom = a[1];
                 a = /hgg_start=(\d+)/.exec(href);
                 if(a && a[1])
                     // XXXX does chromStart have to be incremented by 1?
                     chromStart = a[1];
                 a = /hgg_end=(\d+)/.exec(href);
                 if(a && a[1])
                     chromEnd = a[1];
             } else {
                 // a = /hgc.*\W+c=(\w+)/.exec(href);
                 a = /hgc.*\W+c=(\w+)/.exec(href);
                 if(a && a[1])
                     chrom = a[1];
@@ -2503,35 +2478,36 @@
           }
     } else {
         if(imageV2) {
             // We update row's one at a time (updating the whole imgTable at one time doesn't work in IE).
             for (id in trackDbJson) {
                 if(!updateTrackImgForId(response, id)) {
                     showWarning("Couldn't parse out new image for id: " + id);
                     //alert("Couldn't parse out new image for id: " + id+"BR"+response);  // Very helpful
                 }
             }
             // parse out and reset position info.
             a = /<INPUT [^>]*NAME=["']position['"] VALUE=['"]([^'"]+)/.exec(response);
             if(a != null && a[1] != null) {
                 var o = parsePosition(a[1]);
                 setPosition(a[1], commify(o.end - o.start + 1));
-                $("#hgt\\.winStart").val(o.start - 1);
-                $("#hgt\\.winEnd").val(o.end);
+                hgTracks.winStart = o.start - 1;
+                hgTracks.winEnd = o.end;
             } else {
                 showWarning("Couldn't parse out new position info");
             }
+            abort("This is broken (needs to be fixed to pull new variable values out of the response)");
             a = /<input [^>]*id=["']hgt\.newWinWidth['"][^>]*value=['"]([^'"]+)/.exec(response);
             if(a != null && a[1] != null) {
                 $("#hgt\\.newWinWidth").val(a[1]);
             }
             afterImgTblReload();
         } else {
             a= /<IMG([^>]+SRC[^>]+id='trackMap[^>]*)>/.exec(response);
             // Deal with a is null
             if(a[1]) {
                     var b = /WIDTH\s*=\s*['"]?(\d+)['"]?/.exec(a[1]);
                     var width = b[1];
                     b = /HEIGHT\s*=\s*['"]?(\d+)['"]?/.exec(a[1]);
                     var height = b[1];
                     b = /SRC\s*=\s*"([^")]+)"/.exec(a[1]);
                     var src = b[1];