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

var mooZoomMenu = new Class({
		
	options: {
		imgClass: "zoom",
		imgOffString: ".jpg",
		imgOnString: "_zoom.jpg",
		zoomlevel: 1.5,
		textLinkClass: "txtlink",
		effectDuration: 300,
		towardTop: 0.1
	},
		
	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.formerabs.push(this.absi);
				
				this.ord = el.getTop();
				this.formerord.push(this.ord);
				
				this.imgWidth = el.getSize().size.x;
				this.largeur.push(this.imgWidth);
				
				this.imgHeight = el.getSize().size.y;
				this.hauteur.push(this.imgHeight);
	
				this.newLink = el.getParent().clone();

				this.newImg = this.newLink.getChildren()[0];
				this.zoomEffect = new Fx.Styles(this.newImg, {duration: this.options.effectDuration, wait: false});

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

				this.newLink.injectTop(document.body);
	
				this.menu.push(this.newLink);
				this.menuimg.push(this.newImg);
				this.effect.push(this.zoomEffect);

				this.newImgSrc = this.newImg.getProperty('src').replace(this.options.imgOffString.toString(), this.options.imgOnString);
				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));
		
		//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.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);