/*
                     __                      ___                           __                    
         __         /\ \__                  /\_ \                         /\ \     __            
 __  __ /\_\   _ __ \ \ ,_\  __  __     __  \//\ \       __       __      \_\ \   /\_\     ___   
/\ \/\ \\/\ \ /\`'__\\ \ \/ /\ \/\ \  /'__`\  \ \ \    /'_ `\   /'__`\    /'_` \  \/\ \   / __`\ 
\ \ \_/ |\ \ \\ \ \/  \ \ \_\ \ \_\ \/\ \L\.\_ \_\ \_ /\ \L\ \ /\ \L\.\_ /\ \L\ \  \ \ \ /\ \L\ \
 \ \___/  \ \_\\ \_\   \ \__\\ \____/\ \__/.\_\/\____\\ \____ \\ \__/.\_\\ \___,_\ _\ \ \\ \____/
  \/__/    \/_/ \/_/    \/__/ \/___/  \/__/\/_/\/____/ \/___L\ \\/__/\/_/ \/__,_ //\ \_\ \\/___/ 
                                                         /\____/                  \ \____/       
                                                         \_/__/                    \/___/        
Script : moozoommenu.js
09/2007 - christopher wait aka virtualgadjo / chris at virtual-gadjo dot com
revue et corrigée 12/2007 pour mootools 1.2

Options:
- imgClass : ...
- imgOffString : la chaine de caractÄŤres qui repÄŤre les images off
- immOnString : la chaîne de caractčres qui repčre les images on
- zoomlevel: ...
- textLinkClass: la class attribuée aux liens textes associés ŕ chaque image s'il y en a
- effectDuration: ...
- towardTop: de 0 ŕ 1, 0 le bas de l'image ne bouge pas, 1 le haut de l'image ne bouge pas, 0.5 le déplacement est centré sur l'image

IMPORTANT : penser ŕ préciser les attributs height et width des images,
IE s'en passe sans problÄŤme, pas FF qui faute de les trouver dans le source
les met par défaut ŕ 0 !!

Have swing
*/

