function Film(a){
	this.viewport=$(a);
	this.reel=this.viewport.find(".reel");
	this.frames=this.reel.find(".frame");
	this.tween=null;
	this.selectedIndex=0;
	this.previous=this.viewport.find(".previous");
	this.next=this.viewport.find(".next");
	this.prepare()
}

Film.prototype={
	prepare:function(){
		var c=this;

		this.previous.click(
			function(){
				this.blur();
				return c.activate(c.selectedIndex+1)
			}
		);
		
		this.next.click(
			function(){
				this.blur();
				return c.activate(c.selectedIndex-1)
			}
		);
	},
	
	num:function(a,b){
		return parseInt($.css(a.jquery?a[0]:a,b),10)||0
	},
	
	activate:function(a){
		
		if (a < 0) {
			$("#reel1").attr("style", "left:-100%");
			$("#reel1").prepend($(".frame:last"));
			this.selectedIndex = 1;
			a = 0;
		}
		
		if (a>=this.frames.length) {
			this.selectedIndex = this.frames.length  - 2;
			a = this.frames.length  - 1;

			$("#reel1").attr("style", "left:-" + this.selectedIndex*100 +"%;");
			s = $(".frame:first");
			$("#reel1").append(s);
		}
	
		if(a>=0&&a<this.frames.length&&a!=this.selectedIndex){
			var b=this;

			this.previous.fadeOut("fast");
			this.next.fadeOut("fast");
			
			this.moveTo(a, function(){
				b.previous.fadeIn("fast")
				b.next.fadeIn("fast")
			});
			
			this.selectedIndex=a
		}
		
		return this
	},
	
	moveTo:function(a,b){
		if(this.tween){
			this.tween.stop()
		}
		
		var c=-100*a;
		
		this.tween = new Tween(document.getElementById('reel1').style,'left',Tween.backEaseOut,this.num(this.reel,"left"), c, 2,'%');
		this.tween.start();
		
		this.tween.onMotionFinished=function(){
			b()
		};
		
		return this
	}
};

$(function(){$(".film").each(function(){new Film(this)})});