$(document).ready(function() {

	//Code for tooltip for Dollz
	$('ul img, .osicon').mouseover(function(e) {
		
		//Grab the title attribute's value and assign it to a variable
		var tip = $(this).attr('title');
		
		//Append the tooltip template and its value
		$('#container').append('<div id="tooltip">' + tip + '</div>');
				
		//Remove the title attribute's to avoid the native tooltip from the browser
		$(this).attr('title','');
		
		//Show the tooltip with faceIn effect
		$('#tooltip').fadeIn('fast');
		
	}).mousemove(function(e) {
		var containerX = $('#container').position().left;
		var offsetX = (containerX -384);
		var offsetY = $('#container').position().top;
	
		//Set the X and Y axis of the tooltip
		$('#tooltip').css('top', e.pageY - offsetY +10);
		$('#tooltip').css('left', e.pageX - offsetX+20);
		
	}).mouseout(function() {
	
		//Put back the title attribute's value
		$(this).attr('title',$('#tooltip').html());
		
		$('#container').children('div#tooltip').remove();
		
	});
	
	//Code for tooltip for bottom Icons
	$('.base, .base-na, .noadopt, .inspiration').mouseover(function() {
		
		//Grab the title attribute's value and assign it to a variable
		var tip = $(this).html();
		var classname = $(this).attr('class') + "-tip";
		
		if (classname == "base-na-tip") {
		var linkstatus = "<br />(No longer online)";
		}else {
		var linkstatus = "";
		}
		
		//Append the tooltip template and its value
		$('#container').append('<div id="icon-tooltip" class="'+classname+'">' + tip + linkstatus +'</div>');

	
		//Set the X and Y axis of the tooltip
		$('#icon-tooltip').css('top', $(this).position().top );
		$('#icon-tooltip').css('left', $(this).position().left + 20);
		
		//Show the tooltip with faceIn effect
		$('#icon-tooltip').fadeIn('fast');
		
	}).mouseout(function() {
		
		$('#container').children('div#icon-tooltip').remove();
		
	});

});