/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|                               CLASSE ALERTE                               |
|---------------------------------------------------------------------------|
|                                                                           |
|   L'alerte permet de transmettre à l'utilisateur les messages d'erreurs   |
|                           généré par le système.                          |
|    Graphiquement, il s'agit d'une boite qui apparaît à l'écran, et qui    |
|      affiche sous forme de liste les erreurs renvoyés par le système      |
|                                                                           |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|                                          Benjamin COIFFARD - octobre 2007 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


/* CONSTRUCTEUR
----------------------------------------------------------------------------
	Le constructeur de l'alerte est appelée dès le chargement sur toutes les
	pages contenant une occurence de l'objet. Elle est déclarée invisible par
	CSS et ne perturbe donc pas l'utilisateur.
	Pour afficher une alerte, il suffit d'appeler la fonction montre, qui la
	rend visible, la déplace au bon endroit et lui place les valeurs adéquates.
---------------------------------------------------------------------------*/
function Alerte(){

// Initialisation des attributs de l'alerte
	var elle = this;
	elle.type = null;
	elle.estVisible = false;
	elle.noeud = document.createElement('div');
	elle.noeud.className = 'alerte';
	ajouterAttribut('id', elle.noeud, 'alerte');
	elle.noeud.style.width = '500px';

// Ajout de l'élément au DOM
	document.getElementsByTagName('body')[0].appendChild(elle.noeud);

}


/* AFFICHE L'ALERTE
----------------------------------------------------------------------------
	le calque de l'alerte est toujours présente sur la page, on joue
	simplement sur la propriété "visibility" pour l'afficher ou la masquer.
	Avant d'afficher l'alerte, on vérifie qu'elle n'est pas déjà présente,
	et si oui, on l'efface.
	Le paramètre nType indique le type d'alerte
	Le paramètre nMessage est un tableau contenant le message à afficher
		Le nombre de colonnes de ce tableau peut varier, selon le type
		d'alerte, ce qui a pour conséquence de modifier l'affichage.
---------------------------------------------------------------------------*/
Alerte.prototype.afficher = function (nType, nMessage){

	var elle = this;
	
// Si l'alerte est déjà affichée, on la vide et on l'efface
	if (elle.estVisible) {		
		elle.masquer();
	}
	elle.estVisible = true;

// Modification du type d'alerte dans les paramètres de l'objet
	elle.type = nType;

// Construction du message à partir du tableau

// Alerte de type simple : le tableau ne contient qu'une seule colonne
	if (nType == 'simple') {
		
	// Message d'entete
		if (nMessage.length == 0) {
			var texte = "Le système détecte une erreur, mais ne parvient pas à ";
			texte += "l'identifier. Vérifiez les éléments que vous venez de soumettre ";
			texte += "au système et contacter l'administrateur si le problème persiste.";
		}
		
		else if (nMessage.length == 1) {
			var texte = "";
		}
		
		else {
			var texte = "Les problèmes suivant bloquent le système. ";
			texte += "Corrigez-les avant de poursuivre votre action.";
		}

		var noeudtexte = document.createTextNode(texte);
		var noeudLigne = document.createElement('span');
		ajouterAttribut('id', noeudLigne, 'alerte_entete');
		noeudLigne.appendChild(noeudtexte);
		noeudLigne.className = 'elEntete';
		elle.noeud.appendChild(noeudLigne);

	// Liste des messages
		for (var i=0; i<nMessage.length; i++) {
			var texte = document.createTextNode(nMessage[i]);
			var noeudLigne = document.createElement('span');
			ajouterAttribut('id', noeudLigne, 'alerte_l'+i);
			noeudLigne.appendChild(texte);
			noeudLigne.className = 'elListe';
			elle.noeud.appendChild(noeudLigne);
		}
	}

// Bouton OK
	var texteOK = document.createTextNode("OK");
	var noeudOK = document.createElement('span');
	ajouterAttribut('id', noeudOK, 'alerte_ok');
	noeudOK.appendChild(texteOK);
	noeudOK.className = 'elOK';
	elle.noeud.appendChild(noeudOK);
	
	document.getElementById('alerte_ok').onmouseover = function() {
		this.style.backgroundColor = '#660000';
		this.style.color = '#ffcccc';
	}
	
	document.getElementById('alerte_ok').onmouseout = function() {
		this.style.backgroundColor = '#ffcccc';
		this.style.color = '#660000';
	}
	
	document.getElementById('alerte_ok').onclick = function(){
		lAlerte.masquer();
	}


	// Liste des messages

/*  Paramètres d'affichages CSS
	L'alerte se présente comme un bloc de 500px de larges, centré sur
	la page. Ce bloc est directement inséré dans l'élément 'global' dont
	la largeur est de 834px. L'alerte se situe alors à 167px du bord
	gauche, et 200px du haut de la page
*/
	
	elle.noeud.style.display = "block";
	
	var global = document.getElementById('global');
	var gauche = global.offsetLeft;
	elle.noeud.style.left = (gauche+167) + 'px';
	
	elle.noeud.style.top = '230px';
		
}


/* MASQUE L'ALERTE
----------------------------------------------------------------------------
	le calque de l'alerte est toujours présente sur la page, on joue
	simplement sur la propriété "visibility" pour l'afficher ou la masquer.
	Lorsqu'on la masque , on en profite pour faire un peu de ménage,
	et supprimer tous les éléments <span> : éléments de l'ancien message.
---------------------------------------------------------------------------*/
Alerte.prototype.masquer = function (){

	var elle = this;
	
// On supprime tous les éléments <span>
	var box = document.getElementById('alerte');
	var elSpan = box.getElementsByTagName('span');
	var temp;
	
	while (elSpan.length > 0) {
		for (var i=0; i<elSpan.length; i++) {
			temp = elSpan[i];
			box.removeChild(temp);
		}
		elSpan = box.getElementsByTagName('span');
	}
	
// On rend la boitet invisible, et on le dit
	elle.noeud.style.display = "none";
	
// On initialise les propriétés
	elle.type = null;
	
}


/* PLACE EXACTE DES ELEMENTS
----------------------------------------------------------------------------
	Les propriétés offsetTop et offsetLeft permettent respectivement de
	déterminer la position d'un élément par rapport au sommet de la fenêtre
	et à son bord de gauche.
	Mais certains navigateurs ne calculent cette valeur qu'en fonction de
	l'élément parent, et non par rapport à la fenêtre globale.
	Cette fonction permet de remonter autant que necessaire dans le DOM.	
---------------------------------------------------------------------------*/
Alerte.prototype._realOffsetTop = function (noeud) {
	if (noeud == undefined) return 0;
	return noeud.offsetTop + this._realOffsetTop(noeud.offsetParent);
}

Alerte.prototype._realOffsetLeft = function (noeud) {
	if (noeud == undefined) return 0;
	return noeud.offsetLeft + this._realOffsetLeft(noeud.offsetParent);
}


/* CHARGE LA PETITE ALERTE SUR LA PAGE
----------------------------------------------------------------------------
	Au moment du chargement de la page HTML, l'objet palerte doit être créé,
	et le calque ajouté à la page.
---------------------------------------------------------------------------*/
function cAl(){

	lAlerte = new Alerte();

}