/*////////////////////////////////////////////////////////////////////
Auteur : Marc ISIDORE
Date : 19 JANVIER 2009
Version  : 2.0.0
copyright : addonline
////////////////////////////////////////////////////////////////////*/
if(!Prototype){throw("requiere la librairie Prototype JavaScript framework, version 1.6.0");}
var allLoupe = new Object()
allLoupe.all = [];
allLoupe.add = function(element){this.all.push(element);}

var aoLoupe  = Class.create({
	version:"2.0.0",
	initialize: function(element) {	
		var defauts = {
			_cadreZoom:null,
			_imageZoom:null,
			_cadreOpaque:null,
			_cadreLoupe:null,
			_imageLoupe:null,
			_imageLoader:null,
			_isDisable:false,
			_decalage :{left:0,top:0},
			_timer:null,
			_tailleBordure:{left:0,top:0,bottom:0,right:0},
			_tailleGrandeLoupe:{width:0,height:0},
			_ratio:1,
			_position:{left:0,top:0},
			_positionOffset:{left:0,top:0},
			_sourisPosition:{x:0,y:0},
			_eventSourisMove:null
		};
		/*Paramètre modififiable via argument[1]*/
		var propriete = {
			_urlMoyenne:"",
			_urlGrande:"",
			_urlLoader:"images/loupe/ajax-loader.gif",
			_tailleLoader:{width:16,height:16},
			_cssCadreOpaque:{opacity:"0.5",backgroundColor:"#000000"},
			_tailleLoupe:{width:45,height:60},
			_tailleMoyenne:{width:275,height:367},
			_isTailleLoupePetite:true,
			_tailleGrande:{width:750,height:1000},
			_isTailleLoupePetite:true,
			_positionCadreZoom : "righttop",
			_cssCadreLoupe:{borderColor:"#999999",borderWidth:"1px",borderStyle:"solid"},
			_cssCadreZoom:{borderColor:"#cccccc",borderWidth:"1px",borderStyle:"solid"},
			_eventClick:null
		};
		this.image = $(element);
		if(arguments[1]._urlGrande==""){throw("Chemin du zoom obligatoire -> _urlGrande");}
		Object.extend(propriete, arguments[1] || {});
		if(this.image){
			var _cible =$(this.image.parentNode)
			_cible.setStyle({position:"relative",width:"100%",display:"block"});
			if(this._urlMoyenne==""){
				this._urlMoyenne = _cible.src;
			}
			this.image.setStyle({position:"relative",top:0,left:0,display:"inline"});
			if(propriete._cssCadreZoom.backgroundColor==undefined){
				propriete._cssCadreZoom.backgroundColor="#ffffff";
			}
			Object.extend(this, propriete);
			Object.extend(this, defauts);
			this._decalage.left = (document.documentElement.offsetWidth || document.body.offsetWidth)- document.viewport.getWidth()
			this._position = this.image.viewportOffset();
			this._positionOffset=this.image.positionedOffset();
			
			// Pb sous IE8, certain client (commercial), et comme on se moque de la taille de la bordure... 
			this._tailleBordure.top = 0 ; // Number(parseInt(this.image.getStyle("border-top-width")));
			this._tailleBordure.left = 0 ; // Number(parseInt(this.image.getStyle("border-left-width")));
			this._tailleBordure.bottom = 0 ; // Number(parseInt(this.image.getStyle("border-bottom-width")));
			this._tailleBordure.right = 0 ; // Number(parseInt(this.image.getStyle("border-right-width")));
			
			this._tailleGrandeLoupe = {width:this._tailleLoupe.width,height:this._tailleLoupe.height};
			this._recalculeRatioEtLoupes();						
			
			/*Cadre opaque*/
			this._cadreOpaque = $(document.createElement("div"));
			this._cadreOpaque.id = "_cadreOpaque"+allLoupe.all.length;
			this._cadreOpaque.setStyle(this._cssCadreOpaque);
			this._cadreOpaque.setStyle({position:"absolute",overflow:"hidden",display:"none",zIndex:"19",width:this._tailleMoyenne.width+"px",height:this._tailleMoyenne.height+"px"});
			
			/// ------------------------Image Cadre-------------------------------------------------
			this._imageLoupe= this.image.cloneNode(true);
			this._imageLoupe.src = this._urlMoyenne;
			this._imageLoupe.id = "_imageLoupe"+allLoupe.all.length;
			this._imageLoupe.setStyle({position:"absolute",borderWidth:"0px",top:"0px",left:"0px",display:"block",width:(this._tailleMoyenne.width)+"px",height:this._tailleMoyenne.height+"px"});
			if(this._eventClick){
				Event.observe(this._imageLoupe,"click",this._eventClick.bindAsEventListener(this)) ;
			}
			/// ------------------------Cadre Zoom-------------------------------------------------
			/*TODO Faire un systeme qui pointe sur in layer existant */
			this._cadreLoupe = $(document.createElement("div"));
			this._cadreLoupe.id = "_cadreLoupe"+allLoupe.all.length;
			this._cadreLoupe.setStyle({position:"absolute",top:"0px",left:"0px",overflow:"hidden",display:"none",zIndex:"200000"});
			this._cadreLoupe.setStyle({width:this._tailleLoupe.width+"px",height:this._tailleLoupe.height+"px"});
			
			this._cadreLoupe.setStyle(this._cssCadreLoupe);
			this._cadreLoupe.appendChild(this._imageLoupe);

			/// ------------------------Image zoom-------------------------------------------------
			this._imageZoom = $(document.createElement("img"));
			this._imageZoom.src = this._urlGrande;
			this._imageZoom.id = "_imageZoom"+allLoupe.all.length;
			this._imageZoom.setStyle({position:"absolute",display:"block",top:"0px",left:"0px",zIndex:2});
			
			/// ------------------------Image Loader-------------------------------------------------
			this._imageLoader = $(document.createElement("img"));
			this._imageLoader.src = this._urlLoader;
			this._imageLoader.id = "_imageLoader"+allLoupe.all.length;
			this._imageLoader.setStyle({position:"absolute",display:"block",top:"0px",left:"0px",zIndex:1});
			
			/// ----------------------------Cadre zoom---------------------------------------------
			this._cadreZoom = $("_cadreZoom"+allLoupe.all.length);
			if(!this._cadreZoom){
				this._cadreZoom = $(document.createElement("div"));
				this._cadreZoom.id = "_cadreZoom"+allLoupe.all.length;
			}
			this._cadreZoom.setStyle({position:"absolute",overflow:"hidden",
			display:"none",
			width:this._tailleGrandeLoupe.width+"px",height:this._tailleGrandeLoupe.height+"px",zIndex:"200001"})
			this._cadreZoom.setStyle(this._cssCadreZoom);
			this._cadreZoom.appendChild(this._imageLoader);
			this._cadreZoom.appendChild(this._imageZoom);
			
			
			/// -------------------------------------------------------------------------
			Event.observe(this.image,"mouseover",this.mouseover.bindAsEventListener(this)) ;
			this._eventSourisMove = this.mousemove.bindAsEventListener(this);
			
			/// -------------------------------------------------------------------------
			_cible.appendChild(this._cadreOpaque);
			_cible.appendChild(this._cadreLoupe);
			//_cible.appendChild(this._cadreZoom);
			
			/* FAIT CHARGE DANS BODY */
			var  _cadreZoom = this._cadreZoom;
			var indexLoupe = allLoupe.all.length
			Event.observe(window, 'load', function(event) { 
				if($("_cadreZoom"+indexLoupe)==null){
					document.body.appendChild(_cadreZoom);
				}
			}); 
			/*FIN*/
			
			allLoupe.add(this);
			this.margeHaute = 0;
			
			/* Utiliser pour charte en body negatif*/
			if(this._cadreOpaque.style.MozOpacity || Prototype.Browser.WebKit){
			 	this.margeHaute = parseInt($(document.body).getStyle("marginTop"));
		 	}
		}
	},
	initTailleBloc:function(){
		this._cadreOpaque.setStyle({width:this._tailleMoyenne.width+"px",height:this._tailleMoyenne.height+"px"});
		this._imageLoupe.setStyle({width:(this._tailleMoyenne.width)+"px",height:this._tailleMoyenne.height+"px"});
		this._cadreLoupe.setStyle({width:this._tailleLoupe.width+"px",height:this._tailleLoupe.height+"px"});
		this._cadreZoom.setStyle({width:this._tailleGrandeLoupe.width+"px",height:this._tailleGrandeLoupe.height+"px"});
		this._imageZoom.setStyle({width:this._tailleGrande.width+"px",height:this._tailleGrande.height+"px"});
	},
	initTailleMoyenne:function(width,height){
		this._tailleMoyenne.width=width;
		this._tailleMoyenne.height=height;		
	},
	initTailleGrande:function(width,height){
		this._tailleGrande.width=width;
		this._tailleGrande.height=height;
	},
	setTaille:function(tailleMoyenne,tailleGrande){
		this.initTailleMoyenne(tailleMoyenne.width,tailleMoyenne.height);
		this.initTailleGrande(tailleGrande.width,tailleGrande.height);
		this._recalculeRatioEtLoupes();
	},
	_recalculeRatioEtLoupes : function(){
		//alert ('recalcul du ratio');
		this._ratio = this._tailleMoyenne.width/this._tailleGrande.width;
		//alert ('recalcul des tailles de loupes');
		if(this._isTailleLoupePetite==true){
			this._tailleGrandeLoupe = {width:this._tailleLoupe.width/this._ratio,height:this._tailleLoupe.height/this._ratio}
		} else {
			this._tailleLoupe = {width:this._tailleGrandeLoupe.width*this._ratio,height:this._tailleGrandeLoupe.height*this._ratio}	
		}
		//alert ('_isTailleLoupePetite : ' + this._isTailleLoupePetite + '_ratio : ' + this._ratio + '\n_tailleLoupe.width : ' + this._tailleLoupe.width + '\n_tailleLoupe.height : ' + this._tailleLoupe.height + '\n_tailleGrandeLoupe.width : ' + this._tailleGrandeLoupe.width + '\n_tailleGrandeLoupe.height : ' + this._tailleGrandeLoupe.height);
		
	},
	createClipping : function(){
		var enPlus=0;
		if(Prototype.Browser.WebKit==true){
			/* Bug Safarie n'accepte la margin negative dans le body*/
			enPlus=parseInt(document.body.getStyle("marginTop"));
		}
		this._position = this.image.viewportOffset();
		this._position.top += this.margeHaute 
		var left = this._sourisPosition.x-this._position.left-Math.round(this._tailleLoupe.width/2)
		var top = this._sourisPosition.y-(this._position.top+enPlus)- Math.round(this._tailleLoupe.height/2)
		var leftMax = this._tailleMoyenne.width
		var topMax = this._tailleMoyenne.height
		
		if(top<0){top =0;}
		if(left<0){left = 0;}
		
		var width = left+this._tailleLoupe.width;
		var height = top+this._tailleLoupe.height;
		
		if(height> this._tailleMoyenne.height){
			top =  this._tailleMoyenne.height - this._tailleLoupe.height;
			height = this._tailleMoyenne.height;
		}
		if(width>this._tailleMoyenne.width){
			left = this._tailleMoyenne.width - this._tailleLoupe.width;
			width = this._tailleMoyenne.width;
		}
		
		return {top:top,width:width,height:height,left:left};
	},
	setPosImgZoom :function(clippping){
		var y = Math.round(clippping.top/this._ratio)
		var x = Math.round(clippping.left/this._ratio)
		return {left:x,top:y}
	},
	update:function(){
		var clip = this.createClipping();
		if(clip){
			this._cadreLoupe.setStyle({top:(this._positionOffset.top+clip.top+this._tailleBordure.top-1)+"px",
			left:(this._positionOffset.left+clip.left+this._tailleBordure.left-1)+"px"})
			this._imageLoupe.setStyle({top:-(clip.top)+"px",left:-(clip.left)+"px"});
			var positionImgZoom  =  this.setPosImgZoom(clip);
			this._imageZoom.setStyle ({left:"-"+positionImgZoom.left+"px", top:"-"+positionImgZoom.top+"px"})
		}
	},
	initPosition:function(){
		this._positionOffset=this.image.positionedOffset();
		this._positionOffsetGenerale=this.image.cumulativeOffset();
		var enPlus  = 0
		if(Prototype.Browser.IE){
			 enPlus = parseInt($(document.body).getStyle("marginTop"));
		}
		this._cadreOpaque.setStyle({left:Number(this._positionOffset.left+this._tailleBordure.left)+"px",top:Number(this._positionOffset.top+this._tailleBordure.top)+"px"});
		if(this._positionCadreZoom=="rightbottom"){
			this._cadreZoom.setStyle({left:(this._positionOffsetGenerale.left+this._tailleMoyenne.width+this._tailleBordure.left)+"px",
			top:(this._positionOffsetGenerale.top+this._tailleMoyenne.height-this._tailleGrandeLoupe.height+this._tailleBordure.top-1-enPlus)+"px"})
		}else if(this._positionCadreZoom=="righttop"){
			this._cadreZoom.setStyle({
			left:(this._positionOffsetGenerale.left+this._tailleMoyenne.width+this._tailleBordure.left)+"px",
			top:(this._positionOffsetGenerale.top-1+"px")})
		}else if(this._positionCadreZoom=="leftbottom"){
			this._cadreZoom.setStyle({
			left:(this._positionOffsetGenerale.left-this._tailleGrandeLoupe.width-this._tailleBordure.left-(1*2))+"px",
			top:(this._positionOffsetGenerale.top+this._tailleMoyenne.height-this._tailleGrandeLoupe.height+this._tailleBordure.top-(2*1+enPlus)+"px")})
		}else if(this._positionCadreZoom=="lefttop"){
			this._cadreZoom.setStyle({
			left:(this._positionOffsetGenerale.left-this._tailleGrandeLoupe.width-this._tailleBordure.left-(1*2))+"px",
			top:(this._positionOffsetGenerale.top-1)+"px"})
		}
		this.initPositionLoader();
	},
	initPositionLoader:function(){
		if(this._imageLoader){
			this._imageLoader.setStyle({
			left:((this._tailleGrandeLoupe.height-this._tailleLoader.height)/2)+"px",
			top:((this._tailleGrandeLoupe.width-this._tailleLoader.width)/2)+"px"})
			
			
		}
	},
	/*Test si je suis sur la zone*/
	isOnZone : function(){
		this._position = this.image.viewportOffset();
		this._position.top+=this.margeHaute;
		if( this._sourisPosition.x < Number(this._position.left+this._tailleBordure.left) || this._sourisPosition.x > Number(this._position.left+this._tailleMoyenne.width+this._tailleBordure.left)  
		  || this._sourisPosition.y < Number(this._position.top+this._tailleBordure.top) || this._sourisPosition.y > Number(this._position.top+this._tailleMoyenne.height+this._tailleBordure.top)){
			return  false;
		}
		return  true;
	},
	stopZoom : function(){
		Event.stopObserving(window.document,"mousemove",this._eventSourisMove);
		this._cadreOpaque.setStyle({display:"none"});
		this._cadreLoupe.setStyle({display:"none"});
		this._cadreZoom.setStyle({display:"none"});
	},
	showLayer : function(){
		this.initPosition();
		this._cadreOpaque.setStyle({display:"block"});
		this._cadreLoupe.setStyle({display:"block"});
		this._cadreZoom.setStyle({display:"block"});
	},
	mouseover : function(event){
			if(this._isDisable==false){
				this.mousemove(event);
				clearTimeout(this._timer)
				Event.observe(window.document,"mousemove",this._eventSourisMove);
				this.update();
				this.showLayer();
			}
	},
	mousemove : function(event){
		var scroll  = document.viewport.getScrollOffsets();
		this._sourisPosition.y = Event.pointerY(event)-scroll.top;
		this._sourisPosition.x = Event.pointerX(event)-scroll.left;
		if(this.isOnZone()){
			this.update();
		}else{
			var t = this;
			this._timer = setTimeout(function(){t.stopZoom ()},5)
		}
	},
	change :function(urlMoyenne,urlGrande){
		this._urlMoyenne=urlMoyenne;
		this._urlGrande=urlGrande;
		this.image.src =this._urlMoyenne
		this._imageLoupe.src =this._urlMoyenne
		this._imageZoom.src = this._urlGrande;
		this._imageZoom.setStyle({display:"none"});
		var loader  = new Image();
		loader.onload = function(event){
			this._imageZoom.setStyle({display:"block"});
		}.bind(this);
		loader.src= urlGrande;
		
		
	},
	desactiveZoom : function(){
		this._isDisable= true;
		this.stopZoom();
	},
	activeZoom : function(event){
		this._isDisable= false;
	}
});