var AjaxLoadingImg = '../img/loading.gif';
var pictoDartyCuisine = '../img/picto_dartycuisine.gif';


/**
*			createImageDOM : Cree une image dans le DOM
*			classe : attribut class / titre : attribut title / titre_alt : attribut alt / source : attribut src
**/
function createImageDOM( classe, titre, titre_alt, source ) {
		var ImgDOM = document.createElement( 'img' );
		if ( null != classe ) {
				ImgDOM.className = classe;
		}
		if ( null != titre ) {
				ImgDOM.setAttribute( 'title', titre );
		}
		if ( null != titre_alt ) {
				ImgDOM.setAttribute( 'alt', titre_alt );
		}
		ImgDOM.setAttribute( 'src', source );	
		return ImgDOM;
}


/**
*			createElementDOM : Cree un element DOM
*			eltype : type element / classe : attribut class / nom : attribut name / id : attribut id
**/
function createElementDOM( eltType, classe, nom, id ) {
		var eltDOM = document.createElement( eltType );
		if ( null != classe ) { eltDOM.className = classe; }
		if ( null != nom ) { eltDOM.setAttribute( 'name', nom ); }
		if ( null != id ) { eltDOM.setAttribute( 'id', id ); }	
		return eltDOM;
}


/**
*			initStores : comportement de certains elements de la page
**/
function initStores() {
    
    var selectedRegion = null;
    var selectedDepartement = null;
    var selectRegions = $( 'Regions' )
    var selectDepartements = $( 'Departements' );
    var formStores = $( 'FormStores' );
    
    if ( formStores ) {
    
        // Population du menu des departements d'une region :
        selectRegions = $( 'Regions' );
        if ( selectRegions ) {
        		selectRegions.onchange = function() {
        		    if ( 0 != this.options[ this.selectedIndex ].value ) {
        		        AjaxStores( parseInt( this.options[ this.selectedIndex ].value ), null );
        				    //AjaxDepartements( parseInt( this.options[ this.selectedIndex ].value ) );
        				}
        		}
        }
        
        
        // Affichage des resultats de la recherche :
    		formStores.onsubmit = function() {
    		    var selectedRegion = 0;
    		    var selectedDepartement = 0;
    		    var selectRegions = $( 'Regions' );
            var selectDepartements = $( 'Departements' );
    		    if ( selectRegions && selectDepartements ) {
    		        selectedRegion = parseInt( selectRegions.options[ selectRegions.selectedIndex ].value );
    		        selectedDepartement = parseInt( selectDepartements.options[ selectDepartements.selectedIndex ].value );
    				}
    				if ( ( 0 != selectedRegion ) || ( 0 != selectedDepartement ) ) {    				 
    				    AjaxStores( selectedRegion, selectedDepartement );
    				}
    				return false;
    		}
    		
    }
    
}


/**
*			AjaxDepartements : declenche la recherche asynchrone des departements d'une region
**/
function AjaxDepartements( regionId ) {

    // on affiche l'image 'loading' a la place du menu des departements :
	  $( 'departementsAera' ).innerHTML = '';	
		var imgLoading = createImageDOM( 'AjaxLoader', null, null, AjaxLoadingImg );
		$( 'departementsAera' ).appendChild( imgLoading );
		
		pars = 'region=' + regionId;
		
		// la requete AJAX :
	  var opt = {
		    method: 'post',
		    postBody: pars,
		    onSuccess: showDepartements,
		    on404: function(t) {
		        alert( '404' );
		    },
		    onFailure: function(t) {
		        alert( 'failure' );
		    }
		}
		new Ajax.Request( '/AjaxDepartements.php', opt );  
		
}


/**
*		  Analyse la reponse XML asynchrone apres une selection de region :
**/
function showDepartements( originalRequest ) {

    //alert( originalRequest.responseText );
    //document.write( originalRequest.responseText );

		var eltRoot = originalRequest.responseXML.getElementsByTagName( "response" )[0];
		if ( eltRoot ) {
		
    		var eltDeps = eltRoot.getElementsByTagName( "departements" )[0];
    		if ( eltDeps ) {
    		    // on construit le <select> des resultats de la requete :						
    				var selectDep = createElementDOM( 'select', 'vot-depart', 'departement', 'Departements' );
    				
    				// le premier element "label" :
    				var labelTxt = NosMagasinsVotreDepLib + ' :';
						var optionLabel = document.createElement( 'option' );
						optionLabel.setAttribute( 'value', 0 );
						var optionLabelTxt = document.createTextNode( labelTxt );
						optionLabel.appendChild( optionLabelTxt );
						selectDep.appendChild( optionLabel );
    				
    				var depsNodes = eltDeps.childNodes;
    				var nodes = $A( depsNodes );
    				
    				// pour chaque noeud enfant, cad chaque balise <departement> on ajoute une <option> a	notre <select> :
    				nodes.each( function( node ) {
    				    if ( 'departement' == node.nodeName ) {
    						    attrs = node.attributes;
    								// identifiant du departement :
    								var idDep = attrs[0].nodeValue;
    								// le texte de l'option :
    								var libelleDep = node.firstChild.data + ' (' + idDep + ')';
    								var optionDep = document.createElement( 'option' );
    								optionDep.setAttribute( 'value', idDep );
    								var optionDepTxt = document.createTextNode( libelleDep );
    								optionDep.appendChild( optionDepTxt );
    								selectDep.appendChild( optionDep );
    						}
    				});
    				
    				$( 'departementsAera' ).innerHTML = '';	
    		    $( 'departementsAera' ).appendChild( selectDep );
    			  
    			  // recherche sur les magasins du departement :
            if ( selectDep ) {
            		selectDep.onchange = function() {
            		    var selectRegions = $( 'Regions' );
            		    if ( 0 != this.options[ this.selectedIndex ].value ) {
            		        AjaxStores( parseInt( selectRegions.options[ selectRegions.selectedIndex ].value ), parseInt( this.options[ this.selectedIndex ].value ) );
            				}
            		}
            }
    			  	
    	  }
    	  
    }

}


