app/jquery/jquery-bt-0.7.js

   1 /*
   2  * jQuery Beauty Tips plugin
   3  * Version 0.7  (10/20/2008)
   4  * @requires jQuery v1.2+ (not fully tested on versions prior to 1.2.6)
   5  *
   6  * Dual licensed under the MIT and GPL licenses:
   7  * http://www.opensource.org/licenses/mit-license.php
   8  * http://www.gnu.org/licenses/gpl.html
   9  *
  10  * No guarantees, warranties, or promises of any kind
  11  *
  12  */
  13
  14 /**
  15  * @name Beauty Tips
  16  * @type jQuery
  17  * @cat Plugins/bt
  18  * @return jQuery
  19  * @author Jeff Robbins - Lullabot - http://www.lullabot.com
  20  *
  21  * @credit Inspired by Karl Swedberg's ClueTip
  22  *    (http://plugins.learningjquery.com/cluetip/), which in turn was inspired
  23  *    by Cody Lindley's jTip (http://www.codylindley.com)
  24  *
  25  * @fileoverview
  26  * Beauty Tips is a jQuery tooltips plugin which uses the canvas drawing element
  27  * in the HTML5 spec in order to dynamically draw tooltip "talk bubbles" around
  28  * the descriptive help text associated with an item. This is in many ways
  29  * similar to Google Maps which both provides similar talk-bubbles and uses the
  30  * canvas element to draw them.
  31  *
  32  * The canvas element is supported in modern versions of FireFox, Safari, and
  33  * Opera. However, Internet Explorer needs a separate library called ExplorerCanvas
  34  * included on the page in order to support canvas drawing functions. ExplorerCanvas
  35  * was created by Google for use with their web apps and you can find it here:
  36  * http://excanvas.sourceforge.net/
  37  *
  38  * Beauty Tips was written to be simple to use and pretty. All of its options
  39  * are documented at the bottom of this file and defaults can be overwritten
  40  * globally for the entire page, or individually on each call.
  41  *
  42  * By default each tooltip will be positioned on the side of the target element
  43  * which has the most free space. This is affected by the scroll position and
  44  * size of the current window, so each Beauty Tip is redrawn each time it is
  45  * displayed. It may appear above an element at the bottom of the page, but when
  46  * the page is scrolled down (and the element is at the top of the page) it will
  47  * then appear below it. Additionally, positions can be forced or a preferred
  48  * order can be defined. See examples below.
  49  *
  50  * Usage
  51  * The function can be called in a number of ways.
  52  * $(selector).bt();
  53  * $(selector).bt('Content text');
  54  * $(selector).bt('Content text', {option1: value, option2: value});
  55  * $(selector).bt({option1: value, option2: value});
  56  *
  57  * Some examples:
  58  *
  59  * @example
  60  * $('[title]').bt();
  61  * This is probably the simplest example. It will go through the page finding
  62  * every element which has a title attribute and give it a Beauty Tips popup
  63  * which gets fired on hover.
  64  *
  65  * @example
  66  * $('h2').bt('I am an H2 element!', {trigger: 'click', positions: 'top'});
  67  * When any H2 element on the page is clicked on, a tip will appear above it.
  68  *
  69  * @example
  70  * $('a[href]').bt({
  71  *  titleSelector: "attr('href')",
  72  *  fill: 'red',
  73  *  cssStyles: {color: 'white', fontWeight: 'bold', width: 'auto'},
  74  *  width: 400,
  75  *  padding: 10,
  76  *  cornerRadius: 10,
  77  *  animate: true,
  78  *  spikeLength: 15,
  79  *  spikeGirth: 5,
  80  *  positions: ['left', 'right', 'bottom'],
  81  *  });
  82  * This will find all <a> tags and display a red baloon with bold white text
  83  * containing the href link. The box will be a variable width up to 400px with
  84  * rounded corners and will fade in and animate position toward the target
  85  * object when appearing. The script will try to position the box to the left,
  86  * then to the right, and finally it will place it on the bottom if it does not
  87  * fit elsewhere.
  88  *
  89  * @example
  90  * $('#my-table td[title]').bt({
  91  *  preShow: function() {
  92  *    $(this).data('origBG', $(this).css('background-color'));
  93  *    $(this).css('background-color', 'yellow');
  94  *  },
  95  *  postHide: function() {
  96  *    $(this).css('background-color', $(this).data('origBG'));
  97  *  }
  98  * });
  99  * Find every table cell within #mytable with a title attribute. Hilight the cell
 100  * yellow before displaying the BeautyTip. Restore it to its original background
 101  * when hiding/removing the BeautyTip.
 102  *
 103  * @example
 104  * $().bt.defaults.fill = 'rgba(102, 102, 255. .8)';
 105  * $(selector).bt();
 106  * All bubbles will be filled with a semi-transparent light-blue background
 107  * unless otherwise specified.
 108  *
 109  */
 110 jQuery.fn.bt = function(content, options) {
 111
 112   if (typeof content != 'string') {
 113     var contentSelect = true;
 114     options = content;
 115     content = false;
 116   }
 117   else {
 118     var contentSelect = false;
 119   }
 120
 121   var tooltips_pool = [];
 122
 123
 124   return this.each(function(index) {
 125
 126     tooltips_pool.push(this);
 127
 128     var opts = jQuery.extend(false, jQuery.fn.bt.defaults, options);
 129
 130     // clean up the options
 131     opts.spikeLength = numb(opts.spikeLength);
 132     opts.spikeGirth = numb(opts.spikeGirth);
 133     opts.overlap = numb(opts.overlap);
 134
 135     var turnOn = function () {
 136
 137       for (var x in tooltips_pool) {
 138         turnOff.apply(tooltips_pool[x]);
 139       }
 140
 141       if (typeof $(this).data('bt-box') == 'object') {
 142         // if there's already a popup, remove it before creating a new one.
 143         turnOff.apply(this);
 144       }
 145
 146       // trigger preShow function
 147       opts.preShow.apply(this);
 148
 149       if (contentSelect) {
 150         // bizarre, I know
 151         if (opts.killTitle) {
 152           // if we've killed the title attribute, it's been stored in 'bt-xTitle' so get it..
 153           $(this).attr('title', $(this).attr('bt-xTitle'));
 154         }
 155         // then evaluate the selector... title is now in place
 156         content = eval('$(this).' + opts.titleSelector);
 157         if (opts.killTitle) {
 158           // now remove the title again, so we don't get double tips
 159           $(this).removeAttr('title');
 160         }
 161       }
 162
 163       var offsetParent = $(this).offsetParent();
 164       var pos = $(this).btPosition();
 165       var top = numb(pos.top) + numb($(this).css('margin-top')); // IE can return 'auto' for margins
 166       var left = numb(pos.left) + numb($(this).css('margin-left'));
 167       var width = $(this).outerWidth();
 168       var height = $(this).outerHeight();
 169
 170       // get the dimensions of the text box
 171       var $text = $('<div class="bt-content"></div>').append(content).css({padding: opts.padding + 'px', position: 'absolute', width: opts.width + 'px', zIndex: opts.textzIndex}).css(opts.cssStyles);
 172       var $box = $('<div class="bt-wrapper"></div>').append($text).addClass(opts.cssClass).css({position: 'absolute', width: opts.width + 'px'}).appendTo(offsetParent);
 173
 174       $(this).data('bt-box', $box);
 175
 176       // see if the text box will fit in the various positions
 177       var scrollTop = numb($(document).scrollTop());
 178       var scrollLeft = numb($(document).scrollLeft());
 179       var docWidth = numb($(window).width());
 180       var docHeight = numb($(window).height());
 181       var winRight = scrollLeft + docWidth;
 182       var winBottom = scrollTop + docHeight;
 183       var space = new Object();
 184       space.top = $(this).offset().top - scrollTop;
 185       space.bottom = docHeight - (($(this).offset().top + height) - scrollTop);
 186       space.left = $(this).offset().left - scrollLeft;
 187       space.right = docWidth - (($(this).offset().left + width) - scrollLeft);
 188       var textOutHeight = numb($text.outerHeight());
 189       var textOutWidth = numb($text.outerWidth());
 190       if (opts.positions.constructor == String) {
 191         opts.positions = opts.positions.replace(/ /, '').split(',');
 192       }
 193       if (opts.positions[0] == 'most') {
 194         // figure out which is the largest
 195         var position = 'top'; // prime the pump
 196         for (var pig in space) { // pigs in space!
 197           position = space[pig] > space[position] ? pig : position;
 198         }
 199       }
 200       else {
 201         for (var x in opts.positions) {
 202           var position = opts.positions[x];
 203           if ((position == 'left' || position == 'right') && space[position] > textOutWidth + opts.spikeLength) {
 204             break;
 205           }
 206           else if ((position == 'top' || position == 'bottom') && space[position] > textOutHeight + opts.spikeLength) {
 207             break;
 208           }
 209         }
 210       }
 211
 212       var horiz = left + ((width - textOutWidth)/2);
 213       var vert = top + ((height - textOutHeight)/2);
 214       var animDist = opts.animate ? numb(opts.distance) : 0;
 215       var points = new Array();
 216       var textTop, textLeft, textRight, textBottom, textTopSpace, textBottomSpace, textLeftSpace, textRightSpace, crossPoint, textCenter;
 217
 218       // Yes, yes, this next bit really could use to be condensed
 219       // each switch case is basically doing the same thing in slightly different ways
 220       switch(position) {
 221         case 'top':
 222           // spike on bottom
 223           $text.css('margin-bottom', opts.spikeLength + 'px');
 224           $box.css({top: (top - $text.outerHeight(true) - animDist) + opts.overlap, left: horiz});
 225           // move text left/right if extends out of window
 226           textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.outerWidth(true));
 227           var xShift = 0;
 228           if (textRightSpace < 0) {
 229             // shift it left
 230             $box.css('left', (numb($box.css('left')) + textRightSpace) + 'px');
 231             xShift -= textRightSpace;
 232           }
 233           // we test left space second to ensure that left of box is visible
 234           textLeftSpace = ($text.offset().left + numb($text.css('margin-left'))) - (scrollLeft + opts.windowMargin);
 235           if (textLeftSpace < 0) {
 236             // shift it right
 237             $box.css('left', (numb($box.css('left')) - textLeftSpace) + 'px');
 238             xShift += textLeftSpace;
 239           }
 240           textTop = $text.btPosition().top + numb($text.css('margin-top'));
 241           textLeft = $text.btPosition().left + numb($text.css('margin-left'));
 242           textRight = textLeft + $text.outerWidth();
 243           textBottom = textTop + $text.outerHeight();
 244           textCenter = {x: textLeft + ($text.outerWidth()/2), y: textTop + ($text.outerHeight()/2)};
 245           // points[points.length] = {x: x, y: y};
 246           points[points.length] = spikePoint = {y: textBottom + opts.spikeLength, x: ((textRight-textLeft)/2) + xShift, type: 'spike'};
 247           crossPoint = findIntersectX(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textBottom);
 248           // make sure that the crossPoint is not outside of text box boundaries
 249           crossPoint.x = crossPoint.x < textLeft + opts.spikeGirth/2 + opts.cornerRadius ? textLeft + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.x;
 250           crossPoint.x =  crossPoint.x > (textRight - opts.spikeGirth/2) - opts.cornerRadius ? (textRight - opts.spikeGirth/2) - opts.CornerRadius : crossPoint.x;
 251           points[points.length] = {x: crossPoint.x - (opts.spikeGirth/2), y: textBottom, type: 'join'};
 252           points[points.length] = {x: textLeft, y: textBottom, type: 'corner'};  // left bottom corner
 253           points[points.length] = {x: textLeft, y: textTop, type: 'corner'};     // left top corner
 254           points[points.length] = {x: textRight, y: textTop, type: 'corner'};    // right top corner
 255           points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner
 256           points[points.length] = {x: crossPoint.x + (opts.spikeGirth/2), y: textBottom, type: 'join'};
 257           points[points.length] = spikePoint;
 258           break;
 259         case 'left':
 260           // spike on right
 261           $text.css('margin-right', opts.spikeLength + 'px');
 262           $box.css({top: vert + 'px', left: ((left - $text.outerWidth(true) - animDist) + opts.overlap) + 'px'});
 263           // move text up/down if extends out of window
 264           textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true));
 265           var yShift = 0;
 266           if (textBottomSpace < 0) {
 267             // shift it up
 268             $box.css('top', (numb($box.css('top')) + textBottomSpace) + 'px');
 269             yShift -= textBottomSpace;
 270           }
 271           // we ensure top space second to ensure that top of box is visible
 272           textTopSpace = ($text.offset().top + numb($text.css('margin-top'))) - (scrollTop + opts.windowMargin);
 273           if (textTopSpace < 0) {
 274             // shift it down
 275             $box.css('top', (numb($box.css('top')) - textTopSpace) + 'px');
 276             yShift += textTopSpace;
 277           }
 278           textTop = $text.btPosition().top + numb($text.css('margin-top'));
 279           textLeft = $text.btPosition().left + numb($text.css('margin-left'));
 280           textRight = textLeft + $text.outerWidth();
 281           textBottom = textTop + $text.outerHeight();
 282           textCenter = {x: textLeft + ($text.outerWidth()/2), y: textTop + ($text.outerHeight()/2)};
 283           points[points.length] = spikePoint = {x: textRight + opts.spikeLength, y: ((textBottom-textTop)/2) + yShift, type: 'spike'};
 284           crossPoint = findIntersectY(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textRight);
 285           // make sure that the crossPoint is not outside of text box boundaries
 286           crossPoint.y = crossPoint.y < textTop + opts.spikeGirth/2 + opts.cornerRadius ? textTop + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.y;
 287           crossPoint.y =  crossPoint.y > (textBottom - opts.spikeGirth/2) - opts.cornerRadius ? (textBottom - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.y;
 288           points[points.length] = {x: textRight, y: crossPoint.y + opts.spikeGirth/2, type: 'join'};
 289           points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner
 290           points[points.length] = {x: textLeft, y: textBottom, type: 'corner'};  // left bottom corner
 291           points[points.length] = {x: textLeft, y: textTop, type: 'corner'};     // left top corner
 292           points[points.length] = {x: textRight, y: textTop, type: 'corner'};    // right top corner
 293           points[points.length] = {x: textRight, y: crossPoint.y - opts.spikeGirth/2, type: 'join'};
 294           points[points.length] = spikePoint;
 295           break;
 296         case 'bottom':
 297           // spike on top
 298           $text.css('margin-top', opts.spikeLength + 'px');
 299           $box.css({top: (top + height + animDist) - opts.overlap, left: horiz});
 300           // move text up/down if extends out of window
 301           textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.outerWidth(true));
 302           var xShift = 0;
 303           if (textRightSpace < 0) {
 304             // shift it left
 305             $box.css('left', (numb($box.css('left')) + textRightSpace) + 'px');
 306             xShift -= textRightSpace;
 307           }
 308           // we ensure left space second to ensure that left of box is visible
 309           textLeftSpace = ($text.offset().left + numb($text.css('margin-left')))  - (scrollLeft + opts.windowMargin);
 310           if (textLeftSpace < 0) {
 311             // shift it right
 312             $box.css('left', (numb($box.css('left')) - textLeftSpace) + 'px');
 313             xShift += textLeftSpace;
 314           }
 315           textTop = $text.btPosition().top + numb($text.css('margin-top'));
 316           textLeft = $text.btPosition().left + numb($text.css('margin-left'));
 317           textRight = textLeft + $text.outerWidth();
 318           textBottom = textTop + $text.outerHeight();
 319           textCenter = {x: textLeft + ($text.outerWidth()/2), y: textTop + ($text.outerHeight()/2)};
 320           points[points.length] = spikePoint = {x: ((textRight-textLeft)/2) + xShift, y: 0, type: 'spike'};
 321           crossPoint = findIntersectX(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textTop);
 322           // make sure that the crossPoint is not outside of text box boundaries
 323           crossPoint.x = crossPoint.x < textLeft + opts.spikeGirth/2 + opts.cornerRadius ? textLeft + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.x;
 324           crossPoint.x =  crossPoint.x > (textRight - opts.spikeGirth/2) - opts.cornerRadius ? (textRight - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.x;
 325           points[points.length] = {x: crossPoint.x + opts.spikeGirth/2, y: textTop, type: 'join'};
 326           points[points.length] = {x: textRight, y: textTop, type: 'corner'};    // right top corner
 327           points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner
 328           points[points.length] = {x: textLeft, y: textBottom, type: 'corner'};  // left bottom corner
 329           points[points.length] = {x: textLeft, y: textTop, type: 'corner'};     // left top corner
 330           points[points.length] = {x: crossPoint.x - (opts.spikeGirth/2), y: textTop, type: 'join'};
 331           points[points.length] = spikePoint;
 332           break;
 333         case 'right':
 334           // spike on left
 335           $text.css('margin-left', (opts.spikeLength + 'px'));
 336           $box.css({top: vert + 'px', left: ((left + width + animDist) - opts.overlap) + 'px'});
 337           // move text up/down if extends out of window
 338           textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true));
 339           var yShift = 0;
 340           if (textBottomSpace < 0) {
 341             // shift it up
 342             $box.css('top', (numb($box.css('top')) + textBottomSpace) + 'px');
 343             yShift -= textBottomSpace;
 344           }
 345           // we ensure top space second to ensure that top of box is visible
 346           textTopSpace = ($text.offset().top + numb($text.css('margin-top'))) - (scrollTop + opts.windowMargin);
 347           if (textTopSpace < 0) {
 348             // shift it down
 349             $box.css('top', (numb($box.css('top')) - textTopSpace) + 'px');
 350             yShift += textTopSpace;
 351           }
 352           textTop = $text.btPosition().top + numb($text.css('margin-top'));
 353           textLeft = $text.btPosition().left + numb($text.css('margin-left'));
 354           textRight = textLeft + $text.outerWidth();
 355           textBottom = textTop + $text.outerHeight();
 356           textCenter = {x: textLeft + ($text.outerWidth()/2), y: textTop + ($text.outerHeight()/2)};
 357           points[points.length] = spikePoint = {x: 0, y: ((textBottom-textTop)/2) + yShift, type: 'spike'};
 358           crossPoint = findIntersectY(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textLeft);
 359           // make sure that the crossPoint is not outside of text box boundaries
 360           crossPoint.y = crossPoint.y < textTop + opts.spikeGirth/2 + opts.cornerRadius ? textTop + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.y;
 361           crossPoint.y =  crossPoint.y > (textBottom - opts.spikeGirth/2) - opts.cornerRadius ? (textBottom - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.y;
 362           points[points.length] = {x: textLeft, y: crossPoint.y - opts.spikeGirth/2, type: 'join'};
 363           points[points.length] = {x: textLeft, y: textTop, type: 'corner'};     // left top corner
 364           points[points.length] = {x: textRight, y: textTop, type: 'corner'};    // right top corner
 365           points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner
 366           points[points.length] = {x: textLeft, y: textBottom, type: 'corner'};  // left bottom corner
 367           points[points.length] = {x: textLeft, y: crossPoint.y + opts.spikeGirth/2, type: 'join'};
 368           points[points.length] = spikePoint;
 369           break;
 370       } // </ switch >
 371
 372       var canvas = $('<canvas width="'+ (numb($text.outerWidth(true)) + opts.strokeWidth*2) +'" height="'+ (numb($text.outerHeight(true)) + opts.strokeWidth*2) +'"></canvas>').appendTo($box).css({position: 'absolute', top: $text.btPosition().top, left: $text.btPosition().left, zIndex: opts.boxzIndex}).get(0);
 373
 374       // if excanvas is set up, we need to initialize the new canvas element
 375       if (typeof G_vmlCanvasManager != 'undefined') {
 376         canvas = G_vmlCanvasManager.initElement(canvas);
 377       }
 378
 379       if (opts.cornerRadius > 0) {
 380         // round the corners!
 381         var newPoints = new Array();
 382         var newPoint;
 383         for (var i=0; i<points.length; i++) {
 384           if (points[i].type == 'corner') {
 385             // create two new arc points
 386             // find point between this and previous (using modulo in case of ending)
 387             newPoint = betweenPoint(points[i], points[(i-1)%points.length], opts.cornerRadius);
 388             newPoint.type = 'arcStart';
 389             newPoints[newPoints.length] = newPoint;
 390             // the original corner point
 391             newPoints[newPoints.length] = points[i];
 392             // find point between this and next
 393             newPoint = betweenPoint(points[i], points[(i+1)%points.length], opts.cornerRadius);
 394             newPoint.type = 'arcEnd';
 395             newPoints[newPoints.length] = newPoint;
 396           }
 397           else {
 398             newPoints[newPoints.length] = points[i];
 399           }
 400         }
 401         // overwrite points with new version
 402         points = newPoints;
 403
 404       }
 405
 406       var ctx = canvas.getContext("2d");
 407       drawIt.apply(ctx, [points]);
 408       ctx.fillStyle = opts.fill;
 409       if (opts.shadow) {
 410         ctx.shadowOffsetX = 2;
 411         ctx.shadowOffsetY = 2;
 412         ctx.shadowBlur = 5;
 413         ctx.shadowColor =  opts.shadowColor;
 414       }
 415       ctx.closePath();
 416       ctx.fill();
 417       if (opts.strokeWidth > 0) {
 418         ctx.lineWidth = opts.strokeWidth;
 419         ctx.strokeStyle = opts.strokeStyle;
 420         ctx.beginPath();
 421         drawIt.apply(ctx, [points]);
 422         ctx.closePath();
 423         ctx.stroke();
 424       }
 425
 426       if (opts.animate) {
 427         $box.css({opacity: 0.1});
 428       }
 429
 430       $box.css({visibility: 'visible'});
 431
 432       if (opts.overlay) {
 433         var overlay = $('<div class="bt-overlay"></div>').css({
 434             position: 'absolute',
 435             backgroundColor: 'blue',
 436             top: top,
 437             left: left,
 438             width: width,
 439             height: height,
 440             opacity: '.2'
 441           }).appendTo(offsetParent);
 442         $(this).data('overlay', overlay);
 443       }
 444
 445       var animParams = {opacity: 1};
 446       if (opts.animate) {
 447         switch (position) {
 448           case 'top':
 449             animParams.top = $box.btPosition().top + opts.distance;
 450             break;
 451           case 'left':
 452             animParams.left = $box.btPosition().left + opts.distance;
 453             break;
 454           case 'bottom':
 455             animParams.top = $box.btPosition().top - opts.distance;
 456             break;
 457           case 'right':
 458             animParams.left = $box.btPosition().left - opts.distance;
 459             break;
 460         }
 461         $box.animate(animParams, {duration: opts.speed, easing: opts.easing});
 462       }
 463
 464       // trigger postShow function
 465       opts.postShow.apply(this);
 466
 467
 468     } // </ turnOn() >
 469
 470     var turnOff = function() {
 471
 472       // trigger preHide function
 473       opts.preHide.apply(this);
 474
 475       var box = $(this).data('bt-box');
 476       var overlay = $(this).data('bt-overlay');
 477       if (typeof box == 'object') {
 478         $(box).remove();
 479         $(this).removeData('bt-box');
 480       }
 481       if (typeof overlay == 'object') {
 482         $(overlay).remove();
 483         $(this).removeData('bt-overlay');
 484       }
 485
 486       // trigger postHide function
 487       opts.postHide.apply(this);
 488
 489     } // </ turnOff() >
 490
 491     var refresh = function() {
 492       turnOff.apply(this);
 493       turnOn.apply(this);
 494     }
 495
 496     /**
 497      * This is sort of the "starting spot" for the this.each()
 498      * These are sort of the init functions to handle the call
 499      */
 500
 501     if (opts.killTitle) {
 502       $(this).find('[title]').andSelf().each(function() {
 503         $(this).attr('bt-xTitle', $(this).attr('title')).removeAttr('title');
 504       });
 505     }
 506     if (typeof opts.trigger == 'string') {
 507       opts.trigger = [opts.trigger];
 508     }
 509     if (opts.trigger[0] == 'hover') {
 510       $(this).hover(
 511         function() {
 512           turnOn.apply(this);
 513         },
 514         function() {
 515           turnOff.apply(this);
 516         }
 517       );
 518     }
 519     else if (opts.trigger[0] == 'now') {
 520       var box = $(this).data('bt-box');
 521       if (typeof box == 'object') {
 522         turnOff.apply(this);
 523       }
 524       else {
 525         turnOn.apply(this);
 526       }
 527     }
 528     else if (opts.trigger.length > 1 && opts.trigger[0] != opts.trigger[1]) {
 529       $(this)
 530         .bind(opts.trigger[0], function() {
 531           turnOn.apply(this);
 532         })
 533         .bind(opts.trigger[1], function() {
 534           turnOff.apply(this);
 535         });
 536     }
 537     else {
 538       // toggle using the same event
 539       $(this).bind(opts.trigger[0], function() {
 540         if (typeof this.triggerToggle == 'undefined') {
 541           this.triggerToggle = false;
 542         }
 543         this.triggerToggle = !this.triggerToggle;
 544         if (this.triggerToggle) {
 545           turnOn.apply(this);
 546         }
 547         else {
 548           turnOff.apply(this);
 549         }
 550       });
 551     }
 552   }); // </ this.each() >
 553
 554
 555   function drawIt(points) {
 556     this.moveTo(points[0].x, points[0].y);
 557     for (i=1;i<points.length;i++) {
 558       if (points[i-1].type == 'arcStart') {
 559         // if we're creating a rounded corner
 560         //ctx.arc(round5(points[i].x), round5(points[i].y), points[i].startAngle, points[i].endAngle, opts.cornerRadius, false);
 561         this.quadraticCurveTo(round5(points[i].x), round5(points[i].y), round5(points[(i+1)%points.length].x), round5(points[(i+1)%points.length].y));
 562         i++;
 563         //ctx.moveTo(round5(points[i].x), round5(points[i].y));
 564       }
 565       else {
 566         this.lineTo(round5(points[i].x), round5(points[i].y));
 567       }
 568     }
 569   }
 570
 571   /**
 572    * Round to the nearest .5 pixel to avoid antialiasing
 573    * http://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors
 574    */
 575   function round5(num) {
 576     return Math.round(num - .5) + .5;
 577   }
 578
 579   /**
 580    * Ensure that a number is a number... or zero
 581    */
 582   function numb(num) {
 583     return parseInt(num) || 0;
 584   }
 585
 586   /**
 587    * Given two points, find a point which is dist pixels from point1 on a line to point2
 588    */
 589   function betweenPoint(point1, point2, dist) {
 590     // figure out if we're horizontal or vertical
 591     var y, x;
 592     if (point1.x == point2.x) {
 593       // vertical
 594       y = point1.y < point2.y ? point1.y + dist : point1.y - dist;
 595       return {x: point1.x, y: y};
 596     }
 597     else if (point1.y == point2.y) {
 598       // horizontal
 599       x = point1.x < point2.x ? point1.x + dist : point1.x - dist;
 600       return {x:x, y: point1.y};
 601     }
 602   }
 603
 604   function centerPoint(arcStart, corner, arcEnd) {
 605     var x = corner.x == arcStart.x ? arcEnd.x : arcStart.x;
 606     var y = corner.y == arcStart.y ? arcEnd.y : arcStart.y;
 607     var startAngle, endAngle;
 608     if (arcStart.x < arcEnd.x) {
 609       if (arcStart.y > arcEnd.y) {
 610         // arc is on upper left
 611         startAngle = (Math.PI/180)*180;
 612         endAngle = (Math.PI/180)*90;
 613       }
 614       else {
 615         // arc is on upper right
 616         startAngle = (Math.PI/180)*90;
 617         endAngle = 0;
 618       }
 619     }
 620     else {
 621       if (arcStart.y > arcEnd.y) {
 622         // arc is on lower left
 623         startAngle = (Math.PI/180)*270;
 624         endAngle = (Math.PI/180)*180;
 625       }
 626       else {
 627         // arc is on lower right
 628         startAngle = 0;
 629         endAngle = (Math.PI/180)*270;
 630       }
 631     }
 632     return {x: x, y: y, type: 'center', startAngle: startAngle, endAngle: endAngle};
 633   }
 634
 635   /**
 636    * Find the intersection point of two lines, each defined by two points
 637    * arguments are x1, y1 and x2, y2 for r1 (line 1) and r2 (line 2)
 638    * It's like an algebra party!!!
 639    */
 640   function findIntersect(r1x1, r1y1, r1x2, r1y2, r2x1, r2y1, r2x2, r2y2) {
 641
 642     if (r2x1 == r2x2) {
 643       return findIntersectY(r1x1, r1y1, r1x2, r1y2, r2x1);
 644     }
 645     if (r2y1 == r2y2) {
 646       return findIntersectX(r1x1, r1y1, r1x2, r1y2, r2y1);
 647     }
 648
 649     // m = (y1 - y2) / (x1 - x2)  // <-- how to find the slope
 650     // y = mx + b                 // the 'classic' linear equation
 651     // b = y - mx                 // how to find b (the y-intersect)
 652     // x = (y - b)/m              // how to find x
 653     var r1m = (r1y1 - r1y2) / (r1x1 - r1x2);
 654     var r1b = r1y1 - (r1m * r1x1);
 655     var r2m = (r2y1 - r2y2) / (r2x1 - r2x2);
 656     var r2b = r2y1 - (r2m * r2x1);
 657
 658     var x = (r2b - r1b) / (r1m - r2m);
 659           var y = r1m * x + r1b;
 660
 661           return {x: x, y: y};
 662   }
 663
 664   /**
 665    * Find the y intersection point of a line and given x vertical
 666    */
 667   function findIntersectY(r1x1, r1y1, r1x2, r1y2, x) {
 668     if (r1y1 == r1y2) {
 669       return {x: x, y: r1y1};
 670     }
 671     var r1m = (r1y1 - r1y2) / (r1x1 - r1x2);
 672     var r1b = r1y1 - (r1m * r1x1);
 673
 674     var y = r1m * x + r1b;
 675
 676     return {x: x, y: y};
 677   }
 678
 679   /**
 680    * Find the x intersection point of a line and given y horizontal
 681    */
 682   function findIntersectX(r1x1, r1y1, r1x2, r1y2, y) {
 683     if (r1x1 == r1x2) {
 684       return {x: r1x1, y: y};
 685     }
 686     var r1m = (r1y1 - r1y2) / (r1x1 - r1x2);
 687     var r1b = r1y1 - (r1m * r1x1);
 688
 689     // y = mx + b     // your old friend, linear equation
 690     // x = (y - b)/m  // linear equation solved for x
 691     var x = (y - r1b) / r1m;
 692
 693     return {x: x, y: y};
 694
 695   }
 696
 697 }; // </ jQuery.fn.bt() >
 698
 699 /**
 700  * jQuery's compat.js (used in Drupal's jQuery upgrade module, overrides the $().position() function
 701  *  this is a copy of that function to allow the plugin to work when compat.js is present
 702  *  once compat.js is fixed to not override existing functions, this function can be removed
 703  *  and .btPosion() can be replaced with .position() above...
 704  */
 705 jQuery.fn.btPosition = function() {
 706
 707   function num(elem, prop) {
 708     return elem[0] && parseInt( jQuery.curCSS(elem[0], prop, true), 10 ) || 0;
 709   }
 710
 711   var left = 0, top = 0, results;
 712
 713   if ( this[0] ) {
 714     // Get *real* offsetParent
 715     var offsetParent = this.offsetParent(),
 716
 717     // Get correct offsets
 718     offset       = this.offset(),
 719     parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();
 720
 721     // Subtract element margins
 722     // note: when an element has margin: auto the offsetLeft and marginLeft
 723     // are the same in Safari causing offset.left to incorrectly be 0
 724     offset.top  -= num( this, 'marginTop' );
 725     offset.left -= num( this, 'marginLeft' );
 726
 727     // Add offsetParent borders
 728     parentOffset.top  += num( offsetParent, 'borderTopWidth' );
 729     parentOffset.left += num( offsetParent, 'borderLeftWidth' );
 730
 731     // Subtract the two offsets
 732     results = {
 733       top:  offset.top  - parentOffset.top,
 734       left: offset.left - parentOffset.left
 735     };
 736   }
 737
 738   return results;
 739 }; // </ jQuery.fn.btPosition() >
 740
 741
 742 /**
 743  * Defaults for the beauty tips
 744  *
 745  * Note this is a variable definition and not a function. So defaults can be
 746  * written for an entire page by simply redefining attributes like so:
 747  *
 748  *   jQuery.fn.bt.defaults.width = 400;
 749  *
 750  * This would make all Beauty Tips boxes 400px wide.
 751  *
 752  * Each of these options may also be overridden during
 753  *
 754  * Can be overriden globally or at time of call.
 755  *
 756  */
 757 jQuery.fn.bt.defaults = {
 758   trigger:         'hover',                // trigger to show/hide tip
 759                                            // use [on, off] to define separate on/off triggers
 760                                            // also use space character to allow multiple events to trigger
 761                                            // examples:
 762                                            //   ['focus', 'blur'] // focus displays, blur hides
 763                                            //   'dblclick'        // dblclick toggles on/off
 764                                            //   ['focus mouseover', 'blur mouseout']
 765                                            //   'now'             // shows/hides tip without event
 766
 767   width:            200,                   // width (in px) of tooltip box
 768                                            //   when combined with cssStyles: {width: 'auto'}, this becomes a max-width for the text
 769   padding:          10,                    // padding for content (get more fine grained with cssStyles)
 770   spikeGirth:       10,                    // width of spike
 771   spikeLength:      15,                    // length of spike
 772   overlap:          0,                     // spike overlap (px) onto target
 773   overlay:          false,                 // display overlay on target (use CSS to style) -- BUGGY!
 774   killTitle:        true,                  // kill title tag to avoid double tooltips
 775
 776   textzIndex:       9999,                  // z-index for the text
 777   boxzIndex:        9990,                  // z-index for the "talk" box (should always be less than textzIndex)
 778   positions:        ['most'],              // preference of positions for tip (will use first with available space)
 779                                            // possible values 'top', 'bottom', 'left', 'right' as an array in order of
 780                                            // preference. Last value will be used if others don't have enough space.
 781
 782                                            // or use 'most' to use the area with the most space
 783   fill:             "rgb(255, 255, 102)",  // fill color for the tooltip box
 784   windowMargin:     10,                        // space (px) to leave between text box and browser edge
 785
 786   strokeWidth:      1,                         // width of stroke around box, **set to 0 for no stroke**
 787   strokeStyle:      "#000",                    // color/alpha of stroke
 788
 789   cornerRadius:     5,                         // radius of corners (px), set to 0 for square corners
 790
 791   shadow:           false,                     // use drop shadow? (only displays in Safari and FF 3.1)
 792   shadowOffsetX:    2,                         // shadow offset x (px)
 793   shadowOffsetY:    2,                         // shadow offset y (px)
 794   shadowBlur:       3,                         // shadow blur (px)
 795   shadowColor:      "#000",                    // shadow color/alpha
 796
 797   animate:          false,                     // animate show/hide of box - EXPERIMENTAL (buggy in IE)
 798   distance:         15,                        // distance of animation movement (px)
 799   easing:           'swing',                   // animation easing
 800   speed:            200,                       // speed (ms) of animation
 801
 802   cssClass:         '',                        // CSS class to add to the box wrapper div
 803   cssStyles:        {},                        // styles to add the text box
 804                                                //   example: {fontFamily: 'Georgia, Times, serif', fontWeight: 'bold'}
 805
 806   titleSelector:    "attr('title')",           // if there is no content argument, use this selector to retrieve the title
 807
 808   preShow:          function(){return;},       // function to run before popup is built and displayed
 809   postShow:         function(){return;},       // function to run after popup is built and displayed
 810   preHide:          function(){return;},       // function to run before popup is removed
 811   postHide:         function(){return;}        // function to run after popup is removed
 812
 813 }; // </ jQuery.bt.defaults >