$(document).ready(function() {
	$('#wordsFrame span').mouseover(function(cursor) {
		var word = $(this).text();
		var id = $(this).attr("id");
		var names = "";

		$().clearTips();
		$('body').append('<div class="wordTip" id="wordTip' + id + '"></div>');

		$.ajax({
			type: 'GET',
			url: '/include/getwords.php',
			data: 'word=' + word,
			success: function(data) {
				$('#wordTip' + id).empty().append(data);
				$('#wordTip' + id).addClass('wordTipFull');
			}
		});

		$('#wordTip' + id).append('<img src="/images/ajax-loader.gif">');
		$('#wordTip' + id).show();
		$().setTipPosition($('#wordTip' + id), cursor);
	});
	$('#wordsFrame span').mousemove(function(cursor) {
		var id = $(this).attr("id");
		$().setTipPosition($('#wordTip' + id), cursor);
	});
	$('#wordsFrame span').mouseout(function() {
		$().clearTips();
	});

	$.fn.setTipPosition = function(name, cursor) {
		var posX = cursor.pageX + 10;   // Get the mouse X position
		var posY = cursor.pageY + 10;   // Get the mouse Y position
		var offset = 0;

		var paddingL = name.css("padding-left");
		if (paddingL != "") {
			var paddingLeft = paddingL.replace("px", "");
			offset = parseInt(paddingLeft);
		}
		var paddingR = name.css("padding-right");
		if (paddingR != "") {
			var paddingRight = paddingR.replace("px", "");
			offset = (offset + parseInt(paddingRight));
		}

		if ((posX + name.width() + offset) > $(window).width()) {
			posX = (posX - name.width()) - offset - 20;
		}
		if ((posY + name.height() + offset) > $(window).height()) {
			posY = (posY - name.height()) - offset - 20;
		}
		name.css({ left: posX, top: posY });
	}

	$.fn.clearTips = function() {
		// Clear all the current tips
		$('div.wordTip').each(function(item) {
			$(this).remove();
		});
	}
});