// JavaScript Document

var centerLatitude = 34.079341;
var centerLongitude = -118.403134;
var startZoom = 12;
var startZoomDetail = 18;

var map;
var detailID = 0;

// this variable will collect the html which will eventually be placed in the side_bar
var sidebarhtml = "";

// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var i = 0;



function addMarker(latitude, longitude, street, image, width, height, headText, bodyText) {
	var saint_icon = new GIcon();
	saint_icon.image = 'images/gold_map_pin.png';
	saint_icon.iconSize = new GSize(35,35);
	saint_icon.iconAnchor=new GPoint(17,35);
	saint_icon.infoWindowAnchor = new GPoint(17,15);
	var thisPoint = new GLatLng(latitude,longitude);
	var thisStreet = street;
	var marker = new GMarker(thisPoint, {icon: saint_icon, title: thisStreet});
	saint_icon.shadow = 'images/gold_map_pin_shadow.png';
	saint_icon.shadowSize = new GSize(52,35);
	
	var tab1HTML = '<div class="map_tab_html"><h2>' + headText  + '</h2><img src="images/' + image + '" width="' + width + '" height="' + height + '" />' + bodyText + '</div>';
	var tab2HTML = '<div class="map_tab_html"><h2>' + street + '</h2><div id="detailmap"></div></div>';
	var tab1 = new GInfoWindowTab("about", tab1HTML);
	var tab2 = new GInfoWindowTab("detail", tab2HTML);
	var infoTabs = [tab1,tab2];
	

	
	GEvent.addListener(marker,'click', 
		function(){
			marker.openInfoWindowTabsHtml(infoTabs,{selectedTab: 0, maxWidth: 600, autoScroll:true});

		
			
			var dMapDiv = document.getElementById("detailmap");
			var detailmap = new GMap2(dMapDiv);
			detailmap.setCenter(thisPoint, startZoomDetail);
			detailmap.addControl(new GSmallMapControl);
			detailmap.addMapType(G_HYBRID_MAP);
			detailmap.setMapType(G_HYBRID_MAP);
			
						
			var detailIcon = new GIcon();
			detailIcon.image = 'images/gold_dot.png';
			detailIcon.size = new GSize(25,25);
			detailIcon.iconAnchor = new GPoint(12,12);
			var detailMarker = new GMarker(thisPoint, {icon: detailIcon, title: thisStreet, clickable: false});
			detailmap.addOverlay(detailMarker);
						
			var CopyrightDiv = dMapDiv.firstChild.nextSibling;
			var CopyrightImg = dMapDiv.firstChild.nextSibling.nextSibling;
			CopyrightDiv.style.display = "none"; 
			CopyrightImg.style.display = "none"; 
			
		}
	);
	map.addOverlay(marker);
	return marker
}


function init()
{
	if(GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		var location = new GLatLng(centerLatitude, centerLongitude);
		map.setCenter(location,startZoom);
		map.addControl(new GMapTypeControl);
		map.addControl(new GSmallMapControl);
		// MapType Array of Constants: G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP
		//map.addMapType(G_NORMAL_MAP);
		//map.setMapType(G_NORMAL_MAP);
		
		map.addMapType(G_PHYSICAL_MAP)
		map.setMapType(G_PHYSICAL_MAP)
		
		for(id in markers) {
			gmarkers[i] = addMarker(markers[id].latitude,markers[id].longitude,markers[id].street,markers[id].image_small,markers[id].width, markers[id].height ,markers[id].headline,markers[id].bodytext);
        	// add a line to the side_bar html
       		sidebarhtml += '<p class="submenu"><a href="javascript:open_street(' + i + ')">' + markers[id].street + '</a></p>';
        	i++;
		}
		document.getElementById("map_span").innerHTML = sidebarhtml;
		//document.getElementById("maploader").style.display = "none";
		
		// This function picks up the click and opens the corresponding info window
	}
	
}

function open_street(i) {
	GEvent.trigger(gmarkers[i], "click");
}


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