// This file has the main code for creating the users' map of the eruv

    // TODO different LINE color for inner circle
    //       Build a key with a tiny circle w/ correct fill/line color for
    //       each eruv circle
    // TODO Separate circle for mountain street section

    // TODO "directions to here" for each shulMarker?

    // TODO GMarkerManager - show more points based on zoom level
    // http://googlemapsapi.blogspot.com/2006/11/marker-manager.html
    // TODO enableScrollWheelZoom
    // encoded polygon - faster for lots of points
    // TODO use Geocoding API so user can input address to see if it's in eruv!

    // colors for eruv lines
    // main eruv, hammershop pond exclusion, mountain street section
    var lineColors = ["#2020e0", "#e02020", "#302000"];
    var fillColors = ["#8040c0", "#c06060", "#704020"];
    var fillOpacities = [.3, .5, .3]; // pond is more opaque

    var  mymap; // store Gmap object
    var polylines = []; // store polyline objects

    //create red and blue icons
    var poleIcon, redIcon, blueIcon;
// TODO find & fix all instances of red/blue/pole Icons!

    function loadMap () {
	var mapElement = document.getElementById("map_canvas");
	var map = new GMap2(mapElement,{});
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	var center = new GLatLng(42.1180, -71.176824);
	map.setCenter(center, 14);

// Put lat/long into info window. If we want it to work inside the eruv
// polygon(s), we need to add listener there too.
//	GEvent.addListener(map, "click", function(marker, point) {
//	    if (! marker) {
//		//var txt = document.createTextNode(point.toUrlValue);
//		var txt = document.createTextNode(point);
//		var info = document.getElementById("info");
//		info.replaceChild(txt, info.lastChild);
//	    }
//	});
	
	// make icons for markers
	createIcons();

	// Create pole object for each pole in the eruv
	drawEruvLine(startPolygons, map);

	// Create shul markers
	createShulMarkers(map);

	// Create danger zone markers
	createDangerMarkers(dangerZones, map);

	mymap = map;
    } // end of function loadMap

    function createIcons() {
	redIcon = new GIcon(); // new GIcon(G_DEFAULT_ICON)?
	redIcon.image = "images/warning_trans.png";
	//redIcon.image = "warning_trans.png";
//	redIcon.shadow = "shadow50.png";
	redIcon.iconSize = new GSize(27, 27);
//	redIcon.shadowSize = new GSize(37, 34);

// TODO change anchor locations
	redIcon.iconAnchor = new GPoint(14, 14);
	redIcon.infoWindowAnchor = new GPoint(9, 2);
//	redIcon.infoShadowAnchor = new GPoint(18, 25);

	blueIcon = new GIcon(redIcon);
	blueIcon.image = "images/star_blue_trans.png";
	//blueIcon.image = "star_blue_trans.png";
	blueIcon.iconSize = new GSize(26, 26);
    }

    function createShulMarkers(themap) {
	/* Use blue icons for shuls */
	var i;
	for (i = 0; i < Synagogues.length; i++) {
		var synagogue = Synagogues[i];
		// Array has desc, street address, latitude, longitude
		var desc = synagogue[0];
		var address = synagogue[1];
		var lat = synagogue[2];
		var lng = synagogue[3];
		var point = new GLatLng(lat, lng);
		// TODO use address more intelligently?
		var longDesc = desc + "<br>" + address;
		var marker = createMarker(themap, point, longDesc, "blue");
	}
    }

    // Function Creates a marker whose infowindow displays descrip, uses icon
    function createMarker(themap, point, descr, color) {
	var icn = color == "red" ? redIcon : blueIcon;
	var marker = new GMarker(point, {icon:icn});
	themap.addOverlay(marker);

	// Show this marker's index in the info window when it is clicked
	var html = '<div style="width: 20em">'+'<b> <font face="Arial">' + descr + '</font> </b>' + '</div>';
	marker.bindInfoWindowHtml(html);
	//GEvent.addListener(marker, "click", function(amarker, point) {
		//amarker.openInfoWindowHtml(html);
		//var txt = document.createTextNode(descr);
		//var info = document.getElementById("info");
		//info.replaceChild(txt, info.lastChild);
	//}); 

	return marker;
    } // end function createMarker
		 
    function createDangerMarkers(dangerZones, themap) {
	/* Use red icons for danger markers */
	var i;
	for (i = 0; i < dangerZones.length; i++) {
		var dangerZone = dangerZones[i];
		// Array has desc, latitude, longitude, jpg name, width, height
		var desc = dangerZone[0];
		var lat = dangerZone[1];
		var lng = dangerZone[2];
		var jpg = dangerZone[3];
		var width = dangerZone[4];
		var height = dangerZone[5];
		var point = new GLatLng(lat, lng);
		var marker = createDangerMarker(themap, point, desc, "red", jpg, height, width);
	}
    }

    // Function Creates a marker which shows new jpg next to map
    function createDangerMarker(themap, point, descr, color, jpg, h, w) {
	var icn = color == "red" ? redIcon : blueIcon;
	var marker = new GMarker(point, {icon:icn});
	themap.addOverlay(marker);

	// Show new jpg when marker is clicked
	GEvent.addListener(marker, "click", function(amarker, point) {
		var image = document.getElementById("dangerImage");
		image.src = "pics/" + jpg ;
		//image.src = jpg ;
		image.alt = "Picture describing details of " + descr;
		image.height = h;
		image.width = w;
		var txt = document.createTextNode(descr);
		var txtSpan = document.getElementById("dangerDesc");
		txtSpan.replaceChild(txt, txtSpan.lastChild);
	}); 

	return marker;
    } // end function createDangerMarker

    // Function Creates a pole marker which displays description, uses icon
    function createPoleMarker(themap, point) {
	var marker = new GMarker(point, {icon:poleIcon});
	//themap.addOverlay(marker);
	return marker;
    } // end function createPoleMarker

    // draw the polylines that make the eruv
    function drawEruvLine(polygons, themap) {
	// Polyline: array of points, color, weight, opacity
	// var polyline = new GPolyline([new GPoint(-122.1419, 37.4419), 
	//                   new GPoint(-122.1519, 37.4519)], "#ff0000", 10);
	// GPolygon(points,  strokeColor?,  strokeWeight?,  strokeOpacity?,  
	//          fillColor?,  fillOpacity?)

	// Draw the lines
	for (var i = 0; i < polygons.length; i++) {
	    //var oldline = polylines[i];
	    //themap.removeOverlay(oldline);
	    var poly = polygons[i];
	    var points = []; 
	    for (var j = 0; j < poly.length; j++) {
		var one_loc = poly[j];
		var desc = one_loc[2];
		var ll = new GLatLng(one_loc[0], one_loc[1]);
		// createPoleMarker is legacy code. Might be able to
		// remove if we set 'point' explicitly
		var marker = createPoleMarker(themap, ll);
		var point = marker.getPoint();
		points.push(point);
	    }
	    //GLog.write("Read circle with " + poly.length + " points\n");

	    // close the circle
	    points.push(points[0]);

	    // Draw the polygon
	    // var eruv = new GPolyline(points,"#2020e0");
	    var polyColor = lineColors[i];
	    var fillColor = fillColors[i];
	    var fillOpacity = fillOpacities[i];
	    var eruv = new GPolygon(points, polyColor, 4, .8, fillColor, fillOpacity);
	    polylines[i] = eruv;
	    //debug_add(points.length + " points");
	    themap.addOverlay(eruv);
	}
    } // end sub drawEruvLine

    function redrawMap() {
	//document.getElementById("clickLatLong").value = "redrawing";
	drawEruvLine(poles, mymap);
	//document.getElementById("clickLatLong").value = "drew";
    }

    // NOTE: use GLog.write(str) to get pretty debug info
// NOTE: clickLatLong has gone away as of 20071025!
    function debug(str) {
	document.getElementById("clickLatLong").value = str;
    }
    function debug_add(str) {
	document.getElementById("clickLatLong").value += str;
    }
    function debug_long_add(str) {
	document.getElementById("pointsList").value += str;
    }