var map = null;
var icons = [];
var colors = ['red','orange','yellow','green','aqua','blue','purple','pink','brown','white','black'];
var projects = [];
var files = [];
var infoWindowOptions = { maxWidth: 400 };

baseIcon = new GIcon();
baseIcon.iconSize = new GSize(12, 20);
baseIcon.shadowSize = new GSize(22, 20);
baseIcon.iconAnchor = new GPoint(6, 20);
baseIcon.infoWindowAnchor = new GPoint(5, 1);
colors.each(function(color) {
	icons[color] = new GIcon(baseIcon, "images/markers/" + color + ".png");
});

// Accordian Menus
var optionsMenu;
var categoryMenu;
var projectMenu;

function PadLeft(string, length, pad) {
	while (string.length < length) string = "" + pad + string;
	return string;
}

function ShowProjectId(id) { ShowProject(projects[id]); }

function ShowProject(project) {
	fileString = "";

	if (project['files']) {
		project['files'].each(function(file) {
			fileString += "<br>";
			fileString += "<a href='files/" + project['id'] + "/" + file['filename'] + "'";
			fileString += " target='_new'>";
			if (file['title'] != '') fileString += file['title'];
			else fileString += file['filename'];
			fileString += "</a>";
		});
	}
	
	var thumb = (project.filename != null) ? 
		"<a href='files/" + project.id + "/" + project.filename + "' target='_new'>" + 
		"<img src='files/" + project.id + "/thumb200/" + project.thumb + "' class='thumb'>" +
		"</a>"
		: "";

	descriptionTab = new GInfoWindowTab("Project",
			"<div class='projectTitle'>" +
			thumb +
			project.title +
			"</div>" +
			"project number: " + PadLeft(project.number, 6, "0") + "<br>" +
			project.description +
			"<div class='spacer'></div>");
			
	filesTab = new GInfoWindowTab("Files",
			"<div class='projectTitle'>" +
			project.title +
			"</div>" +
			fileString);
			
	locationTab = new GInfoWindowTab("Location",
			"<div class='projectTitle'>" +
			project.title +
			"</div>" +
			(project.street == undefined ? "" : project.street) + "<br>" +
			(project.city == undefined ? "" : project.city) + ", " + 
			(project.state == undefined ? "" : project.state) + " " +
			(project.zip == undefined ? "" : project.zip) + "<br>" +
			"lat/lng: (" + 
			Math.round(10000*project.lat)/10000 + ", " +
			Math.round(10000*project.lng)/10000 + ")"
		);
	
	
	var infoTabs = (fileString == '') ? [descriptionTab, locationTab]: [descriptionTab, filesTab, locationTab];

	project.marker.openInfoWindowTabsHtml(infoTabs, infoWindowOptions);
}

function RecenterMap() {
	bounds = new GLatLngBounds();
	projects.each(function(project) {
		if (project.onMap) bounds.extend(project.marker.getPoint());
	});
	
	if (bounds.isEmpty()) {
		map.returnToSavedPosition();
	} else {
		var cLat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) / 2;
		var cLng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) / 2;
		
		map.setZoom(Math.min(15, map.getBoundsZoomLevel(bounds)));
		map.setCenter(new GLatLng(cLat, cLng));
	}
}

function MakeProjectList() {
	projectMenu.hide();

	var count = 0;
	var listHtml = "<table>";
	for (ndx = 0; ndx < projects.length; ndx++) {
		if (projects[ndx].onMap) {
			count++;
			listHtml += "<tr><td>";
			listHtml += "<img class='lineImage' src='images/markers/"+projects[ndx].icon+".png'> ";
			listHtml += "</td><td>";
			listHtml += "<a href='javascript:void(0);' ";
			listHtml += "onClick='ShowProjectId(" + ndx + ")'>";
			listHtml += projects[ndx].title;
			listHtml += "</a></td></tr>";
		}
	}
	listHtml += "</table>";
	
	if (count == 0) listHtml = "none";
	$("projectListBody").update(listHtml);
	projectMenu.toggle();
}

function ShowProjects(id, show) {
	map.getInfoWindow().hide();
	
	projects.each( function(project) {
		if (id == 0 || id == project.categoryID) {
			if (show && !project.onMap) {
				map.addOverlay(project.marker);
				project.onMap = true;
			} else if (!show && project.onMap) {
				map.removeOverlay(project.marker);
				project.onMap = false;
			}
		}
	});
	
	MakeProjectList();
	if ($('recenter').checked) RecenterMap();
}


function AddListener(project) {
	GEvent.addListener(project.marker, 'click', function() {
		ShowProject(project);
	});
}

function ResizeMainArea() {
		$('mapMain').style.height = ($('mapPage').getHeight() - $('header').getHeight()) + "px";
}

function Load() {
	var menuSpeed = 500;

	optionsMenu = new fx.Height($("options"), {duration: menuSpeed});
	categoryMenu = new fx.Height($("categories"), {duration: menuSpeed});
	projectMenu = new fx.Height($("projectList"), {duration: menuSpeed});

	optionsMenu.hide();
	projectMenu.hide();
	
	if (GBrowserIsCompatible()) {
		map = new GMap2($('map'));
		
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl(new GSize(150,150)));
		map.enableDoubleClickZoom();
		map.enableContinuousZoom();

		map.setCenter(new GLatLng(37.726194088705576, -122.1514892578125), 10);
		map.savePosition();
		
		document.forms.categorySelect.reset();
		
		projects.each(function(project) {
			project.marker = new GMarker(
				new GLatLng(project.lat, project.lng),
				icons[project.icon]
			);
			project.onMap = false;
			AddListener(project);
		});
		
		Event.observe(window, 'resize', ResizeMainArea);
		ResizeMainArea();
	} else alert("Your browser is not compatible with Google Maps.");	
}