Ext.namespace('user_map_pi1');

user_map_pi1.geo = Ext.extend(Ext.util.Observable, {

	constructor: function(config){
		Ext.apply(this, config);
		
		var ct = Ext.get(this.mapcontainer).dom;
		this.map = new GMap2(ct);
		this.map.setCenter(new GLatLng(this.mapcenter.lat, this.mapcenter.lng), this.mapcenter.zoom);
		this.map.setUIToDefault();
		
		GEvent.bind(this.map, 'dragend', this, function(){
			this.map.savePosition();
		});
		
		this.getMarkers();
		
		var df = Ext.get(this.directionsform);
		if(df !== null){
			df.on('submit', this.getDirections, this);
		}
	},
	
	getMarkers: function(){
		Ext.Ajax.request({
			url: this.dataurl,
			params: {'user_map_pi1[do]': 'getMarkers'},
			success: function(res, req){
				var markers = Ext.util.JSON.decode(res.responseText);
				if(markers.length == 1){
					var point = new GLatLng(markers[0].geo.lat, markers[0].geo.lng);
					this.map.setCenter(point,15);
					this.map.savePosition();
				}
				Ext.each(markers, this.addMarker, this);
			},
			failure: function(){
				Ext.MessageBox.alert('', 'Er is een fout opgetreden, probeer het later opnieuw.');
			},
			scope: this
		});
	},
	
	getDirections: function(e, t){
		e.preventDefault();
		var formEl = Ext.get(t);
		
		Ext.Ajax.request({
			url: this.dataurl,
			form: formEl,
			params: {'user_map_pi1[do]': 'getDirections'},
			success: function(res, req){
				var d = Ext.util.JSON.decode(res.responseText);
				this.drawDirections(d);
			},
			failure: function(){
				Ext.MessageBox.alert('', 'Er is een fout opgetreden, probeer het later opnieuw.');
			},
			scope: this
		});
	},
	
	drawDirections: function(d){
		if(d.status === false){
			Ext.MessageBox.alert('Er is een fout opgetreden', 'Het berekenen van de route is helaas niet gelukt, probeer het later nogmaals');
			return;
		}
		
		var ct = Ext.get(this.directionscontainer).update('');

		ct.createChild({cls: 'saddr', html: '<span class="label">' + this.ll.saddr +'</span> '+ d.saddr.address});
		ct.createChild({cls: 'eaddr', html: '<span class="label">' + this.ll.eaddr +'</span> '+ d.eaddr.address});
		ct.createChild({cls: 'distance', html: '<span class="label">' + this.ll.estimated_distance +'</span> '+ d.distance.html});
		ct.createChild({cls: 'duration', html: '<span class="label">' + this.ll.estimated_duration +'</span> '+ d.duration.html});
		
		var steps = ct.createChild({cls: 'steps'});
		
		Ext.each(d.steps, function(s){
			var step = steps.createChild({cls: 'step'});
			step.createChild({cls: 'distance', html: s.Distance.html});
			step.createChild({cls: 'duration', html: s.Duration.html})
			step.createChild({cls: 'description', html: s.descriptionHtml});
		}, this);
	},
	
	addMarker: function(o){
		if(o.icon == null){
			var icon = null;
		} else {
			var icon = new GIcon();
			icon.image = this.baseurl + o.icon.src;
			icon.iconSize = new GSize(o.icon.w, o.icon.h);
			icon.iconAnchor = new GPoint(o.icon.w, o.icon.h);
			icon.infoWindowAnchor = new GPoint(15, 1);
		}
		
		var point = new GLatLng(o.geo.lat, o.geo.lng);
		var marker = new GMarker(point, icon);

		marker.bindInfoWindowHtml(this.getHtml(o), {
			maxWidth: 200,
			noCloseOnClick: true
		});
		
		GEvent.bind(marker, 'click', this, function(){
			this.map.setCenter(point,12);
		});
		
		GEvent.bind(marker, 'infowindowclose', this, function(){
			this.map.returnToSavedPosition();
		});
		
		this.map.addOverlay(marker);
	},
	
	getHtml: function(o){
		var balloonId = 'user_map_pi1_balloon_' + o.uid;
		return '<div id="' + balloonId + '" class="map_balloon">' + o.info + '</div>';
	}

});