$(function() {
	//initTooltips();
})

function initTooltips() {
	$('*[title]').each(initTooltip);
}

// Called with this = the element
function initTooltip(i) {

	this.ttText = this.title;
	this.title = '';	// Cancel the default tooltip
	
	var html = '<span class="tip-start"></span><span class="tip-middle">' + this.ttText + '</span><span class="tip-end"></span>';
	
	var ttID = 'tip-' + i;
	$('<span class="tip" id="' + ttID + '">' + html + '</span>').appendTo('body'); // .insertAfter(this);
	
	$(this).hover(function(e) {
//		$('#' + ttID).css('display', 'block');
		var tip = $('#' + ttID);


		tip.stop().css({
			'display': 'block',
			'opacity': 0,
			'left': e.pageX + 25,
			'top': e.pageY + 16
		})
		.animate({
			'left': '-=25'
		}, 400, 'easeOutCirc')
		.animate({
			'opacity': 0.7
		}, {
			queue: false,
			duration: 350
		});


	}, function() {
//		$('#' + ttID).css('display', 'none');
		
		// Right now does it right away, but can use a tieout
		
		var tip = $('#' + ttID);

		tip.stop().animate({
			'left': '+=25',
			'opacity': 0
		}, 400, 'easeOutCirc', function() {
			$(this).css('display', 'none');
		});

		
	});
}