Ext.onReady(function(){

/**
 * on initialise nos filtres 
 * ATTENTION lees noms doivent être les même que id des hiddens dans le tpl
 */	
var arrFiltre = ["idmarque","idmodele","idcategorie","idenergie","iddepartement","climatisation","prix","pro"];
var comboReference;

	/*****************************************************/
	/******************* comboFiltre *********************/
	/*****************************************************/
	
	function createReference(marque){
//		json = JSON.parse(result.responseText);
		tous = [['0','- REFERENCE -']];
		
		marquet = tous.concat(marque);
		
		var store = new Ext.data.SimpleStore({
			fields : ['id','label'],
			data : marquet
		});
			
			
		comboReference = new Ext.form.ComboBox({
    		store: store,
    		displayField:'label',
   			typeAhead: true,
    		mode: 'local',
    		triggerAction: 'all',
    		emptyText:'- REFERENCE -',
    		selectOnFocus:true,
    		renderTo:'comboReference'
		});
		
//		  var combo = new Ext.form.ComboBox({
//        store: store,
//        displayField:'state',
//        typeAhead: true,
//        mode: 'local',
//        triggerAction: 'all',
//        emptyText:'Select a state...',
//        selectOnFocus:true,
//        applyTo: 'local-states'
//    });
			
//		comboReference.render("comboReference");
		
//		comboReference.select(10);
		comboReference.on('select',filtreMarque);
	}


	var filtreMarque = function(e , record , index){	
		
		param = new Array();
				
		value = record.data["id"];
		hidden = Ext.get("idmarque");
		
		ar = new Object();
//		ar.start = 0;
//		ar.limit = 13;
		
		if(value != 0){
			hidden.dom.value = value;
			param["idmarque"] = value;
			ar.idmarque= value;
		}else{
			hidden.dom.value = "";
		}
		
//		store = grid.getDataSource();
		store = grid.getStore();
		/**
		 * on modifie le baseparams de notre datastore 
		 */
		store.baseParams = ar;
		store.load({
			params:{start:0,limit:13},
			callback:myalert
			});
//		Ext.Ajax.request({
////			url : '/MoteurRecherche/index/updateMarque/' ,
//			url : '/MoteurRecherche/json/' ,
////			params : {idmarque : value},
//			params : param,
//			success: function( result, request ) {
//				content = JSON.parse(result.responseText);
//				/**
//				 * le tableau en lui même 
//				 */
////				tableau  = content.tableau 
//				ds = grid.getDataSource();
//				ds.loadData(content);
//				/*
//				 * les modéles
//				 */
////				createModele(content.modeles); 
//				/**
//				 * on trouve tous les fils de tbody
//				 */		
// 				grid.getView().refresh();
//
//			 },
//			
//			failure: function ( result, request) { 
//				Ext.MessageBox.alert('Failed',"une erreur est survenue"); 
//			} 
//		});
		
		/**
		 * on remet  en forme nos filtres par rapport à la reference.
		 * dans la premiére version
		 * referenceFiltre vient du fichier marque_modele_json.js
		 * 
		 * sinon on réaffiche l'annonce de départ
		 * on réinitialise les modeles.
		 */
		hmodele = Ext.get("idmodele");
		hmodele.dom.value = "";
		  
		if(value != 0 ){ 
			filtre = referenceFiltre[value];
			createModele(filtre.modele);
		}else{
			str = "Rappel des crit&egrave;res<br/>Aucun crit&egrave;res selectionn&eacute;s !! ";
			var msg = Ext.get('annonce_critere');
			msg.update(str);
		}
	}
	
	var filtreModele = function(e){
		spanid = e.target.id;
		pos = spanid.indexOf("gen_modele_");
		if(pos){
			alert("je le fait");
		}
	}
	
	var createModele = function(modele){
		/**
		 * on r&eacute;initialise les mod&eacute;les 
		 */
//		hidden = Ext.get("idmodele");
//		hidden.dom.value = ""; 
		/**
		 * on cr&eacute;e les liens 
		 */ 
		str = '<a href="#" onclick="domodele(0)">Tous</a>&nbsp;';
		for(var i = 0; i < modele .length ; i++){
//			str += " <span id='gen_modele_"+modele[i][0]+"'>"+modele[i][1]+"</span>";
//			par = "modele[i][0];
			if(modele[i][1].toLowerCase() != "autre")
			str += '<a href="#resultats" onclick="domodele('+modele[i][0]+')">'+modele[i][1]+'</a> ';
		}
		var msg = Ext.get('annonce_critere');
//		msg.update(str,false,addclick);
		msg.update(str);
	}
	
	
	var addclick =  function(e){
		Ext.select("span").on("click",domodele);
	}

var initBandeau = function(myparam){
	/**
	 * si on a la reference on doit mettre les filtres 
	 */
	if(myparam["idmarque"]){
	/**
	 * dans la premiere version
	 * referenceFiltre vient du fichier marque_modele_json.js 
	 */
	filtre = referenceFiltre[myparam["idmarque"]];
	/*
	 * on met a jour notre reference
	 */
	comboReference.setValue(filtre.label);
	/**
	 * on met a jour les filtres 
	 */ 
	createModele(filtre.modele);
	} 
}	



/********************************************************************************/
/* pour initailiser le moteur de recherche il faut executer ces quelques lignes */
/********************************************************************************/	
 			
filtre = initFiltre(arrFiltre);
headerModel = createHeaderModel(conf);				
colModel = createColModel(conf); 
createGrid(headerModel,colModel,filtre,'/Panier/index/getJson/');

/**
 * initialisation du bandeau de filtre
 */
//createReference(marque);			
//initBandeau(filtre);



//Ext.get('bandeau').on('click',discover);
});

