var ProtoCarousel=Class.create({
	initialize: function(elem,opt) {
		opt = opt || {};
		this.options = {
			itemWidth: 100,
			itemHeight: 80,
			buttonLeft: '../img/btn_izqda.png',
			buttonRight: '../img/btn_drcha.png',
			buttonLeftWidth: 15,
			buttonRightWidth: 15
		};
		
		Object.extend(this.options, opt);
		$('clsGalStyle').style.backgroundColor="white";
		$('clsGalStyle').style.height="148px";
		
		this.elem = $(elem);
		if (!this.elem) return;
		
		this.animating=false;
		
		this.totalWidth=elem.getWidth();
		
		this.childStack=this.elem.childElements();
		
		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.dClear=new Element("div", { "style":"clear:both;" });
		
		this.elem.appendChild(this.dLeft);
		this.elem.appendChild(this.dView);
		this.elem.appendChild(this.dRight);
		this.elem.appendChild(this.dClear);
		
		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);
		
		var btnH=this.dLeft.getHeight();
		var padTopBtn=parseInt((this.options.itemHeight-btnH)/2);
		this.dLeft.style.paddingTop="54px";
		this.dLeft.style.textAlign="center";
		this.dLeft.style.width=this.options.buttonLeftWidth+"px";
		
		this.dRight.style.paddingTop="54px";
		this.dRight.style.textAlign="center";
		this.dRight.style.width=this.options.buttonRightWidth+"px";
		
		var viewerWidth=this.totalWidth-this.options.buttonLeftWidth-this.options.buttonRightWidth;
		this.dView.style.width=viewerWidth+"px";
		this.dView.style.height=this.options.itemHeight+"px";
		
		this.imgVis=parseInt(viewerWidth/this.options.itemWidth);
		this.totalImg=this.childStack.length;
		this.actualImg=1;
		
		this.sepImg=viewerWidth/this.imgVis;
		this.sepImg=this.sepImg-this.options.itemWidth;
		this.sepImg=parseInt(this.sepImg/2);
		
		//ara calcularem el tamayn del div que es desplaçarà
		this.totalWidth=((this.sepImg*2)+this.options.itemWidth)*this.totalImg;
		
		this.dViewMov=new Element("div", { "style":"position: relative; width:"+this.totalWidth+"px;" });
		this.dView.appendChild(this.dViewMov);
		
		var primera=true;
		
		this.childStack.each(function(elem){
			var d=new Element("div", { "style":"float:left;" });
			d.style.paddingLeft=this.sepImg+"px";
			d.style.paddingRight=this.sepImg+"px";
			d.style.width=this.options.itemWidth+"px";
			d.style.height=this.options.itemHeight+"px";
			d.style.cursor="pointer";
			d.appendChild(elem);
			this.dViewMov.appendChild(d);
		}.bind(this));
		
		this.imgLeft.onclick=function() {
			this.moveLeft();
		}.bind(this);
		
		this.imgRight.onclick=function() {
			this.moveRight();
		}.bind(this);
		
		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.itemWidth;
								
								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.itemWidth;
								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++;
		}
	}
});