$(function () {
	// Set up the screen	
	var setUpScreen = function (mapName) {
		var popup	= $('<div id="neighborhoodPopup" class="clearfix">');
		var viewportOffset = window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
		var viewportHeight = $(document).height() - viewportOffset;
		// popup = the image/caption area
		popup.css({background: defaults.imgBGColor, top: viewportOffset + (viewportHeight/2)});
		// sheet = the colored background/blocking thing
		var sheet	= $('<div id="neighborhoodSheet">');
		sheet.css({
			 background	: defaults.sheetColor
			,height		: $(document).height()
			,opacity	: defaults.sheetOpacity
			,width		: $(document).width()
		});
		popup.append($('<div id="neighborhoodCaption">').hide());
		popup.append($('<div id="imageArea">'));
		if (defaults.showCloseButton) {
			var closeButton = $('<div id="neighborhoodCloseButton"></div>');
			closeButton.css({background: '#000 url(' + defaults.closeButton + ') right top no-repeat'});
			popup.append(closeButton);
		}
		$('body').append(sheet);
		$('body').append(popup);
		sheet.fadeIn('100', function() {
			popup.fadeIn('250');
			$('#navigation > li').css({'z-index':'1'});
		});
		closeButton.bind('click', killShow);
		sheet.bind('click', killShow);
		launchMap(mapName);
	};
	
	// Map launcher
	var launchMap = function (mapName) {
		var popup = $('#neighborhoodPopup');
		var caption = $('#neighborhoodCaption');
		caption.html('<h1>Dundalk Neighborhoods</h1><p>Please rollover one of the neighborhoods to the left for more information.</p>');
		// if there is already an image (ie: we are shifting), fade it out, remove it, and drop the caption
		if ($('img', popup).length) {
			$('img', popup).fadeOut(defaults.fadeSpeed, function () {$(this).remove();});
			// since the show is already open, we don't need the long opening animation, so switch to the quicker fadeSpeed
			var animationSpeed = defaults.fadeSpeed;
		}
		// otherwise, it's the first time we've opened the new show, so reset all dimensions/positioning
		else {
			popup.css({
				 width: '250px'
				,height: 0
				,marginTop: 0
				,marginLeft: '-125px'
			});
			var animationSpeed = defaults.animationSpeed;
		}		
		$('#imageArea', popup).load(
			 'map.cfm'
			,{mapID: mapName}
			,function () {
				var closeButton = $('#neighborhoodCloseButton');
				var image = $('#detailedQuadMap');
				var imgWidth = mapHash[mapName][0];
				var imgHeight = mapHash[mapName][1];
				// expand the popup to correct size and position
				popup.animate(
					 {
						  marginTop: -((imgHeight + 40 + 20) / 2)
						 ,height: imgHeight + 40
					 }
					,animationSpeed
					,defaults.easing
					,function () {
						popup.animate(
							 {
								 marginLeft: -((imgWidth + 310 + 20) / 2)
								,width: imgWidth + 310
							 }
							,animationSpeed
							,defaults.easing
							,function () {
								closeButton.show();
								caption.show();
								var neighborhood = $('map#' + mapName + 'NeighborhoodMap area');
								neighborhood
									.bind('mouseover', function () {
										var neighborhoodID = $(this).attr('name');
										var neighborhoodName = neighborhoodTeasers[neighborhoodID].name;
										var neighborhoodDescription = neighborhoodTeasers[neighborhoodID].teaser;
										caption.html('<h1>' + neighborhoodName + '</h1>' + neighborhoodDescription);
									});
							}
						);
					}
				);
				if ($.browser.msie && $.browser.version == '6.0') {
					closeButton.css({width: imgWidth + 330});
				}
		});
	};
	
	// Map killer
	var killShow = function () {
		$('#neighborhoodPopup')
			.animate({height: 0, margin: 0, width: 0}, defaults.animationSpeed)
			.remove();
		$('#neighborhoodSheet').fadeOut('100', function() {$('#neighborhoodSheet').remove();});
	};

	// Defaults
	var defaults = {
		 sheetColor: '#000'
		,sheetOpacity: '0.75'
		,imgBGColor: '#fff'
		,imgDir: '/elements/images/neighborhoods/'
		,showCloseButton: true
		,closeButton: '/elements/images/neighborhoods/blackoutCloseButton.gif'
		,animationSpeed: 500
		,easing: 'swing'
		,fadeSpeed: 250
	};
	
	// Map hash
	var mapHash = {
		 quad1 : [243, 442]
		,quad2 : [493, 483]
		,quad3 : [538, 508]
		,quad4 : [539, 560]
	};
	
	// Trigger that launches the map
	var trigger = $('map#mainNeighborhoodMap area');
	trigger.bind('click', function () {setUpScreen($(this).attr('name'));});
	if ($.browser.msie) {
		$('area').attr('href','javascript:void(0)').bind('click', function (e) {e.preventDefault();});
		if ($.browser.version == '6.0') {
			$('#content #contentArea p.inlineSubnav a:first-child').addClass('first-child');
		}
	}
});