var map;

function addEvents() {
	//document.getElementById("region").onchange= function() { doAJAX('action=getNeighbourhoods&region_id=' + this.value); };
	document.getElementById("region").onchange= function() { 
		document.getElementById('neighbourhood').options[0].selected = 'true';
		buildGMap(); 
	};
	document.getElementById("neighbourhood").onchange = function() { 
		document.getElementById('region').options[0].selected = 'true';
		buildGMap(); 
	};
	document.getElementById("min_price").onchange = function() { buildGMap(); };
	document.getElementById("max_price").onchange = function() { buildGMap(); };
	document.getElementById("min_bedrooms").onchange = function() { buildGMap(); };
	document.getElementById("max_bedrooms").onchange = function() { buildGMap(); };
	
	document.getElementById("aListView").href = "javascript: listView()";
}

function ResetControl() {}
	
function listView() {
	document.getElementById("frmSearch").action = "/index.php?action=search&step=list";
	document.getElementById("frmSearch").submit();
};

function initGMaps() {
	map = new GMap2(document.getElementById("map"));
	map.enableScrollWheelZoom();
	//map.disableDoubleClickZoom();
	map.addControl(new GScaleControl());
	map.addControl(new GLargeMapControl());
	//map.addControl(new GMapTypeControl());
	ResetControl.prototype = new GControl();
	ResetControl.prototype.initialize = function(map) {
		var container = document.createElement("div");
		var resetDiv = document.createElement("div");
		resetDiv.id = 'divResetMap';
		resetDiv.className = 'classResetMap';
		container.appendChild(resetDiv);
		resetDiv.appendChild(document.createTextNode("Reset"));
		GEvent.addDomListener(resetDiv, "click", function() {
			resetMap();
		});
		GEvent.addDomListener(resetDiv, 'mouseover', function() {
			this.className = 'classResetMapOver';
		});
		GEvent.addDomListener(resetDiv, 'mouseout', function() {
			this.className = 'classResetMap';
		});
		
		map.getContainer().appendChild(container);
		return container;
	}
	ResetControl.prototype.getDefaultPosition = function() {
		return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
	}
	map.addControl(new ResetControl());
	buildGMap();
}

function buildGMap() {
	if (GBrowserIsCompatible()) {
		//clear out old markers
		map.clearOverlays();
		//get the parameters for the house search
		params = 'action=getGMapsHomes';
		params+= '&region=' + document.getElementById('region').value;
		params+= '&neighbourhood=' + document.getElementById('neighbourhood').value;
		params+= '&min_price=' + document.getElementById('min_price').value;
		params+= '&max_price=' + document.getElementById('max_price').value;
		params+= '&min_bedrooms=' + document.getElementById('min_bedrooms').value;
		params+= '&max_bedrooms=' + document.getElementById('max_bedrooms').value;
		//read the data from XML string
		doAJAX(params);
    } else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}

function changeOption(optType, optId) {
	obj = document.getElementById(optType);
	for(var i=0; i<obj.length; i++) {
		if(obj.options[i].value == optId) {
			obj.options[i].selected = 'true';
			break;
		}
	}
}

