Ext.ns('gridEngine');

		gridEngine.dataRecord =  Ext.data.Record.create([
			{name: 'id'}
           ,{name: 'groupName'}           
		   ,{name: 'description'}            
		   ,{name: 'address'}           
		   ,{name: 'lastChange'}
           ,{name: 'lat', type: 'float'}
           ,{name: 'lng', type: 'float'}
           ,{name: 'zoom', type:'float'}
		   ,{name: 'photoPage'}
		   ,{name: 'infoPage'}
      ]);
	  
	
gridEngine.groupingGridStore = new Ext.data.GroupingStore({	

		proxy: new Ext.data.ScriptTagProxy({
				url: datafetch
		})

		,reader: new Ext.data.JsonReader({
				 root: 'data'
				,totalProperty: 'total'
				,id:'id'

				}, gridEngine.dataRecord)
		
        ,sortInfo:{field:'groupName', direction:'ASC'}
		,groupField: 'groupName'
});


gridEngine.groupingGridStore.on('load',function(){
		

 		// ssp_tap location
		ssp_tap = "http://www.iloveo.be/ssp_tap/getpreview.url.php"
		loadMarkerImages("small", ssp_tap, this.data.items);
		

});  //  gridstore.onLoad end

function loadMarkerImages(size, url, dataItems){

 		var html;
		var label;
		var n;
		var m;
		
	var icontype;
	var latlng;
	var markerFound = false;
	
	var gMarkerIcon = new GIcon(G_DEFAULT_ICON);
	var defaultIcon = new GIcon(G_DEFAULT_ICON);
	defaultIcon.image = "http://www.iloveo.be/images/no-image.png";	
	
	url = url+"?size="+size;

	var conn = new Ext.data.Connection();
	conn.request({
		
		    url: url,
		    method: 'POST',
		    params: {}, // its in the url.
		    success: function(responseObject) {
			   
				try {
					var jsonData = Ext.util.JSON.decode(responseObject.responseText);
				}
				catch (err) {
					Ext.MessageBox.alert('ERROR', 'Geen icoon afbeeldingen beschikbaar: ');
				}			
				
				var sspData = JSON.parse(responseObject.responseText);
	    						
		// loop trough markers on googlemap
		for(m=0; m<dataItems.length;m++){

			// init, notfound = default marker.
			markerFound=false;
			
			// no lat, lng, zoom, infopage = no item
			if(!parseFloat(dataItems[m].json.lat)) continue;
			if(!parseFloat(dataItems[m].json.lng)) continue;
			if(!parseFloat(dataItems[m].json.zoom)) continue;
			if(!dataItems[m].json.groupName) continue;
												
			// loop trough loaded markers, use marker if found, default if not
			for(n=0;n<sspData.albums.url.length;n++){
				
					if(dataItems[m].json.photoPage == sspData.albums.id[n]){ // marker found to have a image in ssp
						// update to new icon from ssp
															
				infoPage = '<a style="font-size:16px; color:#000000;"  href="http://www.iloveo.be/'+dataItems[m].json.infoPage+'" title="'+dataItems[m].json.description+'" target="_self">'+dataItems[m].json.description+'</a>';
				
				imageLink = '<a href="http://www.iloveo.be/'+dataItems[m].json.infoPage+'" title="'+dataItems[m].json.description+'" target="_self"><img style="float:left; margin:0 5px 0 0;" src="'+sspData.albums.url[n]+'" width="75" height="75" /></a>';

						latlng = new GLatLng(parseFloat(dataItems[m].json.lat), parseFloat(dataItems[m].json.lng));
						
					    html = infoPage+'<br><br>'+imageLink+'<p style="font-size:10px">'+dataItems[m].json.address+'<br></p>';
						
						label = dataItems[m].json.description;
						
						gMarkerIcon.iconSize = new GSize(36,36);
						gMarkerIcon.shadowSize = new GSize(48, 42); 
						
						gMarkerIcon.imageMap[0,0, 48,0, 48,48, 0,48]
						
						gMarkerIcon.image = sspData.albums.url[n];
						gMarker = createMarker(latlng,label,html,gMarkerIcon, dataItems[m].json.infoPage);	
						gMapContainer.getMap().addOverlay(gMarker);
						
						// store in grid for later reference.	
						dataItems[m].json.gMapData = gMarker;
						dataItems[m].json.infoFieldHtml = html;
						
						markerFound = true;
					//	console.log("created image marker");
						break; // marker found, break out of inner loop
					} 
			}
			
			
			if(!markerFound){  // marker not found to have a image in ssp -> get default
			
				infoPage = '<a style="font-size:16px; color:#000000;"  href="http://www.iloveo.be/'+dataItems[m].json.infoPage+'" title="'+dataItems[m].json.description+'" target="_self">'+dataItems[m].json.description+'</a>';
				
				imageLink = '<a href="http://www.iloveo.be/'+dataItems[m].json.infoPage+'" title="'+dataItems[m].json.description+'" target="_self"><img style="float:left; margin:0 5px 0 0;" src="http://www.iloveo.be/images/no-image.png" width="75" height="75" /></a>';
				
				latlng = new GLatLng(parseFloat(dataItems[m].json.lat), parseFloat(dataItems[m].json.lng));
				
			    html = infoPage+'<br><br>'+imageLink+'<p style="font-size:10px"><br>'+dataItems[m].json.address+'<br></p>';
				
				label = dataItems[m].json.description;
				gMarker = createMarker(latlng,label,html,defaultIcon, dataItems[m].json.infoPage);	
				gMapContainer.getMap().addOverlay(gMarker);
						
				// store in grid for later reference.	
				dataItems[m].json.gMapData = gMarker;	
				dataItems[m].json.infoFieldHtml = html;
			}
					
		}			
				
				// replace default makers with real markers where available.	
				
		    },
		     failure: function() {
			 	Ext.Msg.alert('Status', 'Geen connectie met ssp_tap afbeeldingen, of timeout, druk F5 en probeer opnieuw!', function(){});	
		     }
	});
	
}

  // A function to create the marker and set up the event window
 function createMarker(point,name,html,icontype, infoPage) {
 
        // === create a marker with the requested icon ===
        var marker = new GMarker(point, {title:name, icon:icontype});
						 
		GEvent.addListener(marker, "click", function() {
			
			getMarkerDescription(marker, html, infoPage);
		});	// marker click end
			
        return marker;
}

