/**
 * This adds a mouse listener to all images with class 'summaryImageLink' AND
 * an id starting with 'dataId'. The form of the id is 'dataId_xyz'.
 * On the first hover over, an ajax call is made to load the content of the tooltip.
 * Any further hover overs over the same image just load the pre-loaded tooltip.
 */
dojo.addOnLoad(function() {
	dojo.require("dojoga.SummaryTooltip");
	tooltipcache = new Object();	// Used as hashtable to retain reference to the widgets
	mouseoverelement = null;
	dojo.query(".summaryImageLink[id^=dataId]").connect(
		"onmouseleave", function(evt)
		{
			// Remember that the element has been left with the mouse, so the
			// popup is not shown if this was the first onmouseenter to the element. 
			if (mouseoverelement === evt.target)
				mouseoverelement = null;
		});
	dojo.query(".summaryImageLink[id^=dataId]").connect(
		"onmouseenter", function(evt)
		{
			var node = evt.target;
			mouseoverelement = node;
			var rel = dojo.attr(node, "id");
			var tooltip = dijit.byId("tooltip_"+rel);
			if (!tooltip)
			{
				tooltip = new dojoga.SummaryTooltip({id: "tooltip_"+rel, connectId: [dojo.attr(evt.target, "id")]});
				dojo.xhrGet({
					url: "/ShowAbstractPreview.do?action=jsonSummaryPopup\u0026abstractData.dataId="+rel.substring(7),
					handleAs: 'json',
					load: function (data) {
						tooltip.label = createTooltipLabel(data);
						tooltipcache[rel] = tooltip;	// Retail reference to save ajax calls
						if (mouseoverelement === evt.target)
							tooltip._onHover(evt);		// Open hover over manually, as the connect has just been established in here.
					},
					error: function (error) {
						console.error('Error: ', error);
					}
					});
			}
		});
});


function createTooltipLabel(data)
{
	var buffer = "<b>"+data.mainTitle+"</b><br><hr>";
	if (data.recommendation)
		buffer += "<p class=\"ballonText\">"+data.recommendation+"</p>";
	if (data.learnTopics && data.learnTopics.length > 0)
	{
		dojo.forEach(data.learnTopics,
			function(entry, index, array) {
				if (index == 0)
					buffer += "<b class=\"balloonText\">"+entry+"</b><ul>";
				else
					buffer += "<li class=\"balloonText\">"+entry+"</li>";
				if (index == array.length-1)
					buffer += "</ul>";
			}
		);
	}
	if (data.ratingOverall > 0)
	{
		buffer += "<table cellpadding=\"0\" cellspacing=\"0\" ><tr><td class=\"balloonText\"><b>"+data.stringRating+"</b></td></tr>";
		buffer += "<tr><td class=\"balloonText\">"+data.stringOverall+"</td><td><img src=\"/www/images/invis.gif\" width=\"10\" height=\"1\"></td><td class=\"balloonText\"><img src=\"/www/images/rating"+data.ratingOverall+".gif\" alt=\""+data.ratingOverall+"\"></td><td class=\"balloonText\">&nbsp;&nbsp;("+data.ratingOverall+")</td></tr>";
		if (data.ratingApplicability > 0)
			buffer += "<tr><td class=\"balloonText\">"+data.stringApplicability+"</td><td><img src=\"/www/images/invis.gif\" width=\"10\" height=\"1\"></td><td class=\"balloonText\"><img src=\"/www/images/rating"+data.ratingApplicability+".gif\" alt=\""+data.ratingApplicability+"\"></td><td class=\"balloonText\">&nbsp;&nbsp;("+data.ratingApplicability+")</td></tr>";
		if (data.ratingImportance > 0)
			buffer += "<tr><td class=\"balloonText\">"+data.stringImportance+"</td><td><img src=\"/www/images/invis.gif\" width=\"10\" height=\"1\"></td><td class=\"balloonText\"><img src=\"/www/images/rating"+data.ratingImportance+".gif\" alt=\""+data.ratingImportance+"\"></td><td class=\"balloonText\">&nbsp;&nbsp;("+data.ratingImportance+")</td></tr>";
		if (data.ratingInnovation > 0)
			buffer += "<tr><td class=\"balloonText\">"+data.stringInnovation+"</td><td><img src=\"/www/images/invis.gif\" width=\"10\" height=\"1\"></td><td class=\"balloonText\"><img src=\"/www/images/rating"+data.ratingInnovation+".gif\" alt=\""+data.ratingInnovation+"\"></td><td class=\"balloonText\">&nbsp;&nbsp;("+data.ratingInnovation+")</td></tr>";
		if (data.ratingStyle > 0)
			buffer += "<tr><td class=\"balloonText\">"+data.stringStyle+"</td><td><img src=\"/www/images/invis.gif\" width=\"10\" height=\"1\"></td><td class=\"balloonText\"><img src=\"/www/images/rating"+data.ratingStyle+".gif\" alt=\""+data.ratingStyle+"\"></td><td class=\"balloonText\">&nbsp;&nbsp;("+data.ratingStyle+")</td></tr>";
		buffer += "</table>";
	}
	return buffer;
}