// JavaScript Document


var SwapImages = new Class({
	initialize : function () {
		/*
			6) Swaper le lien de la vignette avec l'ancienne
			7)* Changer le lien de zoom
		*/

		this.activeImage = $('image');
		
		if (this.activeImage) { 
			this.default_src = $('image').getProperty('src'); 
		}
		
		this.zoom_status = 0;
		
		this.els = $$('.swap');
		if(this.els.length > 0){
			this.els.each(function(el){
				
				if (el.hasClass('checkzoom')) { 
					this.default_zoom = el.getProperty('href'); 				
				}
				
				if (this.default_zoom.test(/^\/data\/catalog\/zoom\/$/)) {
					el.setStyle('cursor','default');
					el.addEvent('click', function(e){
						new Event(e).stop();
					}.bind(this))
				} 
				else {
					el.addEvent('click', function(e){
						new Event(e).stop();
						this._showImg(el);
					}.bind(this))
				}	
			}, this);
			
			$('imgtd').setStyles({
				'width' : $('image').getStyle('width'),
				'height' : $('image').getStyle('height')
			});
		}
	},

	_showImg : function(el) {
		//On lance la deco
		if ($('image').getProperty('src') == el.getProperty('href') ) return false;
		this._positionLoader('in');
		var fx = new Fx.Tween($('image'), {
			duration: 200, 
			ignore : false, 
			transition: Fx.Transitions.linear, 
			onComplete : function(){
				this.image = new Image;
				this.image.src = el.href;
				this.image.onload = function () {
					var t = this;
					t._positionLoader('out');
					t._swapImages(el);
					this._checkZoom(el);
				}.bind(this);
			}.bind(this)
		})
		
		fx.start('opacity',1, 0.1);
	},

	_checkZoom : function (el) {
 		if (el.hasClass('checkzoom') && this.zoom_status == 1) {
			$$('.checkzoom').each(function(el){
				el.setProperty('href', this.default_zoom);
			}, this);
			
			this.zoom_status = 0;
		}  else {
			$$('.checkzoom').each(function(el){
				el.setProperty('href', this.default_src);
			}, this);
			
			this.zoom_status = 1;
		}	
	},

	_swapImages : function(el) {
		var url = el.getProperty('href');
		//On fini le fade de la première
		
		var fx = new Fx.Tween($('image'), {
			duration: 200,
			transition: Fx.Transitions.linear, 
			onComplete : function(){
				//On change la taille de $image
				var myEffects = new Fx.Morph('imgtd', {
					duration: 500,
					transition: Fx.Transitions.quartOut, 
					onStart : function(){
					//desactiver le lien et activer l'ancien
						$('image').destroy();
					}, 
					onComplete : function () {
						//On affiche la seconde image
						var myImage = new Element('img', {'src' : url});
						myImage.inject($('imgtd')).setStyle('opacity', '0').setProperty('id', 'image');
						myImage.fade(1);

					}
				});
				
				myEffects.start({
					height: this.image.height,
					width: this.image.width
				});
			}.bind(this)
		});
		
		fx.start('opacity',0.1, 0);		
	},
	
	_positionLoader : function (way) {
		var image = $('image');
		var loader = $('image_loader');
		loader.setStyle('position', 'absolute');
		
		if (way == 'in') {
			$('image_loader').setStyles({
				'left' : image.getCoordinates().width/2 + image.getCoordinates().left - loader.getCoordinates().width/2,
				'top' : image.getCoordinates().height/2 + image.getCoordinates().top - loader.getCoordinates().height/2
			});
			$('image_loader').fade(1)
		} else {
			$('image_loader').fade(0)
		}
	}
});



var sswapIE = new Class({
	initialize : function () {
		var elselect = $$('.swap');
		var elcurrent = $('image');
		if(elselect.length > 0)
		{
			elselect.each(function(el){
				el.addEvent('click', function(e){
					new Event(e).stop();
					this._imgProc(el , elcurrent);
				}.bind(this));
			}, this);
				elcurrent.addEvent('click', function(e){
					new Event(e).stop();
					var cciu = elcurrent.src
					elcurrent.setProperty('src', cciu);
					}.bind(this))
		}
	},

	_imgProc : function(el , el2) {
		var urlSelect = el.href;
		var urlCurrent = el2.src;
		if(urlSelect == urlCurrent) return false;
		el2.setProperty('src', urlSelect);
		el.setProperty('display', 'none');
		
	}
	
});



window.addEvents({
	'load' : function() {
		if(Browser.Engine.name == 'trident'){
			new sswapIE();
		}
		else{
			new SwapImages();
		}
	}
});