var map;

var offices = {
	'locationsAll': {
		'latitude': 35.182000,
		'longitude': -89.788342,
		'startzoom': 10,
		'width': 468,
		'height': 313,
		'address': ''
	},
	'uptown': {
		'latitude': 35.1575830,
		'longitude': -90.0488490,
		'startzoom': 15,
		'width': 468,
		'height': 313,
		'address': '<strong><a href="http://www.fabtn.com/service/service_uptown.php">Uptown Office</a></strong><br />464 N. Front Street<br />Memphis, TN   38105<br />(901) 527-9393'
	},
	'east_memphis': {
		//'latitude': 35.1160180,
		//'longitude': -89.9053790,
		'latitude': 35.1158629,
		'longitude': -89.9054575,
		'startzoom': 14,
		'width': 468,
		'height': 313,
		'address': '<strong><a href="http://www.fabtn.com/service/service_eastmemp.php">East Memphis Office</a></strong><br />4700 Poplar Ave.<br />Memphis, TN   38117<br />(901) 767-8145'		
	},
	'cordova': {				//position confirmed and fixed
		'latitude': 35.1304829,
		'longitude': -89.7935850,
		'startzoom': 14,
		'width': 468,
		'height': 313,
		'address': '<strong><a href="http://www.fabtn.com/service/service_cordova.php">Cordova Office</a></strong><br />51 Germantown Ct.<br />Suite 100<br />Cordova, TN   38018<br />(901) 753-8339'
	},
	'oakland': {
		'latitude': 35.2286583,
		'longitude': -89.5372599,
		'startzoom': 10,
		'width': 468,
		'height': 313,
		'address': '<strong><a href="http://www.fabtn.com/service/service_oakland.php">Oakland Office</a></strong><br />5960 Highway 64<br />Oakland, TN   38060<br />(901) 465-0060'
	}
};

//create the LittleInfoWindow overlay object
function LittleInfoWindow(marker,html,width) {
	this.html_ = html;
	this.width_ = ( width ? width + 'px' : 'auto');
	this.marker_ = marker;
}

//use the GOverlay class
LittleInfoWindow.prototype = new GOverlay();

//initialize the container and shadowContainer
LittleInfoWindow.prototype.initialize = function(map) {
	this.map_ = map;
	var container = document.createElement("div");
	container.style.display='none';
	map.getPane(G_MAP_FLOAT_PANE).appendChild(container);
	this.container_ = container;

	var shadowContainer = document.createElement("div");
	shadowContainer.style.display='none';
	map.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(shadowContainer);
	this.shadowContainer_ = shadowContainer;
}

LittleInfoWindow.prototype.remove = function() {
	this.container_.parentNode.removeChild(this.container_);
	//don't forget to remove the shadow as well
	this.shadowContainer_.parentNode.removeChild(this.shadowContainer_);
}

LittleInfoWindow.prototype.copy = function() {
	return new LittleInfoWindow(this.marker_,this.html_,this.width_);
}

