Index: index.php
===================================================================
RCS file: /cvsroot/moodle/moodle/grade/report/grader/index.php,v
retrieving revision 1.65.2.10
diff -u -r1.65.2.10 index.php
--- index.php	22 Apr 2009 08:40:03 -0000	1.65.2.10
+++ index.php	1 Jun 2009 15:42:22 -0000
@@ -31,7 +31,7 @@
 require_js(array('yui_yahoo', 'yui_dom', 'yui_event', 'yui_container', 'yui_connection', 'yui_dragdrop', 'yui_element'));
 
 
-$courseid      = required_param('id', PARAM_INT);        // course id
+$courseid      = required_param('id',  PARAM_INT);        // course id
 $page          = optional_param('page', 0, PARAM_INT);   // active page
 $perpageurl    = optional_param('perpage', 0, PARAM_INT);
 $edit          = optional_param('edit', -1, PARAM_BOOL); // sticky editting mode
@@ -137,7 +137,8 @@
 
 /// Print header
 $reportname = get_string('modulename', 'gradereport_grader');
-print_grade_page_head($COURSE->id, 'report', 'grader', $reportname, false, null, $buttons, array($CFG->wwwroot . '/lib/yui/container/assets/skins/sam/container.css'));
+// Matt - removed stylesheet
+print_grade_page_head($COURSE->id, 'report', 'grader', $reportname, false, null, $buttons);
 
 echo $report->group_selector;
 echo '<div class="clearer"></div>';
@@ -187,6 +188,7 @@
     print_paging_bar($numusers, $report->page, $studentsperpage, $report->pbarurl);
 }
 
+echo '<div id="hiddentooltiproot">tooltip panel</div>';
 // Print YUI tooltip code
 ?>
 <script type="text/javascript">
