$(function ()
{
	var map = $("#navmap img");
	map.data("original", map.attr("src")); // remember original image

	// wire up rollovers on map
	$("#navmap area").hover(function ()
	{
		var rollover = $(this).data("rollover");
		if (rollover != "") map.attr("src", rollover);
	},
	function ()
	{
		// revert back to base map image
		map.attr("src", map.data("original"));
	});

	// attach click handler to the body to hide the flyout
	$("body").mousedown(function (e)
	{
		var flyout = $("#flyout");
		var list = $("#flyout_community_list");
		if (flyout.length == 0) return;

		if (flyout.css("display") != 'block') return;
		if (isMouseOverElement(e, flyout.get(0))) return;
		if (list.length > 0 && isMouseOverElement(e, $("#flyout_community_list").get(0))) return;

		// hide the flyout now if clicked outside of it
		flyout.css("display", "none");
	});
});

function showCommunitiesFlyout(title, location, commsToShow)
{
	// If there are 3 or less communities, do not show the community list.
	if (commsToShow.length <= 3)
	{
		showMapFlyout(title, location, commsToShow, 0);
	}
	else
	{
		var communityListFlyout = $("#flyout_community_list");

		if (communityListFlyout.length == 0) {
			// build the community list flyout
			communityListFlyout = $(
			"<div id=\"flyout_community_list\">" +
				"<div class=\"title\"></div>" +
				"<div id=\"flyout_community_list_communities\"></div>" +
			"</div>");

			$("body").append(communityListFlyout).click(function(e) {
				if (communityListFlyout.css("display") != 'block') return;
				if (isMouseOverElement(e, communityListFlyout.get(0))) return;
				if (isMouseOverElement(e, $("#flyout").get(0))) return;

				// hide the flyout now if clicked outside of it
				communityListFlyout.css("display", "none");
			});
		}

		// move the flyout off-screen while we load it
		communityListFlyout.css({ "visibility": "hidden", "left": -10000, "top": 0, "display": "block" });

		// Set the title
		$("#flyout_community_list .title").html(title);

		var communitiesList = $("#flyout_community_list_communities");

		// clear any previous content
		communitiesList.html('');

		// build the html for each community to show
		var activeClass = "active";
		for (var i = 0; i < commsToShow.length; i++) {
			// find the data for the current community
			if (i > 0)
				activeClass = "";
			
			var data = null;
			for (var d = 0; d < communityData.length; d++) {
				if (commsToShow[i] == communityData[d].id) {
					data = communityData[d];
					break;
				}
			}

			communitiesList.append($(
			"<div class=\"community\">" +
				"<a href=\"#\" class=\"" + activeClass + "\" onmouseover=\"showMapFlyout('" + title + "', '" + location + "', [" + commsToShow[i] + "], 221)\" onclick=\"window.location.href='" + data.link + "';\">" + data.name + "</a>" +
			"</div>"));
		}
		
		// hook-up the mouseover event
		$("#flyout_community_list a").mouseover(function () {
			$("#flyout_community_list a").removeClass("active");
			$(this).addClass("active");
		});

		// get size and position of map
		var map = $("#navmap img");
		var mapPos = map.offset();
		var mapHeight = map.outerHeight(false);

		// get the size of the flyout
		var flyoutWidth = communityListFlyout.outerWidth(false);
		var flyoutHeight = communityListFlyout.outerHeight(false);

		// calculate the new position of the flyout
		var leftPos = mapPos.left - (flyoutWidth);
		var topPos = (mapPos.top + mapHeight) - flyoutHeight;

		// Show the flyout now. first toggle display to fix netscape bug
		communityListFlyout.css({ "left": leftPos, "top": topPos, "visibility": "visible", "display": "block" });
		
		showMapFlyout(title, location, [commsToShow[0]], 221);
	}
}

