$(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()
		});
		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');
		// 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 {
			$('#neighborhoodCloseButton');
			popup.css({
				 width: '250px'
				,height: 0
				,marginTop: 0
				,marginLeft: '-125px'
			});
			var animationSpeed = defaults.animationSpeed;
		}
		var image = new Image();
		// set the correct src of the image, but make sure it is hidden
		$(image).attr({'src': defaults.imgDir + mapHash[mapName] + '?rand=' + Math.floor(Math.random() * 999999999)}).hide();
		$(image).load(
			function () {
				// add the image to the popup, as long as it's not opera. opera needs the image added later because... well, because opera is weird like that.
				if (!$.browser.opera){popup.prepend(image);}
				var closeButton = $('#neighborhoodCloseButton');
				// expand the popup to correct size and position
				popup.animate(
					 {
						  marginTop: -((image.height + 40) / 2)
						 ,height: image.height + 40
					 }
					,animationSpeed
					,defaults.easing
					,function () {
						popup.animate(
							 {
							 	 marginLeft: -(image.width / 2)
							 	,width: image.width
							 }
							,animationSpeed
							,defaults.easing
							,function () {
								// NOW opera can correctly add the image
								if ($.browser.opera){popup.prepend(image);}
								// create the navigation items
								closeButton.show();
								// fade the image in
								$(image).fadeIn(defaults.fadeSpeed);
							}
						);
					}
				);
			}
		);
	};
	
	// 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' : 'neighborhoodsQuad1.gif'
		,'quad2' : 'neighborhoodsQuad2.gif'
		,'quad3' : 'neighborhoodsQuad3.gif'
		,'quad4' : 'neighborhoodsQuad4.gif'
	};
	
	// Trigger that launches the map
	var trigger = $('map#neighborhoodMap area');
	trigger.bind('click', function () {setUpScreen($(this).attr('name'));});
});