window.addEvent('domready', function() {

	var flagDim = $('flag').getSize();             // Dimensions réelle du site
	var bodyDim=$('body').getSize();               // Dimensions de la fenêtre de l'explorateur
	
	// Liste "Choisissez votre résidence"
	if($('selectRes')!=null) {
		$('selectRes').addEvent('change', function(){
			var residence=$('selectRes').options[$('selectRes').selectedIndex].value;
			window.location.href="http://www.pacagest.fr/residences.php?idres="+residence;
		});
	}
	
	/** Fonction assombrissement de l'écran
	  * @access public
	  * @param string etat : Afficher ou cacher l'assombrissement
	 **/
	function shadow(etat) {
		$('shadow').setStyle('height', flagDim.y);
		$('shadow').setStyle('visibility', etat);
	}

	/** Construction d'une boite de dialogue
	  * @access public
	  * @param numeric width  : largeur de la boîte.
	  * @param numeric height : hauteur de la boîte.
	  * @param string contenu : contenu de la boîte.
	  * @param boolean shadow : si l'on veut que la fenêtre s'assombrisse (defaut : true).
	  * @param numeric autoHidden : fait automatiquement disparaitre la boite de dialogue.
	 **/
	function diagBox(width, height, contenu, etat, shadowOn, autoHidden) {
		// J'appelle ma fonction d'assombrissement de l'écran
		shadow('visible');
		
		// Valeurs par défaut des propriétés de la boîte
		if(width==null) width=400;
		if(height==null) height=200;
		if(contenu==null) contenu='Veuillez patientez...';
		if(shadowOn==null) shadowOn=true;
		if(etat==null) etat='visible';
		
		// Récupération de la scroll bar
		var bar = $('body').getScroll();
		
		// Je récupère le point central horizontal de ma fenêtre
		var centerX=flagDim.x/2;
		
		// Je place ma boîte au centre de la fenêtre
		var divLeft=centerX-(width/2);
		var divTop=bar.y;
		
		// Création du conteneur global de la boîte de dialogue
		var divGlobal = new Element('div', {
			'id': 'myDiagBox',
			'styles': {
				'z-index': '10',
				'position': 'absolute',
				'left': divLeft,
				'top': divTop,
				'width': width
			}
		});
		
		// Création du bouton fermer.
		var aClose = new Element('a', {
			'styles': {
				'display': 'block',
				'z-index': '10',
				'width': width,
				'padding': '3px',
				'font-size': '12px',
				'text-align':'right',
				'cursor': 'pointer',
				'color': '#FFF'
			},
			'events': {
				'click': function() {
							hiddenDiagBox();
						 }
			}
		});
		
		aClose.appendText('Fermer');
		
		// Création du div de contenu de la boîte de dialogue
		var divContenu = new Element('div', {
			'styles': {
				'width': '100%',
				'background': '#535353',
				'border': '1px solid #A1A1A1',
				'color': '#FFF',
				'padding': '10px'
			}
		});
		
		divContenu.set('html', contenu);
		
		divGlobal.adopt(aClose, divContenu);
		divGlobal.injectAfter('shadow');
		
		if(autoHidden) { setTimeout(hiddenDiagBox, autoHidden); }
	}
	
	/** Construction d'une boite pour la googlemap
	  * @access public
	  * @param numeric width  : largeur de la boîte.
	  * @param numeric height : hauteur de la boîte.
	  * @param string contenu : contenu de la boîte.
	  * @param boolean shadow : si l'on veut que la fenêtre s'assombrisse (defaut : true).
	 **/
	function showMap(width, height)
	{
		shadow('visible');
		 
		// Je récupère le point central de ma fenêtre
		var centerX=flagDim.x/2;
		var centerY=bodyDim.y/2;
		
		var divLeft=centerX-(width/2);
		var divTop='50';
		
		// Création du conteneur global de la boîte googlemap
		var divGlobal = new Element('div', {
			'id': 'myDiagBox',
			'styles': {
				'z-index': '10',
				'position': 'absolute',
				'left': divLeft,
				'top': '50px',
				'width': (width+30),
				'background': '#FFF',
				'height': (height+50),
				'padding-left': '30px'
			}
		});
		
		// Création du bouton fermer.
		var aClose = new Element('a', {
			'styles': {
				'display': 'block',
				'z-index': '10',
				'width': width,
				'padding': '7px 0px 7px 0px',
				'font-size': '12px',
				'text-align':'right',
				'cursor': 'pointer',
				'color': '#535353'
			},
			'events': {
				'click': function() {
							hiddenDiagBox();
						 }
			}
		});
		
		aClose.appendText('Fermer');
		
		// Création du div de contenu de la boîte de dialogue
		var divContenu = new Element('div', {
			'id': 'gmap1',
			'styles': {
				'width': '800px',
				'height': '600px',
				'background': '#535353',
				'border': '1px solid #A1A1A1',
				'color': '#FFF'
			}
		});

		divGlobal.adopt(aClose, divContenu);
		divGlobal.injectAfter('shadow');
		
		initialize(resId);
	}	
	
	function hiddenDiagBox() {
		shadow('hidden');
		$('myDiagBox').dispose();	
	}
	
	// AFFICHAGE DE LA GOOGLE MAP
	if($('showMap')!=null) {
		$('showMap').addEvent('click', function(e){
			e.stop();
			showMap(800, 620);
			
		});
	}
	
	// Chargement des google map
	if($('gmap')!==null) initialize(resId);
	if($('gmap1')!==null) initialize(resId);
	
	// Formulaire de contact
	if($('formContact')!=null) {
		$('formContact').addEvent('submit', function(e) {
			e.stop();
			
			// Requete Ajax
			this.set('send', {onComplete: function(response) {
				diagBox(null, null, response, null, null, 3000);
			}});
			
			// Envoie du formulaire.
			this.send();
		});
	}
	
	// Formulaire de réservation
	if($('formResa')!=null) {
		$('formResa').addEvent('submit', function(e) {
			e.stop();
			
			// Requete Ajax
			this.set('send', {onRequest: function () { diagBox(null, null, 'Veuillez patienter...'); }, onComplete: function(response) {
				hiddenDiagBox();
				diagBox(null, null, response, null, null, 3000);
			}});
			
			// Envoie du formulaire.
			this.send();
		});
	}	
});