var map_locations = [];
var map_markers = [];
var map = null;
var maxinfowindowwidth = 200;
var defaultcenter = null;
var info_marker_open = 0;
var baseIcon = null;
var geoXml;  // used for train overlay

function initmap(mapid) {
  if (GBrowserIsCompatible()) {
	geoXml = new GGeoXml("http://www.centerstagechicago.com/includes/TrainOverlay.txt");   // used for train overlay
	map = new GMap2(document.getElementById(mapid));
//	map.addControl(new GLargeMapControl());
	map.addControl(new GSmallMapControl());
//	map.addControl(new GMapTypeControl());
//	map.addControl(new GOverviewMapControl());
	defaultcenter = new GLatLng(41.87772,-87.62746);
	map.setCenter(defaultcenter,17);
	map.addOverlay(geoXml);
	
	// Create a base icon for all of our markers that specifies the
	// shadow, icon dimensions, etc.
	baseIcon = new GIcon();
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);

	GEvent.addListener(map,"infowindowclose", function() { info_marker_open = null; }); 
  } else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  }
}

function mapToFitAll() {
	if( map_locations.length ) {
		var bounds = new GLatLngBounds();
		for( var i=0; i < map_locations.length; i++ ) {
			bounds.extend(new GLatLng(map_locations[i].lat, map_locations[i].lng));
		}
		map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));
	}
}


function addMapLocation(id, lat, lng, title, address, city, state, zipcode, phone, description, linkto, markerimage) {
	map_locations[map_locations.length] = new mapLocation(id, lat, lng, title, address, city, state, zipcode, phone, description,linkto, markerimage);
}

function mapLocation(id, lat, lng, title, address, city, state, zipcode, phone, description, linkto, markerimage) {
	this.id = id;
	this.lat = lat;
	this.lng = lng;
	this.title = title;
	this.address = address;
	this.city = city;
	this.state = state;
	this.zipcode = zipcode;
	this.phone = phone;
	this.description = description;
	this.linkto = linkto;
	this.markerimage = markerimage;
}

function focusOnMarker(index) {
	var marker = map_markers[index];
	map.setCenter(marker.getPoint(),16);
	displayInfoWindow(index);
}

function drawMapLocations() {
	for( var i=0; i < map_locations.length; i++ ) {
		createMarker(i+1, map_locations[i].id, map_locations[i].lat, map_locations[i].lng, map_locations[i].title,
					 map_locations[i].address, map_locations[i].city, map_locations[i].phone, map_locations[i].description,
					 map_locations[i].linkto, map_locations[i].markerimage);
	}
}

function createMarker(markerindex, index, lat, lng, title, address, city, phone, description, linkto, markerimage) {
	var point = new GLatLng(lat,lng);
	
	if( markerimage != '' && markerimage != null) {
		var useIcon = new GIcon(baseIcon);
		useIcon.image = markerimage;
		markerOptions = { title:title, icon:useIcon };
	}
	else { markerOptions = { title:title }; }
	
	var marker = new GMarker(point, markerOptions);
	marker.title = title;
	marker.address = address;
	marker.city = city;
	marker.phone = phone;
	marker.description = description;
	marker.linkto = linkto;
	GEvent.addListener(marker, "mouseover", function() { displayInfoWindow(index); });
//	GEvent.addListener(marker, "click", function() { displayInfoWindow(index); });
	map_markers[index] = marker;
	map.addOverlay(marker);
}

function tohere(id) {
	var content = formatMarkerContent(id,map_markers[id],'tohere');
	map_markers[id].openInfoWindowHtml(content, { maxWidth: maxinfowindowwidth});
}

function fromhere(id) {
	var content = formatMarkerContent(id,map_markers[id],'fromhere');
	map_markers[id].openInfoWindowHtml(content, { maxWidth: maxinfowindowwidth});
}

function canceldirections(id) {
	var content = formatMarkerContent(id,map_markers[id],'directions');
	map_markers[id].openInfoWindowHtml(content, { maxWidth: maxinfowindowwidth});
}

function displayInfoWindow(index) {
	if( info_marker_open != index ) {
	var content = formatMarkerContent(index,map_markers[index],'directions');
  	map_markers[index].openInfoWindowHtml(content, { maxWidth: maxinfowindowwidth});
	info_marker_open = index;
	}
}


function formatMarkerContent(id,marker,content_type) {
	var content = '';
	content += '<div class="infobubble">';
	if( marker.linkto && marker.linkto.length ) {
		content += '<div class="infoTitle"><a href="'+marker.linkto+'">'+marker.title+'</a></div>';	
	}
	else {
		content += '<div class="infoTitle">'+marker.title+'</div>';
	}
	if( marker.address.length || marker.city.length || marker.phone.length ) {
		content += '<div class="infoAddress">';
		if( marker.address.length || marker.city.length ) { 
			content += marker.address;
			if(marker.city != 'Chicago') { content += ', '+marker.city; }
		}
		if( marker.phone.length ) { content += '<br />'+marker.phone; }
		content += '</div>';
	}
	if(marker.description && marker.description.length) {
		content += '<div class="description">'+marker.description+'</div>';	
	}
	if( content_type == 'directions') {
	content += '<p>Directions: <a href="javascript:tohere('+id+')">To here</a> - <a href="javascript:fromhere('+id+')">From here</a></p>';
	}
	else if ( content_type== 'tohere' ) {
		var point = marker.getPoint();
		content += '<p>Directions: <b>To here</b> - <a href="javascript:fromhere(' + id + ')">From here</a></p>';
		content += '<form action="http://maps.google.com/maps" method="get" target="_blank">';
	    content += 'Start address: <input type="text" SIZE=30 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>';
	    content += '<INPUT value="Get Directions" TYPE="SUBMIT">';
		content += '&nbsp;&nbsp;<a href="javascript:canceldirections(' + id + ');">Cancel</a>';
	    content += '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + '" />';
		content += '</form>';
	}
	else if ( content_type== 'fromhere' ) {
		var point = marker.getPoint();
		content += '<p>Directions: <a href="javascript:tohere(' + id + ')">To here</a> - <b>From here</b></p>';
		content += '<form action="http://maps.google.com/maps" method="get" target="_blank">';
	    content += 'End address: <input type="text" SIZE=30 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>';
	    content += '<INPUT value="Get Directions" TYPE="SUBMIT">';
		content += '&nbsp;&nbsp;<a href="javascript:canceldirections(' + id + ');">Cancel</a>';
	    content += '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() + '" />';
		content += '</form>';
	}
	content += '</div>';
	return content;
}
