/**
*
* 	Cette mini-librairie permet de lancer une lightbox lors d'un clic sur element <A> / <SPAN> contenant l'attribut "rel" avec la valeur "lightbox" 
*	L'élément doit aussi comporter un lien (attribut href) contenant l'URL à charger en tant que lightbox
*	exemple: <a href="/mon-lien.php" rel="lightbox">mon libéllé</a>
*
* 	- observerElement(event): handler d'évément pour l'affichage de la lightbox
*	- lightbox(inURL): appel à la fonction de requête du contenu de la lightbox avec l'URL en parametres
*	- displayOverlay(): affiche l'ombre avec effet d'opacité
*	- hideOverlay():cache l'ombre avec effet d'opacité
*	- displayLightbox(); affiche la lightbox
*	- hide Lightbox(): cache la lightbox
*	
*	TODO
*	- gérer la construction d'une page sans JavaScript activé (faisabilité?)
*
*/


/**
*	Lorsque le DOM est chargé , on met en place les handlers d'événements pour appeler la fonction lightbox
*/
document.observe('dom:loaded', function() {
	$$('a[rel="lightbox"]').invoke('observe', 'click', observerElement);
	$$('a.lightbox').invoke('observe', 'click', observerElement);
	// avec fond grisé
	$$('a[rel="lightbox-overlay"]').invoke('observe', 'click', observerElementAlt);
	$$('a.lightbox-overlay').invoke('observe', 'click', observerElementAlt);
}, false);



/**
*	Appelle la fonction lightbox après avoir récupéré l'URL
*/
function observerElement(event){
	event.stop(); //On arrête l'événement
	var element = Event.element(event);
	var url='';

	if(element.tagName!='A'){
		var noeudPere = element.ancestors()[0]; //On récupère le noeud parent de l'image (càad le lien contenant l'emplacement de la ressource)
		url = noeudPere.readAttribute('href');
		
	}else{
		url = element.readAttribute('href');
	}
	
	lightbox(url);
}


function observerElementAlt(event){

	event.stop(); //On arrête l'événement
	var element = Event.element(event);
	var url = '';
	
	if(element.tagName!='A'){
		var noeudPere = element.ancestors()[0]; //On récupère le noeud parent de l'image (càad le lien contenant l'emplacement de la ressource)
		url = noeudPere.readAttribute('href');
		
	}else{
		url = element.readAttribute('href');
	}	
	
	var overlay = new Element('div',{'id': 'overlay'});
	$('container').insert({before : overlay});
	new Effect.Opacity('overlay', { from: 0, to: 0.65, duration: 0.5, transition: Effect.Transitions.linear });
	
	lightbox(url);
}

var __lightbox_hooks=new Hash();

function registerLightboxOnCompleteHook(url,hookname){
	__lightbox_hooks.set(url,hookname);
}


/**
*	Récupère le contenu de l'URL et lance la fonction d'affichage de la lightbox
*	@URL: url du contenu à charger dans la lightbox
*/
function lightbox(inURL){

	lightboxURL = inURL;

	var ajax = new Ajax.Request(
					lightboxURL, {
						method: 'get',
						onSuccess : function(reponse){
							//On récupère le contenu de la lightbox
							var lightboxContent = reponse.responseText;
							//On affiche la lightbox
							displayLightbox(lightboxContent);
							},
						onComplete : function(reponse){
								// On ajoute l'écoute de l'événement UNE FOIS l'élément à écouter DISPONIBLE
								$$('#lightbox *[class=\"close\"]').invoke('observe', 'click', hideLightbox);
								
								// On va chercher des fonctions à exécuter lorsque la lightbox est affichée.
								// Ces fonctions sont définies via registerOnCompleteHook et prennent l'url demandée
								// en paramètre
								__lightbox_hooks.each(function(pair){
									if(lightboxURL.match(pair.key)){
										eval(pair.value+"('"+lightboxURL+"');");
									}
								});
								
								// TODO Virer ces Thomates et les remplacer par des onCompleteHooks
								var urlChaines = new RegExp("^"+'/numerique/liste-chaines.php'+".*$","i");
								var urlPays = new RegExp("^"+'/numerique/liste-pays.php'+".*$","i");
								var partURLOffre = new RegExp("^"+'o='+".*$","i");
								
								if (lightboxURL.match(urlChaines)) {
									new Tabs('tabs-2'); // Tabs bouquets
									new Tabs('tabs-3'); // Tabs chaines
									
									if(!lightboxURL.match(partURLOffre)){
										$$('#lightbox *[class="bouquets"] *[type=\"checkbox\"]').invoke('observe','click', ajouterBouquetSelectionne); //Handler bouquets
										$$('#lightbox *[class="chaines"] *[type=\"checkbox\"]').invoke('observe','click', ajouterChaineSelectionnee); //Handler chaines
									}
								}
								if (lightboxURL.match(urlPays)) {

									new Tabs('tabs-4'); // Tabs pays
							
									if(!lightboxURL.match(partURLOffre)){
										$$('#lightbox *[type=\"checkbox\"]').invoke('observe','click', ajouterPaysSelectionne);
									}
								}
								if (lightboxURL == '/numerique/tester-eligibilite.php') {
									$('f-adsl-simple').observe('submit', function(evt){
										evt.stop();
										verifierFormulaireSimpleLightboxEtTesterEligibilite();
									});
								}
								if (lightboxURL == '/numerique/envoyer-par-mail.php') {
									$('f-adsl-email').observe('submit', function(evt){
										evt.stop();
										verifierFormulaireEmailLightbox();
									});
								}
							}
					}
				);
}

/**
*	Affiche l'OVERLAY
*/
function displayOverlay() {
	// Insertion de l'ombrage
	$('container').insert({before : '<div id="overlay"><img src="/images/charte-v2/spinner.gif" alt="patientez..." class="loading" /></div>'});
	new Effect.Opacity('overlay', { from: 0, to: 0.65, duration: 0.5, transition: Effect.Transitions.linear });
}


/**
*	Cache l'OVERLAY
*/
function hideOverlay() {
	// Suppression de l'ombrage
	new Effect.Opacity('overlay', { from: 0.65, to: 0, duration: 0.5, transition: Effect.Transitions.linear });
	$('overlay').remove();
}


/**
*	Affiche la lightbox
*/
function displayLightbox(lightboxContent){
	// Insertion du contenu de la lightbox
	$('container').insert({ before : lightboxContent });
	_setPosition('lightbox');
}


/**
*	Cache la lightbox
*/
function hideLightbox() {
	// Suppression de la lightbox
	new Effect.Shrink('lightbox', { duration: 1.5 });
	if ( $('overlay') != null) { hideOverlay() }
	$('lightbox').remove(); // Suppresion de la lightbox
}


/**
*	Positionne la lightbox
*/
function _setPosition(el){
	
	var scrollY = 0;
	
	if ( document.documentElement && document.documentElement.scrollTop ){
		scrollY = document.documentElement.scrollTop;
	}else if ( document.body && document.body.scrollTop ){
		scrollY = document.body.scrollTop;
	}else if ( window.pageYOffset ){
		scrollY = window.pageYOffset;
	}else if ( window.scrollY ){
		scrollY = window.scrollY;
	}
	
	var posLeft = (document.viewport.getDimensions().width /2) - ($(el).getWidth() /2);
	var posTop = (document.viewport.getDimensions().height /2) - ($(el).getHeight() /2) + scrollY;
	
	$(el).setStyle({'left': posLeft+'px', 'top': posTop+'px'});
	
}