/*****************************************
			   Auteur :	
	  Gael du Plessix - Neweb Design
			Copyright 2008
	Tous droits réservés à Neweb Design
*****************************************/

var Alerts = {
	
	alerts: [],	
	stockAlert: function(alerte)
		{
		this.alerts.push(alerte);
		},
		
	detruire: function(alerte)
		{
		this.alerts.each(function(e,i){
				if(e.id == alerte.id)
					this.alerts[i] = null;		
				}.bind(this));
		this.alerts = this.alerts.compact();
		},
		
	getAlert: function(id) {
		if(id)
			this.alerts.each(function(e){
					if(e.id == id)
						return e;
				});
		return this.alerts[0] || false;
	}
};

var Alert = new Class.create({
	
	initialize: function(contenu,options,callBack)	{
		
		Alerts.stockAlert(this);
	
		this.options = Object.extend({
			id: false,					//ID de la fenêtre (defaut, nombre aléatoire)
			opaciteOverlay: 0.8,		//Opacité du calque noir
			colorOverlay: '#000000',	//Couleur du calque noir
			duree: 0.8,					//Durée des annimations Defaut
			colorFenetre: '#FFFFFF',	//Couleur de fond de la fenêtre
			classFenetre: 'fenetre-alerte',
			classContent: 'content-fenetre',
			classBoutonFermer: 'alerte-bouton-fermer',
			annimationX: 'centre',		//Direction de l'ouverture de la fenetre (si rien, droite)
			annimationY: 'centre',		//Idem	(si rien, haut)
			width: 400,
			height: 400,
			boutonFermer: true,			//Afficher ou non un bouton de fermeture de la fenetre,
			clickOverlay: true			//Fermer la fenêtre lors d'un click à l'extérieur de la fenêtre
		},options); 
		
		//Création du calque noir
		this.overlay = {
				element:new Element('div').setStyle({
						background: this.options.colorOverlay
					}),
				x: 0,
				y: 0,
				width:	0,
				height: 0
			}
		
		this.overlay.element.setOpacity(0);
		this.overlay.element.hide();
		document.body.insert(this.overlay.element);
		
		//Positionnement et bind de l'overlay
		this.positionOverlay();
		this.bindPositionOverlay = this.positionOverlay.bindAsEventListener(this);
		Event.observe(window,'resize',this.bindPositionOverlay);
		Event.observe(window,'scroll',this.bindPositionOverlay);
		
		//Bind de la fonction fermer, pour l'overlay (et le bouton fermer, plus tard)
		this.bindFermerFenetre = this.fermer.bindAsEventListener(this);	
		if(this.options.clickOverlay)	
			Event.observe(this.overlay.element,'click',this.bindFermerFenetre);
		
		//Affichage de l'overlay
		this.setOverlay(1);
		
		//Création de la fenêtre
		this.id = this.options.id || 'alert-'+Math.random();
		this.fenetre = {
			element: new Element('div',{id: this.id, 'class':this.options.classFenetre}).setStyle({
						background: this.options.colorFenetre
					}),
			x: 0,
			y: 0,
			width: this.options.width,
			height: this.options.height
		};
		
		this.fenetre.element.hide();
		document.body.insert(this.fenetre.element);
		
		//Positionnement et bind de la fenêtre
		this.fenetre.element.setStyle({
				width: '0px',
				height: '0px'
			});
		
		this.positionFenetre();
		this.bindPositionFenetre = this.positionFenetre.bindAsEventListener(this);
		Event.observe(window,'resize',this.bindPositionFenetre);
		Event.observe(window,'scroll',this.bindPositionFenetre);
		
		
		//On définit les styles à appliquer à l'ouverture de la fenêtre
		var styleCss = '';
		styleCss += 'width:'+this.fenetre.width+'px;';
		styleCss += 'height:'+this.fenetre.height+'px;';
		//direction de l'ouverture
		if(this.options.annimationX == 'centre')
			{
			var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());
			//On replace la fenêtre au centre
			this.fenetre.element.setStyle({
					left:(( viewport.width / 2 ) + viewport.scroll[0])+'px'
				});
			styleCss += 'left:'+this.fenetre.x+'px;';
			}
		else if(this.options.annimationX == 'droite')
			{
			var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());
			//On replace la fenêtre au centre
			this.fenetre.element.setStyle({
					left:(( viewport.width / 2 ) + ( this.fenetre.width / 2 ) + viewport.scroll[0])+'px'
				});
			styleCss += 'left:'+this.fenetre.x+'px;';
			}
		if(this.options.annimationY == 'centre')
			{
			var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());
			//On replace la fenêtre au centre
			this.fenetre.element.setStyle({
					top:(( viewport.height / 2 ) + viewport.scroll[1])+'px'
				});
			styleCss += 'top:'+this.fenetre.y+'px;';
			}
		else if(this.options.annimationY == 'bas')
			{
			var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());
			//On replace la fenêtre au centre
			this.fenetre.element.setStyle({
					top:(( viewport.height / 2 ) + ( this.fenetre.height / 2 ) + viewport.scroll[1])+'px'
				});
			styleCss += 'top:'+this.fenetre.y+'px;';
			}

		this.fenetre.element.show();
		new Effect.Morph(this.fenetre.element,{
				style: styleCss,
				queue: 'end',
				duration: this.options.duree || 1
			});
			
		//On s'occupe maintenant du contenu !
		this.content = new Element('div',{'class':this.options.classContent});
		if(this.options.boutonFermer && contenu != '')
			{
			var bouton = new Element('div', {'class':this.options.classBoutonFermer});
			Event.observe(bouton,'click',this.bindFermerFenetre);
			this.content.insert(bouton);
			}
		if(contenu != '')
			{
			this.content.insert(contenu);
			this.content.hide();
			this.fenetre.element.insert(this.content);
			new Effect.Appear(this.content,{queue:'end',
											duration: this.options.duree || 1,
											afterFinish:function(){if(callBack) callBack(this);}.bind(this)
											});
			}
		else
			{
			this.fenetre.element.insert(this.content);
			}
	},
	
	//
	//Positionne l'overlay dans le viewport en fonction de la taille de la fenêtre et du scroll
	//
	positionOverlay: function()	{
		var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());
		
		this.overlay.x = viewport.scroll[0];
		this.overlay.y = viewport.scroll[1];		
		this.overlay.height = viewport.height;
		this.overlay.width = viewport.width;
	
		this.overlay.element.setStyle({
				position: 'absolute',
				left: this.overlay.x+'px',
				top: this.overlay.y+'px',
				width: this.overlay.width+'px',
				height: this.overlay.height+'px'
			});
	},
	
	//Affiche ou fait disparaitre l'overlay
	setOverlay: function(etat) {
		if(etat)
			{
			this.overlay.element.show();
			new Effect.Opacity(this.overlay.element,{
												from:0,
												to:this.options.opaciteOverlay,
												duration: this.options.duree || 1,
												queue: 'end'
											});
			}
		else
			{
			new Effect.Opacity(this.overlay.element,{
												from:this.options.opaciteOverlay,
												to:0,
												afterFinish:function(){this.overlay.element.hide();}.bind(this),
												duration: this.options.duree || 1,
												queue: 'end'
											});
			}
	},
	
	positionFenetre: function()	{
		var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());

		this.fenetre.x = (( viewport.width / 2 ) - ( this.fenetre.width / 2 ) + viewport.scroll[0]);
		this.fenetre.y = (( viewport.height / 2 ) - ( this.fenetre.height / 2 ) + viewport.scroll[1]);		
	
		this.fenetre.element.setStyle({
				position: 'absolute',
				left: this.fenetre.x+'px',
				top: this.fenetre.y+'px'
			});
	},
	
	fermer: function(callBack) {
		Event.stopObserving(window,'resize',this.bindPositionOverlay);
		Event.stopObserving(window,'scroll',this.bindPositionOverlay);
		if(this.options.clickOverlay)
			Event.stopObserving(this.overlay.element,'click',this.bindFermerFenetre);
		
		//On s'occupe du contenu !
		new Effect.Fade(this.content,{queue:'end',duration: this.options.duree || 1});
	
		//On définit les styles à appliquer à la fermeture de la fenêtre
		var styleCss = '';
		styleCss += 'width:0px;';
		styleCss += 'height:0px;';
		//direction de la fermeture
		if(this.options.annimationX == 'centre')
			{
			var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());
			styleCss += 'left:'+((viewport.width/2)+viewport.scroll[0])+'px;';
			}
		else if(this.options.annimationX == 'droite')
			{
			var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());
			styleCss += 'left:'+((viewport.width/2) + (this.fenetre.width/2) +viewport.scroll[0])+'px;';
			}

		if(this.options.annimationY == 'centre')
			{
			var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());
			styleCss += 'top:'+((viewport.height/2)+viewport.scroll[1])+'px;';
			}
		else if(this.options.annimationY == 'bas')
			{
			var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());
			styleCss += 'top:'+((viewport.height/2) + (this.fenetre.height/2) + viewport.scroll[1])+'px;';
			}


		new Effect.Morph(this.fenetre.element,{
				style: styleCss,
				queue: 'end',
				duration: this.options.duree || 1,
				afterFinish: function(){this.fenetre.element.hide();}.bind(this)
			});
			
		this.setOverlay(0);
		
		Alerts.detruire(this);
	},
	
	resize: function(width,height,callBack)
		{
		callBack = callBack || function(){};

		var viewport = Object.extend({scroll: document.viewport.getScrollOffsets()},
										document.viewport.getDimensions());
		
		this.fenetre.width = width;
		this.fenetre.height = height;
		
		this.fenetre.x = (( viewport.width / 2 ) - ( this.fenetre.width / 2 ) + viewport.scroll[0]);
		this.fenetre.y = (( viewport.height / 2 ) - ( this.fenetre.height / 2 ) + viewport.scroll[1]);
		
		var styleCss = 'left:'+this.fenetre.x+'px;';
		styleCss += 'top:'+this.fenetre.y+'px;';
		styleCss += 'width:'+this.fenetre.width+'px;';
		styleCss += 'height:'+this.fenetre.height+'px;';
		new Effect.Morph(this.fenetre.element,{
				style: styleCss,
				queue: 'end',
				duration: this.options.duree || 1,
				afterFinish:callBack
			});
		},
	
	setContent: function(content,callBack)
		{
		var callBack = callBack || function(){};
		//On efface
		if(this.content != '')
			new Effect.Fade(this.content,{
				queue:'end',
				duration: 0.5,
				afterFinish: function()
					{
					this.content.update('');
					if(this.options.boutonFermer)
						{
						var bouton = new Element('div', {'class':this.options.classBoutonFermer});
						Event.observe(bouton,'click',this.bindFermerFenetre);
						this.content.insert(bouton);
						}
					
					//Le callback sert à effectuer des actions sur le contenu qui vient d'être ajouté (binds...)
					this.content.insert(content);
					new Effect.Appear(this.content,{
							queue:'end',
							duration: 0.5,
							afterFinish: callBack				
						});	
								
					}.bind(this)
				});
		else
			{
			this.content.update('');
			if(this.options.boutonFermer)
    			{
    			var bouton = new Element('div', {'class':this.options.classBoutonFermer});
    			Event.observe(bouton,'click',this.bindFermerFenetre);
    			this.content.insert(bouton);
    			}
    			
    		this.content.insert(content);
    		new Effect.Appear(this.content,{
    				queue:'end',
    				duration: 0.5,
    				afterFinish: callBack			
    			});	
			}
		}
	
});