/***********************

	Script: imgHover.js
	License: Emedia-Communication
	Copyright : imgHover for Mootools 1.2 copyright (c) 2009 Vincent Bousquet, <http://xxxxxx.free.fr>
	Documentation : http://xxxxxx.free.fr/
	
	Usage:
		
		Fran�ais : xxxxxxxxxxxxxxxxxxxxxxx
		
		English : xxxxxxxxxxxxxxxxxxxxxx
						
	Note : 
		Fran�ais: Mootools est une libraire javascript de Valerio Proietti, vous pouvez retrouver cette libraire sur l'adresse http://mootools.net
		English: Mootools is a javascript based library by Valerio Proietti, it's can be found at http://mootools.net
			
	La classe imgHover retient trois paramètres principaux :

    * image : La classe du div qui contien l'image à faire apparaître en pop-up
    * trigger : La classe du div qui déclenche l'évènement d'apparition du pop-up
    * placement : L'id du div qui contient les éléments (sert à calculer la position du pop-up)
    * Méthodes :
    * main : La methode pour le paramêtrage de l'effet 'tween' et la gestion des évènements
    * displayPosition : La methode qui fait apparaître le div "image" et le positionne suivant les coordonnées de la sourie et le div "placement" 
        	
***********************/

/************************************************************
	imgHover class
*************************************************************/
 
var ImgHoverMove = new Class({
    
    //Les Paramètres    	
	image: null, 
    trigger: null,    
    placement: null,
    adjust: {x: 0, y: 0}, 
     
    
    //Le constructeur     
 	initialize: function(image, trigger, placement, x, y) {
     	
     	this.image = image ;
     	this.trigger = trigger;
     	this.placement = placement;
     	this.adjust.x = x;
     	this.adjust.y = y;
     	
     	this.main();     	
 	},
 
 	//La methode Principale
    main: function() {
    
    	this.image.set('tween', {duration: 400, transition: Fx.Transitions.Quad.easeInOut});
        		
        this.trigger.each(function(el){
        
        	el.addEvents({
        	
        	    mouseover: function(){this.displayPosition(el);}.bind(this),
        	    			    
        	    mouseout: function(){
        	    	
        	    		if(Browser.Engine.version <= 5)  // Pour les navigateurs ie6 et ie7 mettre :  
        	    			this.image.setStyle('display', 'none');
        	    		else	
        	    			this.image.fade(1, 0);		
               	    
               	    }.bind(this)
             });       
        
        }, this);
    },
    
    //La methode pour les effets et le positionnement  
    displayPosition : function(el) {
    	
    	if( Browser.Engine.version <= 5)  // Pour les navigateurs ie6 et ie7 mettre : 
			this.image.setStyle('display', 'block');
		else
			this.image.setStyles({'visibility':'hidden','display':'block'}).fade(0, 1);
						    					
		//var x = this.adjust.x;										
		//var y = this.adjust.y;	
						
		//this.image.setStyles({left: x, top: y});
						
 		//POUR FAIRE BOUGER L'IMAGE AVEC LA SOURIE (commenter les positionnements au dessus)		
		el.addEvent('mousemove', function(e){
		    		    					    		
		    var div = this.placement.getPosition();
		    					
		    var x = (e.client.x - div.x) + this.adjust.x;										
		    var y = (e.client.y - div.y) + this.adjust.y;		
		
		    this.image.setStyles({left: x, top: y});							
		}.bind(this))    
    
    }	
 
});

/**********************************************************************/




/*
var ImgHover = new Class({
     	    	
	image: null, 
    trigger: null,
    placement: null,
         
 	initialize: function(image, trigger, placement) {
     	
     	this.image = image ;
     	this.trigger = trigger;
     	this.placement = placement;
     	
     	this.main();     	
 	},
 
    main: function() {
    
    this.image.set('tween', {duration: 200, transition: Fx.Transitions.Quad.easeInOut});
        		
        this.trigger.addEvents({
        
            mouseover: function(){
            			    				    	
            	this.image.setStyle('display', 'block').fade(0, 1);
            														
            	this.trigger.addEvent('mousemove', function(e){
            				    					    		
            		var div = this.placement.getPosition();
            							
            		var x = (e.client.x - div.x)-50;										
            		var y = e.client.y + 10;		
            
            		this.image.setStyles({left: x, top: y});							
            	}.bind(this))
            					
            }.bind(this),			    
            mouseout: function(){this.image.fade(0);}.bind(this)
        });		
    }	
 
});
*/