/*  
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		: 'test',
		imgOffString	: '_off.',
		imgOnString		: '_on.',
		zoomlevel		: 1.5,
		textLinkClass	: 'txtlink',
		effectDuration	: 700,
		towardTop		: 0.5
	},
		
	initialize: function(options) {
		
		this.setOptions(options);
		
		this.txtmenu		= [];
		this.menu			= [];
		this.menuimg		= [];
		this.formerabs		= [];
		this.formerord		= [];
		this.largeur		= [];
		this.hauteur		= [];
		this.effect			= [];
		this.effect2		= [];
		this.linkEffect		= [];
		this.infobox		= [];
		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;
				this.imgWidth	= el.getCoordinates().width;
				this.imgHeight	= el.getCoordinates().height;
				this.newLink	= el.getParent().clone(true,true).inject(document.body, 'top'); //div.bild
				this.newInfo	= this.newLink.getElement('div.info'); //div.info	
				this.newInfo.setOpacity(0); //unsichtbar setzen				
				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()[1];
				this.zoomLink	= new Fx.Morph(this.newLink, {transition: Fx.Transitions.Back.easeOut, duration: this.options.effectDuration, link: 'cancel'});
				this.zoomEffect	= new Fx.Morph(this.newImg, {transition: Fx.Transitions.Back.easeOut, duration: this.options.effectDuration, link: 'cancel'});				
				this.infoEffect	= new Fx.Morph(this.newInfo, {transition: Fx.Transitions.Quart.easeInOut, duration: 500, 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.effect2.push(this.infoEffect);
				this.linkEffect.push(this.zoomLink);
				this.preload.push(this.newImgSrc);
				this.infobox.push(this.newInfo);
				el.setStyle('visibility', 'hidden');
			}
		
		}.bind(this));

		$$('a').each(function(lien) {
			if (lien.getProperty('class').contains(this.options.textLinkClass)) {
				this.txtmenu.include(lien);
			}
		}.bind(this));
		
		$$('#galerie div.info').each(function(el_info){
			el_info.dispose();
		});
		$$('#galerie a.details').each(function(ela_info){
			ela_info.dispose();
		});
		
		//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);
					//infobox[j].setStyle('visibility', 'hidden');						
				}.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 );
	},
	
	zoomIn: function(j){
		
		this.menu[j].setStyle('z-index', 500);
		this.menuimg[j].setProperties({
			'src'		: this.newsrc,
			'width'		: this.formerWidth,
			'height'	: this.formerHeight
		});
		
		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]
		});
		// this.newInfo.setStyle('display','block');
		this.effect2[j].cancel();
		this.effect2[j].start.delay(0, this.effect2[j], {
			'opacity': 1,
			'bottom': -10
		})
	},
	
	zoomOut: function(j){
		this.effect2.each(function(el,j){
			el.cancel();
		});
		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.infobox[j].setOpacity(0);
		this.infobox[j].setStyle('bottom','-1800px');		
		this.menuimg[j].setProperty('src', this.formerSrc);
	}

});