/****************************************************************/
/* 			les appelles classique de javascript				*/
/****************************************************************/
var reset = function(e){
		/**
		 * on commence par effacer tout les valeurs dans les hiddens
		 */
		for(var i=0; i < arrFiltre.length ;i++ ){
			champ = Ext.get(arrFiltre[i]);
			if(champ.value){
				champ.value = "";				
			}
		}
		/**
		 * on efface le tableau de filtres
		 */
		 filtre = new Array();
		/**
		 * graphiquement on fait le m&eacute;nage
		 */
		 // d'abord le formulaire
		 fornform.reset();
		 //ensuite les marques
		 comboReference.reset();
		 //enfin les mod&eacute;les
		 Ext.get("rappel_critere").update("<p>Rappel des crit&eacute;</p><p>Aucun crit&egrave;re s&eacute;lectionn&eacute; !</p>");
	}
/**
	 * creation du bandeau de recherche
	 */
	var discover_ex = function(e){
		var hidden = Ext.get("bandeau");
		action = hidden.dom.value;
		var msg = Ext.get('details_bandeau');
		
		if(action == ""){
			msg.load({
				url: "/MoteurRecherche/index/beandeaucritere/",
				text: "Updating...",
				callback : comboFiltre
			});		
			msg.show();
			hidden.dom.value = "close";
		}else{
			msg.update("");
			hidden.value = "";
		}
	} 
	
	
	var discover = function(e){
		
		var band = Ext.get("bandeau");
		var val = band.dom.value;
		
		if(val == "close" || val == ""){
		
		Ext.Ajax.request({
			url : '/MoteurRecherche/json/bandeau/' ,
			success: function( result, request ) {
				
				json = JSON.parse(result.responseText);
	 			createComboFiltre(json);
				band.dom.value = "open";
			},
			
			failure: function ( result, request) { 
				Ext.MessageBox.alert('Failed',"une erreur est survenue"); 
			},
			
			callback : function(result, request){
			} 
		});
	
		}else{
			
			Ext.get("details_bandeau").update("");
			band.dom.value = "close";
		}
		
	}
	
	
	var createComboFiltre = function(json){
	
	categories = json.categories;
	energies = json.energies;
	departements = json.departements;
	
	ct = [["0","Tous"]];
	
	catgories = ct.concat(categories);
	energies = ct.concat(energies);
	departements = ct.concat(departements);
	
	
	var store1 = new Ext.data.SimpleStore({
		data : categories,
		fields : ['id','label']
	});
	
	var storeClim = new Ext.data.SimpleStore({
		data : [["-1","peu importe"],["1","oui"],["0","non"]],
		fields : ['id','label']
	});
	
	var store2 = new Ext.data.SimpleStore({
		data : energies,
		fields : ['id','label']
	});
	
	var store3 = new Ext.data.SimpleStore({
		data : departements,
		fields : ['id','label']
	});
	
	
	var storePrix = new Ext.data.SimpleStore({
		data : [
		["0","peu importe"],
		["2000"," < 2000"],
		["5000"," < 5000"],
		["20000"," < 20000"],
		["30000"," < 30000"],
		["50000"," < 50000"]
		],
		fields : ['id','label']
	});
	
	var cat = new Ext.form.ComboBox({
					fieldLabel: 'type vehicule',
					name : 'idcategorie',
    				store: store1,
    				displayField:'label',
    				typeAhead: true,
    				mode: 'local',
    				triggerAction: 'all',
    				emptyText:'- type vehicule -',
    				selectOnFocus:true
				});
	var clim = new Ext.form.ComboBox({
					fieldLabel: 'climatisation',
					name : 'climatisation',
    				store: storeClim,
    				displayField:'label',
    				typeAhead: true,
    				mode: 'local',
    				triggerAction: 'all',
    				emptyText:'- climatisation -',
    				selectOnFocus:true
				});
	var energie = new Ext.form.ComboBox({
					fieldLabel: 'moteur',
					name : 'idenergie',
    				store: store2,
    				displayField:'label',
    				typeAhead: true,
    				mode: 'local',
    				triggerAction: 'all',
    				emptyText:'- moteur -',
    				selectOnFocus:true
				});
	var ch1 = new Ext.form.Checkbox({
					fieldLabel: 'Afficher uniquement les annonces de professionnels',
            		boxLabel:'Afficher uniquement les annonces de professionnels',
            		name:'pro',
            		width:'auto'
        		});
	var ch2 = new Ext.form.Checkbox({
					fieldLabel: 'Ignorer les annonces sans indication de prix',
            		boxLabel:'Ignorer les annonces sans indication de prix',
            		name:'sansprix',
            		width:'auto'
        		});
    var departement =  new Ext.form.ComboBox({
					fieldLabel: 'Zone',	
    				store: store3,
    				name : 'iddepartement',
    				displayField:'label',
    				typeAhead: true,
    				mode: 'local',
    				triggerAction: 'all',
    				emptyText:'- departement -',
    				selectOnFocus:true
				});
				
	var prix = new Ext.form.ComboBox({
					fieldLabel: 'prix',
					name : 'prix',	
    				store: storePrix,
    				displayField:'label',
    				typeAhead: true,
    				mode: 'local',
    				triggerAction: 'all',
    				emptyText:'- prix -',
    				selectOnFocus:true
				});			
     
        		
	cat.on('select',doActionFilter);
	clim.on('select',doActionFilter);
	energie.on('select',doActionFilter);
	departement.on('select',doActionFilter);
	prix.on('select',doActionFilter);
	
	ch1.on('change',doActionFilter);
	ch2.on('change',doActionFilter);
	
	var top = new Ext.FormPanel({
        labelAlign: 'top',
//        frame:true,
//        title: 'Multi Column, Nested Layouts and Anchoring',
        bodyStyle:'padding:5px 5px 0',
        width: 400,
        items: [{
            layout:'column',
            items:[{
                columnWidth:.5,
                layout: 'form',
                items: [
                	cat,
				 	clim,
					energie,
					ch1,
        			ch2
			]
            },{
                columnWidth:.5,
                layout: 'form',
                items: [departement,prix]
            }]
        }],

        buttons: [{
            text: 'reset'
        }]
    });

    top.render('details_bandeau');
	
	}
	