function showMarkers(xml) {
	if (GBrowserIsCompatible()) {
		var i = 0;

		// Create some custom icons
		// This icon uses the same shape as the default Google marker
		// So we can use its details for everything except the image 
		var greenTee = new GIcon();
		greenTee.image = "../images/googlemaps/rentmarker.png";
		greenTee.shadow = "http://www.google.com/mapfiles/shadow50.png";
		greenTee.iconSize = new GSize(20, 30);
		greenTee.shadowSize = new GSize(37, 34);
		greenTee.iconAnchor = new GPoint(9, 30);
		greenTee.infoWindowAnchor = new GPoint(9, 2);
		greenTee.infoShadowAnchor = new GPoint(18, 25);
		greenTee.transparent = "http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png";
		greenTee.printImage = "coldmarkerie.gif";
		greenTee.mozPrintImage = "coldmarkerff.gif";
		
		
		// This icon is a different shape, so we need our own settings
		var fingerIcon = new GIcon();
		fingerIcon.image = "../images/googlemaps/homemarker.png";
		fingerIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
		fingerIcon.iconSize = new GSize(20, 34);
		fingerIcon.shadowSize = new GSize(36, 34);
		fingerIcon.iconAnchor = new GPoint(5, 34);
		fingerIcon.infoWindowAnchor = new GPoint(5, 2);
		fingerIcon.infoShadowAnchor = new GPoint(14, 25);
		fingerIcon.transparent = "fingertran.png";
		fingerIcon.printImage = "fingerie.gif";
		fingerIcon.mozPrintImage = "fingerff.gif";
		
		// An array of GIcons, to make the selection easier
		var icons = [];
		icons[0] = greenTee;
		icons[1] = fingerIcon;

		// the icon information is passed to this function
		function createMarker(point,html,icontype,optId, address, bedrooms, price) {
			var marker = new GMarker(point,icons[icontype]);
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(html, {maxWidth:450, maxHeight: 400, autoScroll:false});
			});
			GEvent.addListener(marker, "mouseover",  function() {
				drc(address + ': ' + bedrooms + ' beds $' + price, '');
				return true;
			});
			GEvent.addListener(marker, "mouseout", function() {
				nd(); 
				return true;
			});
			/*
			GEvent.addListener(marker, "mouseover", function() {
				marker.openInfoWindowHtml(html, {maxWidth:450, maxHeight: 400, autoScroll:true});
			});
			GEvent.addListener(marker, "mouseout", function() {
				marker.closeInfoWindow();
			});
			GEvent.addListener(marker, "click", function() {
				location.search = '?action=search&step=details&id=' + optId;
			});
			*/
			
			return marker;
		}
		
		function createPolygon(GPolyArray, bordercolour, fillcolour, hTitle, hBody, optType, optId) {
			var polygon = new GPolygon(GPolyArray, bordercolour, 3, 1, fillcolour, 0.2);
			if(optType != null || optType != undefined) { //if the neighbourhood can be clicked
				GEvent.addListener(polygon, "mouseover",  function() {
					drc(hBody, hTitle);
					return true;
				});
				GEvent.addListener(polygon, "mouseout", function() {
					nd(); 
					return true;
				});
				GEvent.addListener(polygon, "click", function() {
					changeOption(optType,optId);
					nd(); 
					buildGMap();
				});
			}
			return polygon;
		}
		
		//set the center of the map
		var MapLevel = xml.getElementsByTagName("MapLevel");
		cLat = parseFloat(MapLevel[0].getAttribute("lat"));
		cLng = parseFloat(MapLevel[0].getAttribute("lng"));
		zoom = parseInt(MapLevel[0].getAttribute("zoom"));
		map.setCenter(new GLatLng(cLat, cLng), zoom);
		if((MapLevel[0].getAttribute('type') == 'region') || (MapLevel[0].getAttribute('type') == 'neighbourhood')) { 
			//if we are displaying the regions or neighbourhoods:
			var areas = xml.getElementsByTagName('Area');
			var optType = xml.getElementsByTagName('MapLevel')[0].getAttribute('type');
			for(var i=0; i<areas.length; i++) {
				var GPolyArray = [];
				var fillcolour = areas[i].getElementsByTagName('FillColour')[0].childNodes[0].nodeValue;
				var bordercolour = areas[i].getElementsByTagName('BorderColour')[0].childNodes[0].nodeValue;				
				var hTitle = areas[i].getElementsByTagName('Title')[0].childNodes[0].nodeValue;
				var hBody = areas[i].getElementsByTagName('Body')[0].childNodes[0].nodeValue;
				var optId = areas[i].getElementsByTagName('id')[0].childNodes[0].nodeValue;
				var coordinates = areas[i].getElementsByTagName('Coordinate');
				for(var j=0; j<coordinates.length; j++) {
					point = new GLatLng(parseFloat(coordinates[j].getAttribute('lat')), parseFloat(coordinates[j].getAttribute('lng')));
					GPolyArray[j] = point;
				}
				var polygon = createPolygon(GPolyArray, bordercolour, fillcolour, hTitle, hBody, optType, optId);
				map.addOverlay(polygon);
			}
		} else { //this is a list of homes with markers.
			//set the home count
			document.getElementById('number_properties').innerHTML = '<h4>' + xml.getElementsByTagName('HomesCount')[0].childNodes[0].nodeValue + ' properties</h4>';
			// obtain the array of markers and loop through it
			var GPolyArray = [];
			var markers = xml.getElementsByTagName("Home");
			//var neighbourhood = xml.getElementsByTagName('Neighbourhood');
			var coordinates = xml.getElementsByTagName('Coordinate');
			for(var j=0; j<coordinates.length; j++) {
				point = new GLatLng(parseFloat(coordinates[j].getAttribute('lat')), parseFloat(coordinates[j].getAttribute('lng')));
				GPolyArray[j] = point;
			}
			//var fillcolour = xml.getElementsByTagName('FillColour')[0].childNodes[0].nodeValue;
			//var bordercolour = xml.getElementsByTagName('BorderColour')[0].childNodes[0].nodeValue;				
			//var polygon = new GPolygon(GPolyArray, bordercolour, 3, 1, fillcolour, 0.2);
			//map.addOverlay(polygon);
			for (var i = 0; i < markers.length; i++) {
				//alert(i);
				// obtain the attribues of each marker
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var optId = parseInt(markers[i].getElementsByTagName("id")[0].childNodes[0].nodeValue);
				//alert(lat + ' ' + lng + ' ' + optId);
				//var optType = markers[i].getElementsByTagName("type")[0].childNodes[0].nodeValue;
				if(!isNaN(lat) && !isNaN(lng)) {
					var point = new GLatLng(lat,lng);
					var html = markers[i].getElementsByTagName("html")[0].childNodes[0].nodeValue;
//					var address = '';
//					var bedrooms = '';
//					var price = '';
					var address = markers[i].getElementsByTagName("address")[0].childNodes[0].nodeValue;
					var bedrooms = markers[i].getElementsByTagName("bedrooms")[0].childNodes[0].nodeValue;
					var price = markers[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
					// create the marker
					var marker = createMarker(point,html,1,optId, address, bedrooms, price);
					map.addOverlay(marker);
				}
			}
		}
	} else {
		alert("Sorry, the Google Maps API is not compatible with this browser");
	}
}

function resetMap() {
	document.getElementById('neighbourhood').options[0].selected = 'true';
	document.getElementById('region').options[0].selected = 'true';
	document.getElementById("min_price").options[0].selected = 'true';
	document.getElementById("max_price").options[0].selected = 'true';
	document.getElementById("min_bedrooms").options[0].selected = 'true';
	document.getElementById("max_bedrooms").options[0].selected = 'true';
	buildGMap();
}

addLoadEvent(addEvents);
addLoadEvent(initGMaps);