function showMapFlyout(title, location, commsToShow, rightPositionOffset)
{
	// find the actual flyout container
	var flyout = $("#flyout");

	// build the flyout container if not already there
	if (flyout.length == 0)
	{
		flyout = $(
			"<div id=\"flyout\">" +		
				"<div id=\"flyout_title\">" +
					"<table cellpadding=\"0\" cellspacing=\"0\">" +
						"<tr>" +
							"<td class=\"name\"></td>" +
						"</tr>" +
					"</table>" +
				"</div>" +
				"<div id=\"flyout_communities\">" +
					"<div id=\"flyout_communities_slider\">" +
						"<table cellpadding=\"0\" cellspacing=\"0\"><tr></tr><tr></tr></table>" +
					"</div>" +
				"</div>" +
			"</div>").appendTo("body");
	}


	// move the flyout off-screen while we load it
	flyout.css({ "visibility": "hidden", top: 0, left: -10000 });
	flyout.css({ "display": "block" });
	
	// set the title
	flyout.find("#flyout_title .name").html(title + " - " + location);

	// get all the pieces we need
	var comms = flyout.find("#flyout_communities");
	var slider = flyout.find("#flyout_communities_slider");
	var toprow = slider.find("tr:first");
	var bottomrow = slider.find("tr:last");

	// fix the sizing of the slider inner table
	slider.find("table:first").css("table-layout", "fixed");
	slider.css("left", 0);
	
	// clear any previous content
	toprow.html("");
	bottomrow.html("");

	// set the standard column width
	var columnWidth = 249; // so we dont have to measure
	var separator = 1;

	// size the slider container to fit the number of communities with a maximum of 3. 
	// also include borders on subsequent communities in calculation
	var count = (commsToShow.length > 3 ? 3 : commsToShow.length)
	var width = columnWidth * count;
	if (count > 1) width += separator * (count - 1);

	// set the location communities wrapper so it can slide left/right
	comms.width(width);
	flyout.width(width);

	// build the html for each community to show
	for (var i = 0; i < commsToShow.length; i++)
	{
		// find the data for the current community
		var data = null;
		for (var d = 0; d < communityData.length; d++)
		{
			if (commsToShow[i] == communityData[d].id)
			{
				data = communityData[d];
				break;
			}
		}

		// build the html for it and add it to the table
		toprow.append($(
			"<td class=\"community" + (i > 0 ? " leftborder" : "") + "\" onclick=\"window.location.href='" + data.link + "';\">" +
				"<div class=\"name\">" +
					"<table class=\"namebox\" cellpadding=\"0\" cellspacing=\"0\"><tr><td><h3>" + data.name + "</h3></td></tr></table>" +
				"</div>" +
				"<div class=\"tagline\">" + data.tagline + "</div>" +
				"<div class=\"thumb\">" +
					"<img src=\"" + data.thumb + "\" alt=\"" + data.name + "\" title=\"" + data.name + "\" height=\"140\" width=\"215\" />" +
				"</div>" +
				"<div class=\"descrip\">" + data.summary + "</div>" +
			"</td>"));
		
		bottomrow.append($(
			"<td class=\"more" + (i > 0 ? " leftborder" : "") + "\" onclick=\"window.location.href='" + data.link + "';\">" +
				"<a href=\"" + data.link + "\" title=\"Learn more about " + data.name + "\">LEARN MORE</a>" +
			"</td>"));
	}

	// Set the right position offset to a default if it is not passed in as a parameter
	if (!rightPositionOffset && rightPositionOffset != 0)
		rightPositionOffset = 221;

	// get size and position of map
	var map = $("#navmap img");
	var mapPos = map.offset();
	var mapHeight = map.outerHeight(false);

	// get the size of the flyout
	var flyoutWidth = flyout.outerWidth(false);
	var flyoutHeight = flyout.outerHeight(false);

	// calculate the new position of the flyout
	var leftPos = mapPos.left - (flyoutWidth + rightPositionOffset);
	var topPos = (mapPos.top + mapHeight) - flyoutHeight;
	
	// Show the flyout now. first toggle display to fix netscape bug
	flyout.css({ "left": leftPos, "top": topPos, "visibility": "visible" });
}