var ProtoViewer=Class.create({
	initialize: function(elem,opt) {
		opt = opt || {};
		this.options = {
			largeImgWidth: 320,
			largeImgHeight: 240,
			smallImgWidth: 100,
			smallImgHeight: 80,
			useLightBox: true,
			lightBoxFolder: '',
			buttonLeft: '../img/btn_izqda.png',
			buttonRight: '../img/btn_drcha.png',
			buttonLeftWidth: 15,
			buttonRightWidth: 15,
			titlePosition: 'top',
			navigationPosition: 'bottom'
		};
		
		Object.extend(this.options, opt);
		
		this.elem = $(elem);
		if (!this.elem) return;
		
		this.animating=false;
		this.titleCont=$(this.elem.firstChild);
		this.largeImgCont=$(this.elem.childNodes[1]);
		this.smallImgCont=$(this.elem.lastChild);
		this.largeImgStack=this.largeImgCont.select("img");
		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";
		
		//Redimensionam i feim tot el que hagim de fer amb les imatges grans
		var primera=true;
		this.largeImgStack.each(function(elem){
			elem.style.width=this.options.largeImgWidth+"px";
			elem.style.height=this.options.largeImgHeight+"px";
			
			var d=new Element("div");
			
			if (primera) {
				primera=false;
				d.show();
			} else {
				d.hide();
			}
			
			if (this.options.useLightBox) {
				var a=new Element("a", {"rel":"lightbox[0]" });
				a.appendChild(elem);
				d.appendChild(a);
				
				var src=elem.getAttribute("src");
				var i=src.lastIndexOf("/");
				var name=src.substring(i);
				
				a.setAttribute("href",this.options.lightBoxFolder+name);
			} else {
				d.appendChild(elem);
			}
			
			this.largeImgCont.appendChild(d);
			
		}.bind(this));
		
		//en aquest punt cream la barra de navegació
		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) {
				this.show(img);
			}.bind(this,elem)
		}.bind(this));
		
		this.imgLeft.onclick=function() {
			this.moveLeft();
		}.bind(this);
		
		this.imgRight.onclick=function() {
			this.moveRight();
		}.bind(this);
		
		//miram ón ha d'anar el titol i el navegador
		if (this.options.titlePosition=="bottom") {
			this.elem.appendChild(this.titleCont);
		}
		
		if (this.options.navigationPosition=="top") {
			this.elem.insert({ 'top': this.smallImgCont });
		}
		
		this.elem.style.visibility='visible';
	},
	
	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) {
		//primer cercam la imatge que hem de posar:
		
		var childNodes=this.dViewMov.childNodes;
		
		for (var k=0;k<childNodes.length;k++) {
			if (childNodes[k].firstChild==img) {
				var kTrobat=k+1;
				break;
			}
		}
		
		if (kTrobat) {
			kTrobat--;
			for (var k=0;k<this.largeImgCont.childNodes.length;k++) {
				if (this.largeImgCont.childNodes[k].getAttribute("display")!="none") {
					new Effect.Fade(this.largeImgCont.childNodes[k], { duration: 0.4, from: 1, to: 0,
						afterFinish: function() {
							new Effect.Appear(this.largeImgCont.childNodes[kTrobat], { duration: 0.4, from: 0, to: 1 });			
						}.bind(this)
					});
				}
			}
		}
	}
});