// http://code.google.com/apis/maps/documentation/v3/

$(document).ready(function() {
	GoogleMaps.Initialize();
});

var GoogleMaps = {
	oMap: null,
	oBounds: null,
	oMapMarkers: [],
	oMapHtml: [],
	oJsonMarkers: {},
	oOpenInfowindow: null,
	oGeoCoder: null,

	Initialize: function() {
		this.oJsonMarkers = markers;
		this.oGeoCoder = new google.maps.Geocoder();

		var middelBurg = new google.maps.LatLng(51.503966, 3.615332);

		// http://code.google.com/apis/maps/documentation/v3/controls.html
		var myOptions = {
			zoom: 8,
			center: middelBurg,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			mapTypeControl: false
			//navigationControlOptions: google.maps.NavigationControlStyle.ZOOM_PAN,
			//navigationControl: true
		};

		this.oMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		this.oBounds = new google.maps.LatLngBounds();

		this.processMarkers();
	},

	processMarkers: function() {
		if (this.oJsonMarkers.length > 0) {
			for (var i = 0; i < this.oJsonMarkers.length; i++) {
				var jsonItem = this.oJsonMarkers[i];

				var html = this.createHtml(jsonItem);
				var title = jsonItem.name;

				if (jsonItem.lat == null || jsonItem.lng == null) {
					// retrieve lat/lng by geolocation:
					this.codeAddress(jsonItem.address + ", " + jsonItem.city, title, html);
				}
				else {
					var lat = parseFloat(jsonItem.lat);
					var lng = parseFloat(jsonItem.lng);

					var point = new google.maps.LatLng(lat, lng);
					this.createMarker(this.oMap, point, title, html);
				}
			}

			//TODO: deze pas uitvoeren als alle markers geladen zijn. 
			var tlEvent = google.maps.event.addListener(this.oMap, "tilesloaded", function() {
				Log("tiles loaded");
				google.maps.event.removeListener(tlEvent);

				GoogleMaps.oMap.fitBounds(GoogleMaps.oBounds);
				GoogleMaps.oMap.setCenter(GoogleMaps.oBounds.getCenter());
			});
		}
	},

	codeAddress: function(address, title, html) {
		this.oGeoCoder.geocode({ address: address }, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK && results.length) {
				if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
					var point = results[0].geometry.location;

					GoogleMaps.createMarker(GoogleMaps.oMap, point, title, html);
				}
			}
			else {
				//alert("Geocode was unsuccessful due to: " + status);
			}
		});
	},

	createMarker: function(map, point, title, html) {
		var markerOptions = {
			title: title,
			position: point,
			map: map
		}

		var marker = new google.maps.Marker(markerOptions);
		GoogleMaps.oBounds.extend(point);

		google.maps.event.addListener(marker, "click", function() {
			var infowindowOptions = {
				content: html
			}
			var infoWindow = new google.maps.InfoWindow(infowindowOptions);
			GoogleMaps.setInfowindow(infoWindow);

			infoWindow.open(map, marker);
		});

		this.oMapMarkers.push(marker);
		this.oMapHtml.push(html);

		return marker;
	},

	createHtml: function(json) {
		var html = "<div style=\"font-size:12px;margin:10px;\">";
		html += "<strong>" + json.name + "</strong><br/>";
		html += json.address + "<br/>";
		html += json.zipcode + " " + json.city + "<br/>";
		if (json.text) { 
			html += json.text + "<br/>"; 
		}
		html += "<a href=\"http://maps.google.nl?daddr=" + json.address + "," + json.city + "\" onclick=\"window.open(this.href);return false\"><b>routebeschrijving</b></a>";
		html += "<br/></div>";

		return html;
	},

	setInfowindow: function(newInfowindow) {
		if (this.oOpenInfowindow != undefined) {
			this.oOpenInfowindow.close();
		}
		this.oOpenInfowindow = newInfowindow;
	},

	//listbox onchange event listener:
	showMarker: function(listBox) {
		if (listBox[listBox.selectedIndex].value == "-1") {
			return false;
		}
		var selIndex = listBox.selectedIndex;
		var selTitle = listBox.options[selIndex].text;
		//var index = listBox.selectedIndex - 1;

		for (var i = 0; i < this.oMapMarkers.length; i++) {
			var markerItem = this.oMapMarkers[i];
			if (selTitle == markerItem.title){
				var infowindowOptions = { content: this.oMapHtml[i] };
				var infowindow = new google.maps.InfoWindow(infowindowOptions);
				infowindow.open(this.oMap, this.oMapMarkers[i]);
				this.setInfowindow(infowindow);
			}
		} 
	}
}