//<![CDATA[
var map;

/************************************
*
* changeBodyClass
*
*************************************/
function changeBodyClass(from, to) {
	document.body.className = document.body.className.replace(from, to);
	return false;
}


/************************************
*
* createMarker
*
*************************************/
function createMarker(latlng, html, iconImage) {
	if(iconImage!='') {
		var icon = new GIcon();
		icon.image = iconImage;
		icon.iconSize = new GSize(25, 25);
		icon.iconAnchor = new GPoint(14, 25);
		icon.infoWindowAnchor = new GPoint(14, 14);
		var marker = new GMarker(latlng,icon);
	} else {
		var marker = new GMarker(latlng);
	}
	GEvent.addListener(marker, 'click', function() {
		var markerHTML = html;
		marker.openInfoWindowHtml(markerHTML);
	});
	return marker;
}

/************************************
*
* createMarkerFunctionality
*
*************************************/
function createMarkerFunctionality() {
	GEvent.addListener(map, "click", function(overlay, latlng) {

		//create an HTML DOM form element
		var inputForm = document.createElement("form");
		inputForm.setAttribute("action","");
		inputForm.onsubmit = function() {storeMarker(); return false;};

		///retrieve the longitude and latitude of the click point
		//this generates a javascript error when the click is on the input form and not the map--nothing tragic, but it's annoying...
		var lng = latlng.lng();
		var lat = latlng.lat();
		
		//this form is UGLY and needs styling but I don't have time right now!!  BLH 04 jan 08.
		html_string = '';
		html_string = '<fieldset style="width:350px;font-family:Arial;font-size:10px;margin-bottom:4px;">'
			+ '<legend><strong>New Location</strong></legend>'
			+ '<label for="name">Location Name: </label>'
                        + '<input type="text" id="name" style="width:70%;"/><br>'	
			+ '<label for="loc_type">Location Type: </label>'
			+ '<input type="text" id="loc_type" style="width:70%;"/><br>';
		
		//html_string += '<select id="loc_type">' + '<option value="">-select one-</option>';
		
		//need to retrieve options from the database.  what is the best way to do this?!
		//the problem i am having is using ajax and being able to access the dom form element HERE.
		//it's probably because i don't understand the DOM well enough
		//do i call a javascript function that calls a php function via ajax, which gets xml?  if so, how do i return that xml
		//back to this function (map_init)???  
		//and if that doesn't work, then what are my other options?
	
		//html_string += '</select><br>';
		
		//not using bldg type field right now--maybe never?		
		//html_string +=
                //        '<label for="bldg_type">Building Type:&nbsp; </label>'
                //        + '<input type="text" id="bldg_type" style="width:70%;"/><br><br>';

		html_string += '<input type="hidden" id="bldg_type" value=""><br>';

		html_string += '<table width="100%" border="1" cellpadding="0" cellspacing="0">'
			+ '<tr><td>'
			+ '<table width="100%" border="0" cellpadding="0" cellspacing="4">'
				+ '<tr>'
					+ '<td colspan="2">'
						+ '<strong>ADDRESS INFO:</strong> : '
					+ '</td>'
				+ '</tr>'
				+ '<tr>'
					+ '<td align="right">'
						+ '<label for="address">Street Address: </label>'
					+ '</td>'
					+ '<td>'
						+ '<input type="text" id="address" style="width:100%;"/>'
					+ '</td>'
				+ '</tr>'
                        	+ '<tr>'
					+ '<td align="right">'	
						+ '<label for="city">City: </label>'
					+ '</td>'
					+ '<td>'
						+ '<input type="text" id="city" style="width:100%;"/>'
					+ '</td>'
				+ '</tr>'
                        	+ '<tr>'
					+ '<td align="right">'
						+ '<label for="province">Province/State: </label>'
					+ '</td>'
					+ '<td>'
						+ '<input type="text" id="province" style="width:100%;"/>'
					+ '</td>'
				+ '</tr>'
                        	+ '<tr>'
					+ '<td align="right">'
						+ '<label for="country">Country: </label>'
					+ '</td>' 
					+ '<td>'
                        			+ '<input type="text" id="country" style="width:100%;"/>'
					+ '</td>'
				+ '</tr>'
			+ '</table>'
			+ '</td></tr>'
			+ '</table>'
			+ '<br>'
			+ '<label for="empire">Empire: </label>'
                        + '<input type="text" id="empire" style="width:70%;"/>'
			//this should be a drop-down from the db
			+ '<br>'
			+ '<label for="persona">Character(s)/persona(e): Last, First.  Separate with a semi-colon (;)</label>'
                        + '<input type="text" id="persona" style="width:100%;"/>'
			+ '<label for="start_date">Start Date (mm/dd/YYYY): </label>'
                        + '<input type="text" id="start_mon" maxlength="2" style="width:8%;"/> / '
			+ '<input type="text" id="start_day" maxlength="2" style="width:8%;"/> / '
			+ '<input type="text" id="start_year" maxlength="4" style="width:16%;"/><br>'
			+ '<label for="end_date">End Date&nbsp (mm/dd/YYYY): </label>'
			+ '<input type="text" id="end_mon" maxlength="2" style="width:8%;"/> / '
                        + '<input type="text" id="end_day" maxlength="2" style="width:8%;"/> / '
                        + '<input type="text" id="end_year" maxlength="4" style="width:16%;"/><br>'
			+ '<label for="start_page">Start Page: </label>'
                        + '<input type="text" id="start_page" style="width:15%;"/><br>'
                        + '<label for="end_page">End Page:&nbsp; </label>'
                        + '<input type="text" id="end_page" style="width:15%;"/><br><br>'
			+ '<label for="location_link">Location ID(s) to link to.  Separate integers with a semi-colon (;)</label>'
			+ '<input type="text" id="location_link" style="width:100%;"/>'
			+ '<label for="desc">Description of Narrative Context</label>'
			+ '<textarea id="desc" rows="4" maxlength="1950" style="width:100%"></textarea>'
			//icon will probably be determined by the type of location and/or bldg--make this a hidden field for now
			//+ '<label for="icon">Icon URL: </label>'
			//+ '<input type="text" id="icon" style="width:70%;"/><br />'
			+ '<input type="hidden" id="icon" value=""/>'
			+ '<input type="submit" value="Save"/>'
			+ '<input type="hidden" id="longitude" value="' + lng + '"/>'
			+ '<input type="hidden" id="latitude" value="' + lat + '"/>'
			+ '<input type="hidden" id="book_id" value="' + textId + '"/>'
			+'</fieldset>';
		
		inputForm.innerHTML = html_string;	
		map.openInfoWindow (latlng,inputForm);
		//handleResize();

	});
}

