// FUNCTION RUN AT BODY ONLOAD TO INITIALIZE THE MAP
function load() {
	if (GBrowserIsCompatible()) {
	
		// CREATE A MAP AND ADD THE CONTROL INTERFACE
		var map = new GMap2(document.getElementById("map"));
		var ctrlPos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(30,30));
		map.addControl(new GLargeMapControl3D(),ctrlPos);
		map.setCenter(new GLatLng(40.666,-73.977), 13);
		
		var iw = map.getInfoWindow();
		
		// CREATE A CUSTOM MAP ICON
		var defaultMarker = new GIcon();
		defaultMarker.image = "img/sign.png";
		defaultMarker.iconSize = new GSize(30, 53);
		defaultMarker.shadow = "img/signshadow.png";
		defaultMarker.shadowSize = new GSize(50, 53);
		defaultMarker.iconAnchor = new GPoint(15, 51);
		defaultMarker.infoWindowAnchor = new GPoint(15, 0)
		defaultMarker.transparent = "img/signtransparent.png";
		defaultMarker.imageMap=[0,0,0,35,30,35,30,0];
				
		// DEFAULT MARKER OPTIONS
		var defaultOps = new Object();
		defaultOps.draggable = false;
		defaultOps.icon = defaultMarker;
		
		// INFO WINDOW OPTIONS
		var infoOps = new Object();
		infoOps.maxWidth = 240;
		
		// DEFINE CUSTOM OVERLAY FOR CUSTOM INFO WINDOW
		function PlaceInfo(i) { this.myPlace_ = i; }
		PlaceInfo.prototype = new GOverlay();
		
		PlaceInfo.prototype.initialize = function(map) {
			var myPane = map.getPane(G_MAP_FLOAT_PANE);
			var myPlaceInfo = $("#place"+this.myPlace_).html();
			$(myPane).append("<div id='customPlaceInfo'" + "><div class='visualPadding'" + ">" + myPlaceInfo + "</div" + "></div" + ">");
			var height = $(myPane).find("#customPlaceInfo").height();
			var pos = map.fromLatLngToDivPixel(MyLocs[this.myPlace_].position);
			var adjusted_x = pos.x - 120;
			var adjusted_y = pos.y - 71 - height;
			var myPane = map.getPane(G_MAP_FLOAT_PANE);
			$(myPane).find("#customPlaceInfo").css({'top':adjusted_y, 'left':adjusted_x});

			this.map_ = map;
			this.height_ = height;
		}
		PlaceInfo.prototype.remove = function() {
			var myPane = map.getPane(G_MAP_FLOAT_PANE);
			$(myPane).find("#customPlaceInfo").remove();
		}
		PlaceInfo.prototype.copy = function() {
  			return new PlaceInfo(this.myPlace_);
		}
		PlaceInfo.prototype.redraw = function(force) {
			if (force) {
				var myPane = map.getPane(G_MAP_FLOAT_PANE);
				var pos = this.map_.fromLatLngToDivPixel(MyLocs[this.myPlace_].position);
				var adjusted_x = pos.x - 120;
				var adjusted_y = pos.y - 71 - this.height_;
				$(myPane).find("#customPlaceInfo").css({'top':adjusted_y, 'left':adjusted_x});
			}
		}		

		// DEFINE CUSTOM OVERLAY FOR CUSTOM INFO WINDOW SHADOW
		function InfoShadow(i) { this.myPlace_ = i; }
		InfoShadow.prototype = new GOverlay();
		
		InfoShadow.prototype.initialize = function(map) {
			var myPane = map.getPane(G_MAP_FLOAT_SHADOW_PANE);
			$(myPane).append("<div id='customPlaceShadow'" + "></div" + ">");
			var height = $(myPane).find("#customPlaceShadow").height();
			var pos = map.fromLatLngToDivPixel(MyLocs[this.myPlace_].position);
			var adjusted_x = pos.x - 98;
			var adjusted_y = pos.y - 91;
			$(myPane).find("#customPlaceShadow").css({'top':adjusted_y, 'left':adjusted_x});

			this.map_ = map;
			this.height_ = height;
		}
		InfoShadow.prototype.remove = function() {
			var myPane = map.getPane(G_MAP_FLOAT_SHADOW_PANE);
			$(myPane).find("#customPlaceShadow").remove();
		}
		InfoShadow.prototype.copy = function() {
  			return new InfoShadow(this.myPlace_);
		}
		InfoShadow.prototype.redraw = function(force) {
			if (force) {
				var myPane = map.getPane(G_MAP_FLOAT_SHADOW_PANE);
				var pos = this.map_.fromLatLngToDivPixel(MyLocs[this.myPlace_].position);
				var adjusted_x = pos.x - 98;
				var adjusted_y = pos.y - 91;
				$(myPane).find("#customPlaceShadow").css({'top':adjusted_y, 'left':adjusted_x});
			}
		}

		// DEFINE CUSTOM OVERLAY FOR SELECTED MARKER
		function SelectedFace(i) { this.myPlace_ = i; }
		SelectedFace.prototype = new GOverlay();
		
		SelectedFace.prototype.initialize = function(map) {
			var myPane = map.getPane(G_MAP_FLOAT_SHADOW_PANE);
			$(myPane).append("<div id='selectedFace'" + "></div" + ">");
			var height = $(myPane).find("#selectedFace").height();
			var pos = map.fromLatLngToDivPixel(MyLocs[this.myPlace_].position);
			var adjusted_x = pos.x - 15;
			var adjusted_y = pos.y - 51;
			$(myPane).find("#selectedFace").css({'top':adjusted_y, 'left':adjusted_x});

			this.map_ = map;
			this.height_ = height;
		}
		SelectedFace.prototype.remove = function() {
			var myPane = map.getPane(G_MAP_FLOAT_SHADOW_PANE);
			$(myPane).find("#selectedFace").remove();
		}
		SelectedFace.prototype.copy = function() {
  			return new SelectedFace(this.myPlace_);
		}
		SelectedFace.prototype.redraw = function(force) {
			if (force) {
				var myPane = map.getPane(G_MAP_FLOAT_SHADOW_PANE);
				var pos = this.map_.fromLatLngToDivPixel(MyLocs[this.myPlace_].position);
				var adjusted_x = pos.x - 15;
				var adjusted_y = pos.y - 51;
				$(myPane).find("#selectedFace").css({'top':adjusted_y, 'left':adjusted_x});
			}
		}
		
				
		// AN ARRAY TO HOLD LOCATION INFORMATION
		var MyLocs = new Array();

		// CREATE AN EMPTY LIST IN THE LOCATION LIST AREA
		$('#contentColumn').append('<div id="menutop"' + '><div id="menubottom"' + '><div id="menu"' + '><ul' + '><' + '/ul><' + '/div><' + '/div><' + '/div>');

		// COLLECT ALL THE DEFINED PLACES
		var places = $('#locationList .placeOnMap');
		var firstPlace = Math.floor((Math.random() * places.length) - 0.00001);

		// FOR EACH PLACE, ASSIGN AN ID AND CREATE A LIST ITEM
		places.each(function(i) {
			$(this).attr("id","place"+i)
			var myTitle = $(this).find('h3').eq(0).text();
			var myListName = "name" + i;

			// ADD THIS LOCATION TO THE LIST
			$('#menu ul').append('<li id="' + myListName + '">' + myTitle + '<' + '/li>');
			
			// SET THE HOVER ACTIONS
			$('#' + myListName).hover(function () {
				if (!$(this).hasClass('selected')) { $(this).addClass('hovered'); }
			}, function () {
				if (!$(this).hasClass('selected')) { $(this).removeClass('hovered'); }
			});

			// SET THE CLICK ACTION
			$('#' + myListName).click(function() {
				if (selectedPlace != -1) { 
					map.removeOverlay(MyLocs[selectedPlace].infoWindow);
					map.removeOverlay(MyLocs[selectedPlace].infoShadow);
					map.removeOverlay(MyLocs[selectedPlace].altFace);
					MyLocs[selectedPlace].marker.setImage("img/sign.png");
					$("#menu li.selected").removeClass('selected');
				}
				$(this).removeClass('hovered');
				$(this).addClass('selected');
				selectedPlace = i;
				MyLocs[i].marker.setImage("img/signselected.png");
				map.addOverlay(MyLocs[i].infoWindow);
				map.addOverlay(MyLocs[i].infoShadow);
				map.addOverlay(MyLocs[i].altFace);
				map.setCenter(MyLocs[i].position);
				map.setZoom(15);
			});
						    							
			// DEFINE A NEW MAP POINT
			MyLocs[i] = new Object();
			MyLocs[i].id = i;
			MyLocs[i].position = eval("new GLatLng(" + $(this).find('.geocode').eq(0).text() + ")");
			MyLocs[i].marker = new GMarker(MyLocs[i].position ,defaultOps);
			MyLocs[i].infoWindow = new PlaceInfo(i);
			MyLocs[i].infoShadow = new InfoShadow(i);
			MyLocs[i].altFace = new SelectedFace(i);
			
			map.addOverlay(MyLocs[i].marker);
			
			GEvent.addListener(MyLocs[i].marker, "click", function (loc) {
				if (selectedPlace != -1) {
					map.removeOverlay(MyLocs[selectedPlace].infoWindow);
					map.removeOverlay(MyLocs[selectedPlace].infoShadow);
					map.removeOverlay(MyLocs[selectedPlace].altFace);
					MyLocs[selectedPlace].marker.setImage("img/sign.png");
					
					$("#menu li.selected").removeClass('selected');
					// selectedPlace = -1;
				}
				if (selectedPlace != i) {
					selectedPlace = i;
					map.panTo(loc);
					this.setImage("img/signselected.png");
					map.addOverlay(MyLocs[selectedPlace].infoWindow);
					map.addOverlay(MyLocs[selectedPlace].infoShadow);
					map.addOverlay(MyLocs[selectedPlace].altFace);

					$("#menu #name"+i).addClass('selected');
				}
				else { selectedPlace = -1; }
								
			});

			if (i == firstPlace) { map.setCenter(MyLocs[i].position, 13); }

		});
				
		// TRACK A PLACE SELECTED FROM THE LIST
		var selectedPlace = -1;
		GEvent.addListener(map, "click", function(overlay) {
			if (overlay == null) {
				if (selectedPlace != -1) {
					map.removeOverlay(MyLocs[selectedPlace].infoWindow);
					map.removeOverlay(MyLocs[selectedPlace].infoShadow);
					map.removeOverlay(MyLocs[selectedPlace].altFace);
					MyLocs[selectedPlace].marker.setImage("img/sign.png");

					$("#menu li.selected").removeClass('selected');
					selectedPlace = -1;
				}
			}
			else { }
		});		
	}
}