LittleInfoWindow.prototype.redraw = function(force) {
	if (!force) return;

	//get the content div
	var content = document.createElement("div");
	content.innerHTML = this.html_;
	content.style.font='10px verdana';
	content.style.margin='0';
	content.style.padding='0';
	content.style.border='0';
	//content.style.display='inline';

	if(!this.width_ || this.width_=='auto' || this.width_ <= 0) {
		//the width is unknown so set arough maximum and minimum
		content.style.minWidth = '10px';
		content.style.maxWidth = '125px';
		content.style.width = 'auto';
	} else {
		//the width was set when creating the window
		content.style.width= width + 'px';
	}

	//make it invisible for now
	content.style.visibility='hidden';

	//temporarily append the content to the map container
	this.map_.getContainer().appendChild(content);

	//retrieve the rendered width and height
	var contentWidth = content.offsetWidth;
	var contentHeight = content.offsetHeight;

	//remove the content from the map
	content.parentNode.removeChild(content);
	content.style.visibility='visible';

	//set the width and height to ensure they
	//stay that size when drawn again
	content.style.width=contentWidth+'px';
	content.style.height=contentHeight+'px';

	//set up the actual position relative to your images
	content.style.position='absolute';
	content.style.left='5px';
	content.style.top='7px';
	content.style.background='white';

	//create the wrapper for the window
	var wrapper = document.createElement("div");

	//first append the content so the wrapper is above
	wrapper.appendChild(content);

	//create an object to reference each image
	var wrapperParts = {
		tl:{l:0, t:0, w:5, h:7},
		t:{l:5, t:0, w:(contentWidth-6), h:7},
		tr:{l:(contentWidth-1), t:0, w:11, h:9},
		l:{l:0, t:7, w:5, h:contentHeight},
		r:{l:(contentWidth+5), t:9, w:5, h:(contentHeight-2)},
		bl:{l:0, t:(contentHeight+7), w:5, h:5},
		p:{l:5, t:(contentHeight+7), w:17, h:18},
		b:{l:22, t:(contentHeight+7), w:(contentWidth-17), h:5},
		br:{l:(contentWidth+5), t:(contentHeight+7), w:5, h:5}
	}

	//create the image DOM objects
	for (i in wrapperParts) {
		var img = document.createElement('img');
		//load the image from your local image directory
		//based on the property name of the wrapperParts object
		img.src = './../js/littleWindow2/' + i + '.png';
		//set the appropriate positioning attributes
		img.style.position='absolute';
		img.style.top=wrapperParts[i].t+'px';
		img.style.left=wrapperParts[i].l+'px';
		img.style.width=wrapperParts[i].w+'px';
		img.style.height=wrapperParts[i].h+'px';
		wrapper.appendChild(img);
		wrapperParts[i].img = img;
	}

	//add any event handlers like the close box
	var marker = this.marker_;
	GEvent.addDomListener(wrapperParts.tr.img, "click", function() {
		marker.closeLittleInfoWindow();
	});

	//get the X,Y pixel location of the marker
	var pixelLocation = this.map_.fromLatLngToDivPixel(
	this.marker_.getPoint()
	);

	//position the container div for the window
	this.container_.style.position='absolute';
	this.container_.style.left = (pixelLocation.x-3) + "px";
	this.container_.style.top = (pixelLocation.y
		- contentHeight
		- 25
		- this.marker_.getIcon().iconSize.height
	) + "px";
	
	this.container_.style.border = '0';
	this.container_.style.margin = '0';
	this.container_.style.padding = '0';
	this.container_.style.display = 'block';
	
	//append the styled info window to the container
	this.container_.appendChild(wrapper);

	//add a shadow
	this.shadowContainer_.style.position='absolute';
	this.shadowContainer_.style.left = (pixelLocation.x+15) + "px";
	this.shadowContainer_.style.top = (pixelLocation.y
		- 10
		- this.marker_.getIcon().iconSize.height
	) + "px";

	//this.shadowContainer_.style.border = '1px solid #000000';
	this.shadowContainer_.style.margin = '0';
	this.shadowContainer_.style.padding = '0';
	this.shadowContainer_.style.display = 'block';

	var shadowParts = {
		sl:{l:0, t:0, w:35, h:26},
		s:{l:35, t:0, w:(contentWidth-40), h:26},
		sr:{l:(contentWidth-5), t:0, w:35, h:26}
	}

	for (i in shadowParts) {
		var img = document.createElement('img');
		img.src = './../js/littleWindow2/' + i + '.png';
		img.style.position='absolute';
		img.style.top=shadowParts[i].t+'px';
		img.style.left=shadowParts[i].l+'px';
		img.style.width=shadowParts[i].w+'px';
		img.style.height=shadowParts[i].h+'px';
		this.shadowContainer_.appendChild(img);
	}

	//pan if necessary so it shows on the screen
	var mapNE = this.map_.fromLatLngToDivPixel(
		this.map_.getBounds().getNorthEast()
	);

	var panX=0;
	var panY=0;

	if(this.container_.offsetTop < mapNE.y) {
		//top of window is above the top edge of the map container
		panY = mapNE.y - this.container_.offsetTop;
	}

	if(this.container_.offsetLeft+contentWidth+10 > mapNE.x) {
		//right edge of window is outside the right edge of the map container
		panX = (this.container_.offsetLeft+contentWidth+10) - mapNE.x;
	}

	if(panX!=0 || panY!=0) {
		//pan the map
		this.map_.panBy(new GSize(-panX-10,panY+30));
	}
}

