/*
* Copyright (C) 2009 Joel Sutherland.
* Liscenced under the MIT liscense
* TODO:
* 1. Create API
* 2. Address accesibility automatically
* 3. Make object oriented
*/
(function($) {
	$.fn.zoommap = function(settings) {
		settings = $.extend({
			zoomDuration: 1000,
			zoomClass: 'zoomable',
			popupSelector: 'div.popup',
			popupCloseSelector: 'a.close',
			bulletWidthOffset: '10px',
			bulletHeightOffset: '10px',
			showReturnLink: true,
			returnId: 'return-link',
			returnText: 'Return to Previous Map'
		}, settings);
		
		$(this).each(function(){
			var map = $(this);
			$(this).data('currentId', '');
			
			function showMapById(id){
				var region = findRegion(settings.map, id);
				if(region != -1){
					displayMap(region);
				}
			}

			// recursive id find
			function findRegion(root, id){
				if(root.id == id){
					return root;
				}else{
					if(root.maps != undefined){
						for(var i=0; i<root.maps.length; i++){
							var possible = findRegion(root.maps[i], id);
							if(possible != -1)
								return possible;
						}
					}
				}
				return -1;
			};
			
			// region is a map
			// This gets called every time we zoom
			function displayMap(region){
				/*//Set Current Region Id
				$(this).data('currentId', region.id);
				
				//Set new styles.
				var mapSettings = {
					'background-color':'#cccccc',
					'width':settings.width,
					'height':settings.height,
					'background-image':'url(map-lg.jpg)'
				}
				
				//Clear the Map and Set the Background Image
				//map.empty().css(mapSettings);
			
				//var check = map.css('background-image');
				*/
				map.css('background-image','url(' + region.image + ')');
				
				//This mess addresses the IE Houdini Bug.
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				map.css('display','none');
				map.css('display','block');
				//Clean-up in aisle 8.
				
				//Load RegionData
				loadRegionData(region);
			}
			/************************************************************************************/

			
			//Show Return Link
			function showReturnLink(region){
				map.append('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>');
				$('#' + settings.returnId).hide().fadeIn().click(function(){
					showMapById(region.parent);
				});
			}
				
			
			//Load the Bullets 
			function loadRegionData(region){
				var url = region.data;
				map.load(url, {}, function(){
					//place bullets
					/*$(this).children('a.bullet').each(function(){
						var coords = $(this).attr('rel').split('-');
						$(this).css({left: addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset))})
							   .hide()
							   .click(function(){showPopup($(this).attr('id'));})
							   .fadeIn('fast');							
					});*/
					//Set up each submap as an item to click
					if(region.maps != undefined){
						for(var i=0; i<region.maps.length; i++){
							addZoom(region.maps[i]);
						}
					}
					
					
					//Create Return Link
					if(settings.showReturnLink && region.parent != undefined){
						showReturnLink(region);
					}
					
					showPopup(region, $(region).attr('id'));
				});
			}
			
			function showPopup(region, id, leftbul, topbul){
				map.find(settings.popupSelector).fadeOut(); 
				var boxid = '#' + id + '-box';
				
				$(boxid).fadeIn();
				$(settings.popupCloseSelector).click(function(){
					//$(this).parent().fadeOut();
					/*alert($(this).parent().parent().attr('id'));
					showMapById($(this).parent().parent().attr('id'));*/
					showMapById(region.parent);
				});
			}
			
			//add a clickable image for a region on the current map
			function addZoom(region){
				$('<img />').addClass(settings.zoomClass)
					.attr({
						src: settings.blankImage,
						id: region.id
					}).css({
						position: 'absolute',
						width: region.width,
						height: region.height,
						top: region.top,
						left: region.left,
						cursor: 'pointer'
					}).appendTo(map).click(function(){
						//hide neighboring bullets and zoomables
						var width = settings.width;
						var height = settings.height;
						/*if(region.scan){
							width = region.scanwidth;
							height = region.scanheight;
						}*/
						$(this).siblings().fadeOut();
						$(this).hide()
							.attr('src', region.image)
							.load(function(){
								$(this).fadeIn('slow')
								.animate(
									{
										width: width,
										height: height,
										top: '1px',
										left: '1px'
									},
									settings.zoomDuration,
									'',
									function(){
										$(this).css("border-width", "0");
										displayMap(region);
									}
								)
							});
						
					});
			}
			
			function rempx(string){
				return Number(string.substring(0, (string.length - 2)));
			}
			
			function addpx(string){
				return string + 'px';
			}
			
			function showHash(string){
				string = string.replace('#', '');
				showMapById(string);
			}
			
			//initialize map
			var hash = self.document.location.hash;
			if(hash.length > 0)
				showHash(hash);
			else{
				displayMap(settings.map);
			}
			
			return this;
		});
	}
})(jQuery);










