// 2009 Andrea Baron
var PhotoSlide=Class.create({
	container:null,
	photos:null,
	slice:null,
	outfunc:null,
	movefunc:null,
	mouse:null,
	effect:null,
	actual:null,
	paddings:null,
	height:null,
	width:null,
	isinside:null,
	starting:null,
	initialize:function(container, photos){
		if(/MSIE/.test(navigator.userAgent)) {
			try {
			  document.execCommand("BackgroundImageCache", false, true);
			} catch(err) {}
		}
		this.container=$(container);
		this.photos=photos;
		this.init();
	},
	init:function(){
		this.isinside=false;
		if(['relative','absolute'].indexOf(this.container.getStyle('position'))==-1)
			this.container.setStyle({position:'relative'});
		this.obtainDimensions();
		this.photoscont=new Element('div');
		this.container.insertBefore(this.photoscont,this.container.firstChild);
		var w=0.0;
		this.slice=this.width/this.photos.length;
		this.starting=[];
		for(i=0;i<this.photos.length-1;++i)
			this.starting.push(Math.round(w+=this.slice));
		this.starting.push(this.width);
		this.slice=Math.floor(this.slice);
		this.render();
		this.container.observe('mouseover', this.over.bindAsEventListener(this));
	},
	over:function(e){
		if(!this.isinside && !this.bubbledFromChild(this.container, e)) {
			if(!this.outfunc) {
				this.outfunc=this.out.bindAsEventListener(this);
				this.movefunc=this.move.bindAsEventListener(this);
			}
			this.container.observe('mouseout', this.outfunc);
			this.container.observe('mousemove', this.movefunc);
			
			this.isinside=true;
		}
	},
	out:function(e){
		if(this.isinside && !this.bubbledFromChild(this.container, e)) {
			this.isinside=false;
			
			this.container.stopObserving('mousemove', this.movefunc);
			this.container.stopObserving('mouseout', this.outfunc);
			this.mouse=null;
			this.actual=null;
			this.showAll()
		}
	},
	move:function(e){
		var m=this.getMouse(e);
		if(!this.mouse || this.mouse.x!=m.x) {
			this.mouse=m;
			var over=Math.min(Math.floor(m.x/this.slice), this.photos.length-1);
			if(this.actual!=over) {
				this.actual=over;
				this.showOne();
			}
		}
	},
	showOne:function() {
		if(this.effect)
			this.effect.cancel();
		var par=[], elems=this.photoscont.select('div');
		for(var i=0; i<this.photos.length; ++i) {
			if(i===this.actual)
				par.push(new Effect.Morph(elems[i], {style:{width:this.width+'px', left:this.paddings.left+'px'}, sync:true}));
			else
				par.push(new Effect.Morph(elems[i], {style:{width:'0px', left:(i<this.actual?this.paddings.left:this.width-this.paddings.right)+'px'}, sync:true}));
		}
		this.effect=new Effect.Parallel(par,{duration:0.5, afterFinish:function(){this.effect=null;}.bind(this)});
	},
	showAll:function() {
		if(this.effect)
			this.effect.cancel();
		var w=0.0, slice=this.width/this.photos.length, l=0, par=[], elems=this.photoscont.select('div');
		for(var i=0; i<this.starting.length; ++i) {
			par.push(new Effect.Morph(elems[i], {style:{width:(this.starting[i]-l)+'px', left:this.paddings.left+l+'px'}, sync:true}));
			l=this.starting[i];
		}
		this.effect=new Effect.Parallel(par,{duration:0.5, afterFinish:function(){this.effect=null;}.bind(this)});
	},
	bubbledFromChild:function(element, e){
		var target = e.relatedTarget || Event.relatedTarget(e);
		return (target && target.descendantOf(element));
	},
	getMouse:function(e){
		var m=e.pointer(), o=this.container.viewportOffset();
		return {x:m.x-o.left, y:m.y-o.top};
	},
	obtainDimensions:function(){
		this.paddings={
			top:parseInt(this.container.getStyle('paddingTop')),
			right:parseInt(this.container.getStyle('paddingRight')),
			bottom:parseInt(this.container.getStyle('paddingBottom')),
			left:parseInt(this.container.getStyle('paddingLeft'))
		};
		this.width=this.container.getWidth()-this.paddings.left-this.paddings.right;
		this.height=this.container.getHeight()-this.paddings.top-this.paddings.bottom;
	},
	render:function(){
		this.photoscont.update();
		var d, h=this.height+'px', t=this.paddings.top+'px', l=0;
		for(var i=0; i<this.starting.length; ++i) {
			d=new Element('div').setStyle({
				height:h,
				width:(this.starting[i]-l)+'px',
				position:'absolute',
				top:t, 
				left:(l+this.paddings.left)+'px',
				background:'url('+this.photos[i]+') 50% 50% no-repeat'
			});
			this.photoscont.appendChild(d);
			l=this.starting[i];
		}
	}
});