$(function() {

	$('.ttbutton').mouseover(function(e){
		var url = $(this).attr('url');
		createTT(url,e);
	});
	
	$('.ttbutton').mouseout(function(e){
		var url = $(this).attr('url');
		deleteTT();
	});
 	
});

function setMouseOver(){
	$('.ttbutton').mouseover(function(e){
		var url = $(this).attr('url');
		createTT(url,e);
	});
	
	$('.ttbutton').mouseout(function(e){
		var url = $(this).attr('url');
		deleteTT();
	});
}

function createTT(ptURL,e){
	var rootview = $(window).scrollTop();
	var rootwidth = $('#root2').width();
	var rootheight = $(window).height();
	var rootX = $('#root2').offset().left;

	$('#supercontainer').append("<div id=\"tooltip\"></div>");
	$('#tooltip').hide();
	// return;
	$(document).mousemove(function(e){
		var rootwidth = $('#root2').width();
		var rootheight = $(window).height();
		var rootview = $(window).scrollTop();
		var rootX = $('#root2').offset().left;
		$('#tooltip').css({
			top: Math.min((e.pageY - 395),rootview + rootheight-$('#tooltip').height()) + "px",
			left: rootX+340
			// left: rootX + (rootwidth/2) - $('#tooltip').width() / 2
		});

	});
	
	$('#tooltip').load(ptURL, function(data){ 
		
		$(this).css({
			top: Math.min((e.pageY - 395),rootview + rootheight-$('#tooltip').height()) + "px",
			left: rootX + (rootwidth/2)
		});
		$('#tooltip img').load(function(){
			$('#tooltip').css({
				top: Math.min((e.pageY - 395),rootview + rootheight-$('#tooltip').height()) + "px",
				left: rootX+340
				// left: rootX + (rootwidth/2) - $('#tooltip').width() / 2
				// width: $('#tooltip img').width() 
			});
			// alert($(this).width());
			$('#tooltip').show();
		});
	});
}

function deleteTT(){
	$(document).unbind('mousemove');
	$('#tooltip').remove();
}