/**
 * @title: ZooLoo Tooltipf
 * @author: Michael Aguiar <michaela@zogmedia.com>
 * @description: Allows you to replace the default tooltip with the style of your choice.
 */

(function($) {
    $.fn.tooltip = function(settings) {
        settings = $.extend({
            id: 'tooltip',
            className: '',
            fade: true,
            elementDelay: 100,
			left: 15,
			top: 15,
			track: false,
			isStatic: true,
			callback: function() {}
        }, settings || {});
		
		var tooltipTimeout = null;
		var id = '#' + settings.id;
		var interact = false;
		            
		function GetContent(element) {
        	var text = null;
			
			if ($(element).attr('alt') && $(element).attr('alt') !== null) {
				text = $(element).attr('alt');
				$(element).attr('alt', '');
			} else if ($(element).attr('title') && $(element).attr('title') !== null) {
				text = $(element).attr('title');
				$(element).attr('title', '');
			}
						
			return text;
        }
		
		function GetPosition(e, id, element) {
			var width = $(id).width();
			var height = $(id).height();
			var offset = $(element).offset();

			if (settings.isStatic) {
				if (document.body.clientWidth < (e.pageX + width + settings.left + 15)) {
					$(id).css({'left' : offset.left + 'px'});
				} else {
					$(id).css({'left' : offset.left + 'px'});
				}

				if (document.body.clientHeight < (e.pageY + height + settings.top + 15)) {
					$(id).css({'top' : offset.top - height - 0 + 'px'});
				} else {
					$(id).css({'top' : offset.top - height - 0 + 'px'});
				}
			} else {
				if (document.body.clientWidth < (e.pageX + width + settings.left + 15)) {
					$(id).css({'left' : e.pageX - width - settings.left + 'px'});
				} else {
					$(id).css({'left' : e.pageX + settings.left - 5 + 'px'});
				}
	
				if (document.body.clientHeight < (e.pageY + height + settings.top + 15)) {
					$(id).css({'top' : e.pageY - height - settings.top - 10 + 'px'});
				} else {
					$(id).css({'top' : e.pageY + settings.top + 'px'});
				}				
			}
		}
		
        $.each(this, function() {
            var text = GetContent(this);
            var html = $('<div id='+ settings.id +' class='+ settings.className +'>'+ text +'</div>');
            
           	$(this).unbind('mouseover').unbind('mousemove').unbind('mouseout');
           	$(id).unbind('mouseover').unbind('mouseout');
            	
			if ($(id).length === 0) {
				html.prependTo(document.body);
			}
			
            $(this).mouseover(function(e) {
            	clearTimeout(tooltipTimeout);
            	
            	if (text !== null) {
					$(id).html(text);
				}
				
				settings.callback.call(this);
				
				if ($(id).find('a').length !== 0) {
					interact = true;
				} else {
					interact = false;
				}
				
                GetPosition(e, id, this);
                
				tooltipTimeout = setTimeout(function() {
					if (settings.fade) {
						$(id).fadeIn(settings.elementDelay);
					} else {
						$(id).show();
					}	
				}, 100);
				
				$(id).mouseover(function(e) {
		        	if (interact) {
		            	clearTimeout(tooltipTimeout);
						$(id).stop();
						if (settings.fade) {
							$(id).animate({'opacity' : '1'}, 150);
						} else {
							$(id).show();
						}	
					}
		        });
            });
            
			$(this).mousemove(function(e) {
				if (settings.track) {
					GetPosition(e, id, this);
				}
			});
			
            $(this).mouseout(function() {
            	clearTimeout(tooltipTimeout);
            	
            	tooltipTimeout = setTimeout(function() {
            		if (settings.fade) {
            			if (interact) {
            				$(id).fadeOut(settings.elementDelay + 300);
            			} else {
            				$(id).fadeOut(settings.elementDelay);
            			}
            		} else {
            			$(id).hide();
            		}
            	}, 100);
            	
            	$(id).mouseout(function() {
		        	if (interact) {
			        	clearTimeout(tooltipTimeout);
			        	
			        	tooltipTimeout = setTimeout(function() {
			        		if (settings.fade) {
			        			$(id).fadeOut(settings.elementDelay + 300);
			        		} else {
			        			$(id).hide();
			        		}
			        	}, 100);
			        }
		        });
            });	        
        });
	};
}(jQuery));