$(document).ready(function(){
	$(".icon").mouseover(function(){
		var bubble = $("<div/>", {"class":"bubble"});
		$("<div/>", {"class":"bubbleleft"}).appendTo(bubble);
		$("<div/>", {"class":"bubbletext", text: $(this).find("img").attr("id")}).appendTo(bubble);
		$("<div/>", {"class":"bubbleright"}).appendTo(bubble);
		$(this).data("bubblediv", bubble);
		bubble.appendTo($(document.body));
		var width = bubble.width();
		bubble.offset({"top": 0, "left": 0});
		var offset = $(this).offset();
		//alert(offset.top + "," + offset.left + "," + width);
		bubble.css("opacity", 0);
		bubble.offset({"top": offset.top - 60, "left": offset.left - (width - 16)/2});		
		bubble.animate({top:"+=10", opacity:1});		
	});
	
	$(".icon").mouseout(function(){
		if ($(this).data("bubblediv")){
			$(this).data("bubblediv").animate({top:"-=10", opacity:0}, {complete: function(){$(this).remove();}});
		}
	});
});