// <source lang="javascript">  /*   Cross-browser tooltip support for MediaWiki.      Author: [[User:Lupo]], March 2008   License: Quadruple licensed GFDL, GPL, LGPL and Creative Commons Attribution 3.0 (CC-BY-3.0)      Choose whichever license of these you like best :-)    Based on ideas gleaned from prototype.js and prototip.js.   http://www.prototypejs.org/   http://www.nickstakenburg.com/projects/prototip/   However, since prototype is pretty large, and prototip had some   problems in my tests, this stand-alone version was written.      Note: The fancy effects from scriptaculous have not been rebuilt.   http://script.aculo.us/      See http://commons.wikimedia.org/wiki/MediaWiki_talk:Tooltips.js for   more information including documentation and examples. */  var is_IE       = !!window.ActiveXObject; var is_IE_pre_7 = is_IE                 && (function(agent) {                      var version = new RegExp('MSIE ([\\d.]+)').exec(agent);                      return version ? (parseFloat(version[1]) < 7) : false;                    })(navigator.userAgent);  var EvtHandler = {   listen_to : function (object, node, evt, f)   {     var listener = EvtHandler.make_listener (object, f);     EvtHandler.attach (node, evt, listener);   },      attach : function (node, evt, f)   {     if (node.attachEvent) node.attachEvent ('on' + evt, f);     else if (node.addEventListener) node.addEventListener (evt, f, false);     else node['on' + evt] = f;   },      remove : function (node, evt, f)   {     if (node.detachEvent) node.detachEvent ('on' + evt, f);     else if (node.removeEventListener) node.removeEventListener (evt, f, false);     else node['on' + evt] = null;   },      make_listener : function (obj, listener)   {     // Some hacking around to make sure 'this' is set correctly     var object = obj, f = listener;     return function (evt) { return f.apply (object, [evt || window.event]); }   },    mouse_offset : function ()   {     // IE does some strange things...     // This is adapted from dojo 0.9.0, see http://dojotoolkit.org     if (is_IE) {       var doc_elem = document.documentElement;       if (doc_elem) {         if (typeof (doc_elem.getBoundingClientRect) == 'function') {           var tmp = doc_elem.getBoundingClientRect ();           return {x : tmp.left, y : tmp.top};         } else {           return {x : doc_elem.clientLeft, y : doc_elem.clientTop};         }       }     }     return null;   },      killEvt : function (evt)   {     if (typeof (evt.preventDefault) == 'function') {       evt.stopPropagation ();       evt.preventDefault (); // Don't follow the link     } else if (typeof (evt.cancelBubble) != 'undefined') { // IE...       evt.cancelBubble = true;     }     return false; // Don't follow the link (IE)   }  } // end EvtHandler  var Buttons = {      buttonClasses : {},      createCSS : function (imgs, sep, id)   {     var width   = imgs[0].getAttribute ('width');     var height  = imgs[0].getAttribute ('height');     try {       // The only way to set the :hover and :active properties through Javascript is by       // injecting a piece of CSS. There is no direct access within JS to these properties.       var sel1  = "a" + sep + id;       var prop1 = "border:0; text-decoration:none; background-color:transparent; "                 + "width:" + width + "px; height:" + height + "px; "                 + "display:inline-block; "                 + "background-position:left; background-repeat:no-repeat; "                 + "background-image:url(" + imgs[0].src + ");";       var sel2  = null, prop2 = null, sel3  = null, prop3 = null; // For IE...       var css   = sel1 + ' {' + prop1 + '}\n';                    // For real browsers       if (imgs.length > 1 && imgs[1]) {         sel2  = "a" + sep + id + ":hover";         prop2 = "background-image:url(" + imgs[1].src + ");";         css   = css + sel2 + ' {' + prop2 + '}\n';       }       if (imgs.length > 2 && imgs[2]) {         sel3  = "a" + sep + id + ":active"         prop3 = "background-image:url(" + imgs[2].src + ");";         css   = css + sel3 + ' {' + prop3 + '}\n';       }       // Now insert a style sheet with these properties into the document (or rather, its head).       var styleElem = document.createElement( 'style' );       styleElem.setAttribute ('type', 'text/css');       try {         styleElem.appendChild (document.createTextNode (css));         document.getElementsByTagName ('head')[0].appendChild (styleElem);       } catch (ie_bug) {         // Oh boy, IE has a big problem here         document.getElementsByTagName ('head')[0].appendChild (styleElem); //        try {           styleElem.styleSheet.cssText = css; /*         } catch (anything) {           if (document.styleSheets) {             var lastSheet = document.styleSheets[document.styleSheets.length - 1];                       if (lastSheet && typeof (lastSheet.addRule) != 'undefined') {               lastSheet.addRule (sel1, prop1);               if (sel2) lastSheet.addRule (sel2, prop2);               if (sel3) lastSheet.addRule (sel3, prop3);             }           }         } */       }     } catch (ex) {       return null;     }     if (sep == '.') {       // It's a class: remember the first image       Buttons.buttonClasses[id] = imgs[0];     }     return id;   }, // end createCSS      createClass : function (imgs, id)   {     return Buttons.createCSS (imgs, '.', id);   },      makeButton : function (imgs, id, handler, title)   {     var success     = false;     var buttonClass = null;     var content     = null;     if (typeof (imgs) == 'string') {       buttonClass = imgs;       content     = Buttons.buttonClasses[imgs];       success     = (content != null);     } else {       success     = (Buttons.createCSS (imgs, '#', id) != null);       content     = imgs[0];     }     if (success) {       var lk = document.createElement ('a');       lk.setAttribute         ('title', title || content.getAttribute ('alt') || content.getAttribute ('title') || "");       lk.id = id;       if (buttonClass) lk.className = buttonClass;       if (typeof (handler) == 'string') {         lk.href = handler;       } else {         lk.href = '#'; // Dummy, overridden by the onclick handler below.         lk.onclick = function (evt)           {             var e = evt || window.event; // W3C, IE             try {handler (e);} catch (ex) {};             return EvtHandler.killEvt (e);           };       }       content = content.cloneNode (true);       content.style.visibility = 'hidden';       lk.appendChild (content);       return lk;     } else {       return null;     }   } // end makeButton    } // end Button  var Tooltips = {   // Helper object to force quick closure of a tooltip if another one shows up.   debug    : false,     top_tip  : null,   nof_tips : 0,    new_id : function ()   {     Tooltips.nof_tips++;     return 'tooltip_' + Tooltips.nof_tips;   },    register : function (new_tip)   {     if (Tooltips.top_tip && Tooltips.top_tip != new_tip) Tooltips.top_tip.hide_now ();     Tooltips.top_tip = new_tip;   },      deregister : function (tip)   {     if (Tooltips.top_tip == tip) Tooltips.top_tip = null;   },    close : function ()   {     if (Tooltips.top_tip) {       Tooltips.top_tip.hide_now ();       Tooltips.top_tip = null;     }   } }  var Tooltip = function () {this.initialize.apply (this, arguments);} // This is the Javascript way of creating a class. Methods are added below to Tooltip.prototype; // one such method is 'initialize', and that will be called when a new instance is created. // To create instances of this class, use var t = new Tooltip (...);  // Location constants Tooltip.MOUSE             = 0; // Near the mouse pointer Tooltip.TRACK             = 1; // Move tooltip when mouse pointer moves Tooltip.FIXED             = 2; // Always use a fixed poition (anchor) relative to an element  // Anchors Tooltip.TOP_LEFT          = 1; Tooltip.TOP_RIGHT         = 2; Tooltip.BOTTOM_LEFT       = 3; Tooltip.BOTTOM_RIGHT      = 4;  // Activation constants Tooltip.NONE              = -1; // You must show the tooltip explicitly in this case. Tooltip.HOVER             =  1; Tooltip.FOCUS             =  2; // always uses the FIXED position Tooltip.CLICK             =  4; Tooltip.ALL_ACTIVATIONS   =  7;  // Deactivation constants  Tooltip.MOUSE_LEAVE       =  1; // Mouse leaves target, alternate target, and tooltip Tooltip.LOSE_FOCUS        =  2; // Focus changes away from target Tooltip.CLICK_ELEM        =  4; // Target is clicked Tooltip.CLICK_TIP         =  8; // Makes only sense if not tracked Tooltip.ESCAPE            = 16; Tooltip.ALL_DEACTIVATIONS = 31; Tooltip.LEAVE             = Tooltip.MOUSE_LEAVE | Tooltip.LOSE_FOCUS;  // On IE, use the mouseleave/mouseenter events, which fire only when the boundaries of the // element are left (but not when the element if left because the mouse moved over some // contained element)  Tooltip.mouse_in    = (is_IE ? 'mouseenter' : 'mouseover'); Tooltip.mouse_out   = (is_IE ? 'mouseleave' : 'mouseout');  Tooltip.prototype = {   initialize : function (on_element, tt_content, opt, css)   {     if (!on_element || !tt_content) return;     this.tip_id      = Tooltips.new_id ();     // Registering event handlers via attacheEvent on IE is apparently a time-consuming     // operation. When you add many tooltips to a page, this can add up to a noticeable delay.     // We try to mitigate that by only adding those handlers we absolutely need when the tooltip     // is created: those for showing the tooltip. The ones for hiding it again are added the     // first time the tooltip is actually shown. We thus record which handlers are installed to     // avoid installing them multiple times:     //   event_state: -1 : nothing set, 0: activation set, 1: all set     //   tracks:      true iff there is a mousemove handler for tracking installed.     // This change bought us about half a second on IE (for 13 tooltips on one page). On FF, it     // doesn't matter at all; in Firefoy, addEventListener is fast anyway.     this.event_state = -1;     this.tracks      = false;     // We clone the node, wrap it, and re-add it at the very end of the     // document to make sure we're not within some nested container with     // position='relative', as this screws up all absolute positioning     // (We always position in global document coordinates.)     // In my tests, it appeared as if Nick Stakenburg's "prototip" has     // this problem...     if (typeof (tt_content) == 'function') {       this.tip_creator = tt_content;       this.css         = css;       this.content     = null;     } else {       this.tip_creator = null;       this.css         = null;       if (tt_content.parentNode) {         if (tt_content.ownerDocument != document)           tt_content = document.importNode (tt_content, true);         else           tt_content = tt_content.cloneNode (true);       }       tt_content.id = this.tip_id;       this.content  = tt_content;     }     // Wrap it     var wrapper = document.createElement ('div');     wrapper.className = 'tooltipContent';     // On IE, 'relative' triggers lots of float:right bugs (floats become invisible or are     // mispositioned).     //if (!is_IE) wrapper.style.position = 'relative';     if (this.content) wrapper.appendChild (this.content);     this.popup = document.createElement ('div');     this.popup.style.display = 'none';     this.popup.style.position = 'absolute';     this.popup.style.top = "0px";     this.popup.style.left = "0px";     this.popup.appendChild (wrapper);     // Set the options     this.options = {        mode         : Tooltip.TRACK              // Where to display the tooltip.       ,activate     : Tooltip.HOVER              // When to activate       ,deactivate   : Tooltip.LEAVE | Tooltip.CLICK_ELEM | Tooltip.ESCAPE // When to deactivate       ,mouse_offset : {x: 5, y: 5, dx: 1, dy: 1} // Pixel offsets and direction from mouse pointer       ,fixed_offset : {x:10, y: 5, dx: 1, dy: 1} // Pixel offsets from anchor position       ,anchor       : Tooltip.BOTTOM_LEFT        // Anchor for fixed position       ,target       : null                       // Optional alternate target for fixed display.       ,max_width    :    0.6         // Percent of window width (1.0 == 100%)       ,max_pixels   :    0           // If > 0, maximum width in pixels       ,z_index      : 1000           // On top of everything       ,open_delay   :  500           // Millisecs, set to zero to open immediately       ,hide_delay   : 1000           // Millisecs, set to zero to close immediately       ,close_button : null           // Either a single image, or an array of up to three images                                      // for the normal, hover, and active states, in that order       ,onclose      : null           // Callback to be called when the tooltip is hidden. Should be                                      // a function taking a single argument 'this' (this Tooltip)                                      // an an optional second argument, the event.       ,onopen       : null           // Ditto, called after opening.     };     // The lower of max_width and max_pixels limits the tooltip's width.     if (opt) { // Merge in the options       for (var option in opt) {         if (option == 'mouse_offset' || option == 'fixed_offset') {           try {             for (var attr in opt[option]) {               this.options[option][attr] = opt[option][attr];             }           } catch (ex) {           }         } else           this.options[option] = opt[option];       }     }     // Set up event handlers as appropriate     this.eventShow   = EvtHandler.make_listener (this, this.show);     this.eventToggle = EvtHandler.make_listener (this, this.toggle);     this.eventFocus  = EvtHandler.make_listener (this, this.show_focus);     this.eventClick  = EvtHandler.make_listener (this, this.show_click);     this.eventHide   = EvtHandler.make_listener (this, this.hide);     this.eventTrack  = EvtHandler.make_listener (this, this.track);     this.eventClose  = EvtHandler.make_listener (this, this.hide_now);     this.eventKey    = EvtHandler.make_listener (this, this.key_handler);      this.close_button       = null;     this.close_button_width = 0;     if (this.options.close_button) {       this.makeCloseButton ();       if (this.close_button) {         // Only a click on the close button will close the tip.         this.options.deactivate = this.options.deactivate & ~Tooltip.CLICK_TIP;         // And escape is always active if we have a close button         this.options.deactivate = this.options.deactivate | Tooltip.ESCAPE;         // Don't track, you'd have troubles ever getting to the close button.         if (this.options.mode == Tooltip.TRACK) this.options.mode = Tooltip.MOUSE;         this.has_links = true;       }     }     if (this.options.activate == Tooltip.NONE) {       this.options.activate = 0;     } else {       if ((this.options.activate & Tooltip.ALL_ACTIVATIONS) == 0) {         if (on_element.nodeName.toLowerCase () == 'a')           this.options.activate = Tooltip.CLICK;         else           this.options.activate = Tooltip.HOVER;       }     }     if ((this.options.deactivate & Tooltip.ALL_DEACTIVATIONS) == 0 && !this.close_button)       this.options.deactivate = Tooltip.LEAVE | Tooltip.CLICK_ELEM | Tooltip.ESCAPE;     document.body.appendChild (this.popup);     if (this.content) this.apply_styles (this.content, css); // After adding it to the document     // Clickable links?     if (this.content && this.options.mode == Tooltip.TRACK) {       this.setHasLinks ();       if (this.has_links) {         // If you track a tooltip with links, you'll never be able to click the links         this.options.mode = Tooltip.MOUSE;       }     }     // No further option checks. If nonsense is passed, you'll get nonsense or an exception.     this.popup.style.zIndex = "" + this.options.z_index;     this.target             = on_element;     this.open_timeout_id    = null;     this.hide_timeout_id    = null;     this.size               = {width : 0, height : 0};     this.setupEvents (EvtHandler.attach, 0);     this.ieFix = null;     if (is_IE) {       // Display an invisible IFrame of the same size as the popup beneath it to make popups       // correctly cover "windowed controls" such as form input fields in IE. For IE >=5.5, but       // who still uses older IEs?? The technique is also known as a "shim". A good       // description is at http://dev2dev.bea.com/lpt/a/39       this.ieFix = document.createElement ('iframe');       this.ieFix.style.position = 'absolute';       this.ieFix.style.border   = '0';       this.ieFix.style.margin   = '0';       this.ieFix.style.padding  = '0';       this.ieFix.style.zIndex   = "" + (this.options.z_index - 1); // Below the popup       this.ieFix.tabIndex       = -1;       this.ieFix.frameBorder    = '0';       this.ieFix.style.display  = 'none';       document.body.appendChild (this.ieFix);       this.ieFix.style.filter  = 'alpha(Opacity=0)'; // Ensure transparency     }    },      apply_styles : function (node, css)   {     if (css) {       for (var styledef in css) node.style[styledef] = css[styledef];     }     if (this.close_button) node.style.opacity = "1.0"; // Bug workaround.     // FF doesn't handle the close button at all if it is (partially) transparent...     if (node.style.display == 'none') node.style.display = "";   },    setHasLinks : function ()   {     if (this.close_button) { this.has_links = true; return; }     var lks = this.content.getElementsByTagName ('a');     this.has_links = false;     for (var i=0; i < lks.length; i++) {       var href = lks[i].getAttribute ('href');       if (href && href.length > 0) { this.has_links = true; return; }     }     // Check for form elements     function check_for (within, names)     {       if (names) {         for (var i=0; i < names.length; i++) {           var elems = within.getElementsByTagName (names[i]);           if (elems && elems.length > 0) return true;         }       }       return false;     }     this.has_links = check_for (this.content, ['form', 'textarea', 'input', 'button', 'select']);   },    setupEvents : function (op, state)   {     if (state < 0 || state == 0 && this.event_state < state) {       if (this.options.activate & Tooltip.HOVER)         op (this.target, Tooltip.mouse_in, this.eventShow);       if (this.options.activate & Tooltip.FOCUS)         op (this.target, 'focus', this.eventFocus);       if (   (this.options.activate & Tooltip.CLICK)           && (this.options.deactivate & Tooltip.CLICK_ELEM)) {         op (this.target, 'click', this.eventToggle);       } else {         if (this.options.activate & Tooltip.CLICK)           op (this.target, 'click', this.eventClick);         if (this.options.deactivate & Tooltip.CLICK_ELEM)           op (this.target, 'click', this.eventClose);       }       this.event_state = state;     }     if (state < 0 || state == 1 && this.event_state < state) {       if (this.options.deactivate & Tooltip.MOUSE_LEAVE) {         op (this.target, Tooltip.mouse_out, this.eventHide);         op (this.popup, Tooltip.mouse_out, this.eventHide);         if (this.options.target) op (this.options.target, Tooltip.mouse_out, this.eventHide);       }       if (this.options.deactivate & Tooltip.LOSE_FOCUS)         op (this.target, 'blur', this.eventHide);       if (   (this.options.deactivate & Tooltip.CLICK_TIP)           && (this.options.mode != Tooltip.TRACK))         op (this.popup, 'click', this.eventClose);                      // Some more event handling       if (this.hide_delay > 0) {         if (!(this.options.activate & Tooltip.HOVER))           op (this.popup, Tooltip.mouse_in, this.eventShow);         op (this.popup, 'mousemove', this.eventShow);       }       this.event_state = state;     }     if (state < 0 && this.tracks)       op (this.target, 'mousemove', this.eventTrack);   },      remove: function ()   {     this.hide_now ();     this.setupEvents (EvtHandler.remove, -1);     this.tip_creator = null;     document.body.removeElement (this.popup);     if (this.ieFix) document.body.removeElement (this.ieFix);   },      show : function (evt)   {     this.show_tip (evt, true);   },      show_focus : function (evt) // Show on focus   {     this.show_tip (evt, false);   },      show_click : function (evt)   {     this.show_tip (evt, false);     if (this.target.nodeName.toLowerCase () == 'a') return EvtHandler.killEvt (evt); else return false;   },      toggle : function (evt)   {     if (this.popup.style.display != 'none' && this.popup.style.display != null) {       this.hide_now (evt);     } else {       this.show_tip (evt, true);     }     if (this.target.nodeName.toLowerCase () == 'a') return EvtHandler.killEvt (evt); else return false;   },    show_tip : function (evt, is_mouse_evt)   {     if (this.hide_timeout_id != null) window.clearTimeout (this.hide_timeout_id);     this.hide_timeout_id = null;     if (this.popup.style.display != 'none' && this.popup.style.display != null) return;     if (this.tip_creator) {       // Dynamically created tooltip.       try {         this.content = this.tip_creator (evt);       } catch (ex) {         // Oops! Indicate that something went wrong!         var error_msg = document.createElement ('div');         error_msg.appendChild (           document.createElement ('b').appendChild (             document.createTextNode ('Exception: ' + ex.name)));         error_msg.appendChild(document.createElement ('br'));         error_msg.appendChild (document.createTextNode (ex.message));         if (typeof (ex.fileName) != 'undefined' &&             typeof (ex.lineNumber) != 'undefined') {           error_msg.appendChild(document.createElement ('br'));           error_msg.appendChild (document.createTextNode ('File ' + ex.fileName));           error_msg.appendChild(document.createElement ('br'));           error_msg.appendChild (document.createTextNode ('Line ' + ex.lineNumber));         }         this.content = error_msg;       }       // Our wrapper has at most two children: the close button, and the content. Don't remove       // the close button, if any.       if (this.popup.firstChild.lastChild && this.popup.firstChild.lastChild != this.close_button)         this.popup.firstChild.removeChild (this.popup.firstChild.lastChild);       this.popup.firstChild.appendChild (this.content);       this.apply_styles (this.content, this.css);       if (this.options.mode == Tooltip.TRACK) this.setHasLinks ();     }     // Position it now. It must be positioned before the timeout below!     this.position_tip (evt, is_mouse_evt);     if (Tooltips.debug) {       alert ('Position: x = ' + this.popup.style.left + ' y = ' + this.popup.style.top);     }     this.setupEvents (EvtHandler.attach, 1);     if (this.options.mode == Tooltip.TRACK) {       if (this.has_links) {         if (this.tracks) EvtHandler.remove (this.target, 'mousemove', this.eventTrack);         this.tracks = false;       } else {         if (!this.tracks) EvtHandler.attach (this.target, 'mousemove', this.eventTrack);         this.tracks = true;       }     }     if (this.options.open_delay > 0) {       var obj = this;       this.open_timout_id =          window.setTimeout (function () {obj.show_now (obj);}, this.options.open_delay);     } else       this.show_now (this);   },      show_now : function (elem)   {     if (elem.popup.style.display != 'none' && elem.popup.style.display != null) return;     Tooltips.register (elem);     if (elem.ieFix) {       elem.ieFix.style.top     = elem.popup.style.top;       elem.ieFix.style.left    = elem.popup.style.left;       elem.ieFix.style.width   = elem.size.width + "px";       elem.ieFix.style.height  = elem.size.height + "px";       elem.ieFix.style.display = "";     }     elem.popup.style.display = ""; // Finally show it     if (   (elem.options.deactivate & Tooltip.ESCAPE)         && typeof (elem.popup.focus) == 'function') {       // We need to attach this event globally.       EvtHandler.attach (document, 'keydown', elem.eventKey);     }     elem.open_timeout_id = null;     // Callback     if (typeof (elem.options.onopen) == 'function') elem.options.onopen (elem);   },      track : function (evt)   {     this.position_tip (evt, true);     // Also move the shim!     if (this.ieFix) {       this.ieFix.style.top     = this.popup.style.top;       this.ieFix.style.left    = this.popup.style.left;       this.ieFix.style.width   = this.size.width + "px";       this.ieFix.style.height  = this.size.height + "px";     }   },      size_change : function ()   {     // If your content is such that it changes, make sure this is called after each size change.     // Unfortunately, I have found no way of monitoring size changes of this.popup and then doing     // this automatically. See for instance the "toggle" example (the 12th) on the example page at     // http://commons.wikimedia.org/wiki/MediaWiki:Tooltips.js/Documentation/Examples     if (this.popup.style.display != 'none' && this.popup.style.display != null) {       // We're visible. Make sure the shim gets resized, too!       this.size = {width : this.popup.offsetWidth, height: this.popup.offsetHeight};       if (this.ieFix) {         this.ieFix.style.top     = this.popup.style.top;         this.ieFix.style.left    = this.popup.style.left;         this.ieFix.style.width   = this.size.width + "px";         this.ieFix.style.height  = this.size.height + "px";       }     }   },        position_tip : function (evt, is_mouse_evt)   {     var view = {width  : this.viewport ('Width'),                 height : this.viewport ('Height')};     var off  = {left   : this.scroll_offset ('Left'),                 top    : this.scroll_offset ('Top')};     var x = 0, y = 0;     var offset = null;     // Calculate the position     if (is_mouse_evt && this.options.mode != Tooltip.FIXED) {       var mouse_delta = EvtHandler.mouse_offset ();       if (Tooltips.debug && mouse_delta) {         alert ("Mouse offsets: x = " + mouse_delta.x + ", y = " + mouse_delta.y);       }       x = (evt.pageX || (evt.clientX + off.left - (mouse_delta ? mouse_delta.x : 0)));       y = (evt.pageY || (evt.clientY + off.top - (mouse_delta ? mouse_delta.y : 0)));       offset = 'mouse_offset';     } else {       var tgt = this.options.target || this.target;       var pos = this.position (tgt);       switch (this.options.anchor) {         default:         case Tooltip.BOTTOM_LEFT:           x = pos.x; y = pos.y + tgt.offsetHeight;           break;         case Tooltip.BOTTOM_RIGHT:           x = pos.x + tgt.offsetWidth; y = pos.y + tgt.offsetHeight;           break;         case Tooltip.TOP_LEFT:           x = pos.x; y = pos.y;           break;         case Tooltip.TOP_RIGHT:           x = pos.x + tgt.offsetWidth; y = pos.y;           break;       }       offset = 'fixed_offset';     }          x = x + this.options[offset].x * this.options[offset].dx;     y = y + this.options[offset].y * this.options[offset].dy;      this.size = this.calculate_dimension ();     if (this.options[offset].dx < 0) x = x - this.size.width;     if (this.options[offset].dy < 0) y = y - this.size.height;          // Now make sure we're within the view.     if (x + this.size.width > off.left + view.width) x = off.left + view.width - this.size.width;     if (x < off.left) x = off.left;     if (y + this.size.height > off.top + view.height) y = off.top + view.height - this.size.height;     if (y < off.top) y = off.top;          this.popup.style.top  = y + "px";     this.popup.style.left = x + "px";   },      hide : function (evt)   {     if (this.popup.style.display == 'none') return;     // Get mouse position     var mouse_delta = EvtHandler.mouse_offset ();     var x = evt.pageX          || (evt.clientX + this.scroll_offset ('Left') - (mouse_delta ? mouse_delta.x : 0));     var y = evt.pageY          || (evt.clientY + this.scroll_offset ('Top') - (mouse_delta ? mouse_delta.y : 0));     // We hide it if we're neither within this.target nor within this.content nor within the     // alternate target, if one was given.     if (Tooltips.debug) {       var tp = this.position (this.target);       var pp = this.position (this.popup);       alert ("x = " + x + " y = " + y + '\n' +              "t: " + tp.x + "/" + tp.y + "/" +                this.target.offsetWidth + "/" + this.target.offsetHeight + '\n' +              (tp.n ? "t.m = " + tp.n.nodeName + "/" + tp.n.getAttribute ('margin') + "/"                      + tp.n.getAttribute ('marginTop')                      + "/" + tp.n.getAttribute ('border') + '\n'                    : "") +              "p: " + pp.x + "/" + pp.y + "/" +                this.popup.offsetWidth + "/" + this.popup.offsetHeight + '\n' +              (pp.n ? "p.m = " + pp.n.nodeName + "/" + pp.n.getAttribute ('margin') + "/"                      + pp.n.getAttribute ('marginTop')                      + "/" + pp.n.getAttribute ('border') + '\n'                    : "") +              "e: " + evt.pageX + "/" + evt.pageY + " "                + evt.clientX + "/" + this.scroll_offset ('Left') + " "                + evt.clientY + "/" + this.scroll_offset ('Top') + '\n' +              (mouse_delta ? "m : " + mouse_delta.x + "/" + mouse_delta.y + '\n' : "")              );     }     if (   !this.within (this.target, x, y)         && !this.within (this.popup, x, y)         && (!this.options.target || !this.within (this.options.target, x, y))) {       if (this.open_timeout_id != null) window.clearTimeout (this.open_timeout_id);       this.open_timeout_id = null;       var event_copy = evt;       if (this.options.hide_delay > 0) {         var obj = this;         this.hide_timeout_id =           window.setTimeout (               function () {obj.hide_popup (obj, event_copy);}             , this.options.hide_delay           );       } else         this.hide_popup (this, event_copy);     }   },      hide_popup : function (elem, event)   {     if (elem.popup.style.display == 'none') return; // Already hidden, recursion from onclose?     elem.popup.style.display = 'none';     if (elem.ieFix) elem.ieFix.style.display = 'none';     elem.hide_timeout_id = null;     Tooltips.deregister (elem);     if (elem.options.deactivate & Tooltip.ESCAPE)       EvtHandler.remove (document, 'keydown', elem.eventKey);     // Callback     if (typeof (elem.options.onclose) == 'function') elem.options.onclose (elem, event);   },      hide_now : function (evt)   {     if (this.open_timeout_id != null) window.clearTimeout (this.open_timeout_id);     this.open_timeout_id = null;     var event_copy = evt || null;     this.hide_popup (this, event_copy);     if (evt && this.target.nodeName.toLowerCase == 'a') return EvtHandler.killEvt (evt); else return false;   },      key_handler : function (evt)   {     if (Tooltips.debug) alert ('key evt ' + evt.keyCode);     if (evt.DOM_VK_ESCAPE && evt.keyCode == evt.DOM_VK_ESCAPE || evt.keyCode == 27)       this.hide_now (evt);     return true;   },    setZIndex : function (z_index)   {     if (z_index === null || isNaN (z_index) || z_index < 2) return;     z_index = Math.floor (z_index);     if (z_index == this.options.z_index) return; // No change     if (this.ieFix) {       // Always keep the shim below the actual popup.       if (z_index > this.options.z_index) {         this.popup.style.zIndex = z_index;         this.ieFix.style.zIndex = "" + (z_index - 1);       } else {         this.ieFix.style.zIndex = "" + (z_index - 1);         this.popup.style.zIndex = z_index;       }     } else {       this.popup.style.zIndex = z_index;     }     this.options.z_index = z_index;   },    makeCloseButton : function ()   {     this.close_button = null;     if (!this.options.close_button) return;     var imgs = null;     if (typeof (this.options.close_button.length) != 'undefined')       imgs = this.options.close_button; // Also if it's a string (name of previously created class)     else       imgs = [this.options.close_button];     if (!imgs || imgs.length == 0) return; // Paranoia     var lk = Buttons.makeButton (imgs, this.tip_id + '_button', this.eventClose);       if (lk) {       var width = lk.firstChild.getAttribute ('width');       if (!is_IE) {         lk.style.cssFloat = 'right';       } else {         // IE is incredibly broken on right floats.         var container = document.createElement ('div');         container.style.display      = 'inline';         container.style.styleFloat   = 'right';         container.appendChild (lk);         lk = container;       }       lk.style.paddingTop   = '2px';       lk.style.paddingRight = '2px';       this.popup.firstChild.insertBefore (lk, this.popup.firstChild.firstChild);       this.close_button = lk;       this.close_button_width = parseInt ("" + width, 10);     }   },    within : function (node, x, y)   {     if (!node) return false;     var pos = this.position (node);     return    (x == null || x > pos.x && x < pos.x + node.offsetWidth)            && (y == null || y > pos.y && y < pos.y + node.offsetHeight);   },      position : (function ()   {     // The following is the jQuery.offset implementation. We cannot use jQuery yet in globally     // activated scripts (it has strange side effects for Opera 8 users who can't log in anymore,     // and it breaks the search box for some users). Note that jQuery does not support Opera 8.     // Until the WMF servers serve jQuery by default, this copy from the jQuery 1.3.2 sources is     // needed here. If and when we have jQuery available officially, the whole thing here can be     // replaced by "var tmp = jQuery (node).offset(); return {x:tmp.left, y:tmp.top};"     // Kudos to the jQuery development team. Any errors in this adaptation are my own. (Lupo,     // 2009-08-24).     //   Note: I have virtually the same code also in LAPI.js, but I cannot import that here     // because I know that at least one gadget at the French Wikipedia includes this script here     // directly from here. I'd have to use importScriptURI instead of importScript to keep that     // working, but I'd run the risk that including LAPI at the French Wikipedia might break     // something there. I *hate* it when people hotlink scripts across projects!      var data = null;      function jQuery_init ()     {       data = {};       // Capability check from jQuery.       var body = document.body;       var container = document.createElement('div');       var html =           '<div style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;'         + 'padding:0;width:1px;height:1px;"><div></div></div><table style="position:absolute;'         + 'top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;" '         + 'cellpadding="0" cellspacing="0"><tr><td></td></tr></table>';       var rules = { position: 'absolute', visibility: 'hidden'                    ,top: 0, left: 0                    ,margin: 0, border: 0                    ,width: '1px', height: '1px'                   };       Object.merge (rules, container.style);        container.innerHTML = html;       body.insertBefore(container, body.firstChild);       var innerDiv = container.firstChild;       var checkDiv = innerDiv.firstChild;       var td = innerDiv.nextSibling.firstChild.firstChild;        data.doesNotAddBorder = (checkDiv.offsetTop !== 5);       data.doesAddBorderForTableAndCells = (td.offsetTop === 5);        innerDiv.style.overflow = 'hidden', innerDiv.style.position = 'relative';       data.subtractsBorderForOverflowNotVisible = (checkDiv.offsetTop === -5);        var bodyMarginTop    = body.style.marginTop;       body.style.marginTop = '1px';       data.doesNotIncludeMarginInBodyOffset = (body.offsetTop === 0);       body.style.marginTop = bodyMarginTop;        body.removeChild(container);     };      function jQuery_offset (node)     {       if (node === node.ownerDocument.body) return jQuery_bodyOffset (node);       if (node.getBoundingClientRect) {         var box    = node.getBoundingClientRect ();         var scroll = {x : this.scroll_offset ('Left'), y: this.scroll_offset ('Top')};         return {x : (box.left + scroll.x), y : (box.top + scroll.y)};       }       if (!data) jQuery_init ();       var elem              = node;       var offsetParent      = elem.offsetParent;       var prevOffsetParent  = elem;       var doc               = elem.ownerDocument;       var prevComputedStyle = doc.defaultView.getComputedStyle(elem, null);       var computedStyle;        var top  = elem.offsetTop;       var left = elem.offsetLeft;        while ( (elem = elem.parentNode) && elem !== doc.body && elem !== doc.documentElement ) {         computedStyle = doc.defaultView.getComputedStyle(elem, null);         top -= elem.scrollTop, left -= elem.scrollLeft;         if ( elem === offsetParent ) {           top += elem.offsetTop, left += elem.offsetLeft;           if (   data.doesNotAddBorder               && !(data.doesAddBorderForTableAndCells && /^t(able|d|h)$/i.test(elem.tagName))              )           {             top  += parseInt (computedStyle.borderTopWidth,  10) || 0;             left += parseInt (computedStyle.borderLeftWidth, 10) || 0;           }           prevOffsetParent = offsetParent; offsetParent = elem.offsetParent;         }         if (data.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== 'visible')         {           top  += parseInt (computedStyle.borderTopWidth,  10) || 0;           left += parseInt (computedStyle.borderLeftWidth, 10) || 0;         }         prevComputedStyle = computedStyle;       }        if (prevComputedStyle.position === 'relative' || prevComputedStyle.position === 'static') {         top  += doc.body.offsetTop;         left += doc.body.offsetLeft;       }       if (prevComputedStyle.position === 'fixed') {         top  += Math.max (doc.documentElement.scrollTop, doc.body.scrollTop);         left += Math.max (doc.documentElement.scrollLeft, doc.body.scrollLeft);       }       return {x: left, y: top};                 }      function jQuery_bodyOffset (body)     {       if (!data) jQuery_init();       var top = body.offsetTop, left = body.offsetLeft;       if (data.doesNotIncludeMarginInBodyOffset) {         var styles;         if (   body.ownerDocument.defaultView             && body.ownerDocument.defaultView.getComputedStyle)         { // Gecko etc.           styles = body.ownerDocument.defaultView.getComputedStyle (body, null);           top  += parseInt (style.getPropertyValue ('margin-top' ), 10) || 0;           left += parseInt (style.getPropertyValue ('margin-left'), 10) || 0;         } else {           function to_px (element, val) {             // Convert em etc. to pixels. Kudos to Dean Edwards; see             // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291             if (!/^\d+(px)?$/i.test (val) && /^\d/.test (val) && body.runtimeStyle) {               var style                 = element.style.left;               var runtimeStyle          = element.runtimeStyle.left;               element.runtimeStyle.left = element.currentStyle.left;               element.style.left        = result || 0;               val = elem.style.pixelLeft + "px";               element.style.left        = style;               element.runtimeStyle.left = runtimeStyle;             }             return val;           }           style = body.currentStyle || body.style;           top  += parseInt (to_px (body, style.marginTop ), 10) || 0;           left += parseInt (to_px (body, style.marginleft), 10) || 0;         }       }       return {x: left, y: top};     }      return jQuery_offset;   })(),    scroll_offset : function (what)   {     var s = 'scroll' + what;     return (document.documentElement ? document.documentElement[s] : 0)            || document.body[s] || 0;   },    viewport : function (what)   {     var s = 'client' + what;     return (document.documentElement ? document.documentElement[s] : 0) || document.body[s] || 0;   },     calculate_dimension : function ()   {     if (this.popup.style.display != 'none' && this.popup.style.display != null) {       return {width : this.popup.offsetWidth, height : this.popup.offsetHeight};     }     // Must display it... but position = 'absolute' and visibility = 'hidden' means     // the user won't notice it.     var view_width = this.viewport ('Width');     this.popup.style.top        = "0px";     this.popup.style.left       = "0px";     // Remove previous width as it may change with dynamic tooltips     this.popup.style.width      = "";     this.popup.style.maxWidth   = "";     this.popup.style.overflow   = 'hidden';     this.popup.style.visibility = 'hidden';     // Remove the close button, otherwise the float will always extend the box to     // the right edge.     if (this.close_button)       this.popup.firstChild.removeChild (this.close_button);     this.popup.style.display = "";   // Display it. Now we should have a width     var w = this.popup.offsetWidth;     var h = this.popup.offsetHeight;     var limit = Math.round (view_width * this.options.max_width);     if (this.options.max_pixels > 0 && this.options.max_pixels < limit)       limit = this.options.max_pixels;     if (w > limit) {       w = limit;       this.popup.style.width    = "" + w + "px";       this.popup.style.maxWidth = this.popup.style.width;       if (this.close_button) {         this.popup.firstChild.insertBefore           (this.close_button, this.popup.firstChild.firstChild);       }     } else {       this.popup.style.width    = "" + w + "px";       this.popup.style.maxWidth = this.popup.style.width;       if (this.close_button) {         this.popup.firstChild.insertBefore           (this.close_button, this.popup.firstChild.firstChild);       }       if (h != this.popup.offsetHeight) {         w =  w + this.close_button_width;             this.popup.style.width    = "" + w + "px";         this.popup.style.maxWidth = this.popup.style.width;       }     }     var size = {width : this.popup.offsetWidth, height : this.popup.offsetHeight};     this.popup.style.display = 'none';       // Hide it again     this.popup.style.visibility = "";     return size;   }      } // end Tooltip  // </source>