/**
 * ImageFx est un namespace destiné à effectuer des opérations graphiques 
 * communes. Les opérations définies à l'origine dans un cadre particulier
 * sont regroupées ici afin d'être réutilisées.
 * Les effets disponibles sont :
 *  - écriture d'un texte avec détourage, et manipulation des couleurs du texte
 */
 
 
/**
 * Crée une instance d'un ImageFx 
 */
function ImageFx ()
{
}

ImageFx.prototype = {

	/** 
	 * Crée un panneau <div> contenant un texte détouré, l'ajoute à un container
	 * fourni, et le retourne.
	 * Le texte est par défaut vide et pourra être modifié autant que souhaité
	 * via un appel à outlinedWrite()
	 * Paramètres :
	 *  - container : l'instance du container accueillant le panneau
	 *  - panelClass : la ou les classes (séparées par un espace) du panneau
	 *  - outlineClass : la classe du texte (pour définir sa taille)
	 *  - mainColor : la couleur du texte central (pas celle du détourage) au format CSS
	 *
	 * La méthode renvoie le nouveau panneau ainsi créé.
	 * Il n'y a pas de méthode de suppression, il suffit de disposer du panneau.
	 *
	 * Le détourage se fait en créant 5 copies du texte, une centrée de la couleur d'écriture,
	 * et quatre décalées chacune de un pixel dans les quatre diagonales, de la couleur d'ombrage.
	 * (note : méthode importée de RacingGame)
	 */
	createOutlinedTextPanel : function(container, panelClass, outlineClass, mainColor)
	{
		var containingPanel = document.createElement('div');
		containingPanel.setAttribute("class", panelClass);
		container.appendChild(containingPanel);
		
		var mainText = document.createElement('div');
		mainText.setAttribute("class", outlineClass+" imagefx_outline_fg");
		mainText.style.color=mainColor;
		mainText.appendChild(document.createTextNode(""));
		containingPanel.appendChild(mainText);
		   
		var outlineTopLeft = document.createElement('div');
		outlineTopLeft.setAttribute("class", outlineClass+" imagefx_outline_bg_topleft");
		outlineTopLeft.appendChild(document.createTextNode(""));
		containingPanel.appendChild(outlineTopLeft);
	
		var outlineTopRight = document.createElement('div');
		outlineTopRight.setAttribute("class", outlineClass+" imagefx_outline_bg_topright");
		outlineTopRight.appendChild(document.createTextNode(""));
		containingPanel.appendChild(outlineTopRight);
		
		var outlineBottomLeft = document.createElement('div');
		outlineBottomLeft.setAttribute("class", outlineClass+" imagefx_outline_bg_bottomleft");
		outlineBottomLeft.appendChild(document.createTextNode(""));
		containingPanel.appendChild(outlineBottomLeft);
		
		var outlineBottomRight = document.createElement('div');
		outlineBottomRight.setAttribute("class", outlineClass+" imagefx_outline_bg_bottomright");
		outlineBottomRight.appendChild(document.createTextNode(""));
		containingPanel.appendChild(outlineBottomRight);
		
		return containingPanel;
	},
	
 	 /**
	  * Affiche un texte détouré.
	  * Nécessite que le panneau ait été créé avec la méthode createOutlinedTextPanel()
	  * (attention, pour une question de performance, aucune vérification n'est faite)
	  * Paramètres :
	  *  - panel : instance du panneau
	  *  - text : chaîne de caractères à afficher
	  */
	outlinedWrite : function(panel, text)
	{
		for (var i=0; i<5; ++i) {
			panel.childNodes[i].firstChild.data = text;
		}
	},

	/**
	 * Modifie la couleur d'affichage du texte principal (pas le détourage) d'un 
	 * texte créé par createOutlinedTextPanel()
	 *  - newColor : une chaîne représentant la couleur sous une forme CSS reconnue
	 */
	setHighlightColor : function(panel, newColor)
	{
		panel.firstChild.style.color = newColor;
	},
	
	/**
	 * Modifie la couleur de détourage d'un texte créé par createOutlinedTextPanel()
	 * sans toucher à la couleur principale
	 *  - newColor : une chaîne représentant la couleur sous une forme CSS reconnue
	 */
	setOutlineColor : function(panel, newColor)
	{
		for (var i=0; i<5; ++i) {
			panel.childNodes[i].style.color = newColor;
		}
	}
	
}
 