/**
 * Fonction anonyme de déclaration du template du block liste des vols ( Resultats )
 * Certaines fonctions ne sont visible que par les classes
 * concernées (déclarées ici).<br>
 * Ce mécanisme de fonction anonyme permet de reproduire un
 * système d'encapsulation digne d'un langage de programmation
 * évolué (comme le Java).<br>
 * <br>
 * Classes et éléments visibles seront stockés dans le
 * namespace 'ev.tpl'. 
 */
				
(function (){
	// On s'assure que le namespace ev.tpl existe
	if(!ev.tpl){ev.tpl={};}
	if(!ev.lang){throw new Error("Le namespace 'ev.lang' doit exister");}
	if(!ev.lang.mapper){throw new Error("L'objet 'ev.lang.mapper' doit exister");}
	  	
	var
	/**
	 * Raccourci vers le mapper de traductions.
	 */
	elm=ev.lang.mapper,
	/**
	 * Raccourci vers les traductions de la page de résultats.
	 */
	results=ev.lang.mev&&ev.lang.mev.results||{};	
		//Définition du 'domaine' ev.tpl.templatePropositions.
		ev.tpl.templatePropositions = [];
		// Tableau global contenant les proposition de lieux.
		var lieux = []; 																		
		// Nom des images utilisées pour les MARKER de la GOOGLEMAP
		var departMarkerImg = "http://img.easyvoyage.com/atom/formulaires/propositions/gMapMarkerA.png";
		var ArriveeMarkerImg = "http://img.easyvoyage.com/atom/formulaires/propositions/gMapMarkerB.png";
		//Id des champs du formualaire utilisé  dans le template proposition.
		var TIPE_DEPART  			= 'depart';
		var TIPE_ARRIVEE 			= 'arrivee'; 		
		var DEPART_INPUT_ID 		= 'lieuMEVDepartAller';
		var ARRIVEE_INPUT_ID 		= 'lieuMEVArriveeAller';
		var HIDDEN_DEPART_INPUT_ID 	= 'dataMEVDepartAller';
		var HIDDEN_ARRIVEE_INPUT_ID = 'dataMEVArriveeAller';		
		var FIRST_ELEMENT 			= 0; 	
		var RADIO_BT_ID_PREFIX 		= 'BT';		
		//Liberlle de la page
		var titlePropositionDepart  = elm.ifdef(results.titlePropositionDepart);
		var titlePropositionArrivee = elm.ifdef(results.titlePropositionArrivee);
		var LblCLOSE_BT				= elm.ifdef(results.lblCLOSE_BT);				
		//Tableau de correspondance afin de simplifier le template
		var titlePropositionArray = [];
		titlePropositionArray[TIPE_DEPART] = titlePropositionDepart;
		titlePropositionArray[TIPE_ARRIVEE] = titlePropositionArrivee;		
		var labelContent = '[¤$p,type¤] - ';			
		
		// Instance de l'overlay crée pour l'affichage des propistions..		
		var overthelay;															
		
		/**
		 * Affiche l'image de status de la requête.
		 * @param {Object} _fieldNode
		 */		
		ev.tpl.templatePropositions.displayStatusRequestImg = function(_fieldNode) {
			var imgNode=document.createElement('img');					
			imgNode.setAttribute('id',_fieldNode.id+'imgS');
			imgNode.setAttribute('src','http://img.easyvoyage.com/atom/formulaires/propositions/timing.gif');
			
			/** Affichage de l'image de status de la requête.**/					
			ev.dom.insertAfter(imgNode,_fieldNode);		
		};
		
		/**
		 * Supprime l'image du status de la requête.
		 * @param {Object} _fieldNode
		 */		
		ev.tpl.templatePropositions.closeStatusRequestImg = function(_fieldNode) {
			var n=ev.dom.element(_fieldNode.id+'imgS');
			if(n) {
				var pn = n.parentNode;
				pn.removeChild(n);				
			}
		};
		 
		/**
		 * Ferme le message d'erreur pour le champ donne.
		 * @param {Object} _fieldNode node du champs texte.
		 */
		ev.tpl.templatePropositions.closeErrorMSG = function(_fieldNode) {
			/** Set la classe du champs texte à ERROR.*/
			_fieldNode.className = '';
			/** Suppression de la node du message d'erreur.*/
			var n = ev.dom.element(_fieldNode.id+'PropError');
			if(n) {
				var np = n.parentNode;
				np.removeChild(n); 
			}	
		}; 
		 		 
		/**
		 * Affiche le message d'erreur pour le champs texte donné.
		 * @param {Object} _fieldNode node du champ texte
		 * @param {Object} _onclickOpenBt action se déroulant sur le click du bouton ouvrir le panel.
		 * @param {Object} _hasProposition boolean indiquant si des propositions sont disponibles pour le lieu.
		 */
		ev.tpl.templatePropositions.displayErrorMSG = function(_fieldNode,_onclickOpenBt,_hasProposition) {
			/** Set la classe du champs texte à ERROR.*/
			_fieldNode.className = 'inputError';
			/** construit les node du message d'erreur et on les insère dans le dom du formulaire.*/
			var divNode = ev.dom.element(_fieldNode.id+'PropError');
			if(!divNode) {
				divNode = document.createElement('div');
				divNode.setAttribute('id',_fieldNode.id+'PropError');			
				ev.dom.insertAfter(divNode,_fieldNode);	
			}						
			
			var tpErrorMSG=[];		
			if(_onclickOpenBt) {
				 tpErrorMSG = [
					{tag:'p',attr:{onclick:_onclickOpenBt},content:elm.ifdef(results.tpErrorMSG1)}				
				];				
			}else {
				 tpErrorMSG = [
					{tag:'p',content: [
							{content:elm.ifdef(results.tpErrorMSG2)}							
						]			
					}		
				];				
			}	
			ev.tpl.templateManager.initialize(divNode.id, tpErrorMSG, []).evTplPrint();		
		};
		/**
		 * 
		 */	
		var SHOW_MAP_BT_ID = 	'btshowmap';
		var SHOW_LISTE_BT_ID = 	'btshowliste';
				
		/**
		 *  Construit le template d'affichage et l'initialise avec la liste de vol donné en parametre.
		 *  Le contenu html est inséré dans le contener donné en parametre.			 
		 * @param {Object} vols liste des vols à afficher.
		 * @param {Object} ctn contener de la liste des vols
		 *  mSliders => Tableau des sliders utilisés pour le block de résultat.
		 *  mVols => pointer local vers la liste des vols à afficher.
		 */
		ev.tpl.templatePropositions.display = function(propositions,_fieldIdStr,onPropositionSelected,onclickCloseBt) {		  		  																							
			/** Variable interne contenant la liste des lieux. */
			lieux = [];			
			lieux = propositions;	
			/**Lecture du texte saisi par l'internaute*/
			var fieldValueStr = ev.dom.element(_fieldIdStr).value;
			/**Définition de l'id du panel de proposition.*/			
			var ctn =_fieldIdStr + 'Prop';
			/** Boolean d'état de la liste de lieux.*/																				
			var lieuxEmpty = true;													
			/**Mise à jour de lieuxEmpty  en fonction de la liste de lieu.lieuxEmpty.*/
			if(lieux.lieux && (lieux.lieux.length > 0) ) {				
				lieuxEmpty = false;		
			}else {// A revoir !!!! Si champs incorret et pas de proposition QUE FAIRE.......
				return;
			}									
			/** Initialisation du dom pour l'affichage des propositions.*/
			initOverLayNode();			
			
			/** Converstion des données de la liste des propositions en une liste compréhensible par la gmap.*/									
			var DepartlieuxGMap = [];
			if(lieux.lieux) {
				for(var it2 =0;it2<lieux.lieux.length;it2++) {
					var tempDepart = {"lat": lieux.lieux[it2].latitude , "lng": lieux.lieux[it2].longitude, "nameVille" : lieux.lieux[it2].nom, "idVille" : lieux.lieux[it2].id,"codeVille":lieux.lieux[it2].code, "champ": "departAllerData"};					
					DepartlieuxGMap.push(tempDepart);									
				}	
			}
			/** Double conversion des données de la liste des propositions.*/						   
			DepartmapPointsArray = normalizeJSONArray(DepartlieuxGMap);				
			/** Défininition du bouton de switch. */	
			var bt = new BT_TOGGLE_LISTE_MAP(ctn,false,DepartmapPointsArray,onPropositionSelected);			
			var bt2 = new BT_TOGGLE_LISTE_MAP(ctn,true,DepartmapPointsArray,onPropositionSelected);			
								
			/** template global du panel des propositions.*/																
			var tpGlobal = [
				{tag:'div',attr:{id:'ctHD'}, content:[
					{tag:'p',attr:{onclick:onclickCloseBt},content:LblCLOSE_BT},
					{tag:'h5',content:
						[
							{
									tag: 'span',
									content: fieldValueStr
							},
							{content:elm.ifdef(results.tpErrorCtHD1)},
								
							{tag:'br'},
							{content:elm.ifdef(results.tpErrorCtHD2)}
						]
					}
				]},							
					{tag:'div',attr:{id:'ctPropositionsMEV'},  content: [
						
						{tag:'span',attr:{id:SHOW_LISTE_BT_ID,onclick:bt2.onclick,className:'select', title:elm.ifdef(results.ctPropositionsMEV1)},content:''},
						{tag:'span',attr:{id:SHOW_MAP_BT_ID,onclick:bt.onclick,className:'', title:elm.ifdef(results.ctPropositionsMEV2)},content:''},
										
						{tag:'form', attr:{id:'choisirLieuxMEV',action:'#',method:'get'},content:
							[
								{tag:'fieldset',attr:{id:'choisirLieuAllerMEV',title:elm.ifdef(results.ctPropositionsMEV3)}}
							]			
						},															
						{tag:'div',attr:{id:'GoogleMap',className:'disabled'},  content:[
								{tag:'div',attr:{id:'map2'}},
								{tag:'div',attr:{id:'infoBox'}}	
							]
						},
						{tag:'div',attr:{className:'clear'}}
						]}																	
			];				
										
			/** Creation du container des propositions.*/
			if(!ev.dom.element(ctn)) {
				var propositionNode = document.createElement('div');
				propositionNode.setAttribute('id',ctn);						
				var parentNode = ev.dom.element('formMEV').parentNode;
				var formMEVNode = ev.dom.element('formMEV');					
				parentNode.insertBefore(propositionNode,formMEVNode);	
			}
						
			/** Génération du code HTML du container des propositions.*/				
			ev.tpl.templateManager.initialize(ctn, tpGlobal, propositions).evTplPrint();		
			ev.dom.element('choisirLieuxMEV').style.display = '';	
										
			/** Initialsiation du code HTML de la liste des propositions.*/									
			if(!lieuxEmpty) {				
				var tpPropositionsDepart   = initListeProposition(lieux,TIPE_DEPART,onPropositionSelected,ctn);
				ev.tpl.templateManager.initialize('choisirLieuAllerMEV', tpPropositionsDepart, lieux.lieux).evTplPrint();	
			}
																																																		
		};	
		
		/**
		 * 
		 * @param {Object} _ctn
		 */
		ev.tpl.templatePropositions.close = function(_fieldIdStr) {
			var ctn =_fieldIdStr + 'Prop';					
			removePropositionPanel(ctn);
		};
		/**
		 * Créer dynamiquement les nodes nécessaires à l'affichage du panel de proposition.
		 */
		function initOverLayNode() {
			/** Creation dynamique du contener des propositions + div de l'overlay, tout ça à la racine du body*/								
			var overlayNode = document.createElement('div');
			overlayNode.setAttribute('id','overlay');													
			var overlayctNode = document.createElement('div'); 
			overlayctNode.setAttribute('id','ctOverlay');																	
			var propositionNode = document.createElement('div');
			propositionNode.setAttribute('id','empty');														
			overlayctNode.appendChild(propositionNode);				
			document.getElementsByTagName('body')[0].appendChild(overlayNode);
			document.getElementsByTagName('body')[0].appendChild(overlayctNode);						
			ev.dom.element('empty').style.display = 'block';							
			overthelay = new overlay(ev.dom.element("overlay"), 
									ev.dom.element("empty"), 
									ev.dom.element("closeOverlay"), 
									ev.dom.element("closeOverlay")
								);			
			overthelay.showOverlay();
			
		}
			
											
		/**
		 * Méthode 'privée' permettant de simplifier la génération du html relatif à une ligne de proposition.
		 * @param {Object} listeLieux
		 * @param {Object} tipe
		 */
		function initListeProposition( listeLieux,tipe,onPropositionSelected,ctn) {				
			var bt = new EVT_BT_CLICK(onPropositionSelected,ctn);			
			var tpElement = [				
				{tag:'li',  content:[
					{tag:'input',attr:{onclick:bt.onclick,type:'checkbox',code:'[¤$p,code¤]',idLieu:'[¤$p,id¤]',tipe:tipe,name:tipe,id:RADIO_BT_ID_PREFIX+'[¤$p,code¤]',value:'[¤$p,nom¤]'}},												
					{tag:'label',attr:{htmlFor:RADIO_BT_ID_PREFIX+'[¤$p,code¤]'},  content:[
						{tag:'p',attr:{id:'ville'}, content:'[¤$p,nom¤] - '},
						{tag:'p',attr:{id:'pays'}, content:'[¤$p,pays¤]'}
					]}
				]}
			];									
			var tpListElement = ev.tpl.templateManager.createIteration(tpElement,listeLieux.lieux.length, '$p');					
			var tpfieldsetContenu = [
				{tag:'ul',content:tpListElement}
			];			
			return 	tpfieldsetContenu;	
		}
		
								
		/***
		 * Modifié la classe du radio bouton associé au marker.
		 * 	=> 	mouseover	 
		 * @param {Object} marker
		 */
		function EVT_ON_MOUSE_OVER_MARKER(marker) {					
			var radioBTId ='BT'+marker.codeVille; 
			var radioBT = ev.dom.element(radioBTId);			
			if(!radioBT) {
				return;
			}			
			if(radioBT.tipe == TIPE_DEPART) {									
				radioBT.className='mouseover';									
			}					
		}	
				
		
		/***
		 * supprime la classe du radio bouton associé au marker		 
		 * @param {Object} marker
		 */
		function EVT_ON_MOUSE_OUT_MARKER(marker) {					
			var radioBTId ='BT'+marker.codeVille; 
			var radioBT = ev.dom.element(radioBTId);			
			if(!radioBT) {
				return;
			}			
			if(radioBT.tipe == TIPE_DEPART) {									
				radioBT.className='';									
			}else if(radioBT.tipe== TIPE_ARRIVEE) {							
				radioBT.className='';		
			}				
		}						
																					
		/**
		 * Evenement appelé lorsque un radio bouton est sélectionné ( click directement dessus ou sur le label associé).
		 * Utilise l'attribut tipe afin de déterminéer si le radio bouton contient un lieu de départ ou d'arrivée.
		 */		
		function EVT_BT_CLICK(onPropositionSelected,_ctn) {												
			/**
			 * 
			 */
			this.onclick = function() {																											
				lieu=getLieuById(this.idLieu);																																										
				onPropositionSelected(lieu);
				removePropositionPanel(_ctn);													
			};																									
		}
		
		
		/***
		 * Evenement appelé lorsque un marker de la google map est cliqué.
		 *  => Met à jour les champs data arrivée et départ avec les info sur le lieu ( cf format autocomplétion).
		 * @param {Object} marker
		 */
		function EVT_ON_CLICK_MARKER(onPropositionSelected,_ctn) {
			/**
			 * 
			 * @param {Object} marker
			 */	
			this.onclick = function (marker) {														
				var radioBTId ='BT'+marker.codeVille; 
				var radioBT = ev.dom.element(radioBTId);			
				if(!radioBT) {
					return;
				}			
				radioBT.checked = true;												
				lieu = getLieuById(marker.idLieu);
				onPropositionSelected(lieu);																																		
				removePropositionPanel(_ctn);																											
			};	
		}
		
				
		/***
		 * 
		 * @param {Object} _ctn contenaire globale
		 * @param {Object} _status true si la liste est affichée par défaut.
		 * @param {Object} _status false si la googleMap est affichée par défaut. 					
		 */
		function BT_TOGGLE_LISTE_MAP (_ctn,_status,_departmapPointsArray,_onPropositionSelected) {					
			/** status contient true si la liste est affichée, false si la googlemap est affichée. */		
			var status = _status;
			var googleMapInitialized = false;		
			/**
			 * 
			 */
			this.onclick = function() {				
				if(status) {
					if(!googleMapInitialized && GBrowserIsCompatible()) {						
						/** Génération de la google map.*/										
						ev.dom.element("map2").className='';
						ev.dom.element('GoogleMap').className='';
						var map=new GMap2(ev.dom.element("map2"));					
						try {
							map.setCenter(new GLatLng(_departmapPointsArray[0].lat,_departmapPointsArray[0].lng),1);	
						}catch (e) {
							map.setCenter(new GLatLng(27.1373,31.5527),1);
						}			
						ev.mev.gmapMEV.init(_departmapPointsArray);														 							
						map.addControl(new GLargeMapControl());
						map.addControl(new GScaleControl());
						var baseIcon = new GIcon();					
		     			baseIcon.iconAnchor=new GPoint(9,32);
		     			baseIcon.iconSize = new GSize(19,32);								
						var imgMarker = new GIcon(baseIcon, ArriveeMarkerImg, null);
						var imgMarkerDepart = new GIcon(baseIcon, departMarkerImg, null);				
						var markers = new Array();				
						var markersDepart = new Array();
						var bt = new EVT_ON_CLICK_MARKER(_onPropositionSelected,_ctn);
						var GMAP_MARKER_EVTS = {'click':bt.onclick,'mouseover':EVT_ON_MOUSE_OVER_MARKER,'mouseout':EVT_ON_MOUSE_OUT_MARKER};							
						ev.mev.gmapMEV.transfertLatLngToElement(map,markers,_departmapPointsArray,imgMarkerDepart,GMAP_MARKER_EVTS);
						googleMapInitialized = true;															
					}										
					ev.dom.element('choisirLieuxMEV').className='disabled';
					ev.dom.element('GoogleMap').className='';
					ev.dom.element (SHOW_MAP_BT_ID).className='select';
					ev.dom.element (SHOW_LISTE_BT_ID).className='';
				}else {					
					ev.dom.element('choisirLieuxMEV').className='';
					ev.dom.element('GoogleMap').className='disabled';
					ev.dom.element (SHOW_MAP_BT_ID).className='';
					ev.dom.element (SHOW_LISTE_BT_ID).className='select';		
				}													
			};	
		}
					
		/**
		 *  HELPER- Permet de simplifier la suppression du contenu de la div de proposition.
		 *  => Passe à display none la div puis vide son contenu.
		 */		
		function removePropositionPanel(_ctn) {					
			/* Suppression de la div d'overlay*/
			var overlayNode = ev.dom.element('overlay');
			if(overlayNode) {
				var parentOverlayNode = overlayNode.parentNode;
				parentOverlayNode.removeChild(overlayNode);
				/* Suppression du contenu de l'overlay*/
				var ctOverlayNode = ev.dom.element('ctOverlay');
				var parentctOverlayNode = ctOverlayNode.parentNode;
				parentctOverlayNode.removeChild(ctOverlayNode);	
			}							
			var e = ev.dom.element(_ctn);
			if(e) {
				var parentNode = e.parentNode;
				parentNode.removeChild(e);
			} 													
		}	
					
		/**
		 * Parcours la liste des propositions, et renvoi un élément.
		 * @param {Object} id id du lieu à retourner.
		 */
		function getLieuById(id) {
			if(lieux && lieux.lieux ) {				
				for(var i=0;i<lieux.lieux.length;i++) {
					var lieu = lieux.lieux[i];
					if(lieu.id == id) {
						return lieu;
					}
				}
			}else {
				ev.log.warn('ev.tpl.templateProposition_ getLieuById(id)_id_undefined');
			}			
		}																															
}());