/**
 * Classe ImageMenu - affiche une image lors du focus d'un élément du menu
 * 
 * @version 1.0
 * @author Sylvain LEPRETRE
 */
 
var ImageMenu = Class.create(
{
	/**
	 * constructeur - nécessite l'element ou l'ID de la liste, de la forme <ul><li><a href=""></a></li></ul>
	 * 
	 * @param string|Element elementID element ou l'ID de la liste <ul>
	 */
	initialize:		function(elementID)
					{
						// on "clean" l'element fourni
						this.ul = $(elementID);
						Element.cleanWhitespace(this.ul);
						
						// on précharge les images pour un affichage sans délai
						this.preloadImage();
						
						// on parcourt l'ensemble des éléments de la liste
						var items_list = this.ul.getElementsByTagName('li'); 
						
						for(var i=0;i<items_list.length;i++)
						{
							// normalisation et stylisation de l'élement courant
							var li = Element.extend(items_list[i]);
							
							li.setStyle(
								{
									'position': 'relative',
									'display':'block'
								}
							);
							
							// création du calque au dessus de l'élément courant
							var layer = new Overlay(li);
							this.blurContent(layer);
							// enregistrement des évènements
							this.register(layer);
						}
						
					},
	
	/**
	 * précharge les images nécessaires
	 */
	preloadImage:	function()
					{
						var temp = new Image();
						temp.src = "images/arrow_menu_final.gif";
					},
					
	/**
	 * enregistre tout les EventListener auprès du calque passé en paramètre
	 * 
	 * @param Overlay layer - calque à enregistrer
	 */
					
	register:		function(layer)
					{
						// récupération du lien de l'élément
						var divLI = layer.targetElement.firstDescendant();
						var title = Element.extend(divLI.getElementsByTagName('h2')[0]);
                        var linkTitle = Element.extend(title.getElementsByTagName('a')[0]);
						var content = Element.extend(divLI.getElementsByClassName('content')[0]);
                        var linkContent = Element.extend(content.getElementsByTagName('a')[0]);
						
						// mouse in & out
						Event.observe(layer.DOM,'mouseover',this.focusItem.bindAsEventListener(this,layer));
						Event.observe(layer.DOM,'mouseout',this.blurItem.bindAsEventListener(this,layer));
						
						// simulation du lien
						Event.observe(layer.DOM,'click',this.goTo.bindAsEventListener(this,linkTitle.href));
					},
					
	/**
	 * change l'URL de la page
	 * 
	 * @param Event e Objet Event lié à l'évènement
	 * @param URL URL de la page 
	 */					
	goTo:			function(e,URL)
					{
						window.location = URL;
					},
					
	/**
	 * positionne l'image gérée par le calque en la placant à droite
	 * 
	 * @param Overlay calque lié à l'image
	 */
	positionImage:	function(layer)
					{
						// normalisation de l'élément
						Element.extend(layer.image);
						
						// stylisation de l'élément 
						layer.image.setStyle(
						{
							'top'	: (layer.offset.top-0)+'px',
							// left = (position gauche du calque + largeur totale du calque*) - largeur de l'image 
							'left'	: (layer.offset.left + parseInt(layer.dimensions.width) - 50)+'px',
							'width' : '50px',
							'height' : '24px',
							'margin': '0',
							'padding': '0'
						}
						);
					},
					
	/**
	 * créé l'image désirée
	 * 
	 * @return Image
	 */
	createImage:	function()
					{
						var arrow = new Element('img',
													{
														'src'	: 'images/arrow_menu_final.gif',
														'class'	: 'image_menu_js'
													}
												);
						arrow.setStyle
						(
							{
								'display'	: 'none',
								'border'	: 'none',
								'position'	: 'absolute',
								'right'		: '0',
								'top'		: '0',
								'zIndex'	: '1'
							}						
						);
						
						return arrow;
					},
	/**
	 * appelée lors du focus sur un élément du menu (mouseover)
	 * 
	 * @param Event e Objet Event lié à l'évènement
	 * @param Overlay layer calque survolé
	 */
	focusItem:		function(e,layer)
					{
						// normalisation de l'évènement
						e = e || window.event;
						
						// propagation de l'évènement stoppée
						Event.stop(e);
						
						// on affiche l'image
						this.showImage(layer);
						
						// on anime le contenu
						this.focusContent(layer);
						
					},
	/**
	 * Fait apparaître l'image
	 * 
	 * @param Overlay layer calque survolé
	 */
	showImage:		function(layer)	
					{
						// récupération de la racine du document <body>
						var body = document.getElementsByTagName('body')[0];
						
						// si le calque a toujours une image
						if(!(Object.isUndefined(layer.image) || layer.image === null))
						{
							// on annule l'effet en court si celui ci n'est pas terminé
							if(layer.currEffect && layer.currEffect.state != 'finished')
							{
								layer.currEffect.cancel();
							}
							
							// on supprime l'image du calque
							body.removeChild(layer.image);
							layer.image = undefined;					
						}
						// on recrée l'image et on la positionne correctement
						layer.image = this.createImage();
						this.positionImage(layer);
						
						// on l'ajoute au document
						body.appendChild(layer.image);
						
						// on fait apparaître l'image
						layer.currEffect = new Effect.Appear(layer.image,{duration:0.4,from:0.1,to:0.5});
					},
	/**
	 * Fait disparaître l'image
	 * 
	 * @param Overlay layer calque survolé
	 */
	hideImage:		function(layer)
					{
						// on ne lance le traitement que si l'image existe toujours
						if(!(Object.isUndefined(layer.image) || layer.image === null))
						{
							// on annule l'effet en court si celui ci n'est pas terminé
							if(layer.currEffect && layer.currEffect.state != "finished")
							{
								layer.currEffect.cancel();
							}
							
							// on fait disparaître l'image
							layer.currEffect = new Effect.Fade	(
																	layer.image,
																	{
																		duration 	: 0.4,
																		afterFinish	: 	function() 
																						{ 
																							// suppression de toute référence à l'image à la fin de l'effet
																							layer.image = undefined; 
																						}
																	}
																);
						}	
					},
	/**
	 * animation contenu mouseover
	 * 
	 * @param Overlay layer calque survolé
	 */
	focusContent: 	function(layer)
					{
						var divLI = layer.targetElement.firstDescendant();
						var title = Element.extend(divLI.getElementsByTagName('h2')[0]);
                        var linkTitle = Element.extend(title.getElementsByTagName('a')[0]);
						var content = Element.extend(divLI.getElementsByClassName('content')[0]);
                        var linkContent = Element.extend(content.getElementsByTagName('a')[0]);
						
						linkTitle.setStyle({'color':'#4EB3E7'});
						linkContent.setStyle({'color':'white'});
					},
	/**
	 * animation contenu mouseout
	 * 
	 * @param Overlay layer calque survolé
	 */		
	 	
	blurContent:	function(layer)
					{
						var divLI = layer.targetElement.firstDescendant();
						var title = Element.extend(divLI.getElementsByTagName('h2')[0]);
                        var linkTitle = Element.extend(title.getElementsByTagName('a')[0]);
						var content = Element.extend(divLI.getElementsByClassName('content')[0]);
                        var linkContent = Element.extend(content.getElementsByTagName('a')[0]);
						
						linkTitle.setStyle(
							{
								'color':'#AAAAAA',
								'fontFamily':'Century Gothic',
								'fontSize':'17px'
							}
						);
						linkContent.setStyle({'color':'#AAAAAA'});
					},
	
	/**
	 * appelée lors de la perte du focus sur un élément du menu (mouseout)
	 * 
	 * @param Event e Objet Event lié à l'évènement
	 * @param Overlay layer calque survolé
	 */
	blurItem:		function(e,layer)
					{
						// normalisation de l'évènement
						e = e || window.event;
						
						// propagation de l'évènement stoppée
						Event.stop(e);
						
						// on cache l'image
						this.hideImage(layer);
						
						// on anime le contenu
						this.blurContent(layer);
					}
}
);