/* jQuery plugin for easy CSS tooltips
 *
 * Based on Tooltip scripts by Alen Grakalic (http://cssglobe.com)
 * For more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 * Extended by Senko Rasic to call arbitrary function which builds tooltip HTML
 * Extended by Richard Hallows to make tooltip aware of the viewport
 *
 * Example plugin usage cases:
 *
 * 1) put a normal tooltip on all anchors having 'tooltip' class, creating a
 *    paragraph with id 'tooltip' to hold the tooltip
 *    
 *      $('a.tooltip').tooltip(function (el) {
 *          return el.anchor_title;
 *      });
 *
 * 2) image preview (image + optional caption) on anchors having 'preview' class,
 *    creating a paragraph with id 'preview' to hold the tooltip
 *    
 *      $('a.preview').tooltip(function (el) {
 *              var c = (el.anchor_title != "") ? "<br/>" + el.anchor_title : "";
 *              return "<img src='"+ el.href +"' alt='image preview' />"+ c;
 *      }, {'tooltipID': 'preview'});
 *
 *
 * 3) url preview (image + optional caption) on anchors having 'screenshot' class,
 *    creating a paragraph with id 'screenshot' to hold the tooltip
 *    
 *      $('a.screenshot').tooltip(function (el) {
 *          var c = (el.anchor_title != "") ? "<br/>" + el.anchor_title : "";
 *         return "<img src='"+ el.rel +"' alt='url preview' />"+ c;
 *      }, {'tooltipID': 'screenshot'});
 */

(function($) {
    function tooltip(el, fn, options) {
			
        el.hover(function (e) {
			
			this.anchor_title = this.title;
            this.title = '';
			
			var $toolTipObject = $('<div id="' + options.tooltipId + '"><div id="shell">' + fn(this) + '</div></div>');	 
		
			$('body').append($toolTipObject);
			_calculatePosition(e);
			
			//var url = [$toolTipObject.find('img').attr('src')];
			//$toolTipObject.find('#image').empty();
			/*$.preload( url, {
				onComplete:function( data ){
					var img = new Image();
					img.src = data.image;
					$toolTipObject.find('#image').append(img);
				},
				onFinish:function(){					
					$('body').append($toolTipObject.show());
					_calculatePosition(e);			
				}
			});*/

        }, function () {
            this.title = this.anchor_title;
            $('#' + options.tooltipId).remove();
        });
        
        el.mousemove(function (e) {
        	_calculatePosition(e);
        });
		
		function _calculatePosition(e) {
			
			// get viewport vars
			var $toolTip = $('#' + options.tooltipId);	
			var top = e.pageY + options.yOffset;	
			var left = e.pageX + options.xOffset;		
			var topFold = $(window).scrollTop();
			var bottomFold = $(window).height() + $(window).scrollTop();
			var leftFold = $(window).scrollLeft();
			var rightFold = $(window).width() + $(window).scrollLeft();

			// condition : vertical position
			if (topFold >= top) {
				top = topFold;
			} else if (bottomFold <= top + $toolTip.outerHeight()) {
				top = bottomFold - $toolTip.outerHeight();
			}
			
			// condition : hoz position
			if ((rightFold <= left + $toolTip.outerWidth()) && ((left - $toolTip.outerWidth()) > leftFold)) {
				left = left - ($toolTip.outerWidth() + options.xOffset + 12);
			}
  
  			// more to new coords
			$toolTip.css("top", top + "px").css("left", left + "px").fadeIn('fast');
		}
    }

    $.fn.tooltip = function(fn, options) {
        options = options || {};
        var defaults = {
            xOffset: 20,
            yOffset: -120,
            tooltipId: 'tooltip'
        };        

        return this.each(function() {
            tooltip($(this), fn, $.extend(defaults, options));
        });
    }
    
})(jQuery);