//	var createComboFiltre = function(json){
//	
//	categories = json.categories;
//	energies = json.energies;
//	departements = json.departements;
//	
//	/**
//	 * pour les categories
//	 */
//	var store1 = new Ext.data.SimpleStore({
//		data : categories,
//		fields : ['id','label']
//	});
//
//	var comboCat = new Ext.form.ComboBox({
//	fieldLabel: 'type vehicule',
//	name : 'idcategorie',
//    store: store1,
//    displayField:'label',
//    typeAhead: true,
//    mode: 'local',
//    triggerAction: 'all',
//    emptyText:'- type vehicule -',
//    selectOnFocus:true
//	});
//	
//	/**
//	 * pour la climatisation
//	 */
//
//	var storeClim = new Ext.data.SimpleStore({
//		data : [["1","oui"],["0","non"]],
//		fields : ['id','label']
//	});
//	
//	var comboClim = new Ext.form.ComboBox({
//	fieldLabel: 'climatisation',
//	name : 'climatisation',
//    store: storeClim,
//    displayField:'label',
//    typeAhead: true,
//    mode: 'local',
//    triggerAction: 'all',
//    emptyText:'- climatisation -',
//    selectOnFocus:true
//	});
//	 
//	 
//	/**
//	 * pour les energies
//	 */
//	var store2 = new Ext.data.SimpleStore({
//		data : energies,
//		fields : ['id','label']
//	});
//       
//	var comboEn = new Ext.form.ComboBox({
//	fieldLabel: 'moteur',
//	name : 'idenergie',
//    store: store2,
//    displayField:'label',
//    typeAhead: true,
//    mode: 'local',
//    triggerAction: 'all',
//    emptyText:'- moteur -',
//    selectOnFocus:true
//	});
//	
//	/**
//	 * pour les departements
//	 */