/************************************
*
* drawPolyline
*
*************************************/
function drawPolyline(lng1,lat1,lng2,lat2,lineColor,lineSize) {
	var polyline = new GPolyline([
	  new GLatLng(lat1, lng1),
	  new GLatLng(lat2, lng2)
	], lineColor, lineSize);
	map.addOverlay(polyline); 
}


/************************************
*
* getParameters
*
*************************************/
function getParameters()
{
        //get form values (value of checked is true/false)
        var getVars
                = "?ch1=" + document.getElementById("ch1").checked
                + "&ch2=" + document.getElementById("ch2").checked
                + "&ch3=" + document.getElementById("ch3").checked
                + "&ch4=" + document.getElementById("ch4").checked
                + "&ch5=" + document.getElementById("ch5").checked
                + "&ch6=" + document.getElementById("ch6").checked
                + "&ch7=" + document.getElementById("ch7").checked
                + "&ch8=" + document.getElementById("ch8").checked
                + "&ch9=" + document.getElementById("ch9").checked
                + "&ch10=" + document.getElementById("ch10").checked
		+ "&search=true"
		+ "&book_id=1" ;

	return getVars;
}

/************************************
*
* handleResize
*
*************************************/
function handleResize() {
	var height = windowHeight();
	height -= document.getElementById('toolbar').offsetHeight - 30;
	document.getElementById('map').style.height = height + 'px';
	document.getElementById('sidebar').style.height = height + 'px';
}

/************************************
*
* initializePoint
*
*************************************/
var deselectCurrent = function() {}; //Empty function

