Ext.namespace('SilverMapper');

SilverMapper.Map = function(config) {

	Ext.apply(this, config, {
			region: 'center'
		,	id: 'sm-map'
		,	gmapType: 'map'
		,	featureConfig: [
					'enableContinuousZoom'
//				,	'enableGoogleBar'
				,	'enableScrollWheelZoom'
			]
		,	controls: [
					new GLargeMapControl()
				,	new GScaleControl()						
				,	new GMapTypeControl()
			]
		,	bbar: new Ext.StatusBar({
					defaultText: Lang.Get('Core','general','coordinates')
				,	id: 'sm-map-statusbar'
			})

		,	setCenter: {
					lat: 46
				,	lng: -120.8
			}
		,	zoomLevel: 7
		,	listeners: {
					'render': function() {
						
						this.mask = new Ext.LoadMask( this.body, {
								msg: Lang.Get('Core','general','map_loading')
	//						,	removeMask: true
						});

//						this.pano = new GLayer("com.panoramio.all");
//						this.wiki = new GLayer("org.wikipedia.en");
//						this.switchLayer( true, 'this.wiki' );
					}
			}
	});

	SilverMapper.Map.superclass.constructor.apply(this, arguments);

};

Ext.extend( SilverMapper.Map, Ext.ux.GMapPanel, {

		/**
		*		Function
		*		Create Marker will create a google map marker.
		**/
		createMarker: function( point, name, id, size, layer_id ) {
	
			var icon = new GIcon();
			if (size == 1) {
				icon.image = "images/icons/" + layer_id + "-single.png";
			} else {
				icon.image = "images/icons/" + layer_id + "-cluster.png";
			}		
			icon.iconSize = new GSize(22, 22);
			icon.iconAnchor = new GPoint(0, 0);
			icon.infoWindowAnchor = new GPoint(8, 10);
			
			var marker = new GMarker(point, icon);
			marker.id = id;
			marker.img_single = 'images/icons/' + layer_id + '-single.png';
			marker.img_cluster = 'images/icons/' + layer_id + '-cluster.png';
			marker.img_select = 'images/icons/' + layer_id + '-selected.png';
	
			GEvent.addListener(marker, "click", function() {
				var index = Ext.getCmp('sm-clustergrid').getStore().indexOfId( marker.id );
				Ext.getCmp('sm-clustergrid').getSelectionModel().selectRow( index );
			});

			/**
			*		If the size of this marker is larger then 1 then treat this as a cluster marker 
			*		and add a listener for dbl click to show the associated records at this location.
			**/
			if (size > 1) {
				GEvent.addListener(marker, "dblclick", function() {
					var index = Ext.getCmp('sm-clustergrid').getStore().indexOfId( marker.id );
					var cg = Ext.getCmp('sm-clustergrid');
					cg.getSelectionModel().selectRow( index );
					cg.fireEvent('rowdblclick', cg, index );
				});
			}

			GEvent.addListener(marker, "mouseover", function() {
	//			var index = Ext.getCmp('recordsPanel').getStore().indexOfId( marker.id );
	//			Ext.getCmp('recordsPanel').getSelectionModel().selectRow( index );
			});
	
			GEvent.addListener(marker, "mouseout", function() {
			});
	
			return marker;
		}
	
		/**
		*		Function
		*		Get Markers
		**/
	,	getMarkers: function( resetTimerange, supressTimeline ) {

			var bounds = this.gmap.getBounds();
			var zoom = this.gmap.getZoom();
			
			Ext.getCmp('sm-clustergrid').getSelectionModel().clearSelections();
//			this.gmap.removeOverlay( this.wiki );
//			this.gmap.removeOverlay( this.pano );
			this.gmap.clearOverlays();

			if (zoom > 11) {
//				this.gmap.addOverlay( this.wiki );
//				this.gmap.addOverlay( this.pano );
			}

			var timeline = Ext.getCmp('sm-timeline');

			if ( resetTimerange ) {
				timeline.resetRange();
			}
				
			this.mask.show();

			var l = Ext.getCmp('sm-layers');
	
			Ext.Ajax.request({
					url: 'api/silvermapper.php'
				,	scope: this
				,	success: function( r, a, b, c ) {
					
						var r = Ext.decode(r.responseText);
				 
						var tmpStore = Ext.getCmp('sm-clustergrid').getStore();						
						tmpStore.loadData( r );
	
						for (var i=0; i < r.markers.length; i++) {
							var point = new GLatLng(r.markers[i].DecimalLatitude, r.markers[i].DecimalLongitude);
//							var point = new GLatLng(r.markers[i].DecimalLatitudeEst, r.markers[i].DecimalLongitudeEst);
	
							var marker = this.createMarker( point, r.markers[i].Family, r.markers[i].id, r.markers[i].sz, r.markers[i].layer_id );
							
							this.gmap.addOverlay(marker);
							var tmpRec = tmpStore.getById( r.markers[i].id );
							tmpRec.marker = marker;
	
						}
	
						this.mask.hide();
				
					}
				, params: {
							task: 'recordsByRegion'
						,	sw_lat: bounds.getSouthWest().lat()
						,	sw_lng: bounds.getSouthWest().lng()
						,	ne_lat: bounds.getNorthEast().lat()
						,	ne_lng: bounds.getNorthEast().lng()
//						,	decimalPercision: decimalPercision
						,	startYear: timeline.getYearValue('start')
						,	endYear: timeline.getYearValue('end')
						,	zoom: zoom
						,	layers: Ext.encode( l.getChecked( 'layer_id' ) )
						,	filters: Ext.encode( Ext.getCmp('sm-filter').getForm().getValues() )
					}
			});

			if (!supressTimeline) {
				Ext.getCmp('sm-timeline').updateTimeline( 
						bounds.getSouthWest().lat()
					, bounds.getSouthWest().lng()
					,	bounds.getNorthEast().lat()
					,	bounds.getNorthEast().lng()
					,	Ext.encode( l.getChecked( 'layer_id' ) )
					,	Ext.encode( Ext.getCmp('sm-filter').getForm().getValues() )
				);
			}

		}		
	
	,	layerChange: function( node, checked ) {
			this.getMarkers( 1 );
		}

	,	switchLayer: function( checked, layer ) {
//			if(checked) this.gmap.addOverlay( this.wiki );
//			if(!checked) map.removeOverlay( layer );
	}

});