var ProtoZoom=Class.create({
	initialize: function(elem,opt) {
		opt = opt || {};
		this.options = {
			largeImgCont: null,
			smallImgCont: null,
			largeImgWidth: 320,
			largeImgHeight: 258,
			smallImgWidth: 100,
			smallImgHeight: 80,
			buttonLeft: '../img/pagMenos.png',
			buttonRight: '../img/pagMas.png',
			loadingImg: '../img/loading.gif',
			zoomInImage: '../img/zoomIn.png',
			zoomOutImage: '../img/zoomOut.png',
			largeImageFolder: '../../admin/uploads/fotos/',
			mediumImageFolder: '../../admin/uploads/medthumbs/',
			buttonLeftWidth: 15,
			buttonRightWidth: 15
			
		};
		
		Object.extend(this.options, opt);
		
		this.elem = $(elem);
		if (!this.elem) return;
		
		this.animating=false;
		this.fentZoom=false;
		
		if (this.options.largeImgCont) {
			this.largeImgCont=$(this.options.largeImgCont);
		} else {
			this.largeImgCont=$(this.elem.firstChild);
		}
		
		if (this.options.smallImgCont) {
			this.smallImgCont=$(this.options.smallImgCont);
		} else {
			this.smallImgCont=$(this.elem.lastChild);
		}
	
		this.smallImgStack=this.smallImgCont.select("img");
		
		this.largeImgCont.style.width=this.options.largeImgWidth+"px";
		this.largeImgCont.style.height=this.options.largeImgHeight+"px";
		this.smallImgCont.style.width=this.options.largeImgWidth+"px";
		this.smallImgCont.style.height=this.options.smallImgHeight+"px";
		
		this.dLeft=new Element("div", { "style":"float:left;" });
		this.dRight=new Element("div", { "style":"float:right;" });
		this.dView=new Element("div", { "style":"float:left; overflow: hidden; position: relative;" });
		
		this.smallImgCont.appendChild(this.dLeft);
		this.smallImgCont.appendChild(this.dView);
		this.smallImgCont.appendChild(this.dRight);
		
		this.imgLeft=new Element("img", { 'src': this.options.buttonLeft });
		this.imgRight=new Element("img", { 'src': this.options.buttonRight });
		this.imgLeft.style.cursor="pointer";
		this.imgRight.style.cursor="pointer";
		
		this.dLeft.appendChild(this.imgLeft);
		this.dRight.appendChild(this.imgRight);
		
		//calculam tamanys
		var btnH=this.dLeft.getHeight();
		var padTopBtn=parseInt((this.options.smallImgHeight-btnH)/2);
		this.dLeft.style.paddingTop=padTopBtn+"px";
		this.dLeft.style.textAlign="center";
		this.dLeft.style.width=this.options.buttonLeftWidth+"px";
		
		this.dRight.style.paddingTop=padTopBtn+"px";
		this.dRight.style.textAlign="center";
		this.dRight.style.width=this.options.buttonRightWidth+"px";
		
		var viewerWidth=this.options.largeImgWidth-this.options.buttonLeftWidth-this.options.buttonRightWidth;
		this.dView.style.width=viewerWidth+"px";
		this.dView.style.height=this.options.smallImgHeight+"px";
		
		//ara calcularem la separació que hi ha d'haver entre les imatges petites
		//primer miram quantes imatges petites caben dins el visor
		this.imgVis=parseInt(viewerWidth/this.options.smallImgWidth);
		this.totalImg=this.smallImgStack.length;
		this.actualImg=1;
		//ara calculam la separació
		this.sepImg=viewerWidth/this.imgVis;
		this.sepImg=this.sepImg-this.options.smallImgWidth;
		this.sepImg=parseInt(this.sepImg/2);
		
		//ara calcularem el tamayn del div que es desplaçarà
		this.totalWidth=((this.sepImg*2)+this.options.smallImgWidth)*this.totalImg;
		
		this.dViewMov=new Element("div", { "style":"position: relative; width:"+this.totalWidth+"px;" });
		this.dView.appendChild(this.dViewMov);
		
		//Redimensionam i feim tot el que hagim de fer amb les imatges petites
		var primera=true;
		this.smallImgStack.each(function(elem){
			var d=new Element("div", { "style":"float:left;" });
			d.style.paddingLeft=this.sepImg+"px";
			d.style.paddingRight=this.sepImg+"px";
			elem.style.width=this.options.smallImgWidth+"px";
			elem.style.height=this.options.smallImgHeight+"px";
			elem.style.cursor="pointer";
			d.appendChild(elem);
			this.dViewMov.appendChild(d);
			elem.onclick=function(img) {
				if (this.fentZoom) {
					var i=this.largeImgCont.firstChild.firstChild;
					this.amagaZoom(i,img);
				} else {
					this.show(img);
				}
			}.bind(this,elem)
		}.bind(this));
		
		this.imgLeft.onclick=function() {
			this.moveLeft();
		}.bind(this);
		
		this.imgRight.onclick=function() {
			this.moveRight();
		}.bind(this);
		
		//posam la lupa per fer el zoom
		var dTapa=new Element("div", { "style":"text-align:right; width:"+this.options.largeImgWidth+"px;" });
		this.largeImgCont.insert({top:dTapa});
		var img=new Element("img", { "src": this.options.zoomInImage, "style":"cursor:pointer;" });
		
		img.onclick=function(img) {
			if (this.fentZoom) {
				this.amagaZoom(img);
			} else {
				this.mostraZoom(img);
			}
		}.bind(this,img);
		
		dTapa.appendChild(img);
		
	},
	
	moveLeft: function() {
		if (this.actualImg==1) {
			return;
		}
		
		if (this.animating==false) {
			this.animating=true;
			new Effect.Fade(this.dViewMov, { duration: 0.3, from:1, to: 0.5, 
							afterFinish: function() { 
								var desp=(this.sepImg*2)+this.options.smallImgWidth;
								
								new Effect.Move(this.dViewMov, { mode: 'relative', duration:0.4, x: desp, 
									afterFinish: function() {
										new Effect.Appear(this.dViewMov, { duration: 0.3, from: 0.5, to: 1,
											afterFinish:function() {
												this.animating=false;
											}.bind(this)
										 });
									}.bind(this)
								});													
							}.bind(this)
						});
						
			this.actualImg--;
		}
	},
	
	moveRight: function() {
		if ((this.actualImg+this.imgVis)>this.totalImg) {
			return;
		}
		
		if (this.animating==false) {
			this.animating=true;
			new Effect.Fade(this.dViewMov, { duration: 0.3, from:1, to: 0.5, 
							afterFinish: function() { 
								var desp=(this.sepImg*2)+this.options.smallImgWidth;
								desp=-1*desp;
								
								new Effect.Move(this.dViewMov, { mode: 'relative', duration:0.4, x: desp, 
									afterFinish: function() {
										new Effect.Appear(this.dViewMov, { duration: 0.3, from: 0.5, to: 1,
											afterFinish: function() {
												this.animating=false;
											}.bind(this)
										 });
									}.bind(this)
								});													
							}.bind(this)
						});
						
			this.actualImg++;
		}
	},
	
	show: function(img) {
		var arrSrc=img.src.split("/");
		imgName=arrSrc[arrSrc.length-1];
		
		//var dTapa=new Element("div", { "style":"position: absolute; z-index:100; width:"+this.options.largeImgWidth+"px; height:"+this.options.largeImgHeight+"px; background-color: #ffffff; margin-top: -"+this.options.largeImgHeight+"px;" });
		var dTapa=new Element("div", { "style":"position: absolute; z-index:100; width:"+this.options.largeImgWidth+"px; height:"+this.options.largeImgHeight+"px; background-color: #ffffff;" });
		this.largeImgCont.insert({ top: dTapa });
		var img=new Element("img", { "src": this.options.loadingImg });
		dTapa.appendChild(img);
		
		var img2=new Image();
		
		img2.onload=function(elem) {	
			elem.parentNode.removeChild(elem);
			this.largeImgCont.childNodes[1].src=this.options.mediumImageFolder+imgName;
		}.bind(this,dTapa);
		
		img2.src=this.options.mediumImageFolder+imgName;
		
		/*
		this.largeImgCont.firstChild.onload=function() {
			dTapa.parentNode.removeChild(dTapa);
		}.bind(dTapa);
		
		
		*/
	},
	
	mostraZoom: function(i) {
		i.src=this.options.zoomOutImage;
		this.fentZoom=true;
		var dZoom=new Element("div", { "style":"position: absolute;" });
		
		var img=this.largeImgCont.childNodes[1];
		img=$(img);
		
		var totH=img.getHeight();
		var totW=img.getWidth();
		
		//dZoom.style.marginTop="-"+totH+"px";
		dZoom.style.width="0px";
		dZoom.style.overflow="hidden";
		dZoom.style.marginLeft=totW+"px";
		dZoom.style.height=totH+"px";
		dZoom.style.backgroundColor="#ffffff";
		dZoom.style.border="1px solid #cccccc";
		this.largeImgCont.firstChild.insert({ after: dZoom });
		
		var imgMed=this.largeImgCont.lastChild;
		var arrSrc=imgMed.src.split("/");
		imgName=arrSrc[arrSrc.length-1];
		
		var imgLarge=new Element("img", {"src": this.options.largeImageFolder+imgName });
		dZoom.appendChild(imgLarge);
		
		imgLarge.onload=function(elem) {
			var w=elem.getWidth();
			var h=elem.getHeight();
			
			elem.style.marginTop=-parseInt(h/4)+"px";
			elem.style.marginLeft=-parseInt(w/4)+"px";
		
			new Effect.Morph(dZoom, { "style":"width: 320px", duration: 1 });
			
			var img=this.largeImgCont.childNodes[2];
			img=$(img);
		
			var height=img.getHeight();
			var width=img.getWidth();
			
			var dCuadroCont=new Element("div", {"style": "position: absolute; z-index: 1000; width: "+
				width+"px; height:"+
				height+"px; margin-left: 0px;" });
			
			this.largeImgCont.firstChild.nextSibling.insert({ after: dCuadroCont });
			
			var dCuadro=new Element("div", {"style":"background-color: #ffffff; position: relative; width: "+
				parseInt(width/2)+"px; height: "+parseInt(height/2)+"px; left:"+parseInt(width/4)+"px; top: "+parseInt(height/4)+"px; cursor: pointer;" });
			
			dCuadro.setOpacity(0.5);
			
			dCuadroCont.appendChild(dCuadro);
			
			new Draggable(dCuadro,{snap: function(x,y,draggable) {
			  function constrain(n, lower, upper) {
			   if (n > upper) return upper;
			    else if (n < lower) return lower;
			    else return n-(n%1);
			   }

			   element_dimensions = Element.getDimensions(draggable.element);

			   parent_dimensions = Element.getDimensions(draggable.element.parentNode);    

			   return[
			   constrain(x, 0, parent_dimensions.width - element_dimensions.width),
			   constrain(y, 0, parent_dimensions.height - element_dimensions.height)];
			  },
			  onDrag: function(draggable){
			  	var dr=$(draggable.element);
			  	var top=parseInt(dr.getStyle("top"));
			  	var left=parseInt(dr.getStyle("left"));
			  	var bImg=this.largeImgCont.childNodes[1].firstChild;
			  	bImg=$(bImg);
			  	
			  	var bW=bImg.getWidth();
			  	var bH=bImg.getHeight();
			  	
			  	var sImg=this.largeImgCont.childNodes[3];
			  	sImg=$(sImg);
			  	
			  	var sW=sImg.getWidth();
			  	var sH=sImg.getHeight();
			  	
			  	dW=bW/sW;
			  	dH=bH/sH;
			  	
			  	bImg.style.marginLeft=(-1*dH*left)+"px";
			  	bImg.style.marginTop=(-1*dW*top)+"px";
			  }.bind(this)
			 });
			
		}.bind(this,imgLarge);
		
	},
	
	amagaZoom: function(i,img) {
		i.src=this.options.zoomInImage;
		this.fentZoom=false;
		var dZoom=this.largeImgCont.childNodes[1]
		
		new Effect.Morph( dZoom, { "style":"width:0px", duration: 1,
			afterFinish: function(dZoom) {
				dZoom.parentNode.removeChild(dZoom.nextSibling);
				dZoom.parentNode.removeChild(dZoom);
				if (img) {
					this.show(img);
				}
			}.bind(this, dZoom) 
		});
	}
});