$(document).ready(function(){

/* Show jQuery is running */
/*$('h1').css({textDecoration: 'underline'});*/

$('#map').zoommap({
		// Width and Height of the Map
		width: '741px',
		height: '500px',
			
		//Misc Settings
		blankImage: 'hotspot.png',
		zoomDuration: 1000,
		bulletWidthOffset: '10px',
		bulletHeightOffset: '10px',
		
		//ids and classes
		zoomClass: 'zoomable',
		popupSelector: 'div.popup',
		popupCloseSelector: 'a.close',
		
		//Return to Parent Map Link
		showReturnLink: false,
		returnId: 'return-link',
		returnText: 'Return to US map.',
		
		//Initial Region to be shown
		map: {
			id: 'map',
			image: 'map.jpg',
			data: 'impact.cfm',
			maps: [
				{
					id: 'forest-service',
					parent: 'map',
					image: 'forest-service.jpg',
					data: 'impact.cfm',
					width: '101px',
					height: '69px',
					top: '143px',
					left: '22px'
					/* More maps can be nested
					maps : [ ]
					*/
				},
				{
					id: 'replanting',
					parent: 'map',
					image: 'replanting.jpg',
					data: 'impact.cfm',
					width: '101px',
					height: '69px',
					top: '99px',
					left: '164px'
					
				},
				{
					id: 'rockies',
					parent: 'map',
					image: 'rockies.jpg',
					data: 'impact.cfm',
					width: '101px',
					height: '69px',
					top: '196px',
					left: '198px'
					
				},
				{
					id: 'explore',
					parent: 'map',
					image: 'explore.jpg',
					data: 'impact.cfm',
					width: '101px',
					height: '69px',
					top: '207px',
					left: '415px'
					
				},
				{
					id: 'florida',
					parent: 'map',
					image: 'florida.jpg',
					data: 'impact.cfm',
					width: '101px',
					height: '69px',
					top: '277px',
					left: '503px'
					
				},
				{
					id: 'gulf-coast',
					parent: 'map',
					image: 'gulf-coast.jpg',
					data: 'impact.cfm',
					width: '101px',
					height: '69px',
					top: '300px',
					left: '406px'
					
				},
				{
					id: 'harlem',
					parent: 'map',
					image: 'harlem.jpg',
					data: 'impact.cfm',
					width: '101px',
					height: '69px',
					top: '100px',
					left: '631px'
					
				},
				{
					id: 'rain-forest-rescue',
					parent: 'map',
					image: 'rain-forest-rescue.jpg',
					data: 'impact.cfm',
					width: '101px',
					height: '69px',
					top: '178px',
					left: '579px'
					
				},
				{
					id: 'songbirds',
					parent: 'map',
					image: 'songbirds.jpg',
					data: 'impact.cfm',
					width: '101px',
					height: '69px',
					top: '61px',
					left: '412px'
					
				},
				{
					id: 'tree-city-usa',
					parent: 'map',
					image: 'tree-city-usa.jpg',
					data: 'impact.cfm',
					width: '101px',
					height: '69px',
					top: '149px',
					left: '502px'
					
				}
			]
		}
	});


});