// ToolTip jQuery Plugin // GRNDL V1.2009.08
// needs jquery-1.3.2.min.js loaded
// customized for GRENDL CMS

this.tooltip = function(){	

	// Universal Configuration
		css_top_offset = 10; // determines X distance from the cursor
		css_left_offset = 20; // determines Y distance from the cursor
		
		css_width = "200px";
		css_padding = "0px 4px";
		css_border = "2px solid #FFF";
		css_backgroundColor = "#333";
		css_color = "#FFF";
		css_textAlign = "center";
		css_fontSize = "x-small";
		css_opacity = "0.8"
		
		css_fadeIn = "fast" // jQuery Effect fadeIn speed


		
	// Anchor Tag Tooltip - data comes from "title" element of tag
		$("a.tooltip").hover(function(e){											  
			this.t = this.title;
			this.title = "";									  
			$("body").append("<p id='tooltip'>"+ this.t +"</p>");
			$("#tooltip")
				.css("position","absolute")
				.css("top",(e.pageY + 0) + "px") // above the link
				.css("left",(e.pageX + 20) + "px")
				.css("width",css_width)
				.css("padding",css_padding)
				.css("border",css_border)
				.css("backgroundColor",css_backgroundColor)
				.css("color",css_color)
				.css("textAlign","left")
				.css("fontSize",css_fontSize)
				//.css("opacity",css_opacity)
				.fadeIn(css_fadeIn);
			},
			function(){
				this.title = this.t;		
				$("#tooltip").remove();
			});	
		
		  // Follow along with mouse
			$("a.tooltip").mousemove(function(e){
				$("#tooltip")
					.css("top",(e.pageY + 0) + "px")
					.css("left",(e.pageX + 20) + "px");
			});			

	// Span Tag Tooltip - data comes from "title" element of tag
		$("span.tooltip").hover(function(e){											  
			this.t = this.title;
			this.title = "";									  
			$("body").append("<p id='tooltip'>"+ this.t +"</p>");
			$("#tooltip")
				.css("position","absolute")
				.css("top",(e.pageY + 0) + "px") // above the link
				.css("left",(e.pageX + 20) + "px")
				.css("width",css_width)
				.css("padding",css_padding)
				.css("border",css_border)
				.css("backgroundColor",css_backgroundColor)
				.css("color",css_color)
				.css("textAlign","left")
				.css("fontSize",css_fontSize)
				//.css("opacity",css_opacity)
				.fadeIn(css_fadeIn);
			},
			function(){
				this.title = this.t;		
				$("#tooltip").remove();
			});	
		
		  // Follow along with mouse
			$("span.tooltip").mousemove(function(e){
				$("#tooltip")
					.css("top",(e.pageY + 0) + "px")
					.css("left",(e.pageX + 20) + "px");
			});			


	// Image Tag Tooltip - data comes from "title" element of tag
		$("img.tooltip").hover(function(e){											  
			this.t = this.title;
			this.title = "";									  
			$("body").append("<p id='tooltip'>"+ this.t +"</p>");
			$("#tooltip")
				.css("position","absolute")
				.css("top",(e.pageY - 40) + "px")
				.css("left",(e.pageX - 100) + "px")
				.css("width",css_width)
				.css("padding",css_padding)
				.css("border",css_border)
				.css("backgroundColor",css_backgroundColor)
				.css("color",css_color)
				.css("textAlign",css_textAlign)
				.css("fontSize",css_fontSize)
				//.css("opacity",css_opacity)
				.fadeIn(css_fadeIn);
			},
			function(){
				this.title = this.t;		
				$("#tooltip").remove();
			});	

		  // Follow along with mouse
			$("img.tooltip").mousemove(function(e){
				$("#tooltip")
					.css("top",(e.pageY - 40) + "px")
					.css("left",(e.pageX - 100) + "px");
			});			


	// Input Image [Delete and Edit] Tag Tooltip - data comes from "title" element of tag
		$("input[type='image']").hover(function(e){											  
			this.t = this.title;
			this.title = "";									  
			$("body").append("<p id='tooltip'>"+ this.t +"</p>");
			$("#tooltip")
				.css("position","absolute")
				.css("top",(e.pageY - css_top_offset) + "px")
				.css("left",(e.pageX - 80) + "px") // left of mouseover
				.css("width","60px")
				.css("padding",css_padding)
				.css("border",css_border)
				.css("backgroundColor",css_backgroundColor)
				.css("color",css_color)
				.css("textAlign",css_textAlign)
				.css("fontSize",css_fontSize)
				//.css("opacity",css_opacity)
				.fadeIn(css_fadeIn);
			},
			function(){
				this.title = this.t;		
				$("#tooltip").remove();
			});	

		  // Follow along with mouse
			$("input[type='image']").mousemove(function(e){
				$("#tooltip")
					.css("top",(e.pageY - css_top_offset) + "px")
					.css("left",(e.pageX - 80) + "px");
			});			


		
	// Input Tag Tooltip - data comes from "title" element of tag
		$("input.tooltip[type='text']").hover(function(e){											  
			this.t = this.title;
			this.title = "";									  
			$("body").append("<p id='tooltip'>"+ this.t +"</p>");
			$("#tooltip")
				.css("position","absolute")
				.css("top",(e.pageY - css_top_offset) + "px")
				.css("left",(e.pageX - 80) + "px") // left of mouseover
				.css("width","60px")
				.css("padding",css_padding)
				.css("border",css_border)
				.css("backgroundColor",css_backgroundColor)
				.css("color",css_color)
				.css("textAlign",css_textAlign)
				.css("fontSize",css_fontSize)
				//.css("opacity",css_opacity)
				.fadeIn(css_fadeIn);
			},
			function(){
				this.title = this.t;		
				$("#tooltip").remove();
			});	

		  // Follow along with mouse
			$("input.tooltip[type='text']").mousemove(function(e){
				$("#tooltip")
					.css("top",(e.pageY - css_top_offset) + "px")
					.css("left",(e.pageX - 80) + "px");
			});			


		
	// Anchor Tag Tooltip for Gallery - data comes from "title" element of tag
		$("a.tooltip_gallery").hover(function(e){											  
			this.t = this.title;
			this.title = "";									  
			$("body").append("<p id='tooltip'>"+ this.t +"</p>");
			$("#tooltip")
				.css("position","absolute")
				.css("top",(e.pageY + 0) + "px") // above the link
				.css("left",(e.pageX + 20) + "px")
				.css("width","380px")
				.css("padding",css_padding)
				.css("border",css_border)
				.css("backgroundColor",css_backgroundColor)
				.css("color",css_color)
				.css("textAlign","left")
				.css("fontSize",css_fontSize)
				//.css("opacity",css_opacity)
				.fadeIn(css_fadeIn);
			},
			function(){
				this.title = this.t;		
				$("#tooltip").remove();
			});	
		
		  // Follow along with mouse
			$("a.tooltip_gallery").mousemove(function(e){
				$("#tooltip")
					.css("top",(e.pageY + 0) + "px")
					.css("left",(e.pageX + 20) + "px");
			});			

		
};



// auto starting the script on page load
$(document).ready(function(){
	tooltip();
});