var SpaceGallery = Class.create({
	//inicialitzam la classe
	initialize: function(elem, opt) {
		
		opt = opt || {};
		this.options = {
			ratio: 0.3,
			perspective: 10,
			borderWidth: 0,
			borderColor: "#ffffff",
			duration: 1.0,
			thumbs: true,
			useReflection: false,
			carousel: 'horizontal_carousel',
			onclick: false
		};
		Object.extend(this.options, opt);
	
		this.elem = $(elem);
		if (!this.elem)
			return;
			
		this.elem.setStyle({
			overflow: "hidden",
			position: "relative"
		});
		
		this.imageStack = this.elem.select('img');
		this.currPos=0;
		this.direccio=0;
		this.dest=0;
		
		if (this.options.useReflection) {
			this.options.borderWidth=0;
		}
		
		this.imageStack.each(function(elem){
			elem.setStyle({
				border: this.options.borderWidth+"px solid "+this.options.borderColor
			});
			
		}.bind(this));
		
		
		this.imageStack[0].setStyle({ cursor: 'pointer' });
		
		//redimensionam les imatges
		var i=0;
		var width;
		var height;
		var minWidth;
		var minHeight;
		var fWidth;
		var fHeight;
		
		this.imageStack.each(function(elem){
			
			if (i<5) {
				if (i==0) {
					width=parseFloat(elem.width);
					height=parseFloat(elem.height);
					width=width*this.options.ratio;
					height=height*this.options.ratio;
					minWidth=width/2;
					minHeight=height/2;
					fWidth=(width-minWidth)/4;
					fHeight=(height-minHeight)/4;
				} else {
					width=width-fWidth;
					height=height-fHeight;
				}
				
				elem.setStyle({
					width: width+"px",
					height: height+"px",
					position: 'absolute',
					left: '50%',
					marginLeft: -(width/2)+"px",
					zIndex: 1000-i,
					marginTop: ((5-i)*this.options.perspective)+"px",
					opacity: 1-(i/5)
				});
			
			} else {
				elem.setStyle({
					position: 'absolute',
					opacity: 0
				});
			}
			i++;
			
			
		}.bind(this));
		
		//Aficam les posicions dins arrays
		
		this.arrTop=new Array();
		this.arrLeft=new Array();
		this.arrWidth=new Array();
		this.arrHeight=new Array();
		i=0;
		this.imageStack.each(function(elImg){
			
			if (i<5) {
				this.arrTop.push(parseFloat(elImg.getStyle('margin-top')));
				this.arrLeft.push(parseFloat(elImg.getStyle('margin-left')));
				this.arrWidth.push(elImg.getWidth());
				this.arrHeight.push(elImg.getHeight());
			}
			i++;
				
		}.bind(this));
		
		this.stack=this.imageStack;
		
		this.stack.each(function(elem){
			elem.identify();
			elem.observe('click', this.handleClick.bind(this));
        }.bind(this));
        this.divThumbs=document.createElement('div');
        this.elem.appendChild(this.divThumbs);
        var top=parseFloat(this.stack[0].getStyle('margin-top'));
        top=top+parseFloat(this.stack[0].getStyle('height'));
        top=top+10;
        	
        this.divThumbs.style.marginTop=top+"px";
        this.divThumbs.style.marginLeft='44px';
        this.divThumbs.style.zIndex="2000"
        
        if (this.options.thumbs) {
        	//cream els thums a la part d'abaix
        	var dHorCar=document.createElement('div');
        	dHorCar.id=this.options.carousel,
        	this.divThumbs.appendChild(dHorCar);
        	
        	var dPrev=document.createElement('div');
        	dPrev.className='previous_button';
        	var dCont=document.createElement('div');
        	dCont.className='container';
        	var dNext=document.createElement('div');
        	dNext.className='next_button';
        	this.u=document.createElement('ul');
        	
        	dHorCar.appendChild(dPrev);
        	dHorCar.appendChild(dCont);
        	dHorCar.appendChild(dNext);
        	
        	dCont.appendChild(this.u);
        	
        	var j=0;
        	
        	this.imageStack.each(function(elem){
        		var li=document.createElement('li');
        		
        		var i=new Element('img');
        		i.src=elem.src;
        		i.setStyle({
        			width: '80px',
        			height: '60px',
        			margin: '0px 0px',
        			cursor: 'pointer'
        		});
        		
        		i.setAttribute('pos',j);
        		
        		
        		i.observe('click', this.handleClick2.bind(this));
        		
        		li.appendChild(i);
        		this.u.appendChild(li);
        		
        		j++;
        	}.bind(this));
        	
        	
        	new UI.Carousel(this.options.carousel);
        	
        	/*new PeriodicalExecuter(function(pe) {
  				
    			pe.stop();
			}.bind(this), 2); */
        	
        }
	},
	
	
	/* -------------------------------------------
		Aquesta funció s'encarrega de deshabilitar
		els possibles links que hi hagi aficats
		dins el div contendor
	   ------------------------------------------- */
	/*
	disableLinks: function(){
		this.elem.select("a").each(function(a){
			a.observe('click', function(e) {
				e.preventDefault();
			});
		});
	},
	*/
	handleClick2: function(e) {
		var dest=e.target.getAttribute('pos');
		this.dest=dest;
		//comprovam si hem d'anar envant o enrere
		var dif=dest-this.currPos;
		
		if (dif==0) {
			return;
		}
		
		if (dif<0) {
			var invers=true;
			dif=-1*dif;
		} else {
			var invers=false;
		}
		
		if (dif<(this.stack.size()-1)/2) {
			this.direccio=1;
			
			if (invers) {
				this.direccio=2;
			}
		} else {
			this.direccio=2;
			
			if (invers) {
				this.direccio=1;
			}
		}
		
		if (this.direccio==1) {
			this.animaEnvant();
		} else {
			this.animaEnrere();
		}
		
	},
	
	handleClick: function(e){
		if (this.disableClick) {
			return;
		}
		
		if (this.options.onclick) {
			return;
		}
		
		if ((e.target==this.stack[0]) || (e.target==this.stack[this.stack.size()-1])){
			this.direccio=0;
			//en aquest punt cercam ón s'ha fet clic a la imatge, a la part de d'alt o a la part de baix
			if (Prototype.Browser.IE) {
				var element=e.target;
				var offset=element.cumulativeOffset();
				var dTop=offset[1];
				var top=e.clientY-dTop;
			} else {
				var top=e.layerY;
			}
			
			if (top>parseFloat(this.stack[0].getStyle('height'))/2) {
		
				this.animaEnvant();

			} else {
				
				this.animaEnrere();
			}
			
			
		}
	},
	
	rearrangeStackBackwards: function() {
		this.currPos=this.currPos-1;
		
		if (this.currPos<0) {
			this.currPos=this.stack.size()-1;
		}
	
		stack=new Array();
		
		this.stack[0].setStyle({
			zIndex: 1000
		});
		
		stack.push(this.stack[this.stack.size()-1]);
		var i=0;
		this.stack.each(function(elem){
			
			if (i!=this.stack.size()-1) {
				stack.push(elem);
				
				elem.setStyle({
					zIndex: 999-i
				});
			}
			
			i++;
		}.bind(this));
		
		this.stack=stack;
		
		this.actualitzaCursor();
	},
	
	rearrangeStack: function() {
		this.currPos=this.currPos+1;
		
		if (this.currPos>this.stack.size()-1) {
			this.currPos=0;
		}
		
		
		//reordenam la pila d'imatges per a que la primera passi a ser la darrera
		//i les altres avancin una posició
		
		stack=new Array();
		var i=0;
		
		this.stack.each(function(elem){
			if (i>0) {
				stack.push(elem);
			}
			
			i++;
		});
		
		stack.push(this.stack[0]);
		this.stack=stack;
		var j=0;
		
		this.stack.each(function(elem){
			/*
			la següent condició és per a que el z-index de la foto que passa al darrer lloc
			es quedi tal com está perque hem de tenir en compte que aquesta funció s'executa
			quan encara les imatges s'estan animant. Si no feim això la imatge que ha de passar
			a ser la primera es superposa tot d'una a la que està desaparesquent i crea un efecte lleig
			*/ 
			
			if (j!=this.stack.size()-1) {
				elem.setStyle({
					zIndex: 1000-j
				});
			}
			j++;	
		});
		
		this.actualitzaCursor();
	},
	
	actualitzaCursor: function() {
		this.stack.each(function(elem){
			elem.setStyle({ cursor: 'normal' });
		});
		
		this.stack[0].setStyle({ cursor: 'pointer' });
	},
	
	animaEnvant: function() {
	
		if (this.direccio==0) {
			var dur=this.options.duration;
		} else {
			var dur=this.options.duration/5;
		}
	
			new Effect.Opacity(this.stack[0],{from: 1.0, to: 0, duration: dur, beforeStart: function() { this.disableClick=true; }.bind(this)});
				/*
				new Effect.Morph(this.stack[0], {
					style: 'margin-top:'+(this.arrTop[0]+100)+'px; margin-left:'+(this.arrLeft[0]-100)+"px; width:"+(this.arrWidth[0]+200)+"px; height:"+(this.arrHeight[0]+200)+"px;",
					duration: 0.7
				});
				*/
			new Effect.Opacity(this.stack[1], {duration: dur});
			new Effect.Morph(this.stack[1], {
				style: 'margin-top:'+this.arrTop[0]+'px; margin-left:'+this.arrLeft[0]+"px; width:"+this.arrWidth[0]+"px; height:"+this.arrHeight[0]+"px;",
				duration: dur
			});
			new Effect.Opacity(this.stack[2], { from: 0.6, to: 0.8, duration: dur});
			new Effect.Morph(this.stack[2], {
				style: 'margin-top:'+this.arrTop[1]+'px; margin-left:'+this.arrLeft[1]+"px; width:"+this.arrWidth[1]+"px; height:"+this.arrHeight[1]+"px;",
				duration: dur
			});
			new Effect.Opacity(this.stack[3], { from: 0.4, to: 0.6, duration: dur});
			new Effect.Morph(this.stack[3], {
				style: 'margin-top:'+this.arrTop[2]+'px; margin-left:'+this.arrLeft[2]+"px; width:"+this.arrWidth[2]+"px; height:"+this.arrHeight[2]+"px;",
					duration: dur
				});
			new Effect.Opacity(this.stack[4], { from: 0.2, to: 0.4, duration: dur});
			new Effect.Morph(this.stack[4], {
				style: 'margin-top:'+this.arrTop[3]+'px; margin-left:'+this.arrLeft[3]+"px; width:"+this.arrWidth[3]+"px; height:"+this.arrHeight[3]+"px;",
				duration: dur
			});
				
			this.stack[5].setStyle({
				position: 'absolute',
				left: '50%',
				marginTop: this.arrTop[4]+"px",
				marginLeft: this.arrLeft[4]+"px",
				width: this.arrWidth[4]+"px",
				height: this.arrHeight[4]+"px"
			});
				
			new Effect.Opacity(this.stack[5],{ from: 0, 
												   to: 0.2, 
												   duration: dur,
												   afterFinish: function() {
												   	this.disableClick=false;
												   	this.stack[this.stack.size()-1].setStyle({
														left: -parseFloat(this.stack[this.stack.size()-1].getStyle('width'))+"px"
													});
													
													if (this.direccio>0) {
														if (this.currPos!=this.dest) {
															this.animaEnvant();
														}
													}
												   }.bind(this)
			});
			
			
			
			this.rearrangeStack();
	},
	
	animaEnrere: function() {
		if (this.direccio==0) {
			var dur=this.options.duration;
		} else {
			var dur=this.options.duration/5;
		}
		
		var count=this.stack.size()-1;
				
		this.stack[count].setStyle({
			position: 'absolute',
			left: '50%',
			marginTop: this.arrTop[0]+"px",
			marginLeft: this.arrLeft[0]+"px",
			width: this.arrWidth[0]+"px",
			height: this.arrHeight[0]+"px",
			zIndex: '1000'
		});
				
		new Effect.Opacity(this.stack[count],{from: 0, to: 1.0, duration: dur, beforeStart: function() { this.disableClick=true; }.bind(this)});
			
		new Effect.Opacity(this.stack[0], { from: 1, to: 0.8, duration: dur});
		new Effect.Morph(this.stack[0], {
					style: 'margin-top:'+this.arrTop[1]+'px; margin-left:'+this.arrLeft[1]+"px; width:"+this.arrWidth[1]+"px; height:"+this.arrHeight[1]+"px;",
					duration: dur
		});
		new Effect.Opacity(this.stack[1], { from: 0.8, to: 0.6, duration: dur});
		new Effect.Morph(this.stack[1], {
					style: 'margin-top:'+this.arrTop[2]+'px; margin-left:'+this.arrLeft[2]+"px; width:"+this.arrWidth[2]+"px; height:"+this.arrHeight[2]+"px;",
					duration: dur
		});
		new Effect.Opacity(this.stack[2], { from: 0.6, to: 0.4, duration: dur});
		new Effect.Morph(this.stack[2], {
					style: 'margin-top:'+this.arrTop[3]+'px; margin-left:'+this.arrLeft[3]+"px; width:"+this.arrWidth[3]+"px; height:"+this.arrHeight[3]+"px;",
					duration: dur
		});
		new Effect.Opacity(this.stack[3], { from: 0.4, to: 0.2, duration: dur});
		new Effect.Morph(this.stack[3], {
					style: 'margin-top:'+this.arrTop[4]+'px; margin-left:'+this.arrLeft[4]+"px; width:"+this.arrWidth[4]+"px; height:"+this.arrHeight[4]+"px;",
					duration: dur
		});
		new Effect.Opacity(this.stack[4],{ from: 0.2, 
												   to: 0, 
												   duration: dur,
												   afterFinish: function() {
												   	this.disableClick=false;
												   	
												   	if (this.direccio>0) {
														if (this.currPos!=this.dest) {
															this.animaEnrere();
														}
													}
												   }.bind(this)
		});
				
		this.rearrangeStackBackwards();
	}
});