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

	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 ImgHover = 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: 50, transition: Fx.Transitions.Quad.easeInOut});
        		
        this.trigger.each(function(el){
        
        	el.addEvents({
        	
        	    mouseover: function(){this.displayPosition(el);}.bind(this),
        	    			    
        	    mouseout: function(){this.image.fade(0);}.bind(this)
        	    
        	});       
        
        }, this);
    },
    
    //La methode pour les effets et le positionnement  
    displayPosition : function(el) {
        	    			    				    	
		this.image.setStyle('display', 'block').fade(0, 1);
				    					
		var x = this.adjust.x;										
		var y = this.adjust.y;	
						
		this.image.setStyles({left: x, top: y});
		
		var contenuCoords = $('contenu').getCoordinates();
		var contenuBottom = contenuCoords.bottom;
		var contenuHeight = contenuCoords.height;
		
		var productPreviewBottom = el.getCoordinates().bottom;
		
		/*
alert(productPreviewBottom);
			alert(contenuBottom);
*/
		
		if (productPreviewBottom + 160  > contenuBottom) {
	    	
	    	var depassement = (productPreviewBottom + 160) - contenuBottom;
	    					
	    	$('mainContent').setStyle('min-height',contenuHeight +160 + depassement);
	    	$('blocPositionnement').setStyle('min-height',contenuHeight+160 + depassement);
	    	$$('#mainBloc').setStyle('min-height',contenuHeight+160 + depassement);
	    }
	
						
// 		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)
        });		
    }	
 
});
*/