/**
*			AjaxStores : declenche la recherche asynchrone des magasins d'un departement :
**/
function AjaxStores( regionId, departementId ) {
    
    //alert( regionId );
    //alert( departementId );
    
    // on affiche l'image 'loading' a la place du menu des departements :
	  $( 'block-result-region' ).innerHTML = '';	
		var imgLoading = createImageDOM( 'AjaxLoader2', null, null, AjaxLoadingImg );
		$( 'block-result-region' ).appendChild( imgLoading );

		pars = 'region=' + regionId
		
		if ( departementId != null ) {
		    pars += '&departement=' + departementId;
		}
		
		// la requete AJAX :
	  var opt = {
		    method: 'post',
		    postBody: pars,
		    onSuccess: showStores,
		    on404: function(t) {
		        alert( '404' );
		    },
		    onFailure: function(t) {
		        alert( 'failure' );
		    }
		}
		new Ajax.Request( '/AjaxStores.php', opt );
		
		if ( departementId == null ) {
		    
		    // on selectionne la bonne region dans le menu des regions :
		    var selectRegions = $( 'Regions' );
		    for ( var i=0; i<selectRegions.options.length; i++ ) {
		        if ( selectRegions.options[i].value == regionId ) {
		              selectRegions.options[i].selected = true;
		        }
		    }		    
		    
		    // on raffraichit la liste des departements :
		    AjaxDepartements( regionId );
		}
		
}


