/*
Script : moozoommenu.js
09/2007 - christopher wait aka virtualgadjo / chris at virtual-gadjo dot com

s'appuie sur mootools 1.1

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
*/



/*		MOOZOOM		*/

/* -- exemple dans une liste -- */


window.addEvent('domready', function(){
	var listmenu = new mooZoomMenu({ zoomlevel: 1.2, imgClass: "zoomimg" });
	//var tabmenu = new mooZoomMenu({ zoomlevel: 1.8, imgClass: "moozoom2", textLinkClass: 'textlink', towardTop: 0.9 });
});
window.addEvent('resize', function(){
	var listmenu = new mooZoomMenu({ zoomlevel: 1.2, imgClass: "zoomimg" });
	//var tabmenu = new mooZoomMenu({ zoomlevel: 1.8, imgClass: "moozoom2", textLinkClass: 'textlink', towardTop: 0.9 });
});

/*	/MOOZOOM		*/

var mooZoomMenu = new Class({
		
	options: {
		imgClass		: "zoommenu",
		imgOffString	: "_off.",
		imgOnString		: "_on.",
		zoomlevel		: 1.5,
		textLinkClass	: "txtlink",
		effectDuration	: 300,
		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.preload 	= new Asset.images([]);
		
		$$('img').each(function(el){

			if (el.getProperty('class').contains(this.options.imgClass)) {
			
				this.absi		= el.getLeft();
				
				this.absi_container		= $('header').getLeft();	
				this.absi = this.absi - this.absi_container;
				
				this.ord		= el.getTop();
				this.imgWidth	= el.getSize().size.x;
				this.imgHeight	= el.getSize().size.y;
				this.newLink	= el.getParent().clone();
				this.newImg		= this.newLink.getChildren()[0];
				this.newImgSrc	= this.newImg.getProperty('src').replace(this.options.imgOffString.toString(), this.options.imgOnString);
				this.zoomEffect	= new Fx.Styles(this.newImg, {duration: this.options.effectDuration, wait: false});
				
				this.formerabs.push(this.absi);
				this.formerord.push(this.ord);
				this.largeur.push(this.imgWidth);
				this.hauteur.push(this.imgHeight);

				this.newImg.setStyles({
					'top'		: this.ord,
					'left'		: this.absi,
					'position'	: 'absolute',
					'z-index'	: 10
				});

				this.newLink.inject($('header'));
					
				this.menu.push(this.newLink);
				this.menuimg.push(this.newImg);
				this.effect.push(this.zoomEffect);
				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.push(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));		
	},
	
	getCoordonnees: function(j){
		this.formerSrc		= this.menuimg[j].getProperty('src');
		this.newsrc			= this.formerSrc.replace(this.options.imgOffString.toString(), 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 );
		this.zoomord		= this.departy - ( (this.imgZoomHeight - this.formerHeight) * this.options.towardTop );
	},
	
	zoomIn: function(j){
		this.menuimg[j].setStyle('z-index', 1000);
		this.menuimg[j].setProperties({
			'src'		: this.newsrc,
			'width'		: this.formerWidth,
			'height'	: this.formerHeight
		});
		this.effect[j].start({
			'left'		: [this.departx, this.zoomabs],
			'top'		: [this.departy, this.zoomord],
			'width'		: [this.formerWidth, this.imgZoomWidth],
			'height'	: [this.formerHeight, this.imgZoomHeight]
		});
	},
	
	zoomOut: function(j){
		this.menuimg[j].setStyle('z-index', 50);
		this.effect[j].start({
			'left'		: this.departx,
			'top'		: this.departy,
			'width'		: this.formerWidth,
			'height'	: this.formerHeight
		});
		this.menuimg[j].setProperty('src', this.formerSrc);
	}

});

mooZoomMenu.implement(new Options, new Events);