next_height = 11;
function fi(i){
	//show a film image
	els = $$('#film_images .film_image');
	els.each(function(el,j){
		if((i-1) == j){
			el.appear({duration:0.1});
		} else {
			if(el.getStyle('display')!='none'){
				el.fade({duration:0.4});
			} else {
				el.hide();
			}
		}
	})
	// els[i-1].setStyle({'zIndex':next_height++})
}




var FI = Class.create({
	initialize:function(ims,links){
		this.ims = ims;
		this.current_i = -1;
		this.effs = $A([]);
		this.next_el = -1;
		this.transition = false;
		this.nextHighestZ = 11;
		//make the effects (for re-use later)
		this.ims.each(function(im,i){
			this.effs[i] = new Effect.Opacity(im,{to:0,duration:0}); 
		}.bind(this))

		//update the links
		links.each(function(link,i){
			link.observe('mouseout',this.hide_if_untouched.bindAsEventListener(this))
			link.observe('mouseover',this.show_image.bindAsEventListener(this,i))
		}.bind(this))
	},
	show_image:function(e,i){
		this.touch();

		if(this.transition){
			this.next_el = i;
		} else {
			if(this.current_i != i){
				this.ims[i].setOpacity(0);
				this.ims[i].setStyle({'zIndex':this.nextHighestZ++,'display':'block'})
				
				//do the effect
				this.transition = true;
				this.effs[i].start({to:1.0,duration:0.3,afterFinish:function(current){
					this.transition = false;
					if(current != -1){
						this.ims[current].setOpacity(0)
					}
					
					if(this.next_el != -1){
						temp = this.next_el;
						this.next_el = -1;
						this.show_image({},temp);
					}
				}.bind(this,this.current_i)});
				
				this.current_i = i

			}
		}
	},
	hide_if_untouched:function(){
		//set an updater
		this.touch();
		this.pe = new PeriodicalExecuter(this.hide.bind(this),1);
	},
	touch:function(){
		if(this.pe){
			this.pe.stop()
		}
		//clear the updater
	},
	hide:function(pe){
		pe.stop();
		this.ims[this.current_i].fade();
		this.current_i = -1
		this.next_el = -1;
	}
})


new Event.observe(window,'load',function(){
	//hide the skip button
	// $('skip').setStyle({'height':'0px'})
})