/*
* 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({
						alt: region.alt,
						/*src: settings.blankImage,*/
						src: region.image,
						title: region.alt,
						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: '485px',
			
		//Misc Settings
		blankImage: 'graphics/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: 'graphics/map.jpg',
			data: 'tour.cfm',
			maps: [
				{
					alt: 'Agroforestry Field',
					id: 'agroforestry',
					parent: 'map',
					image: 'graphics/agroforestry.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '139px',
					left: '25px'
					/* More maps can be nested
					maps : [ ]
					*/
				},
				{
					alt: 'Hazelnut Research',
					id: 'hazelnut',
					parent: 'map',
					image: 'graphics/hazelnut.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '200px',
					left: '25px'
					
				},
				{
					alt: 'Nut Tree Arboretum',
					id: 'nut-tree',
					parent: 'map',
					image: 'graphics/nut-tree.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '256px',
					left: '170px'
					
				},
				{
					alt: 'Fuelwood Plantation',
					id: 'plantation',
					parent: 'map',
					image: 'graphics/plantation.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '94px',
					left: '215px'
					
				},
				{
					alt: 'Fuelwood Energy Plant',
					id: 'energy-plant',
					parent: 'map',
					image: 'graphics/energy-plant.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '262px',
					left: '25px'
					
				},
				{
					alt: 'Runoff Filtration',
					id: 'filtration',
					parent: 'map',
					image: 'graphics/filtration.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '425px',
					left: '240px'
				},
				{
					alt: 'Nature Explore Classrooms',
					id: 'classroom',
					parent: 'map',
					image: 'graphics/classroom.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '285px',
					left: '350px'
				},
				{
					alt: 'Windbreak',
					id: 'windbreak',
					parent: 'map',
					image: 'graphics/windbreak.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '58px',
					left: '640px'
					
				},
				{
					alt: 'Parking Lot Arboretum',
					id: 'parking-lot',
					parent: 'map',
					image: 'graphics/parking-lot.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '324px',
					left: '25px'
					
				},
				{
					alt: 'Stream Bioengineering',
					id: 'bioengineering',
					parent: 'map',
					image: 'graphics/bioengineering.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '96px',
					left: '450px'
					
				},
				{
					alt: 'Preservation Orchard',
					id: 'orchard',
					parent: 'map',
					image: 'graphics/orchard.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '216px',
					left: '599px'
					
				},
				{
					alt: 'Greenhouses',
					id: 'greenhouse',
					parent: 'map',
					image: 'graphics/greenhouse.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '389px',
					left: '569px'
					
				},
				{
					alt: 'Historic Barns',
					id: 'barn',
					parent: 'map',
					image: 'graphics/barn.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '386px',
					left: '25px'
					
				},
				{
					alt: 'Sustainability & Green Lodging',
					id: 'lodge',
					parent: 'map',
					image: 'graphics/lodge.jpg',
					data: 'tour.cfm',
					width: '70px',
					height: '44px',
					top: '78px',
					left: '25px'
					
				}
			]
		}
	});


});