function initializePoint(pointData,lng,lat,iconSize) {

	var point = new GPoint(lng,lat);
	
	//CREATE MARKER
	var TravelogueLocation = pointData.getAttribute("travelogue_location");
	if(TravelogueLocation==1) {
		var iconImageType = "travelogue";
	} else {
		var iconImageType = "plain";
	}
	if(iconSize=="normal") {
		var iconImage = "";
		var iconNumber = "";
		if(iconImageType=="plain") {
			iconImage = 'icons/purple_nodot.png';
		} else if(iconImageType=="travelogue") {
			iconNumber = pointData.getAttribute("travelogue_order_told");
			iconImage = "icons/0_to_99_markers/markers/marker" + iconNumber + ".png";
			//iconImage = 'icons/red_nodot.png';
		}
		if(iconImage!='') {
			var icon = new GIcon();
			icon.image = iconImage;
			icon.shadow = 'icons/msmarker.shadow.png';
			icon.iconSize = new GSize(25, 25);
			icon.iconAnchor = new GPoint(14, 25);
			icon.infoWindowAnchor = new GPoint(14, 14);
			var marker = new GMarker(point,icon);
		} else {
			var marker = new GMarker(point);
		}
	} else if(iconSize=="small") {
		if(iconImageType=="plain") {
			iconImage = 'icons/purple_nodot.png';
		} else if(iconImageType=="travelogue") {
			iconImage = 'icons/red_nodot.png';
		}
		if(iconImage!='') {
			var icon = new GIcon();
			icon.image = iconImage;
			//icon.shadow = 'icons/msmarker.shadow.png';
			icon.iconSize = new GSize(18, 18);
			icon.iconAnchor = new GPoint(10, 18);
			icon.infoWindowAnchor = new GPoint(10, 10);
			var marker = new GMarker(point,icon);
		} else {
			var marker = new GMarker(point);
		}	
	} else if(iconSize=="tiny") {
		if(iconImageType=="plain") {
			iconImage = 'icons/purple_nodot.png';
		} else if(iconImageType=="travelogue") {
			iconImage = 'icons/red_nodot.png';
		}
		if(iconImage!='') {
			var icon = new GIcon();
			icon.image = iconImage;
			//icon.shadow = 'icons/msmarker.shadow.png';
			icon.iconSize = new GSize(12, 12);
			icon.iconAnchor = new GPoint(8, 12);
			icon.infoWindowAnchor = new GPoint(8, 12);
			var marker = new GMarker(point,icon);
		} else {
			var marker = new GMarker(point);
		}	
	}	
	//CREATE MENU LIST ITEM
	var listItem = document.createElement('li');
	var listItemLink = listItem.appendChild(document.createElement('a'));
    

	listItemLink.href = "#";
	var narrativeOrderNumber = pointData.getAttribute("travelogue_order_told");
	if(narrativeOrderNumber != '' && narrativeOrderNumber != 'NULL') {
		if(TravelogueLocation==1) {
			narrativeOrderNumber = '<font color="red">[' + narrativeOrderNumber + '] </font>';
		} else {
			narrativeOrderNumber = '<font color="purple">[' + narrativeOrderNumber + '] </font>';
		}	
	}
	listItemLink.innerHTML = '<strong>' + narrativeOrderNumber + pointData.getAttribute("name");
	if(pointData.getAttribute("desc") != '' && pointData.getAttribute("desc") != 'NULL') {
		listItemLink.innerHTML += ' </strong><span>' + pointData.getAttribute("desc") + '</span>';
	}
	
	var markerContent = '[' + pointData.getAttribute("travelogue_order_told") + '] ' + pointData.getAttribute("name");
	var focusPoint = function() {
		deselectCurrent();
		listItem.className = 'current';
		deselectCurrent = function() { listItem.className = ''; }
		marker.openInfoWindowHtml(markerContent);
		map.panTo(point);
		return false;
	}

	GEvent.addListener(marker, 'click', focusPoint);                                                
	listItemLink.onclick = focusPoint;                                                
	document.getElementById('sidebar-list').appendChild(listItem);                                                
	map.addOverlay(marker);	
}

