$(function() {
	var	$container = $("div.workflow"),
			$areas = $("area", $container);


	/*************************************************************************************
	* Helper Methods                                                                     *
	*************************************************************************************/
	function getCoords($area) {
		var	regex = /^[^\d]*(\d+)[^\d,]*,[^\d,]*(\d+)[^\d,]*,[^\d,]*(\d+)[^\d,]*,[^\d]*(\d+)/,
				match = regex.exec($area.attr("coords")),
				result;
		if (match) {
			result = {
				x1: parseInt(match[1], 10),
				y1: parseInt(match[2], 10),
				x2: parseInt(match[3], 10),
				y2: parseInt(match[4], 10)
			};
		}
		// Abl.DEBUG.trace("Source='" + $area.attr("coords") + "' (" + result.x1 + "," + result.y1 + "," + result.x2 + "," + result.y2 + ")");
		return result;
	}
	
	function getOffset(coords) {
		return {
			x: coords.x1,
			y: coords.y1,
			width: Math.abs(coords.x2 - coords.x1),
			height: Math.abs(coords.y2 - coords.y1)
		};
	}
	
	
	/*************************************************************************************
	* Dom Management Methods                                                             *
	*************************************************************************************/
	function createBalloon(text, href) {
		var	$balloon = $("<div class='balloon'></div>"),
				$upper = $("<div class='upper'></div>").appendTo($balloon),
				$body = $("<div class='body'></div>").appendTo($balloon),
				$lower = $("<div class='lower'></div>").appendTo($balloon),
				segs = text.split(":");
				
		if (segs.length === 2) {
			$("<span class='title'>" + segs[0] + "</span>").appendTo($body);
			$("<span class='text'>" + segs[1] + "</span>").appendTo($body);
		} else if (segs.length === 1){
			$("<span class='text'>" + segs[0] + "</span>").appendTo($body);
		}
		
		if ((href) && (href !== "#")) {
			$("<span class='prompt'>Click for more details...</span>").appendTo($body);
		}
				
		return $balloon.css({
			"position": "absolute",
			"left": "-5000px",
			"top": "-5000px"
		});
	}
	

	function clearBalloons(callback) {
		$container.find("div.balloon").remove();
	}


	/*************************************************************************************
	* Event Handlers                                                                     *
	*************************************************************************************/
	$areas.mouseenter(function() {
		var	$area = $(this),
				coords = getCoords($area),
				offset = getOffset(coords),
				$balloon = createBalloon($area.attr("alt"), $area.attr("href")),
				balloonWidth, balloonHeight;
		
		clearBalloons();
		$container.append($balloon);
		balloonWidth = $balloon.outerWidth();
		balloonHeight = $balloon.outerHeight();
		
		$balloon.css({
			"left": coords.x1 + (offset.width / 2) - (balloonWidth / 2),
			"top": (coords.y1 - balloonHeight)
		});
	});
	
	$areas.mouseleave(function() {
		clearBalloons();
	});

});