/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
 
/* 
<!> Include mt_functions.js
*/

Ext.onReady(function(){
	var pid = document.getElementById('mobi-mt-full-map-pid').innerHTML;
	var j = 0;
	var i = 0;
	
	var lang_close = 'Fermer la fênetre';
	var lang_param = 'Paramétrage';
	var lang_save = 'Enregistrer';
	var lang_submit = 'Chercher';
	var lang_info_submit_ok = 'Les informations ont été enregistrées.';
	var lang_server_unreachable = 'Le serveur n\'as pas pu être contacté.';
	var lang_back = 'Retour en arrière';
	var lang_obt_back = 'Précédent';
	var lang_obt_next = 'Suivant';
	
	var lang_c_directions = 'Calculer itinéraire';
	var lang_directions = 'Itinéraire';
	var lang_add = 'En revenir';	//<!> Ajouter...
	var lang_go = 'Y aller';
	var lang_reset = 'Revenir';
	
	var connUrl='/fileadmin/ressources_mob/mt_full_map/form_functions.php';
	var conn = new Ext.data.Connection();
	var responseObject = new Object();
	var goMode = false;
	
	var tempHeight = 0;
	var fieldCount = 0;
	var validFieldCount = 0;
	var validFieldCountBuffer = 0;
	
	conn.request({
		url: connUrl,
		method: 'POST',
		params:{
			actionMobi: 'getList',
			url: getUrl(),
			pid: pid
		},
		success: function(responseObject){	
			var json = Ext.util.JSON.decode(responseObject.responseText);
			/*
			if (parseFloat(json.full_map.center.latitude) == 0 && json.full_map.objects[0] !== undefined){
				json.full_map.center.latitude = parseFloat(json.full_map.objects[0].latitude);
			}
			if (parseFloat(json.full_map.center.longitude) == 0 && json.full_map.objects[0] !== undefined){
				json.full_map.center.longitude = parseFloat(json.full_map.objects[0].longitude);
			}
			*/
			if (json.full_map.objects[0] !== undefined){
				json.full_map.center.latitude = parseFloat(json.full_map.objects[0].latitude);
				json.full_map.center.longitude = parseFloat(json.full_map.objects[0].longitude);
			}

			var navPanel = new Ext.Panel({
				hideLabel: true,
				id: 'mobi-mt-full-map-nav-panel',
				html: '<div class="mobi-mt-full-map-nav-panel-elem mobi-nav-panel-elem-back" onclick="history.go(-1)">'+lang_back+'</div>'
			});
			
			navPanel.render('mobi-mt-full-map-nav');
			
					
			function goBtnFctMode1(){
				Ext.getCmp('mobi-mt-full-map-field-1').setValue(
					Ext.getCmp('mobi-mt-full-map-field-'+fieldCount).getValue()
				);
				Ext.getCmp('mobi-mt-full-map-gobtn').setText(lang_go);
				Ext.getCmp('mobi-mt-full-map-addbtn').show();
				Ext.getCmp('mobi-mt-full-map-west-panel-fields').remove(
					Ext.getCmp('mobi-mt-full-map-field-container-'+fieldCount)
				);
				fieldCount--;
				//validFieldCount--;
				if (validFieldCountBuffer > 0){
					validFieldCount = validFieldCountBuffer;
				}
				
				var i = 0;
				while (i < fieldCount){
					i++;
					if (Ext.getCmp('mobi-mt-full-map-field-container-'+i) !== undefined){
						Ext.getCmp('mobi-mt-full-map-field-container-'+i).show();
					}
				}
				getDirections();
				Ext.get('mobi-mt-full-map-directions').setHeight(tempHeight);
			}
			function goBtnFctMode2(){
				tempHeight = Ext.get('mobi-mt-full-map-directions').getHeight();
				fieldCount++;
				//validFieldCount++;
				validFieldCountBuffer = validFieldCount;
				validFieldCount = 2;
				
				createField(fieldCount, false);
				var i = 1;
				while (i < fieldCount-1){
					i++;
					if (Ext.getCmp('mobi-mt-full-map-field-container-'+i) !== undefined){
						Ext.getCmp('mobi-mt-full-map-field-container-'+i).hide();
					}
				}
				Ext.getCmp('mobi-mt-full-map-field-'+fieldCount).setValue(
					Ext.getCmp('mobi-mt-full-map-field-1').getValue()
				);
				Ext.getCmp('mobi-mt-full-map-field-1').setValue('');
				Ext.getCmp('mobi-mt-full-map-gobtn').setText(lang_reset);
				Ext.getCmp('mobi-mt-full-map-addbtn').hide();
			}
			
			function goBtnFct(){
				if (goMode){
					goMode = false;
					goBtnFctMode1();
				}
				else{
					goMode = true;
					goBtnFctMode2();
				}
			}
			
			function createField(i, withDelBtn){
				var panel = new Ext.Panel({
					id : 'mobi-mt-full-map-field-container-'+i,
					cls : 'mobi-mt-full-map-field-container',
					layout: 'table',
					layoutConfig: {columns:2},
					items:[{
						xtype: 'textfield',
						id: 'mobi-mt-full-map-field-'+i,
						cls: 'mobi-mt-full-map-field',
						width: 200
					},{
						xtype: 'button',
						id: 'mobi-mt-full-map-delbtn-'+i,
						text: '-',
						hidden: !withDelBtn,
						handler: function(){
							// console.log(validFieldCount);
							if (validFieldCount == 3){
								var index = this.getId().substr(this.getId().lastIndexOf('-')+1);
								
								Ext.get('mobi-mt-full-map-directions').setHeight(
									Ext.get('mobi-mt-full-map-directions').getHeight() + 
									Ext.getCmp('mobi-mt-full-map-field-container-'+index).getHeight()
								);
								
								Ext.getCmp('mobi-mt-full-map-west-panel-fields').remove(
									Ext.getCmp('mobi-mt-full-map-field-container-'+index)
								);
								validFieldCount--;
								
								var i = 0;
								var from = 0;
								var to = 0;
								var found = false;
								while (!found && i < fieldCount){
									i++;
									if (Ext.getCmp('mobi-mt-full-map-field-container-'+i) !== undefined){
										if (from == 0){
											from = i;
										}
										else{
											to = i;
											found = true;
										}
									}
								}
								// console.log('from: '+from);
								// console.log('to: '+to);
								
								var switchBtn =new Ext.Button({
									id: 'mobi-mt-full-map-switchbtn',
									text: '<->',
									handler: function(){	
										if (json.full_map.objects.length == 0){
											var temp = '';
											var i = 0;
											while (i < fieldCount){
												i++;
												// console.log('fieldCount:'+fieldCount);
												if (Ext.getCmp('mobi-mt-full-map-field-container-'+i) !== undefined){
													var j = fieldCount;
													var found = false;
													while (j > 0 &&!found){
														if (Ext.getCmp('mobi-mt-full-map-field-'+j) !== undefined){
															found = true;
															temp = Ext.getCmp('mobi-mt-full-map-field-'+j).getValue();
														}
														j--;
													}
												}
											}
											goBtnFct();
											Ext.getCmp('mobi-mt-full-map-field-1').setValue(temp);
										}
										else{
											var t = Ext.getCmp('mobi-mt-full-map-field-'+from).getValue();
											Ext.getCmp('mobi-mt-full-map-field-'+from).setValue(Ext.getCmp('mobi-mt-full-map-field-'+to).getValue());
											Ext.getCmp('mobi-mt-full-map-field-'+to).setValue(t);
										}
										getDirections();
									}
								});		
								Ext.getCmp('mobi-mt-full-map-west-panel-fields').add(switchBtn);
				
								Ext.getCmp('mobi-mt-full-map-viewport').render();
								getDirections();
								
								// console.log('validFieldCount:'+validFieldCount);
							}
							else if (validFieldCount > 3){
								var index = this.getId().substr(this.getId().lastIndexOf('-')+1);
								
								Ext.get('mobi-mt-full-map-directions').setHeight(
									Ext.get('mobi-mt-full-map-directions').getHeight() + 
									Ext.getCmp('mobi-mt-full-map-field-container-'+index).getHeight()
								);
								
								Ext.getCmp('mobi-mt-full-map-west-panel-fields').remove(
									Ext.getCmp('mobi-mt-full-map-field-container-'+index)
								);
								validFieldCount--;
								getDirections();

								// console.log('validFieldCount:'+validFieldCount);
							}
						}
					}]
				});
				if (validFieldCount == 2 && !goMode){
				// if (validFieldCount == 2){
					var switchBtn = new Ext.Button({
						id: 'mobi-mt-full-map-switchbtn',
						text: '<->',
						handler: function(){
							if (json.full_map.objects.length == 0){
								var temp = '';
								var i = 0;
								while (i < fieldCount){
									i++;
									if (Ext.getCmp('mobi-mt-full-map-field-container-'+i) !== undefined){
										temp = Ext.getCmp('mobi-mt-full-map-field-'+fieldCount).getValue();
									}
								}
								goBtnFct();
								Ext.getCmp('mobi-mt-full-map-field-1').setValue(temp);
							}
							else{
								var t = Ext.getCmp('mobi-mt-full-map-field-1').getValue();
								Ext.getCmp('mobi-mt-full-map-field-1').setValue(Ext.getCmp('mobi-mt-full-map-field-2').getValue());
								Ext.getCmp('mobi-mt-full-map-field-2').setValue(t);
							}
							getDirections();
						}
					});		
					Ext.getCmp('mobi-mt-full-map-west-panel-fields').add(switchBtn);
					
					
					
				}
				else if (validFieldCount > 2){
					Ext.getCmp('mobi-mt-full-map-west-panel-fields').remove(Ext.getCmp('mobi-mt-full-map-switchbtn'));
				}
				Ext.getCmp('mobi-mt-full-map-west-panel-fields').add(panel);
				Ext.getCmp('mobi-mt-full-map-viewport').render();
				
				Ext.get('mobi-mt-full-map-directions').setHeight(
					Ext.get('mobi-mt-full-map-directions').getHeight() - 
					panel.getHeight()
				);
				
				// console.log('fieldCount:'+fieldCount);
				// console.log('validFieldCount:'+validFieldCount);
			}
			
			
			Ext.MobiViewport = Ext.extend(Ext.Container, {
				initComponent : function() {
					Ext.Viewport.superclass.initComponent.call(this);
					document.getElementsByTagName('html')[0].className += 'mobi-x-viewport';
					this.el = 'mobi-mt-full-map';
					this.el.setHeight = Ext.emptyFn;
					this.el.setWidth = Ext.emptyFn;
					this.el.setSize = Ext.emptyFn;
					//this.el.dom.scroll = 'no';
					this.allowDomMove = false;
					this.autoWidth = true;
					this.autoHeight = true;
					Ext.EventManager.onWindowResize(this.fireResize, this);
					this.renderTo = this.el;
				},

				fireResize : function(w, h){
					this.fireEvent('resize', this, w, h, w, h);
				}
			});
			
			new Ext.MobiViewport({
				id:'mobi-mt-full-map-viewport',
				title: 'GMap Panel',
				layout: 'border',
				items: [{
					xtype: 'gmappanel',
					id:'mobi-mt-full-map-center-panel',
					contentEl: 'mobi-mt-full-map-center',
					region: 'center',
					zoomLevel: parseFloat(json.full_map.params.zoom),
					gmapType: 'map',
					addControl: [
						new GLargeMapControl(),
						new GMapTypeControl(),
						new GScaleControl()
					],
					setCenter: {
						lat: parseFloat(json.full_map.center.latitude),
						'long': parseFloat(json.full_map.center.longitude)
					}/*,
					markers: [{
						lat: parseFloat(json.full_map.center.latitude),
						'long': parseFloat(json.full_map.center.longitude),
						marker: {title: 'Boston Museum of Fine Arts'}
					}],*/
					/*
					tbar: [{
						text: 'Fenway Park StreetView',
						handler: function(){
							panwin.show();
						}
					},{
						text: 'Fenway Park Map Window',
						handler: function(){
							mapwin.show();
						}
					}]*/
				},{
					region:'west',
					id:'mobi-mt-full-map-west-panel',
					contentEl: 'mobi-mt-full-map-west',
					title: ' ',
					split:true,
					width: 230,
					minSize: 175,
					maxSize: 400,
					collapsible: true,
					margins:'0 0 0 5',
					layout: 'table',
					layoutConfig: {columns:1},			
					items:[{
						xtype: 'panel',
						id: 'mobi-mt-full-map-west-panel-fields'
					},{
						xtype: 'panel',
						id: 'mobi-mt-full-map-directions-submit',
						items:[{
							xtype: 'button',
							id: 'mobi-mt-full-map-directionsbtn',
							text: lang_c_directions,
							handler: function(){
								getDirections();
							}
						},{
							xtype: 'button',
							id: 'mobi-mt-full-map-addbtn',
							text: lang_add,
							handler: function(){
								fieldCount++;
								validFieldCount++;
								if (validFieldCount < 3){
									createField(fieldCount, false);
								}
								else{
									createField(fieldCount, true);
								}
							}
						},{
							xtype: 'button',
							id: 'mobi-mt-full-map-gobtn',
							text: lang_go,
							handler: function(){
								goBtnFct();
							}
						}]
					},{
						xtype: 'panel',
						id: 'mobi-mt-full-map-directions-panel',
						title: lang_directions,
						html: '<div id="mobi-mt-full-map-directions"></div>'
					}]
				}]
			});

			Ext.get('mobi-mt-full-map-directions').setHeight(
				Ext.getCmp('mobi-mt-full-map-center-panel').getHeight() - 
				107
			);
			
			function getDirections(){
				Ext.getCmp('mobi-mt-full-map-center-panel').clearDirections();
				//Ext.getCmp('mobi-mt-full-map-center-panel').initDirections('mobi-mt-full-map-directions');
				var from = new Object();
				var to = new Array();
				if (!goMode){
					if (json.full_map.objects.length == 0){
						if (fieldCount == 2){
							from = new GLatLng(json.full_map.center.latitude, json.full_map.center.longitude);
							to.push(Ext.getCmp('mobi-mt-full-map-field-1').getValue());
						}
						else{
							from = new GLatLng(json.full_map.center.latitude, json.full_map.center.longitude);
							// to.push(new GLatLng(json.full_map.center.latitude, json.full_map.center.longitude));
							var i = 1;
							while (i < fieldCount){
								i++
								if (Ext.getCmp('mobi-mt-full-map-field-container-'+i) !== undefined){
									var t = Ext.getCmp('mobi-mt-full-map-field-'+i).getValue();
									if (t.length > 0){
										to.push(t);
									};
								}
							}
						}
					}
					else{
						var i = 0;
						var first = true;	
						while (i < fieldCount){
							i++;
							if (Ext.getCmp('mobi-mt-full-map-field-container-'+i) !== undefined){
								if (first){
									if (json.full_map.objects[i-1] !== undefined){
										from = new GLatLng(json.full_map.objects[i-1].latitude, json.full_map.objects[i-1].longitude); 
									}
									else{
										from = Ext.getCmp('mobi-mt-full-map-field-'+i).getValue()
									}
									first = false;
								}
								else{
									if (json.full_map.objects[i-1] !== undefined){
										to.push(new GLatLng(json.full_map.objects[i-1].latitude, json.full_map.objects[i-1].longitude));
									}
									else{
										var t = Ext.getCmp('mobi-mt-full-map-field-'+i).getValue();
										if (t.length > 0){
											to.push(t);
										}
									}
								}
							}
						}
					}
				}
				else{
					from = Ext.getCmp('mobi-mt-full-map-field-1').getValue();
					if (json.full_map.objects.length == 0){
						to.push(new GLatLng(json.full_map.center.latitude, json.full_map.center.longitude));
					}
					else{
						to.push(new GLatLng(json.full_map.objects[0].latitude, json.full_map.objects[0].longitude));
					}
				}
				Ext.getCmp('mobi-mt-full-map-center-panel').getDirections(from, to);
			}
			Ext.getCmp('mobi-mt-full-map-center-panel').initDirections('mobi-mt-full-map-directions');
			
			var toArr = new Array();
			var i = 1;
			while (i < json.full_map.objects.length){
				toArr.push(new GLatLng(json.full_map.objects[i].latitude, json.full_map.objects[i].longitude));
				i++;
			}
			if (json.full_map.objects[0] !== undefined){
				Ext.getCmp('mobi-mt-full-map-center-panel').getDirections(
					new GLatLng(json.full_map.objects[0].latitude, json.full_map.objects[0].longitude), 
					toArr
				);
			}
			
			
			var markers = new Array();
			if (json.full_map.objects.length == 0){
				validFieldCount++;
				createField(1, false);
				fieldCount++;
				
				if (json.full_map.center.address == null){
					json.full_map.center.address = '';
				}
				if (json.full_map.center.postalCode == null){
					json.full_map.center.postalCode = '';
				}
				if (json.full_map.center.city == null){
					json.full_map.center.city = '';
				}
				var newValue = json.full_map.center.address+', '+
					json.full_map.center.postalCode+' '+
					json.full_map.center.city+', '+
					'France';
				newValue = newValue.replace(/^[,\s]+|[,\s]+$/g, '').replace(/(^,)|(,$)/g, "");
				var newValue2 = json.full_map.center.title.replace('&#039;','\'');
				Ext.getCmp('mobi-mt-full-map-field-1').setRawValue(newValue2);
				
					
				markers.push({
					lat: json.full_map.center.latitude,
					'long': json.full_map.center.longitude,
					marker: {
						title: json.full_map.center.title,
						infowindowhtml: '<div class=\"mt_full_map-infobubble\">'+
											'<h3>'+json.full_map.center.title+'</h3>'+
											'<p style="height:40px;">'+newValue+'</p>'+
											'<p><img height="96" width="126" src="'+'http://'+window.location.hostname+'/'+json.full_map.center.image_url+
												'" alt="'+json.full_map.center.image_title+'" /></p>'+
										'</div>',
						icon: new GIcon({
									image: '/'+json.full_map.params.icon,
									iconSize: new GSize(16,16),
									iconAnchor: new GPoint(16,11),
									infoWindowAnchor: new GPoint(16,2)
								})
					}
				});
			}
			else{
				var i = 0;
				while (i < json.full_map.objects.length){
					i++;
					
					validFieldCount++;
					createField(i, false);
					fieldCount++;
					
					if (json.full_map.objects[i-1].address == null){
						json.full_map.objects[i-1].address = '';
					}
					if (json.full_map.objects[i-1].postalCode == null){
						json.full_map.objects[i-1].postalCode = '';
					}
					if (json.full_map.objects[i-1].city == null){
						json.full_map.objects[i-1].city = '';
					}
					var newValue = json.full_map.objects[i-1].address+', '+
						json.full_map.objects[i-1].postalCode+' '+
						json.full_map.objects[i-1].city+', '+
						'France';
					newValue = newValue.replace(/^[,\s]+|[,\s]+$/g, '').replace(/(^,)|(,$)/g, "");
					//Ext.getCmp('mobi-mt-full-map-field-'+i).setValue(newValue);
					
					var newValue2 = json.full_map.objects[i-1].title.replace('&#039;','\'');
					Ext.getCmp('mobi-mt-full-map-field-'+i).setRawValue(newValue2);
					
					
					markers.push({
						lat: json.full_map.objects[i-1].latitude,
						'long': json.full_map.objects[i-1].longitude,
						marker: {
							title: json.full_map.objects[i-1].title,
							infowindowhtml: '<div class=\"mt_full_map-infobubble\">'+
												'<h3>'+json.full_map.objects[i-1].title+'</h3>'+
												'<p style="height:40px;">'+newValue+'</p>'+
												'<p><img height="96" width="126" src="'+'http://'+window.location.hostname+'/'+json.full_map.objects[i-1].image_url+
													'" alt="'+json.full_map.objects[i-1].image_title+'" /></p>'+
												'<p>&nbsp;</p>'+
											'</div>',
							icon: new GIcon({
										image: '/'+json.full_map.params.icon,
										iconSize: new GSize(16,16),
										iconAnchor: new GPoint(16,11),
										infoWindowAnchor: new GPoint(16,2)
									})
						}
					});
				}
				if (json.full_map.objects.length == 1){
					validFieldCount++;
					createField(i, false);
					fieldCount++;
					
					i++;
				}
			}
			Ext.getCmp('mobi-mt-full-map-center-panel').addMarkers(markers);
			Ext.getCmp('mobi-mt-full-map-center-panel').fixCenter();
			
			/*################################ Tracing ################################*/
			if (json.full_map.center.kml.length > 0){
				Ext.getCmp('mobi-mt-full-map-center-panel').addTracing(json.full_map.center.kml);
			}
			var i = 0;
			var trMarkers = new Array();
			while (i < json.full_map.tracing.length){
				i++;
				if (json.full_map.tracing[i-1].address == null){
					json.full_map.tracing[i-1].address = '';
				}
				if (json.full_map.tracing[i-1].postalCode == null){
					json.full_map.tracing[i-1].postalCode = '';
				}
				if (json.full_map.tracing[i-1].city == null){
					json.full_map.tracing[i-1].city = '';
				}
				var newValue = json.full_map.tracing[i-1].address+', '+
					json.full_map.tracing[i-1].postalCode+' '+
					json.full_map.tracing[i-1].city+', '+
					'France';
				newValue = newValue.replace(/^[,\s]+|[,\s]+$/g, '').replace(/(^,)|(,$)/g, "");
				//Ext.getCmp('mobi-mt-full-map-field-'+i).setValue(newValue);
				
				var newValue2 = json.full_map.tracing[i-1].title.replace('&#039;','\'');
				Ext.getCmp('mobi-mt-full-map-field-'+i).setRawValue(newValue2);
				fieldCount++;
				validFieldCount++;
				
				trMarkers.push({
					lat: json.full_map.tracing[i-1].latitude,
					'long': json.full_map.tracing[i-1].longitude,
					marker: {
						title: json.full_map.tracing[i-1].title,
						infowindowhtml: '<div class=\"mt_full_map-infobubble\">'+
											'<p><h3>'+json.full_map.tracing[i-1].title+'</h3></p>'+
											'<p style="height:40px;">'+newValue+'</p>'+
											'<p><img height="96" width="126" src="'+'http://'+window.location.hostname+'/'+json.full_map.tracing[i-1].image_url+
												'" alt="'+json.full_map.tracing[i-1].image_title+'" /></p>'+
											'<p>&nbsp;</p>'+
										'</div>',
						icon: new GIcon({
									image: '/'+json.full_map.params.icon,
									iconSize: new GSize(16,16),
									iconAnchor: new GPoint(16,11),
									infoWindowAnchor: new GPoint(16,2)
								})
					}
				});
			}
			Ext.getCmp('mobi-mt-full-map-center-panel').addMarkers(trMarkers);
			var gpsConn = 'http://'+window.location.hostname+connUrl+'?actionMobi=getObjectGPSfiles&oid='+json.full_map.center.oid;
			Ext.getCmp('mobi-mt-full-map-center-panel').addGeoXML(gpsConn);
				
			goBtnFctMode2();
		},
		failure:function(){ 
			Ext.Msg.alert('ERR', lang_server_unreachable);
		}
	});
});