function getMarkerDescription(marker, html, infoPage){
	
			 var description = "";
		  
		  	// get first piece of page description
		  	url = "http://www.iloveo.be/"+infoPage+"?GmGetShortDescription=true";

			var conn = new Ext.data.Connection();
			conn.request({
				
				    url: url,
				    method: 'POST',
				    params: {}, // its in the url.
				    success: function(responseObject) {
					   
						try {
							description = responseObject.responseText;
						}
						catch (err) {
							Ext.MessageBox.alert('ERROR', 'Geen data beschikbaar ');
							description = "";
						}	
	
						description = '<p text-align:justify; font-size:13px; color:#000000;">'+description+' <a href="http://www.iloveo.be/'+infoPage+'" target="_self">lees meer...</a></p>';
						
						marker.openInfoWindowHtml('<div style="width:200px;">'+html+description+'</div>');
								 	
					},
				    failure: function() {
						description = "";
						marker.openInfoWindowHtml(html);
				    }
			}); // con.request end
}

gridEngine.groupingView = new Ext.grid.GroupingView({
				 forceFit:true
				,groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
				,startCollapsed: true
				,autoScroll:true
				,toggleGroup : function(group, expanded){
				
						this.constructor.prototype.toggleGroup.apply(this, arguments);

						// get all selected groups
						var nodeList = this.getGroups();

			
						// hide all markers (if valid)
						for(n=0;n<gridEngine.groupingGridStore.data.items.length; n++ ){
							
							if (gridEngine.groupingGridStore.data.items[n].json.gMapData) {
								gridEngine.groupingGridStore.data.items[n].json.gMapData.hide();
								gridEngine.groupingGridStore.data.items[n].json.gMapData.closeInfoWindow();
							}
						}
				
						for(n=0;n<nodeList.length;n++){

							// Group active?
							if(this.state[nodeList[n].id]){

								// show markers in this active group
								for(m=0;m<gridEngine.groupingGridStore.data.items.length; m++ ){
									if(gridEngine.groupingGridStore.data.items[m]._groupId == nodeList[n].id) gridEngine.groupingGridStore.data.items[m].json.gMapData.show();
								}
							}	
							
						}	

				}

});

gridEngine.Grid = Ext.extend(Ext.grid.GridPanel, {
 initComponent:function() {

		 Ext.apply(this, {
			store:gridEngine.groupingGridStore
			 //
			 ,stripeRows: true
			 ,border: false
			 ,columns: [
				 {id:'id', header: "Id", hidden:true, sortable: true, dataIndex: 'id'}
				,{header: 'Benaming', width: 210, sortable: true, dataIndex: 'description'}
				,{header: 'Update', width: 130, sortable: true, dataIndex: 'lastChange'}						
				,{header: 'Rubriek', sortable: true, hidden:true, dataIndex: 'groupName'}			
			]	
			
			,view: gridEngine.groupingView
			,sm: new Ext.grid.RowSelectionModel({
												
				 singleSelect:true
				,listeners: {
					
					rowselect: function(sm,row,record){	

						// hide all markers (if valid)
						var n;
						for(n=0;n<gridEngine.groupingGridStore.data.items.length; n++ ){
							if (gridEngine.groupingGridStore.data.items[n].json.gMapData) {
								gridEngine.groupingGridStore.data.items[n].json.gMapData.hide();
							}
						}
						
						// show selected marker
						for(n=0;n<gridEngine.groupingGridStore.data.items.length;n++){
						 if((gridEngine.groupingGridStore.data.items[n].json.id) == record.id){
							 gridEngine.groupingGridStore.data.items[n].json.gMapData.show();
							 break;
						 }
						}

						if (gridEngine.groupingGridStore.data.items[n].json.gMapData) {
							gMapContainer.getMap().panTo(new GLatLng(record.data.lat, record.data.lng));
							
							
							getMarkerDescription(record.json.gMapData, record.json.infoFieldHtml, record.json.infoPage)
						}

					}
				}
			})			
			 
		 }); // eo apply
		 

  
		 // call parent
		 gridEngine.Grid.superclass.initComponent.apply(this, arguments);
	 } // eo function initComponent
		  
	 ,onRender:function() {
		  
		 // call parent
		 gridEngine.Grid.superclass.onRender.apply(this, arguments);
	  
		 // load the store
		 this.store.load();	

	 }
		
 });

Ext.reg('gridEngine', gridEngine.Grid);