/*
* @name BeautyTips
* @desc a tooltips/baloon-help plugin for jQuery
*
* @author Jeff Robbins - Lullabot - http://www.lullabot.com
* @version 0.9.1  (2/15/2009)
*  
* @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
*
*/

/*
* @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.
* jQuery(selector).bt();
* jQuery(selector).bt('Content text');
* jQuery(selector).bt('Content text', {option1: value, option2: value});
* jQuery(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, options);

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

        var ajaxTimeout = false;

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

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

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

        }
        else if (opts.trigger[0] == 'hover') {
            jQuery(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 (jQuery(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:
            // jQuery('#selector').btOn();
            // jQuery('#selector').btOff();
        }
        else if (opts.trigger.length > 1 && opts.trigger[0] != opts.trigger[1]) {
            jQuery(this)
            .bind(opts.trigger[0], function() {
                this.btOn();
            })
        .bind(opts.trigger[1], function() {
            this.btOff();
        });
        }
        else {
            // toggle using the same event
            jQuery(this).bind(opts.trigger[0], function() {
                if (jQuery(this).hasClass('bt-active')) {
                    this.btOff();
                }
                else {
                    this.btOn();
                }
            });
        }


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

            // trigger preShow function
            opts.preShow.apply(this);

            // turn off other tips
            jQuery(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
            jQuery(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..
                    jQuery(this).prop('title', jQuery(this).prop('bt-xTitle'));
                }
                // then evaluate the selector... title is now in place
                content = eval(opts.contentSelector);
                if (opts.killTitle) {
                    // now remove the title again, so we don't get double tips
                    jQuery(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 ? jQuery(document.body).data('btCache-' + url.replace(/\./g, '')) : null;
                if (typeof cacheData == 'string') {
                    content = selector ? jQuery("<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) {
                          jQuery(document.body).data('btCache-' + url.replace(/\./g, ''), XMLHttpRequest.responseText);
                      }
                      ajaxTimeout = false;
                      content = selector ?
                      // Create a dummy div to hold the results
      						jQuery("<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 (jQuery(target).hasClass('bt-active')) {
                      target.btOn();
                  }
              }
          }, opts.ajaxData);
                    // do the ajax request
                    $.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

            var offsetParent = jQuery(this).offsetParent();
            var pos = jQuery(this).btPosition();
            // top, left, width, and height values of the target element
            var top = numb(pos.top) + numb(jQuery(this).css('margin-top')); // IE can return 'auto' for margins
            var left = numb(pos.left) + numb(jQuery(this).css('margin-left'));
            var width = jQuery(this).outerWidth();
            var height = jQuery(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
                content = jQuery(content).clone(true).show();
            }

            // create the tip content div, populate it, and style it
            var $text = jQuery('<div class="bt-content"></div>').append(content).css({ padding: opts.padding, position: 'absolute', width: opts.width, zIndex: opts.textzIndex }).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 = jQuery('<div class="bt-wrapper"></div>').append($text).addClass(opts.cssClass).css({ position: 'absolute', width: opts.width, zIndex: opts.wrapperzIndex }).appendTo(offsetParent);

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

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

            // see if the text box will fit in the various positions
            var scrollTop = numb(jQuery(document).scrollTop());
            var scrollLeft = numb(jQuery(document).scrollLeft());
            var docWidth = numb(jQuery(window).width());
            var docHeight = numb(jQuery(window).height());
            var winRight = scrollLeft + docWidth;
            var winBottom = scrollTop + docHeight;
            var space = new Object();
            space.top = jQuery(this).offset().top - scrollTop;
            space.bottom = docHeight - ((jQuery(this).offset().top + height) - scrollTop);
            space.left = jQuery(this).offset().left - scrollLeft;
            space.right = docWidth - ((jQuery(this).offset().left + width) - scrollLeft);
            var textOutHeight = numb($text.outerHeight());
            var textOutWidth = numb($text.outerWidth());
            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];
                    if ((position == 'left' || position == 'right') && space[position] > textOutWidth + opts.spikeLength) {
                        break;
                    }
                    else if ((position == 'top' || position == 'bottom') && space[position] > textOutHeight + opts.spikeLength) {
                        break;
                    }
                }
            }

            var horiz, vert;
            // horizontal (left) offset for the box
            switch (opts.horizontalAlign) {
                case 'left':
                    horiz = left + opts.offsetX;
                    break;
                case 'right':
                    horiz = left + (width - textOutWidth) + opts.offsetX;
                    break;
                default: // 'center'
                    horiz = left + ((width - textOutWidth) * .5) + opts.offsetX;
                    break;
            }
            // vertical (top) offset for the box
            switch (opts.verticalAlign) {
                case 'top':
                    vert = top + opts.offsetY;
                    break;
                case 'bottom':
                    vert = top + (height - textOutHeight) + opts.offsetY;
                    break;
                default: // 'middle'
                    vert = top + ((height - textOutHeight) * .5) + opts.offsetY;
                    break;
            }
            var animDist = opts.animate ? numb(opts.distance) : 0;
            var points = new Array();
            var shadowPoints = new Array();
            var textTop, textLeft, textRight, textBottom, textTopSpace, textBottomSpace, textLeftSpace, textRightSpace, crossPoint, textCenter, spikePoint;
            var currPointNum;

            // 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) {
                case 'top':
                    // spike on bottom
                    $text.css('margin-bottom', opts.spikeLength + 'px');
                    $box.css({ top: (top - $text.outerHeight(true) - animDist) + opts.overlap, left: horiz });
                    // move text left/right if extends out of window
                    textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.outerWidth(true));
                    var xShift = 0;
                    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.outerWidth();
                    textBottom = textTop + $text.outerHeight();
                    textCenter = { x: textLeft + ($text.outerWidth() * opts.centerPointX), y: textTop + ($text.outerHeight() * opts.centerPointY) };
                    currPointNum = points.length;
                    if (opts.autoShapeSpike && xShift != 0) {
                        // make sure that spikePoint is not outside of text box boundaries
                        var leftMostX = textLeft + (opts.spikeGirth / 2) + opts.cornerRadius;
                        var rightMostX = textRight - (opts.spikeGirth / 2) - opts.cornerRadius;
                        var sx = (textOutWidth / 2) + xShift;
                        sx = sx < leftMostX ? leftMostX : sx;
                        sx = sx > rightMostX ? rightMostX : sx;
                        spikePoint = { y: textBottom + opts.spikeLength, x: sx, type: 'spike' };
                    }
                    else if (opts.autoPositionSpike && opts.horizontalAlign == 'left') {
                        spikePoint = { y: textBottom + opts.spikeLength, x: textLeft - opts.offsetX + (width / 2), type: 'spike' };
                    }
                    else if (opts.autoPositionSpike && opts.horizontalAlign == 'right') {
                        spikePoint = { y: textBottom + opts.spikeLength, x: textRight - opts.offsetX - (width / 2), type: 'spike' };
                    }
                    else {
                        spikePoint = { y: textBottom + opts.spikeLength, x: ((textRight - textLeft) * .5) + xShift, type: 'spike' };
                    }
                    if (opts.showSpike) {
                        points[currPointNum] = spikePoint;
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    if ((opts.autoShapeSpike && xShift != 0) || (opts.autoPositionSpike && opts.horizontalAlign != 'center')) {
                        crossPoint = { y: textBottom, x: spikePoint.x };
                    }
                    else {
                        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;
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = { x: crossPoint.x - (opts.spikeGirth / 2), y: textBottom, type: 'join' };
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textLeft, y: textBottom, type: 'corner' };  // left bottom corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textLeft, y: textTop, type: 'corner' };     // left top corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textRight, y: textTop, type: 'corner' };    // right top corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textRight, y: textBottom, type: 'corner' }; // right bottom corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = { x: crossPoint.x + (opts.spikeGirth / 2), y: textBottom, type: 'join' };
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = spikePoint;
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    break;
                case 'left':
                    // spike on right
                    $text.css('margin-right', opts.spikeLength + 'px');
                    $box.css({ top: vert + 'px', left: ((left - $text.outerWidth(true) - animDist) + opts.overlap) + 'px' });
                    // move text up/down if extends out of window
                    textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true));
                    var yShift = 0;
                    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.outerWidth();
                    textBottom = textTop + $text.outerHeight();
                    textCenter = { x: textLeft + ($text.outerWidth() * opts.centerPointX), y: textTop + ($text.outerHeight() * opts.centerPointY) };
                    currPointNum = points.length;
                    if (opts.autoShapeSpike && yShift != 0) {
                        // make sure that spikePoint is not outside of text box boundaries
                        var topMostY = textTop + (opts.spikeGirth / 2) + opts.cornerRadius;
                        var bottomMostY = textBottom - (opts.spikeGirth / 2) - opts.cornerRadius;
                        var sy = (textOutHeight / 2) + yShift;
                        sy = sy < topMostY ? topMostY : sy;
                        sy = sy > bottomMostY ? bottomMostY : sy;
                        spikePoint = { x: textRight + opts.spikeLength, y: sy, type: 'spike' };
                    }
                    else if (opts.autoPositionSpike && opts.verticalAlign == 'top') {
                        spikePoint = { x: textRight + opts.spikeLength, y: textTop - opts.offsetY + (height / 2), type: 'spike' };
                    }
                    else if (opts.autoPositionSpike && opts.verticalAlign == 'bottom') {
                        spikePoint = { x: textRight + opts.spikeLength, y: textBottom - opts.offsetY - (height / 2), type: 'spike' };
                    }
                    else {
                        spikePoint = { x: textRight + opts.spikeLength, y: ((textBottom - textTop) * .5) + yShift, type: 'spike' };
                    }
                    if (opts.showSpike) {
                        points[currPointNum] = spikePoint;
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    if ((opts.autoShapeSpike && yShift != 0) || (opts.autoPositionSpike && opts.verticalAlign != 'center')) {
                        crossPoint = { x: textRight, y: spikePoint.y };
                    }
                    else {
                        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;
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = { x: textRight, y: crossPoint.y + opts.spikeGirth / 2, type: 'join' };
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textRight, y: textBottom, type: 'corner' }; // right bottom corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textLeft, y: textBottom, type: 'corner' };  // left bottom corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textLeft, y: textTop, type: 'corner' };     // left top corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textRight, y: textTop, type: 'corner' };    // right top corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = { x: textRight, y: crossPoint.y - opts.spikeGirth / 2, type: 'join' };
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = spikePoint;
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    break;
                case 'bottom':
                    // spike on top
                    $text.css('margin-top', opts.spikeLength + 'px');
                    $box.css({ top: (top + height + animDist) - opts.overlap, left: horiz });
                    // move text up/down if extends out of window
                    textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.outerWidth(true));
                    var xShift = 0;
                    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.outerWidth();
                    textBottom = textTop + $text.outerHeight();
                    textCenter = { x: textLeft + ($text.outerWidth() * opts.centerPointX), y: textTop + ($text.outerHeight() * opts.centerPointY) };
                    currPointNum = points.length;
                    if (opts.autoShapeSpike && xShift != 0) {
                        // make sure that spikePoint is not outside of text box boundaries
                        var leftMostX = textLeft + (opts.spikeGirth / 2) + opts.cornerRadius;
                        var rightMostX = textRight - (opts.spikeGirth / 2) - opts.cornerRadius;
                        var sx = (textOutWidth / 2) + xShift;
                        sx = sx < leftMostX ? leftMostX : sx;
                        sx = sx > rightMostX ? rightMostX : sx;
                        spikePoint = { x: sx, y: 0, type: 'spike' };
                    }
                    else if (opts.autoPositionSpike && opts.horizontalAlign == 'left') {
                        spikePoint = { y: 0, x: textLeft - opts.offsetX + (width / 2), type: 'spike' };
                    }
                    else if (opts.autoPositionSpike && opts.horizontalAlign == 'right') {
                        spikePoint = { y: 0, x: textRight - opts.offsetX - (width / 2), type: 'spike' };
                    }
                    else {
                        spikePoint = { x: ((textRight - textLeft) * .5) + xShift, y: 0, type: 'spike' };
                    }
                    if (opts.showSpike) {
                        points[currPointNum] = spikePoint;
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    if ((opts.autoShapeSpike && xShift != 0) || (opts.autoPositionSpike && opts.horizontalAlign != 'center')) {
                        crossPoint = { y: 0, x: spikePoint.x };
                    }
                    else {
                        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;
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = { x: crossPoint.x + opts.spikeGirth / 2, y: textTop, type: 'join' };
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textRight, y: textTop, type: 'corner' };    // right top corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textRight, y: textBottom, type: 'corner' }; // right bottom corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textLeft, y: textBottom, type: 'corner' };  // left bottom corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textLeft, y: textTop, type: 'corner' };     // left top corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = { x: crossPoint.x - (opts.spikeGirth / 2), y: textTop, type: 'join' };
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = spikePoint;
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    break;
                case 'right':
                    // spike on left
                    $text.css('margin-left', (opts.spikeLength + 'px'));
                    $box.css({ top: vert + 'px', left: ((left + width + animDist) - opts.overlap) + 'px' });
                    // move text up/down if extends out of window
                    textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true));
                    var yShift = 0;
                    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.outerWidth();
                    textBottom = textTop + $text.outerHeight();
                    textCenter = { x: textLeft + ($text.outerWidth() * opts.centerPointX), y: textTop + ($text.outerHeight() * opts.centerPointY) };
                    currPointNum = points.length;
                    if (opts.autoShapeSpike && yShift != 0) {
                        // make sure that spikePoint is not outside of text box boundaries
                        var topMostY = textTop + (opts.spikeGirth / 2) + opts.cornerRadius;
                        var bottomMostY = textBottom - (opts.spikeGirth / 2) - opts.cornerRadius;
                        var sy = (textOutHeight / 2) + yShift;
                        sy = sy < topMostY ? topMostY : sy;
                        sy = sy > bottomMostY ? bottomMostY : sy;
                        spikePoint = { x: 0, y: sy, type: 'spike' };
                    }
                    else if (opts.autoPositionSpike && opts.verticalAlign == 'top') {
                        spikePoint = { x: 0, y: textTop - opts.offsetY + (height / 2), type: 'spike' };
                    }
                    else if (opts.autoPositionSpike && opts.verticalAlign == 'bottom') {
                        spikePoint = { x: 0, y: textBottom - opts.offsetY - (height / 2), type: 'spike' };
                    }
                    else {
                        spikePoint = { x: 0, y: ((textBottom - textTop) * .5) + yShift, type: 'spike' };
                    }
                    if (opts.showSpike) {
                        points[currPointNum] = spikePoint;
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    if ((opts.autoShapeSpike && yShift != 0) || (opts.autoPositionSpike && opts.verticalAlign != 'center')) {
                        crossPoint = { x: opts.spikeLength, y: spikePoint.y };
                    }
                    else {
                        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;
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = { x: textLeft, y: crossPoint.y - opts.spikeGirth / 2, type: 'join' };
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textLeft, y: textTop, type: 'corner' };     // left top corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textRight, y: textTop, type: 'corner' };    // right top corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textRight, y: textBottom, type: 'corner' }; // right bottom corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    points[currPointNum] = { x: textLeft, y: textBottom, type: 'corner' };  // left bottom corner
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = { x: textLeft, y: crossPoint.y + opts.spikeGirth / 2, type: 'join' };
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    currPointNum = points.length;
                    if (opts.showSpike) {
                        points[currPointNum] = spikePoint;
                    }
                    if ((opts.showSpike && opts.shadowOnSpike) || (points[currPointNum] != null && points[currPointNum].type === 'corner')) {
                        shadowPoints[shadowPoints.length] = { y: points[currPointNum].y + opts.shadowOffsetY, x: points[currPointNum].x + opts.shadowOffsetX, type: points[currPointNum].type };
                    }
                    break;
            } // </ switch >

            var canvas = jQuery('<canvas width="' + (numb($text.outerWidth(true)) + (opts.strokeWidth * 2) + (opts.shadow ? opts.shadowOffsetX : 0)) + '" height="' + (numb($text.outerHeight(true)) + (opts.strokeWidth * 2) + (opts.shadow ? opts.shadowOffsetY : 0)) + '"></canvas>').appendTo($box).css({ position: 'absolute', top: $text.btPosition().top, left: $text.btPosition().left, zIndex: opts.boxzIndex }).get(0);

            // 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) {
                points = roundCorners([points]);
                shadowPoints = roundCorners([shadowPoints]);
            }

            var ctx = canvas.getContext("2d");
            if (opts.shadow) {
                ctx.beginPath();
                drawIt.apply(ctx, [shadowPoints], opts.strokeWidth);
                ctx.fillStyle = 'rgba(12, 12, 12, .3)';
                ctx.closePath();
                ctx.fill();
            }
            ctx.beginPath();
            drawIt.apply(ctx, [points], opts.strokeWidth);
            ctx.fillStyle = opts.fill;
            ctx.closePath();
            ctx.fill();
            if (opts.strokeWidth > 0) {
                ctx.lineWidth = opts.strokeWidth;
                ctx.strokeStyle = opts.strokeStyle;
                ctx.beginPath();
                drawIt.apply(ctx, [points], opts.strokeWidth);
                ctx.closePath();
                ctx.stroke();
            }

            if (opts.animate) {
                $box.css({ opacity: 0.1 });
            }

            $box.css({ visibility: 'visible' });

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

            var animParams = { opacity: 1 };
            if (opts.animate) {
                switch (position) {
                    case 'top':
                        animParams.top = $box.btPosition().top + opts.distance;
                        break;
                    case 'left':
                        animParams.left = $box.btPosition().left + opts.distance;
                        break;
                    case 'bottom':
                        animParams.top = $box.btPosition().top - opts.distance;
                        break;
                    case 'right':
                        animParams.left = $box.btPosition().left - opts.distance;
                        break;
                }
                $box.animate(animParams, { duration: opts.speed, easing: opts.easing });
            }

            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);
                jQuery(document).click(jQuery.bt.docClick);
            }

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

            // trigger postShow function
            opts.postShow.apply(this);


        }; // </ turnOn() >

        this.btOff = function() {

            // trigger preHide function
            opts.preHide.apply(this);

            var box = jQuery(this).data('bt-box');
            var overlay = jQuery(this).data('bt-overlay');
            if (typeof box == 'object') {
                jQuery(box).remove();
                jQuery(this).removeData('bt-box');
            }
            if (typeof overlay == 'object') {
                jQuery(overlay).remove();
                jQuery(this).removeData('bt-overlay');
            }

            // remove this from the stacks
            jQuery.bt.vars.clickAnywhereStack = arrayRemove(jQuery.bt.vars.clickAnywhereStack, this);
            jQuery.bt.vars.closeWhenOpenStack = arrayRemove(jQuery.bt.vars.closeWhenOpenStack, this);

            // trigger postHide function
            opts.postHide.apply(this);

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

        }; // </ turnOff() >

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


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

    function roundCorners(points) {
        // 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
        return newPoints;
    }; // </ roundCorners() >

    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() >

    /*
    * 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.curCSS(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() >


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

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

/*
* 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 (!jQuery(e.target).parents().andSelf().filter('.bt-wrapper, .bt-active').length) {
        // if clicked element isn't inside tip, close tips in stack
        jQuery(jQuery.bt.vars.clickAnywhereStack).btOff();
        jQuery(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.defaults.width = 400;
*
* 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: true,          // tip will be closed before another opens - stop >= 2 tips being on

    width: '200px',                     // width of tooltip box
                                        //   when combined with cssStyles: {width: 'auto'}, this becomes a max-width for the text
    padding: '10px',                    // padding for content (get more fine grained with cssStyles)
    showSpike: true,                    // show spike?
    spikeGirth: 10,                     // width of spike
    spikeLength: 7,                     // length of spike
    overlap: 0,                         // spike overlap (px) onto target (can cause problems with 'hover' trigger)
    overlay: false,                     // display overlay on target (use CSS to style) -- BUGGY!
    autoShapeSpike: true,               // Always show the spike auto shaped
    autoPositionSpike: false,           // Always show the spike auto shaped
    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,
    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: "#FFFFFF",                    // fill color for the tooltip box

    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: "#CCC",                // color/alpha of stroke

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

    offsetX: 0,                         // offset of the box in (px) from the element
    offsetY: 0,                         // horizontal (x) and vertical (y)

                                        // following 2 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: true,                       // use drop shadow?
    shadowOffsetX: 3,                   // shadow offset x (px)
    shadowOffsetY: 3,                   // shadow offset y (px)
    shadowOnSpike: false,               // show shadow on the spike

    animate: false,                     // animate show/hide of box - EXPERIMENTAL (buggy in IE)
    distance: 15,                       // distance of animation movement (px)
    easing: 'swing',                    // animation easing
    speed: 200,                         // speed (ms) of animation

    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: "jQuery(this).prop('title')",          // if there is no content argument, use this selector to retrieve the title

    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:
                                        //    ["jQuery(this).prop('href')", 'div#content']
                                        //    ["jQuery(this).parents('.wrapper').find('.title').prop('href')"]
                                        //    ["jQuery('#some-element').val()"]

    ajaxError: '<strong>ERROR:</strong> <em>%error</em>',   // error text, use "%error" to insert error from server
    ajaxLoading: '<IMG alt="Loading..." src="https://cache.bmwusa.com/image_464a3c82-fc50-408e-b9ff-e459d79a7158.arox" /><BR />Loading...',
    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

    preShow: function() { return; },    // function to run before popup is built and displayed
    postShow: function() { return; },   // function to run after popup is built and displayed
    preHide: function() { return; },    // function to run before popup is removed
    postHide: function() { return; },   // 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
    },
    horizontalAlign: 'center',          // if top or bottom, horizontalAlign will align the box horizontally based upon this.
                                        //   the possible values are: 'center', 'left', 'right'
    verticalAlign: 'middle'             // if left or right, verticalAlign will align the box vertically based upon this.
                                        //   the possible values are: 'middle', 'top', 'bottom'
};  // </ jQuery.bt.defaults >


// @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
// rework animation system