/*

Author: Roy Teusink
Lib: Mootools 1.3

Documentation:
http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/reference.html#MapOptions


Usage:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="google_map" style="height: 200px;"></div>
{$name|addslashes}
var map = new GoogleMaps('google_map', { scrollwheel: false });
map.addMarker(52.2648569, 6.8018085, 'Mouseovertekstje', { name: 'Goede morge1!', street: 'straat' });
map.addMarker(52.2608569, 6.8010085, 'Mouseovertekstje', { name: 'Goede morge2!', street: 'straat' });

*/

var GoogleMaps = new Class({

	Implements: Options,
	
	mapelement: null,
	map: null,
	markericon: null,
	markershadow: null,
	bubble: null,
	latlngs: [],
	
	options: {
		zoom: 14,
		scrollwheel: true,
		mapTypeControl: false,
		streetViewControl: true,
		panControl: false,
		bubblewidth: 320,
		offset: { x: 20, y: -100 },
		enablebubble: true,
		showbubble: false,
		autofit: false,
		fixedposition: { lat: null, lng: null },
		template: '<h1>{name}</h1>{street} {number} {numberext}<br />{zipcode} {city}',
		markericon: '/skin/marker.png',
		markershadow: '/skin/marker_shadow.png'	
	},

	initialize: function(id, options) {
		var app = this;

		this.setOptions(options);
		this.mapelement = document.id(id);
		
		if(!this.mapelement) return;
		
		this.markericon = new google.maps.MarkerImage(
			this.options.markericon, 
			new google.maps.Size(31, 36), 
			new google.maps.Point(0, 0), 
			new google.maps.Point(0, 36)
		);
		
		this.markershadow = new google.maps.MarkerImage(
			this.options.markershadow,
			new google.maps.Size(55, 28), 
			new google.maps.Point(0, 0), 
			new google.maps.Point(0, 28)
		);
		
		this.map = new google.maps.Map(this.mapelement, {
		
			/* required options */
			center: new google.maps.LatLng(52.2648569, 6.8018085),
			
			/* optional options */
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			zoom: this.options.zoom,
			streetViewControl: this.options.streetViewControl,
			mapTypeControl: this.options.mapTypeControl,
			scrollwheel: this.options.scrollwheel,
			panControl: this.options.panControl
			
		});
		
	
		this.bubble = new google.maps.InfoWindow({
			maxWidth: this.options.bubblewidth,
			disableAutoPan: true
		});

		if(this.options.enablebubble) {
			google.maps.event.addListener(this.map, 'click', function(e){
				app.bubble.close();
				google.maps.event.trigger(app.bubble, 'closeclick');
				
				//var myLatLng = e.latLng;
				//var lat = myLatLng.lat();
				//var lng = myLatLng.lng();
				//console.log( 'lat: '+ lat + ', lng:' + lng ); 
			});
		}
	},
	
	addMarker: function(lat, lng, title, content) {
		var app = this;
		var latlng = new google.maps.LatLng(lat, lng);
		
		this.latlngs.push(latlng);
		
		var marker = new google.maps.Marker({
			map: this.map,
			position: latlng,
			title: title,
			icon: this.markericon,
			shadow: this.markershadow
		});
		
		if(this.options.enablebubble) {		
			
			
			google.maps.event.addListener(marker, 'click', function(){
				app.bubble.setContent(app.options.template.substitute(content));
				app.bubble.open(app.map, this);
			});
			
			if(this.options.showbubble) app.bubble.open(this.map, marker);
		}
		
		if(this.options.fixedposition.lat != null && this.options.fixedposition.lng != null) {
			var newpos = new google.maps.LatLng(this.options.fixedposition.lat, this.options.fixedposition.lng);
			this.map.panTo(newpos);
		} else {
			this.map.panTo(marker.getPosition());
			this.map.panBy(this.options.offset.x, this.options.offset.y); 
		}
		
		
		if(this.options.autofit) {
			var bound = new google.maps.LatLngBounds();
			for(var i = 0; i < this.latlngs.length; i++) {
				bound.extend(this.latlngs[i]);
			}
			this.map.fitBounds(bound);
			google.maps.event.addListenerOnce(this.map, 'zoom_changed', function() {
				if(this.getZoom() > 14) {
					this.setZoom(14);
				}
			});
			
		}
	}
});