var offset = {
	left: null,
	top: null
}
jQuery(document).ready( function(){
	
	//Select all anchor tag with rel set to tooltip
	jQuery('*[rel=tooltip]').mouseover(function(e) {
		
		//Grab the title attribute's value and assign it to a variable
		var tooltipParent = jQuery(this).parent().get(0).tagName;
		
		var tip = jQuery('.titleHolder').attr('title');
		
		
		//Remove the title attribute's to avoid the native tooltip from the browser
		jQuery(this).attr('title','');
		
		
		//Append the tooltip template and its value
		jQuery(this).append('<div class="tooltip">' + tip + '</div>');
		
			
		
		//if(jQuery.browser.msie){
		if (jQuery(this).attr('class') == "chartLink") {
			jQuery(this).css('position', 'absolute');
		}
		else {
			jQuery(this).css('position', 'relative');
		}
		//}
			
		//Show the tooltip with faceIn effect
		jQuery(this).find('.tooltip').fadeIn(100);
		//jQuery('.tooltip').fadeTo('10',0.9);
		
		
		
	}).mousemove(function(e) {
		offset = jQuery(this).offset();
		//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
		var tooltipParent = jQuery(this).parent().get(0).tagName;
		var thisWidth = jQuery(this).width();
		
			jQuery('.tooltip').css('top', e.pageY - offset.top + 10);
			jQuery('.tooltip').css('left', e.pageX - offset.left + 12);
		
		
	}).mouseout(function() {
	
		//Put back the title attribute's value
		//jQuery(this).attr('title',jQuery('.tooltip').html()).css('position', 'static');
		
		if (jQuery(this).attr('class') == "chartLink") {
			jQuery(this).attr('title',jQuery('.tooltip').html());
		}
		else {
			jQuery(this).attr('title',jQuery('.tooltip').html()).css('position', 'static');
		}
		
	
		//Remove the appended tooltip template
		jQuery(this).children('div.tooltip').remove();
		
	});
});