/*
* jQuery.hoverbubble 
* Version 1.0.0.2
* Date: 30/09/2011
* Author: Tomas Austin
*/
var hoverbubbleTimeouts = {};
(function($) {
    $.fn.extend({
        hoverbubble: function(args) {
            var defaults = {
                anchor: this, //the element that the hoverbubble is "attached" to
                html: "", //the html to show in the hoverbubble
                rel: "", //something to reference the bubble with, e.g. use for css
                width: 150, //erm... this is the height of the hoverbubble... it's all lies!
				offsetLeft: 0, //how much to offset the hoverbubble by
				offsetTop: 0, //one guess...
				keepBubbleOnHover: true //whether to keep the hoverbubble displaying when the mouse is moved onto it
            };
            //extend args to make sure we have all our defaults
            args = $.extend(defaults, args);
            //make sure args.width is an int
            args.width = parseInt(args.width);

            return this.each(function() {
                //create a new container
                var bubble = document.createElement("div");
                $("body").append(bubble);
                $(bubble).attr("id", "hoverbubble-" + $(this).attr("id"));
                $(bubble).attr("class", "hoverbubble");
                $(bubble).attr("rel", args.rel);
                var topLeft = document.createElement("div");
                $(topLeft).attr("class", "hoverbubble-top-left");
                $(bubble).append(topLeft);
                var top = document.createElement("div");
                $(top).attr("class", "hoverbubble-top");
                $(bubble).append(top);
                var topRight = document.createElement("div");
                $(topRight).attr("class", "hoverbubble-top-right");
                $(bubble).append(topRight);
                var middle = document.createElement("div");
                $(middle).attr("class", "hoverbubble-middle");
                $(bubble).append(middle);
                var right = document.createElement("div");
                $(middle).append(right);
                $(right).attr("class", "hoverbubble-right");
                var content = document.createElement("div");
                $(right).append(content);
                $(content).attr("class", "hoverbubble-content");
                var bottomLeft = document.createElement("div");
                $(bottomLeft).attr("class", "hoverbubble-bottom-left");
                $(bubble).append(bottomLeft);
                var bottom = document.createElement("div");
                $(bottom).attr("class", "hoverbubble-bottom");
                $(bubble).append(bottom);
                var bottomRight = document.createElement("div");
                $(bottomRight).attr("class", "hoverbubble-bottom-right");
                $(bubble).append(bottomRight);
				
                //fill with the passed in html and resize accordingly
                $(bubble).css("width", args.width + $(topLeft).width() + $(topRight).width());
                $(content).html(args.html);
                $(content).css("width", args.width);
                $(top).css("width", args.width);
                $(bottom).css("width", args.width - $(bottomLeft).width() + $(bottomRight).width());

                //set up the events for the anchor
                $(this).hover(function() {
                    //cancel any timeouts
                    clearTimeout(hoverbubbleTimeouts[$(bubble).attr("id")]);
                    if ($(bubble).css("opacity") != 1) {
                        //position it on the page
                        var left = $(this).offset().left + args.offsetLeft;
                        var top = $(this).offset().top - $(bubble).height() + args.offsetTop;
						
						//verify the position of the bubble
						var rightOverlap = left + $(bubble).width() - $(window).width();
						if (rightOverlap > 0) 
							left -= rightOverlap;
						else if (left < 0)
							left = 0;
						var bottomOverlap = top + $(bubble).height() - $(document).height();
						if (bottomOverlap > 0) 
							top -= bottomOverlap;
						else if (top < 0) 
							top = 0;
							
						//set the position
                        $(bubble).css({
                            left: left,
                            top: top - 20
                        });
						
						//animate the bubble into this position
                        $(bubble).animate({
                            opacity: 1,
                            top: top
                        }, {
                            duration: 100,
                            queue: false
                        });
                    }
                }, function() {
                    //start a timeout to hide it
                    hoverbubbleTimeouts[$(bubble).attr("id")] = setTimeout(function() {
                        var top = $(args.anchor).offset().top - $(bubble).height();
                        $(bubble).animate({
                            opacity: 0,
                            top: top - 20
                        }, {
                            complete: function() {
                                $(bubble).css({
                                    left: "-99em",
                                    top: "-99em"
                                });
                            },
                            duration: 200,
                            queue: false
                        });
                    }, 10);
                });
				if (args.keepBubbleOnHover) {
					//set up the events for the bubble
					$(bubble).hover(function() {
						//cancel any timeouts
						clearTimeout(hoverbubbleTimeouts[$(bubble).attr("id")]);
					}, function() {
						//start a timeout to hide it
						hoverbubbleTimeouts[$(bubble).attr("id")] = setTimeout(function() {
							var top = $(args.anchor).offset().top - $(bubble).height();
							$(bubble).animate({
								opacity: 0,
								top: top - 20
							}, {
								duration: 200,
								complete: function() {
									$(bubble).css({
										left: "-99em",
										top: "-99em"
									});
								}
							});
						}, 10);
					});
				}
            });
        }
    });
})(jQuery);