// JavaScript Document
$(document).ready(function(e) {
    popups = $(".bubbleInfo");
	
	$("#traditional-safety li:not('.bubbleInfo'), #machine-guarding li:not('.bubbleInfo')").bind('mouseenter', function(){
			$(".popup2").remove();
	});
	
	popups.find(".trigger").bind('mouseenter', function(){
		var pos = $(this).parent().position();
		var width = $(this).parent().width();
		$(this).parent().parent().find(".popup2").remove();
		popInfo = $(this).parent().find(".popup");
		popup2 = '<div class="popup2"><img src="extras/images/hover-box-top.png" class="top" />' + popInfo.html() + '<img src="extras/images/hover-box-bottom.png" class="bottom" /></div>';
		$(this).parent().parent().prepend(popup2).bind('mouseenter', function(){
			popups.find(".trigger").unbind('mouseleave');
		}).bind('mouseleave', function(){
				popups.find(".trigger").bind('mouseleave', function(){
					$(this).parent().parent().find(".popup2").remove();
				});
			$(this).parent().parent().find(".popup2").remove();
		});
		
		$(".popup2").css({ "left": (pos.left + width - 50) + "px", "top": (pos.top - 20) + "px" });
		
		
	});
});