/************************************
*
* retrieveMarkers
*
*************************************/
function retrieveMarkers(iconSize) {
	
	//var params = getParameters();
	//var params = "?ch10=true";
	var params = "?book_id=";
	params += textId;

	var request = GXmlHttp.create();

	//tell the request where to retrieve data from
	request.open('GET', 'retrieveMarkers.php' + params, true);
	
	//tell the request what to do when the state changes
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var xmlDoc = request.responseXML;

            //retrieve the root document element (response)
            var responseNode = xmlDoc.documentElement;

            //retrieve the type attribute of the node
            var type = responseNode.getAttribute("type");

            //retrieve the content of the response node
            var content = responseNode.firstChild.nodeValue;
            //check to see if it was an error or success
            if(type!='success') {
                    alert(content);
            } else {
				
				var markers = xmlDoc.documentElement.getElementsByTagName("marker");
				var prevTravelogueLng = '';
				var prevTravelogueLat = '';
				var prevTravelogueIconNumber = '';
				var prevGlobalLng = '';
				var prevGlobalLat = '';
				var traveloguePolyLineCtr = 0;
				var GlobalPolyLineCtr = 0;
				var prevLineType = 0;
				var globalLineColor = "#ffffff";
				for (var i = 0; i < markers.length; i++) {
					var lng = markers[i].getAttribute("lng");
					var lat = markers[i].getAttribute("lat");
					var iconNumber = markers[i].getAttribute("travelogue_order_told");
					var travelogue = markers[i].getAttribute("travelogue_location");
					//check for lng and lat so MSIE does not error (bah!)
					//on parseFloat of a null value
					if(lng && lat) {
						initializePoint(markers[i],lng,lat,iconSize);
						//draw polylines between markers
						if(i > 0) {
							if(travelogue==1) {
								traveloguePolyLineCtr++;
								if(traveloguePolyLineCtr > 1) {
									drawPolyline(lng,lat,prevTravelogueLng,prevTravelogueLat,"#ff0000",5);
								}
								prevTravelogueLng = lng;
								prevTravelogueLat = lat;
								prevTravelogueIconNumber = iconNumber;
								prevLineType = 1;
							} else {
								GlobalPolyLineCtr++;
								if(GlobalPolyLineCtr > 1) {
									if(prevLineType==1) {
										if(prevTravelogueIconNumber=='20') {
											drawPolyline(lng,lat,prevTravelogueLng,prevTravelogueLat,"orange",3);
										} else {
											drawPolyline(lng,lat,prevTravelogueLng,prevTravelogueLat,globalLineColor,3);
										}
									} else {
										if(prevTravelogueIconNumber=='20') {
											drawPolyline(lng,lat,prevGlobalLng,prevGlobalLat,"orange",3);
										} else {
											drawPolyline(lng,lat,prevGlobalLng,prevGlobalLat,globalLineColor,3);
										}
									}
								}
								prevGlobalLng = lng;
								prevGlobalLat = lat;
								prevLineType = 2;
							}
						}					
					}
				} //for
			}
		}
	} //function

	request.send(null);
}


/************************************
*
* showExistingMarker
*
*************************************/
function showExistingMarker(latitude, longitude, description) {
	var marker = new GMarker(new GLatLng(latitude, longitude));

	GEvent.addListener(marker, 'click',
		function() {
			marker.openInfoWindowHtml(description);
		}
	);	

	map.addOverlay(marker);
}

/************************************
*
* storeMarker
*
*************************************/
function storeMarker(){
	var lng = document.getElementById("longitude").value;
	var lat = document.getElementById("latitude").value;

	var getVars 
		= "?loc_type=" + document.getElementById("loc_type").value
		+ "&name=" + document.getElementById("name").value
		+ "&address=" + document.getElementById("address").value
		+ "&city=" + document.getElementById("city").value
		+ "&province=" + document.getElementById("province").value
		+ "&country=" + document.getElementById("country").value
		+ "&empire=" + document.getElementById("empire").value
		+ "&bldg_type=" + document.getElementById("bldg_type").value
		+ "&persona=" + document.getElementById("persona").value
		+ "&start_mon=" + document.getElementById("start_mon").value
		+ "&start_day=" + document.getElementById("start_day").value
		+ "&start_year=" + document.getElementById("start_year").value
		+ "&end_mon=" + document.getElementById("end_mon").value
                + "&end_day=" + document.getElementById("end_day").value
                + "&end_year=" + document.getElementById("end_year").value
		+ "&start_page=" + document.getElementById("start_page").value
		+ "&end_page=" + document.getElementById("end_page").value
		+ "&location_link=" + document.getElementById("location_link").value
		+ "&desc=" + document.getElementById("desc").value
		+ "&icon=" + document.getElementById("icon").value
		+ "&lng=" + lng
		+ "&lat=" + lat 
		+ "&book_id=" + document.getElementById("book_id").value ;

	//validate form input before sending to server

	var request = GXmlHttp.create();

	//open the request to storeMarker.php on server
	request.open('GET', 'storeMarker.php' + getVars, true);
	request.onreadystatechange = function() {
		if(request.readyState == 4) {
			//the request is complete

			var xmlDoc = request.responseXML;
			
			//retrieve the root document element (response)
			var responseNode = xmlDoc.documentElement;

			//retrieve the type attribute of the node
			var type = responseNode.getAttribute("type");
			
			//retrieve the content of the response node
			var content = responseNode.firstChild.nodeValue;

			//check to see if it was an error or success
			if(type!='success') {
				alert(content);
			} else {
				//create a new marker and add its info window
				var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));
				var iconImage = responseNode.getAttribute("icon");
				var marker = createMarker(latlng, content, iconImage);
				map.addOverlay(marker);
				map.closeInfoWindow();
			}
		}
	}
	request.send(null);
	return false;

}