//	var store2 = new Ext.data.SimpleStore({
//		data : energies,
//		fields : ['id','label']
//	});
//	var store3 = new Ext.data.SimpleStore({
//		data : departements,
//		fields : ['id','label']
//	});
//
//	var comboDep = new Ext.form.ComboBox({
//	fieldLabel: 'Zone',	
//    store: store3,
//    name : 'iddepartement',
//    displayField:'label',
//    typeAhead: true,
//    mode: 'local',
//    triggerAction: 'all',
//    emptyText:'- departement -',
//    selectOnFocus:true
//	});	
//	
//	/**
//	 * pour prix
//	 */
//	var store2 = new Ext.data.SimpleStore({
//		data : energies,
//		fields : ['id','label']
//	});
//	var store3 = new Ext.data.SimpleStore({
//		data : departements,
//		fields : ['id','label']
//	});
//	var storePrix = new Ext.data.SimpleStore({
//		data : [
//		["2000"," < 2000"],
//		["5000"," < 5000"],
//		["20000"," < 20000"],
//		["30000"," < 30000"],
//		["50000"," < 50000"]
//		],
//		fields : ['id','label']
//	});
//
//	var comboPrix = new Ext.form.ComboBox({
//	fieldLabel: 'prix',
//	name : 'prix',	
//    store: storePrix,
//    displayField:'label',
//    typeAhead: true,
//    mode: 'local',
//    triggerAction: 'all',
//    emptyText:'- prix -',
//    selectOnFocus:true
//	});
//	
//	var ch1 = new Ext.form.Checkbox({
////			fieldLabel: 'Afficher uniquement les annonces de professionnels',
//            boxLabel:'Afficher uniquement les annonces de professionnels',
//            name:'pro',
//            width:'auto'
//        })
//	
//	var ch2 = new Ext.form.Checkbox({
////			fieldLabel: 'Ignorer les annonces sans indication de prix',
//            boxLabel:'Ignorer les annonces sans indication de prix',
//            name:'sansprix',
//            width:'auto'
//        })
//				
//	var fornform = new Ext.form.FormPanel({labelAlign:'left',labelWidth:75});
//	
//	fornform.column({},comboCat,comboDep);
//	fornform.column({},comboClim,comboPrix);
//	fornform.column({},comboEn);
//	fornform.container({},ch1);
////	fornform.fieldset(
////	{legend : 'FILTRE'},
////	comboCat,
////	comboClim,
////	comboEn,
////	comboDep,
////	comboPrix,
////	ch1
//////	ch2
////	);
//
//	
//		
////	fornform.addButton('>> filtrer');
//	buttonReset = fornform.addButton('reset');
//	
//	buttonReset.addListener('click',reset);
//	
//	fornform.render('form-ct');
//	
//	
//	comboCat.on('select',doActionFilter);
//	comboClim.on('select',doActionFilter);
//	comboEn.on('select',doActionFilter);
//	comboDep.on('select',doActionFilter);
//	comboPrix.on('select',doActionFilter);
//	ch1.on('check',doActionFilter);
////	ch2.on('check',doActionFilter);
//}


	var doActionFilter = function(e , record , index){
			
		/**
		 * on commence par modifier le bon champ hidden dans notre tpl
		 */
		if(record.data){			
			hidden = Ext.get(e.getName());
			hidden.dom.value = record.data['id'];
		}else{
			hidden = Ext.get(e.getName());
			
			if(record){
				hidden.dom.value = 1;
			}else{
				hidden.dom.value = 0;
			}
		}
		 
		for(var i=0; i < arrFiltre.length ;i++ ){
			champ = Ext.get(arrFiltre[i]);
			val = champ.dom.value;
			if(champ)
			if(val && val != "0" && val != "-1"){
				filtre[arrFiltre[i]]= champ.dom.value;				
			}else{
				champ.dom.value = "";
			}
		}
		
		var store = grid.getStore();
		
		store.baseParams = filtre;
		
		store.load({start:0, limit:13});
		
		
		
		
//		Ext.Ajax.request({
//
////			url : '/MoteurRecherche/index/filtre/' ,
//			url : '/MoteurRecherche/json/' ,
//			params : filtre,
//			success: function( result, request ) {
//				content = JSON.parse(result.responseText);
//				/**
//				 * le tableau en lui même 
//				 */ 
//				var myJSONText = JSON.stringify(content);
//				alert(myJSONText);
//				
//				if(content.count_annonce != 0){
//				var ds = grid.getDataSource();
////				alert("voila ds :: "+ds);
//				
//				ds.loadData(content);
//				
//				/*
//				 * les mod&eacute;les
//				 */
////				createModele(content.modeles); 
//				/**
//				 * on refresh le grid
//				 */
//				ds.reload(); 		
//// 				grid.getView().refresh();
//				}else{
//					Ext.Msg.alert('Failed',"il n'y a pas d'annonces pour votre dernier crit&egrave;re");
//				}
//
//			 },
//			
//			failure: function ( result, request) { 
//				Ext.MessageBox.alert('Failed',"une erreur est survenue"); 
//			} 
//		});	
}

