/*			
		Function: rzTooltip()
		Author: Francois Levesque ( cfabort (at) critical-web (dot) com )			
		
		Description: Creates a tooltip containing the matched object's title attribute. Will show on mouseover.
		
		Usage: $("myElement").rzTooltip();			
*/

(function () {

	$.fn.rzTooltip=function () {

		rzTooltip_title='';
		
		// check to see if the tooltip exists
		if (!$("#rzTooltip").length) {
			// if not, create it and the iframe
			
			$("body").append("<div id='rzTooltip'><h2 id='rzTooltip_header'></h2><div id='rzTooltip_body'></div></div>");
			$("#rzTooltip").css({ top: -1000, left: -1000, position: 'absolute', zIndex: 100 });
			$("body").append("<iframe id='rzTooltip_iframe'></iframe>");
			$("#rzTooltip_iframe").css({ top: -1000, left: -1000, position: 'absolute', zIndex: 50, opacity: 0 });
			
		}

		// loop over matched elements
		return this.each(function () {
			
			$(this).mouseover(function () {
				// apply mouseover event
				
				// shortcut var
				var tooltip=$("#rzTooltip");
				
				// make sure the tooltip is off-screen
				tooltip.css({
					top: -1000,
					left: -1000
				});

				// backup the elements title
				rzTooltip_title=$(this).attr("title");
				
				// create an array containing the different title strings, separated by a pipe (|)
				var title=rzTooltip_title.split("|");
			
				// empty the title attribute (override the brower's insight)
				$(this).attr("title", "");
				
				// populate the tooltip header
				$("#rzTooltip_header").html(title[0]);
				
				// empty the tooltip body
				$("#rzTooltip_body").empty();
				
				// populate the tooltip body by looping over the title array
				for (var i=1; i<title.length; i++)
					$("#rzTooltip_body").append("<p>" + title[i] + "</p>");
				
				// create browser-specific max width and height vars
				var maxWidth, maxHeight;
				if ($.browser.msie) {
					maxWidth=document.documentElement.scrollWidth;
					maxHeight=document.documentElement.scrollHeight;
				} else {
					maxWidth=Math.max($('html').width(), $(window).width()-30);
					maxHeight=Math.max($('html').height(), $(window).height()-30);
				}
				
				// get position (make sure the tooltip isn't out of bounds
				var dims={
					t: ($(this).offset().top + tooltip.height() > maxHeight - 10 ? $(this).offset().top+$(this).height()-tooltip.height() : $(this).offset().top),
					l: ($(this).offset().left + $(this).width() + tooltip.width() > maxWidth - 10 ? $(this).offset().left-tooltip.width()-10 : $(this).offset().left + $(this).width())
				};
				
				// place the tooltip
				tooltip.css({ top: dims.t, left: dims.l });
				
				// place and size the iframe to hide undesirable dropdowns in IE
				$("#rzTooltip_iframe").css({ top: dims.t, left: dims.l, height: tooltip.height(), width: tooltip.width() });

			}).mouseout(function () {
				// apply mouseout events
				
				// take the tooltip and iframe off-screen
				$("#rzTooltip,#rzTooltip_iframe").css({ top: -1000, left: -1000 });
				
				// reset the element's title
				$(this).attr("title", rzTooltip_title);
			});

		});
	};
})();