/*
Fonction permettant de gérer l'évènement :hover sur les différentes photos

paramètres :
divConteneur : la balise concerné par l'effet hover
bgPositionHover : la position du fond d'image au passage de la souris
bgPositionMouseOut : la position du fond d'image lorsque la souris quitte la zone

*/
/*


function mouvehoverPicture(divConteneur,bgPositionHover,bgPositionMouseOut){
	// fonction lancé au survol de la zone
	$(divConteneur).mouseover(function(){
		// on affiche l'ensemble des balises à l'intérieur de la zone survolée
		$(this).children().css('opacity', 0.1).stop().fadeTo(600, 1);
		// on replace le fond d'image de la balise strong contenant 
		// le prénom de la personne photographiée dans la position souhaitée
		$(this).children("strong").css("background-position", bgPositionHover).css("opacity", 0.1).stop().fadeTo(600, 1);
	});
	$(divConteneur).mouseout(function(){
		// on masque l'ensemble des enfants des puces 
		$(this).children().css("opacity", 1).stop().fadeTo(600, 0);
		// on replace le fond d'image de la balise strong dans la position initiale
		$(this).children("strong").css("background-position", bgPositionMouseOut).css("opacity", 0.1).stop().fadeTo(600, 1);
	});
}
*/

function mouvehoverPicture(divConteneur,bgPositionHover,bgPositionMouseOut){
	$(divConteneur).hover(
		function () {
			// on affiche l'ensemble des balises à l'intérieur de la zone survolée
			$(this).children().css('opacity', 0.1).stop().fadeTo(600, 1);
			// on replace le fond d'image de la balise strong contenant 
			// le prénom de la personne photographiée dans la position souhaitée
			$(this).children("strong").css("background-position", bgPositionHover).css("opacity", 0.1).stop().fadeTo(600, 1);
		}, 
		function () {
			// on masque l'ensemble des enfants des puces 
			$(this).children().css("opacity", 1).stop().fadeTo(600, 0);
			// on replace le fond d'image de la balise strong dans la position initiale
			$(this).children("strong").css("background-position", bgPositionMouseOut).css("opacity", 0.1).stop().fadeTo(600, 1);
		}
	);
}


$(document).ready(function(){
	// on definit le fond d'image pour l'effet hover de la photo
	$("#picture-wrapper li span").css("background-image","url(../images/photos/fond-photos.gif)");
	// on masque l'ensemble des enfants des puces 
	// contenant les photos et les textes des bulles
	$("#picture-wrapper li").children().css("opacity", 0);
	// on n'affiche que la balise strong 
	// contenant le prénom des personnages photographiés
	$("#picture-wrapper li > strong").css("opacity", 1);

	// on applique les fonctions pour les deux photos
	mouvehoverPicture("#man-picture","-12px -77px","-12px -8px");		
	mouvehoverPicture("#woman-picture","0pt -245px","0 -175px");	

})