var Filmstrip = Class.create();

Filmstrip.prototype = {
	
	initialize: function(slides, options) {
		
		this.options = {
			scroll: 1,
			visible: 1,
			speed: 1,
			hideForward: true,
			clip: $('filmstrip-clip'),
			container: $('filmstrip-holder'),
			nextButton: $$('#next-button')[0],
			prevButton: $$('#previous-button')[0],
			group: 'filmstrip'
			
		} 
		
		Object.extend( this.options, options || {} );
		
		this.slides = (typeof slides == 'object') ? slides : $$(slides);
		
		this.slideIDs = [];
		
		this.clip = this.options.clip;
		this.container = this.options.container;
		
		this.distance = this.options.distance || parseInt(this.slides[0].getWidth());
		this.height = this.options.height || parseInt(this.slides[0].getHeight());
		
		this.numSlides = this.slides.length;

		this.current = 0; 
		this.speed = this.options.speed;
		
		this.effectRunning = false;
		
		this.nextButton = this.options.nextButton;
		this.prevButton = this.options.prevButton;
		
		this.nextButton.setStyle( 'cursor: pointer' );
		this.prevButton.setStyle( 'cursor: pointer' );
		
		this.forwardEvent = function(e) {
			
			e.stop();
			
			var self = this;
			var next = self.current + this.options.scroll;
			
			if (self.effectRunning) return;
			
			if ( (next + this.options.visible) <= this.numSlides ) {
				self.moveTo(next, 'button');
			} else {
				self.moveTo(0, 'button');
			}
			
		}.bindAsEventListener(this);
		
		this.backwardEvent = function(e) {
			e.stop();
			var self = this;
			var next = self.current - this.options.scroll;
			if (self.effectRunning) return;
			if (next >= 0) self.moveTo(next, 'button');
	
		}.bindAsEventListener(this);
		
		this.setup();
		
		var query = window.location.toString().toQueryParams();
		
		if( query.slide ) {	
			this.moveTo(query.slide);
		}
		
	},
	
	setup: function() {
		
		var self = this;
		
		Event.observe( this.nextButton, 'click', this.forwardEvent );
		Event.observe( this.prevButton, 'click', this.backwardEvent );
		
		Event.observe(document, 'keypress', function(e) {
	
			if (e.keyCode == Event.KEY_RIGHT) {
				self.forwardEvent(e);
			}
			if (e.keyCode == Event.KEY_LEFT) {
				self.backwardEvent(e);
			}
		});
		
		this.slides.each( function(slide, x) {
			self.slideIDs[x] = slide.id = slide.id || self.options.group + '-slide-' + x;
		});
		
		/*
		// set the clip //
		this.clip.setStyle( { 
			'width' : this.distance * this.options.visible + 'px'
			//'height' : this.height + 'px' 
		} );
		
		
		// set the scroller //
		this.container.setStyle( { 
			'width' : '99999px', 
			'height' : this.height + 'px', 
			'position' : 'relative', 
			'top' : 0, 
			'left' : 0 
		} );
		
		*/
		
		this.afterMove();
		
	},
	
	moveTo : function(el) {
	
		if (this.effectRunning) return;
		var self = this;
		
		switch (typeof el) {
			case 'string' : 
				el = $(el);
				var newSlideIndex = this.slideIDs.indexOf(el.id);
				break;
			case 'number' :
				var newSlideIndex = el;
				break;
			default :
				var newSlideIndex = this.slideIDs.indexOf(el.id);
				break;
		}
		
		var scroll = this.options.scroll;
		
		if (newSlideIndex < 0 || newSlideIndex == this.current || newSlideIndex > (this.numSlides - 1) ) return false;
		
		var delta = this.current - newSlideIndex;
		var scroll = (arguments[1] == 'button') ? this.options.scroll : 1;
		var distance = delta * (this.distance * scroll);
		
		// for speedy swap //
		var jump = (delta == 1) || (delta == -1) ? 1 : 3;		
	
		this.effectRunning = new Effect.MoveBy(this.container, 0, distance, { duration: this.speed/jump, afterFinish: function(e) { self.effectRunning = null; self.afterMove(); } } );
		
		this.current = newSlideIndex;
	
	},
	
	afterMove : function() {
		
			if (this.current == 0) {
				this.prevButton.hide();
			}
			else {
				this.prevButton.show();
			}
			
			if (this.options.hideForward) {
				if ( (this.current + this.options.visible) >= this.numSlides ) {
					this.nextButton.hide();
				}
				else {
					this.nextButton.show();
				}
			}
		
			if (typeof this.options.updater == 'function') this.options.updater.apply(this)
		
	}
	
}