$(document).ready(function(){  
      
  // When a link is clicked  
  $("a.tab").click(function () {  
        
      // switch all tabs off  
      $(".active").removeClass("active");  
        
      // switch this tab on  
      $(this).addClass("active");  
        
      // slide all elements with the class 'content' up  
      $(".content").hide();  
        
      // Now figure out what the 'title' attribute value is and find the element with that id.  Then slide that down.  
      var content_show = $(this).attr("title");  
      $("#"+content_show).show();  
      
  });  

  // add tooltips
  $("span.tooltip").ToolTip();
});
  
$.fn.ToolTip = function()
{
	this.mouseover(
		function(e)
		{
			if ((!this.title && !this.alt) && !this.tooltipset) return;

			var mouseX = e.pageX || (e.clientX ? e.clientX + document.body.scrollLeft : 0);
			var mouseY = e.pageY || (e.clientY ? e.clientY + document.body.scrollTop : 0);
			mouseX += 18;
			mouseY -= 12;
			bgcolour = "#585D6B";
			fgcolour = "#FFF";
			
			// if there is no div containing the tooltip
			if (!this.tooltipdiv)
			{
				// create a div and style it
				var div = document.createElement("div");
				this.tooltipdiv = div;
				$(div).css(
				{
					borderColor: "#707580 #303540 #303540 #707580",
					borderStyle: "solid",
          borderWidth: "1px",
					padding: "2px",
					backgroundColor: bgcolour,
					color: fgcolour,
					position: "absolute"
				})
				// add the title/alt attribute to it
				.html((this.title || this.alt));
				this.title = "";
				this.alt = "";
				$("body").append(div);
				this.tooltipset = true;
			}
			$(this.tooltipdiv).show().css({left: mouseX + "px", top: mouseY + "px"});
		}
	).mouseout(
		function()
		{
			if(this.tooltipdiv)
			{
				$(this.tooltipdiv).hide();
			}
		}
	);
	return this;
}