/************************************
*
* windowHeight
*
*************************************/
function windowHeight() {
	//Standard browsers (Mozilla, Safari, etc.)
	if (self.innerHeight)
		return self.innerHeight;
	//IE 6
	if (document.documentElement && document.documentElement.clientHeight)
		return y = documentElement.clientHeight;
	//IE 5
	if (document.body)
		return document.body.clientHeight;
	//just in case
	return 0;
}

/************************************
*
* map_init
*
*************************************/
function map_init()
{
	
	if (GBrowserIsCompatible()) {
      	
      		
		map = new GMap(document.getElementById("map")); // new: using GMap rather than GMap2 object

		// ============================================================
		// ====== Create a copyright entry =====
		var copyright = new GCopyright(1,
			new GLatLngBounds(new GLatLng(centerLatitude-0.4,centerLongitude-0.4),
				new GLatLng(centerLatitude+0.4,centerLongitude+0.4) ),
				14, "Unknown");


		// ============================================================
		// ====== Create a copyright collection =====
		// ====== and add the copyright to it   =====
		var copyrightCollection = new GCopyrightCollection('Map Data:');
			copyrightCollection.addCopyright(copyright);	
			
		// ============================================================
		// == Write our own getTileUrl function ========
		// In this case the tiles are names like "maps/Berlin_1985_Region/11/1098/670.png"
		CustomGetTileUrl=function(a,b){
			return "maps/Berlin_1985_Region/" + b + "/" + a.x + "/" + a.y + ".png"
		}	
		
		// ============================================================
		// ===== Create the GTileLayer =====
		// ===== and apply the CustomGetTileUrl to it
		var tilelayers = [new GTileLayer(copyrightCollection,8,15)];
		tilelayers[0].getTileUrl = CustomGetTileUrl;	
		
		// ============================================================
		// ===== Create the GMapType =====
		// ===== and add it to the map =====
		if(textId==2) {
			var custommap = new GMapType(tilelayers, new GMercatorProjection(18), "Historical Divided Berlin Map", {errorMessage:"No data available for 1985 Map of Berlin at this location and zoom level. Try switching to a different map view."});
			map.addMapType(custommap);		
		}				
		
		retrieveMarkers(iconSize);
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl()); //new
		if (mapType=='1985 Map') {
			map.setCenter(new GLatLng(centerLatitude,centerLongitude), startZoom, custommap); //new
		} else if(mapType=='satellite') {
			map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom, G_SATELLITE_MAP);
		} else if(mapType=='hybrid') {
			map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom, G_HYBRID_MAP);
		} else {
			map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom, G_NORMAL_MAP);
		}
	}

	//allow the user to click the map to create a marker
	if(allowMarkerCreation==1) {
		createMarkerFunctionality();
	}
	
	//window.onresize = handleResize;

	//enable hide/show of right-hand sidebar
	//document.getElementById('button-sidebar-hide').onclick = function() { return changeBodyClass('sidebar-right', 'sidebar-off'); };
	//document.getElementById('button-sidebar-show').onclick = function() { return changeBodyClass('sidebar-off', 'sidebar-right'); };
	// Javascript for custom tile layers is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    
}

window.onload = map_init;
window.onunload = GUnload;
//]]>