/**
*		  Analyse la reponse XML asynchrone apres une demande de recherche de magasins :
**/
function showStores( originalRequest ) {
    
    //alert( originalRequest.responseText );
    //document.write( originalRequest.responseText );
    
    var eltRoot = originalRequest.responseXML.getElementsByTagName( "response" )[0];
		if ( eltRoot ) {
		    
		    $( 'block-result-region' ).innerHTML = '';
		    
		    // le type de recherche : region ou departement :
		    var rechercheRegion = false;
		    var eltRechercheType = eltRoot.getElementsByTagName( "rechercheType" )[0];
    		if ( eltRechercheType ) {
    		    rechercheRegion = true;
    		}
    		if ( rechercheRegion ) {
    		    var eltRegionId = eltRoot.getElementsByTagName( "regionId" )[0];
    		    var regionId = eltRegionId.firstChild.data;
    		}
		    
		    var eltLibelle = eltRoot.getElementsByTagName( "libelle" )[0];
		    if ( eltLibelle ) {
    		    var libEntite = eltLibelle.firstChild.data;
    		}
		    
    		var eltStores = eltRoot.getElementsByTagName( "stores" )[0];
    		if ( eltStores ) {

    		    // on affiche le titre de la recherche :
    		    var titreRechercheElt = createElementDOM( 'h4', null, null, null );
    		    var titreRechercheLabelTxt;
    		    var titreRechercheTxt;
    		    if ( rechercheRegion ) {
    		        titreRechercheLabelTxt = NosMagasinsResultatRegLib.unescapeHTML();
    		    } else {
    		        titreRechercheLabelTxt = NosMagasinsResultatDepLib.unescapeHTML();
    		    }
    		    titreRechercheLabelTxt += ' ' + libEntite + ' :';
    		    titreRechercheTxt = document.createTextNode( titreRechercheLabelTxt );
    		    titreRechercheElt.appendChild( titreRechercheTxt );
    		    $( 'block-result-region' ).appendChild( titreRechercheElt );

    		    // on construit les resultats de la requete :						
    				var storesNodes = eltStores.childNodes;
    				var nodes = $A( storesNodes );
    				var nbStore = 1;

    				// pour chaque noeud enfant, cad chaque balise <store> :
    				nodes.each( function( node ) {

    				    if ( 'store' == node.nodeName ) {
    				    
    				        var divStoreElt = createElementDOM( 'div', 'mini-block-result', null, null );
    				        var pStoreElt = createElementDOM( 'p', null, null, null );
    				        var breakElt;
    				        
    						    attrs = node.attributes;
    								var ville = attrs[1].nodeValue;
    								var adrs1 = attrs[2].nodeValue;
    								var adrs2 = attrs[3].nodeValue;
    								var adrs3 = attrs[4].nodeValue;
    								var tel   = attrs[5].nodeValue;
    								var fax   = attrs[6].nodeValue;
    								var cuisine;
    								if ( rechercheRegion ) {
    								    var dep = attrs[7].nodeValue;
    								    cuisine = attrs[8].nodeValue;
    								} else {
    									  cuisine = attrs[7].nodeValue;
    								}

    								// 1ere ligne : DARTY + ville + [ optionnel : departement ] + picto cuisine
    								var spanStoreTitleElt = createElementDOM( 'span', 'red-style', null, null );
    								var storeTitle = 'DARTY ' + ville;
    								if ( rechercheRegion ) {
    								    storeTitle += ' (' + dep + ')';
    								}
    								var storeTitleLib = document.createTextNode( storeTitle );
    								spanStoreTitleElt.appendChild( storeTitleLib );
    								pStoreElt.appendChild( spanStoreTitleElt );
    								// picto cuisine :
    								if ( '1' == cuisine ) {
    										var imgCuisine = createImageDOM( '', null, 'Vente des cuisines', pictoDartyCuisine );
                    		pStoreElt.appendChild( imgCuisine );
                    }
    								// retour ligne :
    								breakElt = createElementDOM( 'br', null, null, null );
    								pStoreElt.appendChild( breakElt );

    								// 2ieme ligne : adresse 1
    								if ( '' != adrs1 ) {
    								    var adresse1Txt = document.createTextNode( adrs1 );
    								    pStoreElt.appendChild( adresse1Txt );
    								    // retour ligne :
    								    breakElt = createElementDOM( 'br', null, null, null );
    								    pStoreElt.appendChild( breakElt );
    								}
    								
    								// 3ieme ligne : adresse 2
    								if ( '' != adrs2 ) {
    								    var adresse2Txt = document.createTextNode( adrs2 );
    								    pStoreElt.appendChild( adresse2Txt );
    								    // retour ligne :
    								    breakElt = createElementDOM( 'br', null, null, null );
    								    pStoreElt.appendChild( breakElt );
    								}
    								
    								// 4ieme ligne : adresse 3
    								if ( '' != adrs3 ) {
    								    var adresse3Txt = document.createTextNode( adrs3 );
    								    pStoreElt.appendChild( adresse3Txt );
    								    // retour ligne :
    								    breakElt = createElementDOM( 'br', null, null, null );
    								    pStoreElt.appendChild( breakElt );
    								}
    								
    								/*
    								// 5ieme ligne : telephone
    								var telTxt = document.createTextNode( NosMagasinsTelLib.unescapeHTML() + ' : ' + tel );
								    pStoreElt.appendChild( telTxt );
								    // retour ligne :
								    breakElt = createElementDOM( 'br', null, null, null );
								    pStoreElt.appendChild( breakElt );
								    
								    // 6ieme ligne : fax
    								var faxTxt = document.createTextNode( 'Fax : ' + fax );
								    pStoreElt.appendChild( faxTxt );  // et pas de retour ligne :
								    */
    								
    								// on attache le paragraphe :
    								divStoreElt.appendChild( pStoreElt );
    								// on attache le div :

		                $( 'block-result-region' ).appendChild( divStoreElt );
    								
    								// tous les deux resultats, on affiche :
    								if ( 0 == ( nbStore % 2 ) ) {
    								    var clearDivElt = createElementDOM( 'div', 'clear', null, null );
    								    $( 'block-result-region' ).appendChild( clearDivElt );
    								}
    								
    								nbStore++;
    								
    						}
    						
    				});
    				
    				// on rajoute un div class clear en fin de boucle :
    				var clearDivElt = createElementDOM( 'div', 'clear', null, null );
    				$( 'block-result-region' ).appendChild( clearDivElt );
    				
    	  } else {

            // ici pas de magasin de trouve :
            var divStoreElt = createElementDOM( 'div', 'mini-block-result', null, null );
            var pStoreElt = createElementDOM( 'p', null, null, null );
            var emptyResultTxt;
    		    if ( rechercheRegion ) {
    		        emptyResultTxt = document.createTextNode( NosMagasinsNotFoundRegLib.unescapeHTML() );
    		    } else {
    		        emptyResultTxt = document.createTextNode( NosMagasinsNotFoundDepLib.unescapeHTML() );
    		    }
    		    pStoreElt.appendChild( emptyResultTxt );
    		    divStoreElt.appendChild( pStoreElt );
    		    $( 'block-result-region' ).appendChild( divStoreElt );
    	  }
    	  
    }
    
    // on declenche l'affichage des departements correspondants :
    /*
    if ( rechercheRegion ) {
        AjaxDepartements( regionId );
        // il faut aussi selectionner la bonne region dans le menu deroulant....
        // et ensuite relancer l'affichage des departements de cette region
    }
    */
    
}


window.onload = initStores;