$(document).ready(function(){
	
	// Initialize Map
	$('#legend').data('state', 'closed');
	
	
	//Legend Switch
	$('#legend h3').click(function(){ $('#legend').trigger('toggle'); });
	
	// Legend Toggling
	$('#legend').bind('toggle', function(){
		if($(this).data('state') == 'closed'){
			$(this).animate({right: '700px'});
			$(this).data('state', 'open');
		}else{
			$(this).animate({right: '535px'});
			$(this).data('state', 'closed');
		}
	});
	
	//Zoomable Hovers
	$('img.zoomable').live('mouseover',function(){ $(this).addClass('hover'); } )
					 .live('mouseout' ,function(){ $(this).removeClass('hover'); } );
	
	
	//ZoomMap Plugin
	$('#map').zoommap({
		// Width and Height of the Map Area
		width: '700px',
		height: '470px',
			
		//Misc Settings
		blankImage: '/css/photonics/map/blank.gif',
		loadingImage: '/css/photonics/map/loading.gif',
		fadeDuration: 500,
		zoomDuration: 1000,
		
		//ids and classes
		zoomClass: 'zoomable',
		popupSelector: 'div.popup',
		popupCloseSelector: 'a.close',
		
		//Return to Parent Map Link
		showReturnLink: true,
		returnId: 'returnlink',
		returnText: 'return to regional map',
		
		//Initial Region to be shown
		map: {
			id: 'triangle',
			title: 'Triangle',
			image: '/css/photonics/map/map.jpg',
			maps: [
			{
				id: 'nw',
				title: 'North West',
				parent: 'triangle',
				image: '/css/photonics/map/nw.jpg',
				data: '/section/north-west',
				width: '350px',
				height: '235px',
				top: '0px',
				left: '0px'
			},
			{
				id: 'ne',
				title: 'North East',
				parent: 'triangle',
				image: '/css/photonics/map/ne.jpg',
				data: '/section/north-east',
				width: '350px',
				height: '235px',
				top: '0px',
				left: '350px'
			},
			{
				id: 'sw',
				title: 'South West',
				parent: 'triangle',
				image: '/css/photonics/map/sw.jpg',
				data: '/section/south-west',
				width: '350px',
				height: '235px',
				top: '235px',
				left: '0px'
			},
			{
				id: 'se',
				title: 'South East',
				parent: 'triangle',
				image: '/css/photonics/map/se.jpg',
				data: '/section/south-east',
				width: '350px',
				height: '235px',
				top: '235px',
				left: '350px'
			}
			]
		}
	});

});

















/*
* Copyright (C) 2009 Joel Sutherland. Reproduction or redistribution without explicit permission is prohibited.

TODO:
1. Make it so the white zoomable indicator is created by the script
2. Create API

*/

$.fn.zoommap = function(settings) {
	var map = $(this);
	$(this).data('currentId', '');
	
	/******* Show Map by ID ************/
	$(this).bind('showMap', function(e, id, value){
		alert(id);
		showMapById(id);		
		//return this?
	});
	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++){
					return findRegion(root.maps[i], id);
				}
			}
		}
		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);
		
		//Clear the Map and Set the Background Image
		map.empty().css({
			backgroundImage: 'url(' + region.image + ')',
			width: settings.width,
			height: settings.height
		});
		
		//Show Bullets
		if(region.data != undefined){
			loadBullets(region.data);
		}
		
		//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);
		}
	}
	/************************************************************************************/

	//Show Return Link
	function showReturnLink(region){
		map.after('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>');
		$('#' + settings.returnId).hide().fadeIn().click(function(){
			showMapById(region.parent);
			$(this).remove();
		});
	}
		
	
	//Load the Bullets 
	function loadBullets(url){
		map.load(url, {}, function(){
			//place bullets
			$(this).children('a.bullet').each(function(){
				var coords = $(this).attr('rel').split('-');
				$(this).css({left: addpx(coords[0]), top: addpx(coords[1])})
					   .hide()
					   .click(function(){showPopup($(this).attr('id'));})
					   .fadeIn('fast');
			});
		});
	}
	
	function showPopup(id, leftbul, topbul){
		map.find(settings.popupSelector).fadeOut(); 
		var boxid = '#' + id + '-box';
		
		$(boxid).fadeIn();
		$(settings.popupCloseSelector).click(function(){
			$(this).parent().fadeOut();
		});
	}
	
	//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)
					   .fadeIn('slow')
					   .animate({
							width: width,
							height: height,
							top: '0px',
							left: '0px'
						}, settings.zoomDuration, '', function(){
							displayMap(region);
						});
			});
	}
	
	function rempx(string){
		return Number(string.substring(0, (string.length - 2)));
	}
	
	function addpx(string){
		return (Number(string) - 26) + '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;
};