function externProcessMessage(btn, text){
		Ext.DomHelper.insertFirst(document.body,"<div id='tmp_wind'></div>");
		var wind;
		if(btn == "no"){
			document.location.href = "/Particulier/Inscription/";
		}else if(btn == "ok"){
			if(Ext.get("blocEspace")){
				document.location.href = "#";
			 	Ext.get("blocEspace").frame("0081ED", 2, { duration: 1 });
			}
		}
	}

var domodele = function(id){

		var den = Ext.get("idmodele");
		
		if(id != 0){
			den.dom.value = id;
		}else{
			den.dom.value = "";
		}
		
		var innerArray = new Array();
		
		for(var i=0; i < arrFiltre.length ;i++ ){
			champ = Ext.get(arrFiltre[i]);
			value = champ.dom.value;
			if(value){
				innerArray[arrFiltre[i]] = value;
			}
		}
		
		var store = grid.getStore();
		
		store.baseParams = innerArray;
		store.load({
			params:{start:0,limit:13},
			callback:myalert
			});
		
//		Ext.Ajax.request({
//			url : '/MoteurRecherche/json/',
////			url : '/MoteurRecherche/index/filtre/' ,
//			params : myparam,
//			success: function( result, request ) {
//				content = JSON.parse(result.responseText);
//				/**
//				 * le tableau en lui même 
//				 */
////				tableau  = content.tableau 
//				ds = grid.getDataSource();
//				ds.loadData(content);
////				/*
////				 * les mod&eacute;les
////				 */
////				createModele(content.modeles); 
//				/**
//				 * on trouve tous les fils de tbody
//				 */		
// 				grid.getView().refresh();
//
//			 },
//			
//			failure: function ( result, request) { 
//				Ext.MessageBox.alert('Failed',"une erreur est survenue"); 
//			} 
//		});
	}
	
	
	
	
	/******************************************************/
	/*************  les messages sur les bandeau **********/
	/******************************************************/
/*	
	function sendMessage(btn, text){
		
    	if(btn ==  'ok'){
    		//Ext.get('annonce-message').update(text);
    		// Requete d'envoi d'un message au serveur.
    		idan = grid.getSelectionModel().getSelected().get('idannonce');
    		iddest = grid.getSelectionModel().getSelected().get('annonceur');
    		Ext.Ajax.request({
			url : '/Message/index/envoyerMessage/' , 
			params : { text : text, idannonce: idan ,iddestinataire: iddest},
//			method: 'POST',
			success: function ( result, request ) { 
				Ext.MessageBox.alert('Success', result.responseText); 
			} ,
			failure: function ( result, request) { 
				Ext.MessageBox.alert('Failed', result.responseText); 
			} 
			});
    	}
    	grid.resumeEvents(); 
    };
*/
/**
 * Fonction permettant la cr&eacute;ation de la boite de r&eacute;ponse à un message.
 * Elle utilise supprimerMessage pour envoyer le contenu du message au serveur par appel Ajax.
 * @param {Ext.EventObject} e : l'&eacute;v&egrave;nement à g&eacute;rer.
 * return void. 
 */
 /*
function repondreMessageBox(e){

grid.suspendEvents();
	
	var prophidden = Ext.get("prop");
	var val = prophidden.dom.value;
	
	if(val != ""){
	Ext.MessageBox.show({
           title: 'R&eacute;pondre',
           msg: 'Please enter your address:',
           width:400,
           defaultTextHeight: 300,
           buttons: {ok : 'valider',cancel : 'annuler'},
           multiline: true,
           fn: sendMessage
//           animEl: e.getTarget()
       });
	}else{
		Ext.MessageBox.alert("Attention","Vous devais être identifier pour envoyer un message !<br/><a href='/Particulier/inscription'>s&acute;inscrire ! </a>");
		grid.resumeEvents(); 
	}
       
      
}
	*/