/*
 * @name BeautyTips
 * @desc a tooltips/baloon-help plugin for jQuery
 *
 * @author Jeff Robbins - Lullabot - http://www.lullabot.com
 * @version 0.9.5 release candidate 1  (5/20/2009)
 */

jQuery.bt = {version: '0.9.7'};

/*
 * @type jQuery
 * @cat Plugins/bt
 * @requires jQuery v1.2+ (not tested on versions prior to 1.2.6)
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Encourage development. If you use BeautyTips for anything cool
 * or on a site that people have heard of, please drop me a note.
 * - jeff ^at lullabot > com
 *
 * No guarantees, warranties, or promises of any kind
 *
 */

;(function($) {
    /**
     * @credit Inspired by Karl Swedberg's ClueTip
     *    (http://plugins.learningjquery.com/cluetip/), which in turn was inspired
     *    by Cody Lindley's jTip (http://www.codylindley.com)
     *
     * @fileoverview
     * Beauty Tips is a jQuery tooltips plugin which uses the canvas drawing element
     * in the HTML5 spec in order to dynamically draw tooltip "talk bubbles" around
     * the descriptive help text associated with an item. This is in many ways
     * similar to Google Maps which both provides similar talk-bubbles and uses the
     * canvas element to draw them.
     *
     * The canvas element is supported in modern versions of FireFox, Safari, and
     * Opera. However, Internet Explorer needs a separate library called ExplorerCanvas
     * included on the page in order to support canvas drawing functions. ExplorerCanvas
     * was created by Google for use with their web apps and you can find it here:
     * http://excanvas.sourceforge.net/
     *
     * Beauty Tips was written to be simple to use and pretty. All of its options
     * are documented at the bottom of this file and defaults can be overwritten
     * globally for the entire page, or individually on each call.
     *
     * By default each tooltip will be positioned on the side of the target element
     * which has the most free space. This is affected by the scroll position and
     * size of the current window, so each Beauty Tip is redrawn each time it is
     * displayed. It may appear above an element at the bottom of the page, but when
     * the page is scrolled down (and the element is at the top of the page) it will
     * then appear below it. Additionally, positions can be forced or a preferred
     * order can be defined. See examples below.
     *
     * To fix z-index problems in IE6, include the bgiframe plugin on your page
     * http://plugins.jquery.com/project/bgiframe - BeautyTips will automatically
     * recognize it and use it.
     *
     * BeautyTips also works with the hoverIntent plugin
     * http://cherne.net/brian/resources/jquery.hoverIntent.html
     * see hoverIntent example below for usage
     *
     * Usage
     * The function can be called in a number of ways.
     * $(selector).bt();
     * $(selector).bt('Content text');
     * $(selector).bt('Content text', {option1: value, option2: value});
     * $(selector).bt({option1: value, option2: value});
     *
     * For more/better documentation and lots of examples, visit the demo page included with the distribution
     *
     */

    jQuery.fn.bt = function(content, options) {

        if (typeof content != 'string') {
            var contentSelect = true;
            options = content;
            content = false;
        }
        else {
            var contentSelect = false;
        }

        // if hoverIntent is installed, use that as default instead of hover
        if (jQuery.fn.hoverIntent && jQuery.bt.defaults.trigger == 'hover') {
            jQuery.bt.defaults.trigger = 'hoverIntent';
        }

        return this.each(function(index) {

            var opts = jQuery.extend(false, jQuery.bt.defaults, jQuery.bt.options, options);

            // clean up the options
            opts.spikeLength = numb(opts.spikeLength);
            opts.spikeGirth = numb(opts.spikeGirth);
            opts.overlap = numb(opts.overlap);
            opts.otherOverlap = numb(opts.otherOverlap);

            var ajaxTimeout = false;

            /**
             * This is sort of the "starting spot" for the this.each()
             * These are the init functions to handle the .bt() call
             */

            if (opts.killTitle) {
                $(this).find('[title]').andSelf().each(function() {
                    if (!$(this).prop('bt-xTitle')) {
                        $(this).prop('bt-xTitle', $(this).prop('title')).prop('title', '');
                    }
                });
            }

            if (typeof opts.trigger == 'string') {
                opts.trigger = [opts.trigger];
            }
            if (opts.trigger[0] == 'hoverIntent') {
                var hoverOpts = jQuery.extend(opts.hoverIntentOpts, {
                    over: function() {
                        this.btOn();
                    },
                    out: function() {
                        this.btOff();
                    }});
                $(this).hoverIntent(hoverOpts);

            }
            else if (opts.trigger[0] == 'hover') {
                $(this).hover(
                    function() {
                        this.btOn();
                    },
                    function() {
                        this.btOff();
                    }
                );
            }
            else if (opts.trigger[0] == 'now') {
                // toggle the on/off right now
                // note that 'none' gives more control (see below)
                if ($(this).hasClass('bt-active')) {
                    $(this).btOff();
                }
                else {
                    $(this).btOn();
                }
            }
            else if (opts.trigger[0] == 'none') {
                // initialize the tip with no event trigger
                // use javascript to turn on/off tip as follows:
                // $('#selector').btOn();
                // $('#selector').btOff();
            }
            else if (opts.trigger.length > 1 && opts.trigger[0] != opts.trigger[1]) {
                $(this)
                    .bind(opts.trigger[0], function() {
                        $(this).btOn();
                    })
                    .bind(opts.trigger[1], function() {
                        $(this).btOff();
                    });
            }
            else {
                // toggle using the same event
                $(this).bind(opts.trigger[0], function() {
                    if ($(this).hasClass('bt-active')) {
                        $(this).btOff();
                    }
                    else {
                        $(this).btOn();
                    }
                });
            }


            /**
             *  The BIG TURN ON
             *  Any element that has been initiated
             */
            this.btOn = function () {
                if (typeof $(this).data('bt-box') == 'object') {
                    // if there's already a popup, remove it before creating a new one.
                    this.btOff();
                }

                // trigger preBuild function
                // preBuild has no argument since the box hasn't been built yet
                opts.preBuild.apply(this);

                // turn off other tips
                $(jQuery.bt.vars.closeWhenOpenStack).btOff();

                // add the class to the target element (for hilighting, for example)
                // bt-active is always applied to all, but activeClass can apply another
                $(this).addClass('bt-active ' + opts.activeClass);

                if (contentSelect && opts.ajaxPath == null) {
                    // bizarre, I know
                    if (opts.killTitle) {
                        // if we've killed the title attribute, it's been stored in 'bt-xTitle' so get it..
                        $(this).prop('title', $(this).prop('bt-xTitle'));
                    }
                    // then evaluate the selector... title is now in place
                    content = $.isFunction(opts.contentSelector) ? opts.contentSelector.apply(this) : eval(opts.contentSelector);
                    if (opts.killTitle) {
                        // now remove the title again, so we don't get double tips
                        $(this).prop('title', '');
                    }
                }

                // ----------------------------------------------
                // All the Ajax(ish) stuff is in this next bit...
                // ----------------------------------------------
                if (opts.ajaxPath != null && content == false) {
                    if (typeof opts.ajaxPath == 'object') {
                        var url = eval(opts.ajaxPath[0]);
                        url += opts.ajaxPath[1] ? ' ' + opts.ajaxPath[1] : '';
                    }
                    else {
                        var url = opts.ajaxPath;
                    }
                    var off = url.indexOf(" ");
                    if ( off >= 0 ) {
                        var selector = url.slice(off, url.length);
                        url = url.slice(0, off);
                    }

                    // load any data cached for the given ajax path
                    var cacheData = opts.ajaxCache ? $(document.body).data('btCache-' + url.replace(/\./g, '')) : null;
                    if (typeof cacheData == 'string') {
                        content = selector ? $("<div/>").append(cacheData.replace(/<script(.|\s)*?\/script>/g, "")).find(selector) : cacheData;
                    }
                    else {
                        var target = this;

                        // set up the options
                        var ajaxOpts = jQuery.extend(false,
                            {
                                type: opts.ajaxType,
                                data: opts.ajaxData,
                                cache: opts.ajaxCache,
                                url: url,
                                complete: function(XMLHttpRequest, textStatus) {
                                    if (textStatus == 'success' || textStatus == 'notmodified') {
                                        if (opts.ajaxCache) {
                                            $(document.body).data('btCache-' + url.replace(/\./g, ''), XMLHttpRequest.responseText);
                                        }
                                        ajaxTimeout = false;
                                        content = selector ?
                                            // Create a dummy div to hold the results
                                            $("<div/>")
                                                // inject the contents of the document in, removing the scripts
                                                // to avoid any 'Permission Denied' errors in IE
                                                .append(XMLHttpRequest.responseText.replace(/<script(.|\s)*?\/script>/g, ""))

                                                // Locate the specified elements
                                                .find(selector) :

                                            // If not, just inject the full result
                                            XMLHttpRequest.responseText;

                                    }
                                    else {
                                        if (textStatus == 'timeout') {
                                            // if there was a timeout, we don't cache the result
                                            ajaxTimeout = true;
                                        }
                                        content = opts.ajaxError.replace(/%error/g, XMLHttpRequest.statusText);
                                    }
                                    // if the user rolls out of the target element before the ajax request comes back, don't show it
                                    if ($(target).hasClass('bt-active')) {
                                        target.btOn();
                                    }
                                }
                            }, opts.ajaxOpts);
                        // do the ajax request
                        jQuery.ajax(ajaxOpts);
                        // load the throbber while the magic happens
                        content = opts.ajaxLoading;
                    }
                }
                // </ ajax stuff >


                // now we start actually figuring out where to place the tip

                // figure out how to compensate for the shadow, if present
                var shadowMarginX = 0; // extra added to width to compensate for shadow
                var shadowMarginY = 0; // extra added to height
                var shadowShiftX = 0;  // amount to shift the tip horizontally to allow for shadow
                var shadowShiftY = 0;  // amount to shift vertical

                if (opts.shadow && !shadowSupport()) {
                    // if browser doesn't support drop shadows, turn them off
                    opts.shadow = false;
                    // and bring in the noShadows options
                    jQuery.extend(opts, opts.noShadowOpts);
                }

                if (opts.shadow) {
                    // figure out horizontal placement
                    if (opts.shadowBlur > Math.abs(opts.shadowOffsetX)) {
                        shadowMarginX = opts.shadowBlur * 2;
                    }
                    else {
                        shadowMarginX = opts.shadowBlur + Math.abs(opts.shadowOffsetX);
                    }
                    shadowShiftX = (opts.shadowBlur - opts.shadowOffsetX) > 0 ? opts.shadowBlur - opts.shadowOffsetX : 0;

                    // now vertical
                    if (opts.shadowBlur > Math.abs(opts.shadowOffsetY)) {
                        shadowMarginY = opts.shadowBlur * 2;
                    }
                    else {
                        shadowMarginY = opts.shadowBlur + Math.abs(opts.shadowOffsetY);
                    }
                    shadowShiftY = (opts.shadowBlur - opts.shadowOffsetY) > 0 ? opts.shadowBlur - opts.shadowOffsetY : 0;
                }

                if (opts.offsetParent){
                    // if offsetParent is defined by user
                    var offsetParent = $(opts.offsetParent);
                    var offsetParentPos = offsetParent.offset();
                    var pos = $(this).offset();
                    var top = numb(pos.top) - numb(offsetParentPos.top) + numb($(this).css('margin-top')) - shadowShiftY; // IE can return 'auto' for margins
                    var left = numb(pos.left) - numb(offsetParentPos.left) + numb($(this).css('margin-left')) - shadowShiftX;
                }
                else {
                    // if the target element is absolutely positioned, use its parent's offsetParent instead of its own
                    var offsetParent = ($(this).css('position') == 'absolute') ? $(this).parents().eq(0).offsetParent() : $(this).offsetParent();
                    var pos = $(this).btPosition();
                    var top = numb(pos.top) + numb($(this).css('margin-top')) - shadowShiftY; // IE can return 'auto' for margins
                    var left = numb(pos.left) + numb($(this).css('margin-left')) - shadowShiftX;
                }

                var width = $(this).btOuterWidth();
                var height = $(this).outerHeight();

                if (typeof content == 'object') {
                    // if content is a DOM object (as opposed to text)
                    // use a clone, rather than removing the original element
                    // and ensure that it's visible
                    var original = content;
                    var clone = $(original).clone(true).show();
                    // also store a reference to the original object in the clone data
                    // and a reference to the clone in the original
                    var origClones = $(original).data('bt-clones') || [];
                    origClones.push(clone);
                    $(original).data('bt-clones', origClones);
                    $(clone).data('bt-orig', original);
                    $(this).data('bt-content-orig', {original: original, clone: clone});
                    content = clone;
                }
                if (typeof content == 'null' || content == '') {
                    // if content is empty, bail out...
                    return;
                }

                // create the tip content div, populate it, and style it
                var $text = $('<div class="bt-content"></div>').append(content).css({padding: opts.padding, position: 'absolute', width: (opts.shrinkToFit ? 'auto' : opts.width), zIndex: opts.textzIndex, left: shadowShiftX, top: shadowShiftY}).css(opts.cssStyles);
                // create the wrapping box which contains text and canvas
                // put the content in it, style it, and append it to the same offset parent as the target
                var $box = $('<div class="bt-wrapper"></div>').append($text).addClass(opts.cssClass).css({position: 'absolute', width: opts.width, zIndex: opts.wrapperzIndex, visibility:'hidden'}).appendTo(offsetParent);

                // use bgiframe to get around z-index problems in IE6
                // http://plugins.jquery.com/project/bgiframe
                if (jQuery.fn.bgiframe) {
                    $text.bgiframe();
                    $box.bgiframe();
                }

                $(this).data('bt-box', $box);

                // see if the text box will fit in the various positions
                var scrollTop = numb($(document).scrollTop());
                var scrollLeft = numb($(document).scrollLeft());
                var docWidth = numb($(window).width());
                var docHeight = numb($(window).height());
                var winRight = scrollLeft + docWidth;
                var winBottom = scrollTop + docHeight;
                var space = new Object();
                var thisOffset = $(this).offset();
                space.top = thisOffset.top - scrollTop;
                space.bottom = docHeight - ((thisOffset + height) - scrollTop);
                space.left = thisOffset.left - scrollLeft;
                space.right = docWidth - ((thisOffset.left + width) - scrollLeft);
                var textOutHeight = numb($text.outerHeight());
                var textOutWidth = numb($text.btOuterWidth());
                if (opts.positions.constructor == String) {
                    opts.positions = opts.positions.replace(/ /, '').split(',');
                }
                if (opts.positions[0] == 'most') {
                    // figure out which is the largest
                    var position = 'top'; // prime the pump
                    for (var pig in space) {  //            <-------  pigs in space!
                        position = space[pig] > space[position] ? pig : position;
                    }
                }
                else {
                    for (var x in opts.positions) {
                        var position = opts.positions[x];
                        // @todo: acommodate shadow space in the following lines...
                        if ((position == 'left' || position == 'right') && space[position] > textOutWidth + opts.spikeLength) {
                            break;
                        }
                        else if ((position == 'top' || position == 'bottom') && space[position] > textOutHeight + opts.spikeLength) {
                            break;
                        }
                    }
                }

                // horizontal (left) offset for the box
                var horiz = left + ((width - textOutWidth) * .5);
                // vertical (top) offset for the box
                var vert = top + ((height - textOutHeight) * .5);
                var points = new Array();
                var textTop, textLeft, textRight, textBottom, textTopSpace, textBottomSpace, textLeftSpace, textRightSpace, crossPoint, textCenter, spikePoint;

                // Yes, yes, this next bit really could use to be condensed
                // each switch case is basically doing the same thing in slightly different ways
                switch(position) {

                    // =================== TOP =======================
                    case 'top':
                        // spike on bottom
                        $text.css('margin-bottom', opts.spikeLength + 'px');
                        $box.css({top: (top - $text.outerHeight(true)) + opts.overlap, left: horiz});
                        // move text left/right if extends out of window
                        textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.btOuterWidth(true));
                        var xShift = shadowShiftX;
                        if (textRightSpace < 0) {
                            // shift it left
                            $box.css('left', (numb($box.css('left')) + textRightSpace) + 'px');
                            xShift -= textRightSpace;
                        }
                        // we test left space second to ensure that left of box is visible
                        textLeftSpace = ($text.offset().left + numb($text.css('margin-left'))) - (scrollLeft + opts.windowMargin);
                        if (textLeftSpace < 0) {
                            // shift it right
                            $box.css('left', (numb($box.css('left')) - textLeftSpace) + 'px');
                            xShift += textLeftSpace;
                        }
                        textTop = $text.btPosition().top + numb($text.css('margin-top'));
                        textLeft = $text.btPosition().left + numb($text.css('margin-left'));
                        textRight = textLeft + $text.btOuterWidth();
                        textBottom = textTop + $text.outerHeight();
                        textCenter = {x: textLeft + ($text.btOuterWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)};
                        // points[points.length] = {x: x, y: y};
                        points[points.length] = spikePoint = {y: textBottom + opts.spikeLength, x: ((textRight-textLeft) * .5) + xShift, type: 'spike'};
                        crossPoint = findIntersectX(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textBottom);
                        // make sure that the crossPoint is not outside of text box boundaries
                        crossPoint.x = crossPoint.x < textLeft + opts.spikeGirth/2 + opts.cornerRadius ? textLeft + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.x;
                        crossPoint.x =  crossPoint.x > (textRight - opts.spikeGirth/2) - opts.cornerRadius ? (textRight - opts.spikeGirth/2) - opts.CornerRadius : crossPoint.x;
                        points[points.length] = {x: crossPoint.x - (opts.spikeGirth/2), y: textBottom, type: 'join'};
                        points[points.length] = {x: textLeft, y: textBottom, type: 'corner'};  // left bottom corner
                        points[points.length] = {x: textLeft, y: textTop, type: 'corner'};     // left top corner
                        points[points.length] = {x: textRight, y: textTop, type: 'corner'};    // right top corner
                        points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner
                        points[points.length] = {x: crossPoint.x + (opts.spikeGirth/2), y: textBottom, type: 'join'};
                        points[points.length] = spikePoint;
                        break;

                    // =================== LEFT =======================
                    case 'left':
                        // spike on right
                        $text.css('margin-right', opts.spikeLength + 'px');
                        $box.css({top: vert + 'px', left: ((left - $text.btOuterWidth(true)) + opts.overlap) + 'px'});
                        // move text up/down if extends out of window
                        textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true));
                        var yShift = shadowShiftY;
                        if (textBottomSpace < 0) {
                            // shift it up
                            $box.css('top', (numb($box.css('top')) + textBottomSpace) + 'px');
                            yShift -= textBottomSpace;
                        }
                        // we ensure top space second to ensure that top of box is visible
                        textTopSpace = ($text.offset().top + numb($text.css('margin-top'))) - (scrollTop + opts.windowMargin);
                        if (textTopSpace < 0) {
                            // shift it down
                            $box.css('top', (numb($box.css('top')) - textTopSpace) + 'px');
                            yShift += textTopSpace;
                        }
                        textTop = $text.btPosition().top + numb($text.css('margin-top'));
                        textLeft = $text.btPosition().left + numb($text.css('margin-left'));
                        textRight = textLeft + $text.btOuterWidth();
                        textBottom = textTop + $text.outerHeight();
                        textCenter = {x: textLeft + ($text.btOuterWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)};
                        points[points.length] = spikePoint = {x: textRight + opts.spikeLength, y: ((textBottom-textTop) * .5) + yShift, type: 'spike'};
                        crossPoint = findIntersectY(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textRight);
                        // make sure that the crossPoint is not outside of text box boundaries
                        crossPoint.y = crossPoint.y < textTop + opts.spikeGirth/2 + opts.cornerRadius ? textTop + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.y;
                        crossPoint.y =  crossPoint.y > (textBottom - opts.spikeGirth/2) - opts.cornerRadius ? (textBottom - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.y;
                        points[points.length] = {x: textRight, y: crossPoint.y + opts.spikeGirth/2, type: 'join'};
                        points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner
                        points[points.length] = {x: textLeft, y: textBottom, type: 'corner'};  // left bottom corner
                        points[points.length] = {x: textLeft, y: textTop, type: 'corner'};     // left top corner
                        points[points.length] = {x: textRight, y: textTop, type: 'corner'};    // right top corner
                        points[points.length] = {x: textRight, y: crossPoint.y - opts.spikeGirth/2, type: 'join'};
                        points[points.length] = spikePoint;
                        break;

                    // =================== BOTTOM =======================
                    case 'bottom':
                        // spike on top
                        $text.css('margin-top', opts.spikeLength + 'px');
                        $box.css({top: (top + height) - opts.overlap, left: horiz + opts.otherOverlap});
                        // move text up/down if extends out of window
                        textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.btOuterWidth(true));
                        var xShift = shadowShiftX;
                        if (textRightSpace < 0) {
                            // shift it left
                            $box.css('left', (numb($box.css('left')) + textRightSpace) + 'px');
                            xShift -= textRightSpace;
                        }
                        // we ensure left space second to ensure that left of box is visible
                        textLeftSpace = ($text.offset().left + numb($text.css('margin-left')))  - (scrollLeft + opts.windowMargin);
                        if (textLeftSpace < 0) {
                            // shift it right
                            $box.css('left', (numb($box.css('left')) - textLeftSpace) + 'px');
                            xShift += textLeftSpace;
                        }
                        textTop = $text.btPosition().top + numb($text.css('margin-top'));
                        textLeft = $text.btPosition().left + numb($text.css('margin-left'));
                        textRight = textLeft + $text.btOuterWidth();
                        textBottom = textTop + $text.outerHeight();
                        textCenter = {x: textLeft + ($text.btOuterWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)};
                        points[points.length] = spikePoint = {x: ((textRight-textLeft) * .5) + xShift, y: shadowShiftY, type: 'spike'};
                        crossPoint = findIntersectX(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textTop);
                        // make sure that the crossPoint is not outside of text box boundaries
                        crossPoint.x = crossPoint.x < textLeft + opts.spikeGirth/2 + opts.cornerRadius ? textLeft + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.x;
                        crossPoint.x =  crossPoint.x > (textRight - opts.spikeGirth/2) - opts.cornerRadius ? (textRight - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.x;
                        points[points.length] = {x: crossPoint.x + opts.spikeGirth/2, y: textTop, type: 'join'};
                        points[points.length] = {x: textRight, y: textTop, type: 'corner'};    // right top corner
                        points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner
                        points[points.length] = {x: textLeft, y: textBottom, type: 'corner'};  // left bottom corner
                        points[points.length] = {x: textLeft, y: textTop, type: 'corner'};     // left top corner
                        points[points.length] = {x: crossPoint.x - (opts.spikeGirth/2), y: textTop, type: 'join'};
                        points[points.length] = spikePoint;
                        break;

                    // =================== RIGHT =======================
                    case 'right':
                        // spike on left
                        $text.css('margin-left', (opts.spikeLength + 'px'));
                        $box.css({top: vert + 'px', left: ((left + width) - opts.overlap) + 'px'});
                        // move text up/down if extends out of window
                        textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true));
                        var yShift = shadowShiftY;
                        if (textBottomSpace < 0) {
                            // shift it up
                            $box.css('top', (numb($box.css('top')) + textBottomSpace) + 'px');
                            yShift -= textBottomSpace;
                        }
                        // we ensure top space second to ensure that top of box is visible
                        textTopSpace = ($text.offset().top + numb($text.css('margin-top'))) - (scrollTop + opts.windowMargin);
                        if (textTopSpace < 0) {
                            // shift it down
                            $box.css('top', (numb($box.css('top')) - textTopSpace) + 'px');
                            yShift += textTopSpace;
                        }
                        textTop = $text.btPosition().top + numb($text.css('margin-top'));
                        textLeft = $text.btPosition().left + numb($text.css('margin-left'));
                        textRight = textLeft + $text.btOuterWidth();
                        textBottom = textTop + $text.outerHeight();
                        textCenter = {x: textLeft + ($text.btOuterWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)};
                        points[points.length] = spikePoint = {x: shadowShiftX, y: ((textBottom-textTop) * .5) + yShift, type: 'spike'};
                        crossPoint = findIntersectY(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textLeft);
                        // make sure that the crossPoint is not outside of text box boundaries
                        crossPoint.y = crossPoint.y < textTop + opts.spikeGirth/2 + opts.cornerRadius ? textTop + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.y;
                        crossPoint.y =  crossPoint.y > (textBottom - opts.spikeGirth/2) - opts.cornerRadius ? (textBottom - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.y;
                        points[points.length] = {x: textLeft, y: crossPoint.y - opts.spikeGirth/2, type: 'join'};
                        points[points.length] = {x: textLeft, y: textTop, type: 'corner'};     // left top corner
                        points[points.length] = {x: textRight, y: textTop, type: 'corner'};    // right top corner
                        points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner
                        points[points.length] = {x: textLeft, y: textBottom, type: 'corner'};  // left bottom corner
                        points[points.length] = {x: textLeft, y: crossPoint.y + opts.spikeGirth/2, type: 'join'};
                        points[points.length] = spikePoint;
                        break;
                } // </ switch >

                var canvas = document.createElement('canvas');
                $(canvas).prop('width', (numb($text.btOuterWidth(true)) + opts.strokeWidth*2 + shadowMarginX)).prop('height', (numb($text.outerHeight(true)) + opts.strokeWidth*2 + shadowMarginY)).appendTo($box).css({position: 'absolute', zIndex: opts.boxzIndex});


                // if excanvas is set up, we need to initialize the new canvas element
                if (typeof G_vmlCanvasManager != 'undefined') {
                    canvas = G_vmlCanvasManager.initElement(canvas);
                }

                if (opts.cornerRadius > 0) {
                    // round the corners!
                    var newPoints = new Array();
                    var newPoint;
                    for (var i=0; i<points.length; i++) {
                        if (points[i].type == 'corner') {
                            // create two new arc points
                            // find point between this and previous (using modulo in case of ending)
                            newPoint = betweenPoint(points[i], points[(i-1)%points.length], opts.cornerRadius);
                            newPoint.type = 'arcStart';
                            newPoints[newPoints.length] = newPoint;
                            // the original corner point
                            newPoints[newPoints.length] = points[i];
                            // find point between this and next
                            newPoint = betweenPoint(points[i], points[(i+1)%points.length], opts.cornerRadius);
                            newPoint.type = 'arcEnd';
                            newPoints[newPoints.length] = newPoint;
                        }
                        else {
                            newPoints[newPoints.length] = points[i];
                        }
                    }
                    // overwrite points with new version
                    points = newPoints;
                }

                var ctx = canvas.getContext("2d");

                if (opts.shadow && opts.shadowOverlap !== true) {

                    var shadowOverlap = numb(opts.shadowOverlap);

                    // keep the shadow (and canvas) from overlapping the target element
                    switch (position) {
                        case 'top':
                            if (opts.shadowOffsetX + opts.shadowBlur - shadowOverlap > 0) {
                                $box.css('top', (numb($box.css('top')) - (opts.shadowOffsetX + opts.shadowBlur - shadowOverlap)));
                            }
                            break;
                        case 'right':
                            if (shadowShiftX - shadowOverlap > 0) {
                                $box.css('left', (numb($box.css('left')) + shadowShiftX - shadowOverlap));
                            }
                            break;
                        case 'bottom':
                            if (shadowShiftY - shadowOverlap > 0) {
                                $box.css('top', (numb($box.css('top')) + shadowShiftY - shadowOverlap));
                            }
                            break;
                        case 'left':
                            if (opts.shadowOffsetY + opts.shadowBlur - shadowOverlap > 0) {
                                $box.css('left', (numb($box.css('left')) - (opts.shadowOffsetY + opts.shadowBlur - shadowOverlap)));
                            }
                            break;
                    }
                }

                drawIt.apply(ctx, [points], opts.strokeWidth);
                ctx.fillStyle = opts.fill;
                if (opts.shadow) {
                    ctx.shadowOffsetX = opts.shadowOffsetX;
                    ctx.shadowOffsetY = opts.shadowOffsetY;
                    ctx.shadowBlur = opts.shadowBlur;
                    ctx.shadowColor =  opts.shadowColor;
                }
                ctx.closePath();
                ctx.fill();
                if (opts.strokeWidth > 0) {
                    ctx.shadowColor = 'rgba(0, 0, 0, 0)'; //remove shadow from stroke
                    ctx.lineWidth = opts.strokeWidth;
                    ctx.strokeStyle = opts.strokeStyle;
                    ctx.beginPath();
                    drawIt.apply(ctx, [points], opts.strokeWidth);
                    ctx.closePath();
                    ctx.stroke();
                }

                // trigger preShow function
                // function receives the box element (the balloon wrapper div) as an argument
                opts.preShow.apply(this, [$box[0]]);

                // switch from visibility: hidden to display: none so we can run animations
                $box.css({display:'none', visibility: 'visible'});

                // Here's where we show the tip
                opts.showTip.apply(this, [$box[0]]);

                if (opts.overlay) {
                    // EXPERIMENTAL AND FOR TESTING ONLY!!!!
                    var overlay = $('<div class="bt-overlay"></div>').css({
                        position: 'absolute',
                        backgroundColor: 'blue',
                        top: top,
                        left: left,
                        width: width,
                        height: height,
                        opacity: '.2'
                    }).appendTo(offsetParent);
                    $(this).data('overlay', overlay);
                }

                if ((opts.ajaxPath != null && opts.ajaxCache == false) || ajaxTimeout) {
                    // if ajaxCache is not enabled or if there was a server timeout,
                    // remove the content variable so it will be loaded again from server
                    content = false;
                }

                // stick this element into the clickAnywhereToClose stack
                if (opts.clickAnywhereToClose) {
                    jQuery.bt.vars.clickAnywhereStack.push(this);
                    $(document).click(jQuery.bt.docClick);
                }

                // stick this element into the closeWhenOthersOpen stack
                if (opts.closeWhenOthersOpen) {
                    jQuery.bt.vars.closeWhenOpenStack.push(this);
                }

                // MSC: track all bt's open
                jQuery.bt.vars.allOpenStack.push(this);

                // trigger postShow function
                // function receives the box element (the balloon wrapper div) as an argument
                opts.postShow.apply(this, [$box[0]]);


            }; // </ turnOn() >

            this.btOff = function() {

                var box = $(this).data('bt-box');

                // trigger preHide function
                // function receives the box element (the balloon wrapper div) as an argument
                opts.preHide.apply(this, [box]);

                var i = this;

                // set up the stuff to happen AFTER the tip is hidden
                i.btCleanup = function(){
                    var box = $(i).data('bt-box');
                    var contentOrig = $(i).data('bt-content-orig');
                    var overlay = $(i).data('bt-overlay');
                    if (typeof box == 'object') {
                        $(box).remove();
                        $(i).removeData('bt-box');
                    }
                    if (typeof contentOrig == 'object') {
                        var clones = $(contentOrig.original).data('bt-clones');
                        $(contentOrig).data('bt-clones', arrayRemove(clones, contentOrig.clone));
                    }
                    if (typeof overlay == 'object') {
                        $(overlay).remove();
                        $(i).removeData('bt-overlay');
                    }

                    // remove this from the stacks
                    jQuery.bt.vars.clickAnywhereStack = arrayRemove(jQuery.bt.vars.clickAnywhereStack, i);
                    jQuery.bt.vars.closeWhenOpenStack = arrayRemove(jQuery.bt.vars.closeWhenOpenStack, i);
                    // MSC: track all bt's open
                    jQuery.bt.vars.allOpenStack = arrayRemove(jQuery.bt.vars.allOpenStack, i);

                    // remove the 'bt-active' and activeClass classes from target
                    $(i).removeClass('bt-active ' + opts.activeClass);

                    // trigger postHide function
                    // no box argument since it has been removed from the DOM
                    opts.postHide.apply(i);

                }

                opts.hideTip.apply(this, [box, i.btCleanup]);

            }; // </ turnOff() >

            var refresh = this.btRefresh = function() {
                this.btOff();
                this.btOn();
            };

        }); // </ this.each() >


        function drawIt(points, strokeWidth) {
            this.moveTo(points[0].x, points[0].y);
            for (i=1;i<points.length;i++) {
                if (points[i-1].type == 'arcStart') {
                    // if we're creating a rounded corner
                    //ctx.arc(round5(points[i].x), round5(points[i].y), points[i].startAngle, points[i].endAngle, opts.cornerRadius, false);
                    this.quadraticCurveTo(round5(points[i].x, strokeWidth), round5(points[i].y, strokeWidth), round5(points[(i+1)%points.length].x, strokeWidth), round5(points[(i+1)%points.length].y, strokeWidth));
                    i++;
                    //ctx.moveTo(round5(points[i].x), round5(points[i].y));
                }
                else {
                    this.lineTo(round5(points[i].x, strokeWidth), round5(points[i].y, strokeWidth));
                }
            }
        }; // </ drawIt() >

        /**
         * For odd stroke widths, round to the nearest .5 pixel to avoid antialiasing
         * http://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors
         */
        function round5(num, strokeWidth) {
            var ret;
            strokeWidth = numb(strokeWidth);
            if (strokeWidth%2) {
                ret = num;
            }
            else {
                ret = Math.round(num - .5) + .5;
            }
            return ret;
        }; // </ round5() >

        /**
         * Ensure that a number is a number... or zero
         */
        function numb(num) {
            return parseInt(num) || 0;
        }; // </ numb() >

        /**
         * Remove an element from an array
         */
        function arrayRemove(arr, elem) {
            var x, newArr = new Array();
            for (x in arr) {
                if (arr[x] != elem) {
                    newArr.push(arr[x]);
                }
            }
            return newArr;
        }; // </ arrayRemove() >

        /**
         * Does the current browser support canvas?
         * This is a variation of http://code.google.com/p/browser-canvas-support/
         */
        function canvasSupport() {
            var canvas_compatible = false;
            try {
                canvas_compatible = !!(document.createElement('canvas').getContext('2d')); // S60
            } catch(e) {
                canvas_compatible = !!(document.createElement('canvas').getContext); // IE
            }
            return canvas_compatible;
        }

        /**
         * Does the current browser support canvas drop shadows?
         */
        function shadowSupport() {

            // to test for drop shadow support in the current browser, uncomment the next line
            // return true;

            // until a good feature-detect is found, we have to look at user agents
            try {
                var userAgent = navigator.userAgent.toLowerCase();
                if (/webkit/.test(userAgent)) {
                    // WebKit.. let's go!
                    return true;
                }
                if (/gecko|mozilla/.test(userAgent)) {
                    var match = userAgent.match(/firefox\/(\d+(?:\.\d+)+)/);
                    if (match && match.length >= 2 && parseFloat(match[1]) >= 3.1) {
                        // Mozilla 3.1 or higher
                        return true;
                    }
                }
                if (/trident\/5.0/.test(userAgent)) {
                    return true;
                }
            }
            catch(err) {
                // if there's an error, just keep going, we'll assume that drop shadows are not supported
            }

            return false;

        } // </ shadowSupport() >

        /**
         * Given two points, find a point which is dist pixels from point1 on a line to point2
         */
        function betweenPoint(point1, point2, dist) {
            // figure out if we're horizontal or vertical
            var y, x;
            if (point1.x == point2.x) {
                // vertical
                y = point1.y < point2.y ? point1.y + dist : point1.y - dist;
                return {x: point1.x, y: y};
            }
            else if (point1.y == point2.y) {
                // horizontal
                x = point1.x < point2.x ? point1.x + dist : point1.x - dist;
                return {x:x, y: point1.y};
            }
        }; // </ betweenPoint() >

        function centerPoint(arcStart, corner, arcEnd) {
            var x = corner.x == arcStart.x ? arcEnd.x : arcStart.x;
            var y = corner.y == arcStart.y ? arcEnd.y : arcStart.y;
            var startAngle, endAngle;
            if (arcStart.x < arcEnd.x) {
                if (arcStart.y > arcEnd.y) {
                    // arc is on upper left
                    startAngle = (Math.PI/180)*180;
                    endAngle = (Math.PI/180)*90;
                }
                else {
                    // arc is on upper right
                    startAngle = (Math.PI/180)*90;
                    endAngle = 0;
                }
            }
            else {
                if (arcStart.y > arcEnd.y) {
                    // arc is on lower left
                    startAngle = (Math.PI/180)*270;
                    endAngle = (Math.PI/180)*180;
                }
                else {
                    // arc is on lower right
                    startAngle = 0;
                    endAngle = (Math.PI/180)*270;
                }
            }
            return {x: x, y: y, type: 'center', startAngle: startAngle, endAngle: endAngle};
        }; // </ centerPoint() >

        /**
         * Find the intersection point of two lines, each defined by two points
         * arguments are x1, y1 and x2, y2 for r1 (line 1) and r2 (line 2)
         * It's like an algebra party!!!
         */
        function findIntersect(r1x1, r1y1, r1x2, r1y2, r2x1, r2y1, r2x2, r2y2) {

            if (r2x1 == r2x2) {
                return findIntersectY(r1x1, r1y1, r1x2, r1y2, r2x1);
            }
            if (r2y1 == r2y2) {
                return findIntersectX(r1x1, r1y1, r1x2, r1y2, r2y1);
            }

            // m = (y1 - y2) / (x1 - x2)  // <-- how to find the slope
            // y = mx + b                 // the 'classic' linear equation
            // b = y - mx                 // how to find b (the y-intersect)
            // x = (y - b)/m              // how to find x
            var r1m = (r1y1 - r1y2) / (r1x1 - r1x2);
            var r1b = r1y1 - (r1m * r1x1);
            var r2m = (r2y1 - r2y2) / (r2x1 - r2x2);
            var r2b = r2y1 - (r2m * r2x1);

            var x = (r2b - r1b) / (r1m - r2m);
            var y = r1m * x + r1b;

            return {x: x, y: y};
        }; // </ findIntersect() >

        /**
         * Find the y intersection point of a line and given x vertical
         */
        function findIntersectY(r1x1, r1y1, r1x2, r1y2, x) {
            if (r1y1 == r1y2) {
                return {x: x, y: r1y1};
            }
            var r1m = (r1y1 - r1y2) / (r1x1 - r1x2);
            var r1b = r1y1 - (r1m * r1x1);

            var y = r1m * x + r1b;

            return {x: x, y: y};
        }; // </ findIntersectY() >

        /**
         * Find the x intersection point of a line and given y horizontal
         */
        function findIntersectX(r1x1, r1y1, r1x2, r1y2, y) {
            if (r1x1 == r1x2) {
                return {x: r1x1, y: y};
            }
            var r1m = (r1y1 - r1y2) / (r1x1 - r1x2);
            var r1b = r1y1 - (r1m * r1x1);

            // y = mx + b     // your old friend, linear equation
            // x = (y - b)/m  // linear equation solved for x
            var x = (y - r1b) / r1m;

            return {x: x, y: y};

        }; // </ findIntersectX() >

    }; // </ jQuery.fn.bt() >

    /**
     * jQuery's compat.js (used in Drupal's jQuery upgrade module, overrides the $().position() function
     *  this is a copy of that function to allow the plugin to work when compat.js is present
     *  once compat.js is fixed to not override existing functions, this function can be removed
     *  and .btPosion() can be replaced with .position() above...
     */
    jQuery.fn.btPosition = function() {

        function num(elem, prop) {
            return elem[0] && parseInt( jQuery.css(elem[0], prop, true), 10 ) || 0;
        };

        var left = 0, top = 0, results;

        if ( this[0] ) {
            // Get *real* offsetParent
            var offsetParent = this.offsetParent(),

            // Get correct offsets
                offset       = this.offset(),
                parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();

            // Subtract element margins
            // note: when an element has margin: auto the offsetLeft and marginLeft
            // are the same in Safari causing offset.left to incorrectly be 0
            offset.top  -= num( this, 'marginTop' );
            offset.left -= num( this, 'marginLeft' );

            // Add offsetParent borders
            parentOffset.top  += num( offsetParent, 'borderTopWidth' );
            parentOffset.left += num( offsetParent, 'borderLeftWidth' );

            // Subtract the two offsets
            results = {
                top:  offset.top  - parentOffset.top,
                left: offset.left - parentOffset.left
            };
        }

        return results;
    }; // </ jQuery.fn.btPosition() >


    /**
     * jQuery's dimensions.js overrides the $().btOuterWidth() function
     *  this is a copy of original jQuery's outerWidth() function to
     *  allow the plugin to work when dimensions.js is present
     */
    jQuery.fn.btOuterWidth = function(margin) {

        function num(elem, prop) {
            return elem[0] && parseInt(jQuery.css(elem[0], prop, true), 10) || 0;
        };

        return this["innerWidth"]()
            + num(this, "borderLeftWidth")
            + num(this, "borderRightWidth")
            + (margin ? num(this, "marginLeft")
            + num(this, "marginRight") : 0);

    }; // </ jQuery.fn.btOuterWidth() >

    /**
     * A convenience function to run btOn() (if available)
     * for each selected item
     */
    jQuery.fn.btOn = function() {
        return this.each(function(index){
            if (jQuery.isFunction(this.btOn)) {
                this.btOn();
            }
        });
    }; // </ $().btOn() >

    /**
     *
     * A convenience function to run btOff() (if available)
     * for each selected item
     */
    jQuery.fn.btOff = function() {
        return this.each(function(index){
            if (jQuery.isFunction(this.btOff)) {
                this.btOff();
            }
        });
    }; // </ $().btOff() >

    /**
     * Turn off all open beauty tips
     */
    jQuery.btOffAll = function() {
      $(jQuery.bt.vars.allOpenStack).btOff();
    }

    jQuery.bt.vars = {clickAnywhereStack: [], closeWhenOpenStack: [], allOpenStack: []};

    /**
     * This function gets bound to the document's click event
     * It turns off all of the tips in the click-anywhere-to-close stack
     */
    jQuery.bt.docClick = function(e) {
        if (!e) {
            var e = window.event;
        };
        // if clicked element is a child of neither a tip NOR a target
        // and there are tips in the stack
        if (!$(e.target).parents().andSelf().filter('.bt-wrapper, .bt-active').length && jQuery.bt.vars.clickAnywhereStack.length) {
            // if clicked element isn't inside tip, close tips in stack
            $(jQuery.bt.vars.clickAnywhereStack).btOff();
            $(document).unbind('click', jQuery.bt.docClick);
        }
    }; // </ docClick() >

    /**
     * Defaults for the beauty tips
     *
     * Note this is a variable definition and not a function. So defaults can be
     * written for an entire page by simply redefining attributes like so:
     *
     *   jQuery.bt.options.width = 400;
     *
     * Be sure to use *jQuery.bt.options* and not jQuery.bt.defaults when overriding
     *
     * This would make all Beauty Tips boxes 400px wide.
     *
     * Each of these options may also be overridden during
     *
     * Can be overriden globally or at time of call.
     *
     */
    jQuery.bt.defaults = {
        trigger:         'hover',                // trigger to show/hide tip
        // use [on, off] to define separate on/off triggers
        // also use space character to allow multiple  to trigger
        // examples:
        //   ['focus', 'blur'] // focus displays, blur hides
        //   'dblclick'        // dblclick toggles on/off
        //   ['focus mouseover', 'blur mouseout'] // multiple triggers
        //   'now'             // shows/hides tip without event
        //   'none'            // use $('#selector').btOn(); and ...btOff();
        //   'hoverIntent'     // hover using hoverIntent plugin (settings below)
        // note:
        //   hoverIntent becomes default if available

        clickAnywhereToClose: true,              // clicking anywhere outside of the tip will close it
        closeWhenOthersOpen: false,              // tip will be closed before another opens - stop >= 2 tips being on

        shrinkToFit:      false,                 // should short single-line content get a narrower balloon?
        width:            '200px',               // width of tooltip box

        padding:          '10px',                // padding for content (get more fine grained with cssStyles)
        spikeGirth:       10,                    // width of spike
        spikeLength:      15,                    // length of spike
        overlap:          0,                     // spike overlap (px) onto target (can cause problems with 'hover' trigger)
        otherOverlap:     0,
        overlay:          false,                 // display overlay on target (use CSS to style) -- BUGGY!
        killTitle:        true,                  // kill title tags to avoid double tooltips

        textzIndex:       9999,                  // z-index for the text
        boxzIndex:        9998,                  // z-index for the "talk" box (should always be less than textzIndex)
        wrapperzIndex:    9997,
        offsetParent:     null,                  // DOM node to append the tooltip into.
        // Must be positioned relative or absolute. Can be selector or object
        positions:        ['most'],              // preference of positions for tip (will use first with available space)
        // possible values 'top', 'bottom', 'left', 'right' as an array in order of
        // preference. Last value will be used if others don't have enough space.
        // or use 'most' to use the area with the most space
        fill:             "rgb(255, 255, 102)",  // fill color for the tooltip box, you can use any CSS-style color definition method
        // http://www.w3.org/TR/css3-color/#numerical - not all methods have been tested

        windowMargin:     10,                    // space (px) to leave between text box and browser edge

        strokeWidth:      1,                     // width of stroke around box, **set to 0 for no stroke**
        strokeStyle:      "#000",                // color/alpha of stroke

        cornerRadius:     5,                     // radius of corners (px), set to 0 for square corners

        // following values are on a scale of 0 to 1 with .5 being centered

        centerPointX:     .5,                    // the spike extends from center of the target edge to this point
        centerPointY:     .5,                    // defined by percentage horizontal (x) and vertical (y)

        shadow:           false,                 // use drop shadow? (only displays in Safari and FF 3.1) - experimental
        shadowOffsetX:    2,                     // shadow offset x (px)
        shadowOffsetY:    2,                     // shadow offset y (px)
        shadowBlur:       3,                     // shadow blur (px)
        shadowColor:      "#000",                // shadow color/alpha
        shadowOverlap:   false,                  // when shadows overlap the target element it can cause problem with hovering
        // set this to true to overlap or set to a numeric value to define the amount of overlap
        noShadowOpts:     {strokeStyle: '#999'},  // use this to define 'fall-back' options for browsers which don't support drop shadows

        cssClass:         '',                    // CSS class to add to the box wrapper div (of the TIP)
        cssStyles:        {},                    // styles to add the text box
        //   example: {fontFamily: 'Georgia, Times, serif', fontWeight: 'bold'}

        activeClass:      'bt-active',           // class added to TARGET element when its BeautyTip is active

        contentSelector:  "$(this).prop('title')", // if there is no content argument, use this selector to retrieve the title
        // a function which returns the content may also be passed here

        ajaxPath:         null,                  // if using ajax request for content, this contains url and (opt) selector
        // this will override content and contentSelector
        // examples (see jQuery load() function):
        //   '/demo.html'
        //   '/help/ajax/snip'
        //   '/help/existing/full div#content'

        // ajaxPath can also be defined as an array
        // in which case, the first value will be parsed as a jQuery selector
        // the result of which will be used as the ajaxPath
        // the second (optional) value is the content selector as above
        // examples:
        //    ["$(this).prop('href')", 'div#content']
        //    ["$(this).parents('.wrapper').find('.title').prop('href')"]
        //    ["$('#some-element').val()"]

        ajaxError:        '<strong>ERROR:</strong> <em>%error</em>',
        // error text, use "%error" to insert error from server
        ajaxLoading:     '<blink>Loading...</blink>',  // yes folks, it's the blink tag!
        ajaxData:         {},                    // key/value pairs
        ajaxType:         'GET',                 // 'GET' or 'POST'
        ajaxCache:        true,                  // cache ajax results and do not send request to same url multiple times
        ajaxOpts:         {},                    // any other ajax options - timeout, passwords, processing functions, etc...
        // see http://docs.jquery.com/Ajax/jQuery.ajax#options

        preBuild:         function(){},          // function to run before popup is built
        preShow:          function(box){},       // function to run before popup is displayed
        showTip:          function(box){
            $(box).show();
        },
        postShow:         function(box){},       // function to run after popup is built and displayed

        preHide:          function(box){},       // function to run before popup is removed
        hideTip:          function(box, callback) {
            $(box).hide();
            callback();   // you MUST call "callback" at the end of your animations
        },
        postHide:         function(){},          // function to run after popup is removed

        hoverIntentOpts:  {                          // options for hoverIntent (if installed)
            interval: 300,           // http://cherne.net/brian/resources/jquery.hoverIntent.html
            timeout: 500
        }

    }; // </ jQuery.bt.defaults >

    jQuery.bt.options = {};

})(jQuery);

// @todo
// use larger canvas (extend to edge of page when windowMargin is active)
// add options to shift position of tip vert/horiz and position of spike tip
// create drawn (canvas) shadows
// use overlay to allow overlap with hover
// experiment with making tooltip a subelement of the target
// handle non-canvas-capable browsers elegantly