//add a new method to GMarker so you
//can use a similar API to the existing info window.
GMarker.prototype.LittleInfoWindowInstance = null;

GMarker.prototype.openLittleInfoWindow = function(content,width) {
	if(this.LittleInfoWindowInstance == null) {
		this.LittleInfoWindowInstance = new LittleInfoWindow(this, content, width);
		map.addOverlay(this.LittleInfoWindowInstance);
	}
}

GMarker.prototype.closeLittleInfoWindow = function() {
	if(this.LittleInfoWindowInstance != null) {
		map.removeOverlay(this.LittleInfoWindowInstance);
		this.LittleInfoWindowInstance = null;
	}
	for (var i in offices) {
		if (document.getElementById(i)) {
			var location = new GLatLng(offices[i].latitude, offices[i].longitude);
			map.setCenter(location, offices[i].startzoom);
		}
	}
	//map.setCenter(location, offices[i].startzoom);
	//mapinit();
}
/* [listing 9-5 end] */



function addMarker(latitude, longitude, description) {
    var marker = new GMarker(new GLatLng(latitude, longitude));

    GEvent.addListener(marker, 'click', function() {
		if(marker.LittleInfoWindowInstance) {
			marker.closeLittleInfoWindow();
		} else {
			marker.openLittleInfoWindow(description);
		}
	});

    map.addOverlay(marker);
}


function mapinit() {
    if (GBrowserIsCompatible()) {
		for (var i in offices) {
			if (document.getElementById(i)) {
				var location = new GLatLng(offices[i].latitude, offices[i].longitude);
				map = new GMap2(document.getElementById(i),{size:new GSize(468,313)});					
				map.setCenter(location, offices[i].startzoom);					
				var ui = new GMapUIOptions(new GSize(offices[i].width, offices[i].height));
				ui.maptypes =	{	normal: true,
									satellite: true,
									hybrid: true,
									physical: true
								};
				ui.zoom = 		{	scrollwheel: true,
									doubleclick: true
								};
				ui.controls =	{	largemapcontrol3d: false,
									smallzoomcontrol3d: true,
									maptypecontrol: false,
									menumaptypecontrol: false,
									scalecontrol: true
								}
				map.setUI(ui);
				if (i == "locationsAll") {
					for (var id in offices) {
						if(id != "locationsAll") {
							addMarker(offices[id].latitude, offices[id].longitude, offices[id].address);
						}
					}
				}
				else {
					addMarker(offices[i].latitude, offices[i].longitude, offices[i].address);
				}
				break;
			}
		}
	}
	else {
		alert("Sorry, your browser is not compatible with Google Maps.");
	}
}

YAHOO.util.Event.addListener(window, "load", mapinit);


/*
function displaymap() {
	var displaystate = document.getElementById('mapCordova').style.display;
	
	if (displaystate == 'none') {
		displaystate='block';
		}
	else {
		displaystate='none';
	}
}

displaystate.onclick = displaymap;
*/

/*
function init() {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	var office = new GLatLng(centerLatitude, centerLongitude);
	map.setCenter(office, startZoom);

	//var marker = new GMarker(office);

	GEvent.addListener(marker,'click',function() {
		if(marker.LittleInfoWindowInstance) {
			marker.closeLittleInfoWindow();
		} else {
			marker.openLittleInfoWindow('<b>Hello World!</b><br/>This is my info window!');
		}
	});

	GEvent.addListener(marker,'mouseover',function() {
		marker.openToolTip('This is a GMarker!');
	});

	GEvent.addListener(marker,'mouseout',function() {
		marker.closeToolTip();
	});

	map.addOverlay(marker);

}
*/