var mooZoomMenu = new Class({
	
	Implements: [Events, Options],
	
	options: {
		imgClass		: 'zoommenu',
		imgOffString	: '_off.',
		imgOnString		: '_on.',
		zoomlevel		: 1.5,
		textLinkClass	: 'txtlink',
		effectDuration	: 300,
		towardTop		: 0.5,
		IEofsetY : 0,
		FFofsetX : 0,
    FFofsetY : 0 
	},
		
	initialize: function(options) {
		
		this.setOptions(options);
		
		this.txtmenu		= [];
		this.menu			= [];
		this.menuimg		= [];
		this.formerabs		= [];
		this.formerord		= [];
		this.largeur		= [];
		this.hauteur		= [];
		this.effect			= [];
		this.linkEffect		= [];
		this.preload		= new Asset.images([]);
		
		$$('img').each(function(el){

			if (el.getProperty('class').contains(this.options.imgClass)) {
			
			  
				this.absi		= el.getPosition().x;
				this.ord		= el.getPosition().y;
				
				if(this.options.IEofset != 0 && Browser.Engine.trident == true && Browser.Engine.version >= 5) {
          this.absi		= this.absi + this.options.IEofset; 
				  this.ord		= this.ord + this.options.IEofset;
        }
        if( (this.options.FFofsetX != 0 || this.options.FFofsetY != 0 ) && Browser.Engine.gecko == true) {
          this.absi		= this.absi + this.options.FFofsetX; 
				  this.ord		= this.ord + this.options.FFofsetY;
        }
				
				this.imgWidth	= el.getCoordinates().width;
				this.imgHeight	= el.getCoordinates().height;
				this.newLink	= el.getParent().clone().inject(document.body);
				this.newLink.set('title','');
				
				this.formerabs.push(this.absi);
				this.formerord.push(this.ord);
				this.largeur.push(this.imgWidth);
				this.hauteur.push(this.imgHeight);
				
				this.newLink.setStyles({
					'position'	: 'absolute',
					'top'		: this.ord,
					'left'		: this.absi,
					'z-index'	: 50
				});
				
				this.newImg		= this.newLink.getChildren()[0];
				this.newImg.set('alt', '');
				this.zoomLink	= new Fx.Morph(this.newLink, {duration: this.options.effectDuration, link: 'cancel'});
				this.zoomEffect	= new Fx.Morph(this.newImg, {duration: this.options.effectDuration, link: 'cancel'});
				this.newImgSrc	= this.newImg.getProperty('src').replace(this.options.imgOffString.toString(), this.options.imgOnString);
	
				this.menu.push(this.newLink);
				this.menuimg.push(this.newImg);
				this.effect.push(this.zoomEffect);
				this.linkEffect.push(this.zoomLink);
				this.preload.push(this.newImgSrc);
				
				el.setStyle('visibility', 'hidden');
			}
		
		}.bind(this));

		$$('a').each(function(lien) {
			if (lien.getProperty('class').contains(this.options.textLinkClass)) {
				this.txtmenu.include(lien);
			}
		}.bind(this));
		
		//et c'est parti...
		$$(this.menu).each(function(elem, j){
				
			elem.addEvents({
				'mouseenter': function(){
					this.getCoordonnees(j);
					this.zoomIn(j);
				}.bind(this),
					
				'mouseleave': function(){
					this.zoomOut(j);
				}.bind(this)
			});
				
		}.bind(this));
		
		//en cas de lien txt associés
		if (this.txtmenu != []){
			
			$$(this.txtmenu).each(function(ele, j){
				ele.addEvents({
					'mouseenter': function(){
						this.getCoordonnees(j);	
						this.zoomIn(j);
					}.bind(this),
					
					'mouseleave': function(){
						this.zoomOut(j);
					}.bind(this)
				});
			}.bind(this));
		}
		
	},
	
	getCoordonnees: function(j){
		
		this.formerSrc		= this.menuimg[j].getProperty('src');
		this.newsrc			= this.formerSrc.replace(this.options.imgOffString, this.options.imgOnString);		
		this.departx		= this.formerabs[j];
		this.departy		= this.formerord[j];
		this.formerWidth	= this.largeur[j]; 
		this.formerHeight	= this.hauteur[j];				
		this.imgZoomWidth	= this.formerWidth * this.options.zoomlevel;
		this.imgZoomHeight	= this.formerHeight * this.options.zoomlevel;
		this.zoomabs		= this.departx - ( (this.imgZoomWidth - this.formerWidth) / 2 ).toInt();
		this.zoomord		= this.departy - ( (this.imgZoomHeight - this.formerHeight) * this.options.towardTop );
		// this.inmClass   = this
	},
	
	zoomIn: function(j){
		
		this.menu[j].setStyle('z-index', 1000);
		
		this.menuimg[j].setProperties({
			'src'		: this.newsrc,
			'width'		: this.formerWidth,
			'height'	: this.formerHeight,
			'class'   : this.options.imgClass
			
		});
		
		
		
		this.linkEffect[j].start({
			'left'		: [this.departx, this.zoomabs],
			'top'		: [ this.departy, this.zoomord],
			'width'		: [this.formerWidth, this.imgZoomWidth],
			'height'	: [this.formerHeight, this.imgZoomHeight]
		});
		
		this.effect[j].start({
			'width'		: [this.formerWidth, this.imgZoomWidth],
			'height'	: [this.formerHeight, this.imgZoomHeight]
		});
	},
	
	zoomOut: function(j){
		
		this.menu[j].setStyle('z-index', 50);
		
		this.linkEffect[j].start({
			'left'		: this.departx,
			'top'		: this.departy,
			'width'		: this.formerWidth,
			'height'	: this.formerHeight
		});
		
		this.effect[j].start({
			'width'		: this.formerWidth,
			'height'	: this.formerHeight
		});
		
		this.menuimg[j].setProperty('src', this.formerSrc);
	}

});