d169f120ae893c9124e4cf9b50182f4372a3f0d3
kate
  Tue Oct 25 17:27:16 2011 -0700
Checking in jquery floating table header plugin, and ENCODE data matrix implementations that now use it
diff --git src/hg/js/encodeDataMatrix.js src/hg/js/encodeDataMatrix.js
index 5ed729f..e5173bb 100644
--- src/hg/js/encodeDataMatrix.js
+++ src/hg/js/encodeDataMatrix.js
@@ -1,38 +1,37 @@
 /* encodeDataMatrix.js - pull experiment table and metadata from server 
       and display in data matrix
 
  Formatted: jsbeautify.py -j
  Syntax checked: jslint indent:4, plusplus: true, continue: true, unparam: true, sloppy: true, browser: true
 */
 /*global $, encodeProject */
 
 $(function () {
     var requests = [
         // Requests to server API
-            encodeProject.serverRequests.experiment,
-        encodeProject.serverRequests.dataType,
-        encodeProject.serverRequests.cellType
-        ],
-        dataType, organism, assembly, server;
+    encodeProject.serverRequests.experiment, encodeProject.serverRequests.dataType, encodeProject.serverRequests.cellType],
+        dataType, organism, assembly, server, axisLabel;
 
     function tableOut(matrix, cellTiers, cellTypeHash, dataGroups, dataTypeTermHash, dataTypeLabelHash) {
         // Create table where rows = cell types and columns are datatypes
         // create table and first row 2 rows (column title and column headers)
         var table, tableHeader, row, td;
+        var elementHeaderLabel = "Functional Element Assays";
+        var cellHeaderLabel = "Cell Types";
 
-        table = $('<table>' + '<tr><td><td class="axisType" colspan=4>Element Types</td></tr>' + '<tr id="columnHeaders"><td class="axisType" title="Click to view information about all cell types"><a href="/cgi-bin/hgEncodeVocab?ra=encode/cv.ra&type=Cell+Line&organism=' + organism + '">Cell Types</td></tr>');
+        table = $('<table id="matrixTable"><thead>' + '<tr id="headerLabelRow"><td></td>' + '<td id="elementHeaderLabel" class="axisType" colspan=6 title="Click to view information about all assays">' + '<a href="/cgi-bin/hgEncodeVocab?ra=encode/cv.ra&type=dataType">' + elementHeaderLabel + '</td></tr>' + '<tr id="columnHeaders">' + '<td id="cellHeaderLabel" class="axisType"' + 'title="Click to view information about all cell types">' + '<a href="/cgi-bin/hgEncodeVocab?ra=encode/cv.ra&type=Cell+Line&organism=' + organism + '">' + cellHeaderLabel + '</td></tr>' + '</thead><tbody>');
         tableHeader = $('#columnHeaders', table);
         $.each(dataGroups, function (i, group) {
             tableHeader.append('<th class="groupType"><div class="verticalText">' + group.label + '</div></th>');
             $.each(group.dataTypes, function (i, dataTypeLabel) {
                 dataType = dataTypeLabelHash[dataTypeLabel].term;
 
                 // prune out datatypes with no experiments
                 if (dataTypeLabelHash[dataTypeLabel].count !== undefined) {
                     tableHeader.append('<th class="elementType" title="' + dataTypeLabelHash[dataTypeLabel].description + '"><div class="verticalText">' + dataTypeLabel + '</div></th>');
                 }
             });
         });
         // add rows with cell type labels and matrix elements for indicating if
         //  there's an experiment 
         $.each(cellTiers, function (i, tier) {
@@ -77,31 +76,60 @@
                             td += dataType;
                             //td += '"><font color=#00994D>';
                             td += '"><font>';
                             td += matrix[cellType][dataType];
                             //td += ".....";
                             td += '</font></a>';
                             td += '</td>';
                         }
                         row.append(td);
                     });
                     table.append(row);
                 });
                 table.append(row);
             });
         });
+        table.append('</tbody>');
         $("body").append(table);
+
+        // use floating-table-header plugin
+        table.floatHeader({
+            cbFadeIn: function (header) {
+                // hide axis labels -- a bit tricy to do so
+                // as special handling needed for X axis label
+                $(".floatHeader #headerLabelRow").remove();
+                $(".floatHeader #cellHeaderLabel").html('');
+
+                // Note: user-defined callback requires 
+                // default actions from floatHeader plugin
+                // implementation (stop+fadeIn)
+                header.stop(true, true);
+                header.fadeIn(100);
+
+                // save label to restore when scrolled back to top
+                //axisLabel = $(".axisType").html();
+                //$(".axisType").html('');
+            }
+/*,
+            cbFadeOut: function (header) {
+                // show elements with class axisType
+                header.stop(true, true)
+                $(".axisType").html(axisLabel);
+                header.fadeOut(100);
+            }
+            */
+        });
     }
 
     function handleServerData(responses) {
         // Main actions, called when loading data from server is complete
         var experiments = responses[0],
             dataTypes = responses[1],
             cellTypes = responses[2],
             dataTypeLabelHash = {},
             dataTypeTermHash = {},
             cellTypeHash = {},
             dataType, cellType, matrix = {},
             dataGroups = {},
             cellTiers, header;
 
         // page-specific variables from calling page