@@ -194,14 +196,183 @@
 YAHOO.namespace("graderreport");
 
 function init() {
-    // Get all <td> with class grade
-    var cells = YAHOO.util.Dom.getElementsByClassName('grade', 'td');
-    YAHOO.graderreport.tooltips = new Array(cells.length);
 
-    for (var i = 0; i < cells.length; i++) {
-        YAHOO.graderreport.tooltips[i] = new YAHOO.widget.Tooltip("tt"+i, { context: cells[i], autodismissdelay: 10000000 });
+    // Make single panel that can be dynamically re-rendered wit the right data.
+    YAHOO.graderreport.panelEl = new YAHOO.widget.Panel("tooltipPanel", {
+
+        draggable: false,
+        visible: false,
+        close: false,
+        preventcontextoverlap: true,
+        zIndex: 10000
+        
+    });
+
+    YAHOO.graderreport.panelEl.render(table);
+
+    // needed to make YUI skins work
+    document.body.className += ' yui-skin-sam';
+
+
+    YAHOO.graderreport.mouseoverHandler = function (e) {
+        
+        var tempNode = '';
+        var searchString = '';
+        var tooltipNode = '';
+
+        // get the element that we just moved the mouse over
+        var elTarget = YAHOO.util.Event.getTarget(e);
+        
+        // if it was part of the yui panel, we don't want to redraw yet
+        searchString = /fullname|itemname|feedback/;
+        if (elTarget.className.search(searchString) > -1) {
+            return false;
+        }
+
+        // move up until we are in the actual cell, not any other child div or span
+        while (elTarget.id != 'content') {
+
+            if(elTarget.nodeName.toUpperCase() == "TD") {
+                break;
+            } else {
+                elTarget = elTarget.parentNode;
+            }
+        }
+
+        // only make a tooltip for cells with grades
+        if (elTarget.className.search('grade cell') > -1) {
+
+            // each time we go over a new cell, we need to put it's tooltip into a div to stop it from
+            // popping up on top of the panel. 
+            
+            // don't do anything if we have already made the tooltip div
+            var makeTooltip = true
+            for (var k=0; k < elTarget.childNodes.length; k++) {
+                if (typeof(elTarget.childNodes[k].className) != 'undefined') {
+                    if (elTarget.childNodes[k].className.search('tooltipDiv') > -1) {
+                        makeTooltip =  false;
+                    }
+                }
+            }
+
+            // if need to, make the tooltip div and append it to the cell
+            if (makeTooltip) {
+                tempNode = document.createElement("div");
+                tempNode.className = "tooltipDiv";
+                tempNode.innerHTML = elTarget.title;
+                elTarget.appendChild(tempNode);
+                elTarget.title = '';
+            }
+
+            // Get the tooltip div
+            elChildren = elTarget.childNodes;
+            for (var m=0; m < elChildren.length; m++) {
+                if (typeof(elChildren[m].className) != 'undefined') {
+                    if (elChildren[m].className.search('tooltipDiv') > -1) {
+                        tooltipNode = elChildren[m];
+                        break;
+                    }
+                }
+            }
+
+            //build and show the tooltip
+            YAHOO.graderreport.panelEl.setBody(tooltipNode.innerHTML);
+            YAHOO.graderreport.panelEl.render(elTarget);
+            YAHOO.graderreport.panelEl.cfg.setProperty('context', [elTarget, 'tr', 'tl', ['beforeShow']]);
+            YAHOO.graderreport.panelEl.show();
+            
+        
+        }
+    };
+
+    // only hide the overlay if the mouse has not moved over it
+    YAHOO.graderreport.mouseoutHandler = function (e) {
+
+        var classVar = '';
+        var searchString = '';
+        var newTargetClass = '';
+        var newTarget = YAHOO.util.Event.getRelatedTarget(e);
+        var oldTarget = YAHOO.util.Event.getTarget(e);
+
+        // deals with an error if the mouseout event is over the lower scrollbar
+        try {
+            classVar = newTarget.className;
+        } catch (err) {
+            
+            YAHOO.graderreport.panelEl.hide()
+            
+            return false;
+        }
+       
+        // if we are over any part of the panel, do not hide
+        // do this by walking up the DOM till we reach table level, looking for panel tag
+        while ((typeof(newTarget.id) == 'undefined') || (newTarget.id != 'content')) {
+            try {
+                newTargetClass = newTarget.className;
+            } catch (err) {
+                // we've gone over the scrollbar again
+                YAHOO.graderreport.panelEl.hide()
+                
+                return false;
+            }
+            searchString = /yui-panel/;
+            if (newTargetClass.search(searchString) > -1) {
+                // we're in the panel so don't hide it
+                return false;
+            }
+
+            if (newTarget.nodeName.toUpperCase() == "HTML") {
+                // we missed the user-grades table altogether by moving down off screen to read a long one
+                YAHOO.graderreport.panelEl.hide()
+                
+                break;
+            }
+
+            newTarget = newTarget.parentNode;
+            
+        }
+
+        // no panel so far and we went up to the table level, so we've moved onto a cell       
+        YAHOO.graderreport.panelEl.hide();
+     
+    };
+
+    // attach event listener to the table for mouseover and mouseout
+    var content = document.getElementById('content');
+    YAHOO.util.Event.on(content, 'mouseover', YAHOO.graderreport.mouseoverHandler);
+    YAHOO.util.Event.on(content, 'mouseout',  YAHOO.graderreport.mouseoutHandler);
+
+
+    // This stuff makes the grab and drag happen
+    
+    YAHOO.graderreport.mousedownHandler = function (e) {
+          
+        var table = document.getElementById('user-grades').parentNode;
+        YAHOO.graderreport.x=table.scrollLeft+e.clientX;
+        YAHOO.util.Event.on(table, 'mousemove', YAHOO.graderreport.mousemoveHandler);
+    };
+    
+    YAHOO.graderreport.mousemoveHandler = function (e) {
+        var table = document.getElementById('user-grades').parentNode;
+        table.scrollLeft = -(e.clientX-YAHOO.graderreport.x);
+        return false;
+    };
+    
+    YAHOO.graderreport.mouseupHandler = function (e) {
+        var table = document.getElementById('user-grades').parentNode;
+        YAHOO.util.Event.removeListener(table, 'mousemove');
+    };
+    
+    var table = document.getElementById('user-grades');
+    // only add the listeners and cursor style if there is actually a div to be scrolled.
+    if (table.parentNode.className.search('right_scroll') != -1) {
+        table.style.cursor = 'move';
+        YAHOO.util.Event.on(table,  'mousedown', YAHOO.graderreport.mousedownHandler);
+        YAHOO.util.Event.on(window, 'mouseup',   YAHOO.graderreport.mouseupHandler);
     }
+
 };
+
 YAHOO.util.Event.onDOMReady(init);
 
 </script>