//window.onload = init;
//window.onunload = GUnload;



/* Dean Edwards' cross-browser onload solution; allows content to be
** hidden before it is displayed (i.e. the office map)
********************************************************/
function start() {
	// quit if this function has already been called
	if (arguments.callee.done) return;

	// flag this function so we don't do the same thing twice
	arguments.callee.done = true;

	// kill the timer
	if (_timer) {
		clearInterval(_timer);
		_timer = null;
	}
	
	// Loop through the array, getting a reference on each element.
	// If the reference is not null, it refers to the current page
	// being viewed and the iteration stops (break) and the display
	// attribute of the referenced <div> is set to none, hiding the
	// map from view upon entering the page.
	var ids = ["uptown", "east_memphis", "cordova", "oakland"];
	for (var i=0; i < ids.length; i++) {
		var el = document.getElementById(ids[i]);
		if (el != null) {
			el.style.display = "none";
			break;
		}
	}
};

/* for Mozilla */
if (document.addEventListener) {
	document.addEventListener("DOMContentLoaded", start, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
	document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
	var script = document.getElementById("__ie_onload");
	script.onreadystatechange = function() {
		if (this.readyState == "complete") {
			start(); // call the onload handler
		}
	};
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
	var _timer = setInterval(function() {
		if (/loaded|complete/.test(document.readyState)) {
			start(); // call the onload handler
		}
	}, 10);
}

/* for other browsers */
window.onload = start;
/*******************************************************/



/* YUI used to display/hide the office maps
** 
********************************************************/
// array can contain object references, element ids, or both

	var ids = ["uptown", "east_memphis", "cordova", "oakland"];

/*	
	function toggle(e, els) {
		for ( var i=0; i < arguments.length; i++ ) {
			$(els[i]).style.display = ($(els[i]).style.display != 'none' ? 'none' : '' );
		}
	}
*/	

	// hide the office map
	//function hidemap() {
	//	YAHOO.util.Dom.setStyle("cordova", "display", "none");
	//}
	
	// hide the map on DOM being ready	
	//YAHOO.util.Event.onDOMReady(hidemap);
	
	// hide the map when Target ID and next sibling are ready - doesn't work as well as "onDOMReady"
	//YAHOO.util.Event.onContentReady("cordova", this.hidemap, this);




	// toggle the display of the office map by selecting element (link, checkbox, etc.)  with an id of 'displaymap'
	var togglers = {
		init : function() {
			//var el = document.getElementById("cordova");	
			//el.style.display = "none";
			// the fourth element is passed as the second element in the toggle() function
			//var map = getElementsByClass('map',document,'div');
			YAHOO.util.Event.addListener("displaymap", "click", this.toggle, ids, true);
			
		},
		run : function() {
			toggle();
		},
		toggle : function(e, els) {
			for ( var i=0; i < els.length; i++ ) {
				var ref = document.getElementById(els[i]);
				if (ref != null) {
					if ($(els[i]).style.display != 'none') {
						$(els[i]).style.display = 'none';
					}
					else {
						$(els[i]).style.display = 'block';
						//map.checkResize();
					}
					//$(els[i]).style.display = ($(els[i]).style.display != 'none' ? 'none' : 'block' );
					
					var mapbtn = document.getElementById("displaymap");
					if (mapbtn.innerHTML != "Hide Map") {
						mapbtn.innerHTML = "Hide Map";
						location.hash = "#officepic";
					}
					else {
						mapbtn.innerHTML = "Display Map";
						location.hash = "#top";
					}
				}
			}
		}
	}
	
	function pageLoaders() {
		togglers.init();
	}
	
	YAHOO.util.Event.addListener(window, "load", pageLoaders);
/*******************************************************/