/**
* @fileoverview
* When this script is included on a page, it will automatically style special tooltips and balloon callouts.
*
* To specify a tooltip, add a title attribute and class="autoTooltip" to any element on the page.
* HTML can NOT be include in a tooltip.
*
* My First Tooltip
*
*
* A balloon callout is displayed like a toolip, but can have HTML in the content.
*
* more info
*
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Ut wisi enim ad minim veniam.
- Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
*
* Notice that the anchor's url is the callout div's ID.
* The class names and markup for balloonControl, balloonCallout and body are very important.
*
* @requires YAHOO.widget.Tooltip, YAHOO.util.Dom, YAHOO.util.Event
*/
PAYPAL.namespace("widget");
/**
* Automatically go through the anchors on the page to add a
* stylized look to the tooltips and balloon callouts.
*/
PAYPAL.widget.Balloons = {
pageLoaded : false,
/**
* Initializes object and anchors on the page
*/
init : function(){
//Overwrites widget CSS classes for the container
YAHOO.widget.Module.CSS_HEADER = "header";
YAHOO.widget.Module.CSS_BODY = "body";
YAHOO.widget.Module.CSS_FOOTER = "footer";
// Tooltips
var tt = [];
var elems = YAHOO.util.Dom.getElementsByClassName("autoTooltip", null, document);
for(var i = 0; i < elems.length; i++){
tt[i] = new YAHOO.widget.Tooltip("autoTooltip"+ i, { context: elems[i],
preventoverlap: true,
showdelay: 0,
autodismissdelay: 10 * 1000,
effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} });
tt[i].align(YAHOO.widget.Overlay.BOTTOM_LEFT, YAHOO.widget.Overlay.TOP_LEFT);
tt[i].beforeShowEvent.subscribe(PAYPAL.widget.Balloons.adjustPosition, { context: elems[i], tooltip: tt[i] });
tt[i].showEvent.subscribe(PAYPAL.widget.Balloons.fixIframeShim, { context: elems[i], tooltip: tt[i] });
elems[i]._balloon = tt[i];
}
// Balloon Callouts
var id, anchors, elem, body, inner;
var callout = [];
anchors = YAHOO.util.Dom.getElementsByClassName("balloonControl", "a", document);
for(var i = 0; i < anchors.length; i++){
id = anchors[i].href;
if(id.indexOf("#") > -1){
id = id.split("#")[1];
elem = document.getElementById(id);
if(elem){
// Extract div content and remove "body" div if it exists
body = elem.innerHTML;
inner = YAHOO.util.Dom.getElementsBy( function(node){
return (YAHOO.util.Dom.hasClass(node, "body") && node.parentNode == elem);
}, "div", elem); // Remove inner 'body'
if(inner.length == 1){
body = inner[0].innerHTML;
}
elem.innerHTML = "";
// Create balloon markup
callout[i] = new YAHOO.widget.Tooltip(elem, { context: anchors[i],
preventoverlap: true,
showdelay: 0,
autodismissdelay: 10 * 1000,
effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} });
callout[i].setBody(body);
callout[i].align(YAHOO.widget.Overlay.BOTTOM_LEFT, YAHOO.widget.Overlay.TOP_LEFT);
callout[i].beforeShowEvent.subscribe(PAYPAL.widget.Balloons.adjustPosition, { context: anchors[i], tooltip: callout[i] });
anchors[i]._balloon = callout[i];
}
}
}
},
/**
* Sets the position static to the context element and
* adds the ttPosOver/ttPosUnder class to the tooltip
* @param {String} type The custom event type 'onShow'
* @param {Array} args Custom event fire args
* @param {Object} elems An object containing the tooltip and
* context (anchor, span, etc) objects
*/
adjustPosition : function(type, args, elems){
var tt = elems.tooltip.element;
var context = elems.context;
// Remove accessAid
YAHOO.util.Dom.removeClass(tt, "accessAid");
// Intersects the primary navigation
var navRegion, ttRegion;
var nav = document.getElementById("navPrimary");
if(nav){
navRegion = YAHOO.util.Region.getRegion(nav);
ttRegion = YAHOO.util.Region.getRegion(elems.tooltip.element);
if((ttRegion.top <= navRegion.top - nav.clientHeight)){
YAHOO.util.Dom.setY(tt, YAHOO.util.Dom.getY(tt) + context.offsetHeight + tt.offsetHeight);
}
}
// Tooltip is above the context element
if(YAHOO.util.Dom.getY(tt) < YAHOO.util.Dom.getY(context)){
YAHOO.util.Dom.addClass(tt, "ttPosOver");
YAHOO.util.Dom.removeClass(tt, "ttPosUnder");
YAHOO.util.Dom.setY(tt, YAHOO.util.Dom.getY(context) - tt.offsetHeight);
}
// Tooltip is under the context element
else{
YAHOO.util.Dom.addClass(tt, "ttPosUnder");
YAHOO.util.Dom.removeClass(tt, "ttPosOver");
YAHOO.util.Dom.setY(tt, YAHOO.util.Dom.getY(context) + context.offsetHeight + 5);
}
// Set static position relative to context
YAHOO.util.Dom.setX(tt, YAHOO.util.Dom.getX(context) - 10);
},
fixIframeShim : function(type, args, elems) {
if (elems.tooltip.iframe) {
YAHOO.util.Dom.setXY(elems.tooltip.iframe, YAHOO.util.Dom.getXY(elems.tooltip.element));
}
},
/**
* Hide balloon callout boxes.
* This is done here to support JS and non-JS browsers
*/
jsEnabled : function(){
YAHOO.util.Event.addListener(window, "load", function(){ PAYPAL.widget.Balloons.pageLoaded = true });
var i = 0;
var hideInterval;
function hideCallouts(){
if(i > 0 && PAYPAL.widget.Balloons.pageLoaded){
clearInterval(hideInterval);
return false;
}
// Get balloon callouts
YAHOO.util.Dom.getElementsBy(function(elem){
// Add accessAid class
if(YAHOO.util.Dom.hasClass(elem, "balloonCallout") && !YAHOO.util.Dom.hasClass(elem, "accessAid")){
YAHOO.util.Dom.addClass(elem, "accessAid");
}
return false;
});
i++;
}
// Hide callouts as they load
hideInterval = setInterval(hideCallouts, 50);
}
}
PAYPAL.widget.Balloons.jsEnabled();
YAHOO.util.Event.addListener(window, "load", PAYPAL.widget.Balloons.init);