var FilmStrip = new Class({
    initialize: function(containerId, myOptions){
		this.myOptions = myOptions;
		this.container = $(containerId);
		
		// get elements and their size
		this.getElements();
		
		// init paging
		this.initPaging();
		
		// set film strips height or width
		if(this.myOptions.scrollDir == 'vertical'){
			this.filmStrip.setStyle("height", this.pages*this.viewPortHeight+"px");
		} else {
			this.filmStrip.setStyle('left', '0');
			this.filmStrip.setStyle("width", this.pages*this.viewPortWidth+"px");
		}
		
		//create effect
		($type(this.myOptions.transitionSpeed)) ? this.transitionSpeed = this.myOptions.transitionSpeed : this.transitionSpeed = 200;		
		($type(this.myOptions.transitionType)) ? this.transitionType = this.myOptions.transitionType : this.transitionType = Fx.Transitions.Sine.easeInOut;
		this.setupEffect();
		
		// show or hide the pagination controls
		this.setPaginationControls();

		// attach all the click handlers to the next and previous buttons
		this.nextButton.addEvent('click', function(e) { this.setPage(e,1); }.bind(this));
		this.prevButton.addEvent('click', function(e) { this.setPage(e,-1); }.bind(this));	
	},
	setupEffect: function() {
		(this.myOptions.scrollDir == 'vertical') ? this.styleType = 'top' : this.styleType = 'left';
		this.pageSlider = new Fx.Style(this.filmStrip, this.styleType, {
			duration: this.transitionSpeed,
			transition: this.transitionType
		});		
	},
	getElements: function() {
		this.viewPort = this.container.getElement(this.myOptions.viewPort);	
    	this.filmStrip = this.viewPort.getElement(this.myOptions.filmStrip);
    	this.prevButton = this.container.getElement(this.myOptions.prevButton);
    	this.nextButton = this.container.getElement(this.myOptions.nextButton);
		this.getElementSize();
	},
	getElementSize: function() {
		($type(this.myOptions.viewPortWidth)) ? this.viewPortWidth = this.myOptions.viewPortWidth : this.viewPortWidth = this.viewPort.getSize().size.x;
		($type(this.myOptions.viewPortHeight)) ? this.viewPortHeight = this.myOptions.viewPortHeight : this.viewPortHeight = this.viewPort.getSize().size.y;
		($type(this.myOptions.filmStripHeight)) ? this.filmStripHeight = this.myOptions.filmStripHeight : this.filmStripHeight = this.filmStrip.getSize().size.y;
	},
	initPaging: function() {
		this.curPage = 0;
		if(this.myOptions.scrollDir == 'vertical'){
			this.pages = Math.ceil(this.filmStripHeight/this.viewPortHeight);
		} else {
			this.itemPerPage = this.myOptions.itemPerPage;			
			this.numResults = +this.container.getElement(this.myOptions.numResults).value;
			this.pages = Math.ceil(this.numResults/this.itemPerPage);	
		}	
	},
	setPage: function(e, direction) {
		e = new Event(e);
		// Update curpage
		(direction == 1) ? this.curPage++ :	this.curPage--;
		
		// determine the pages new left value
		var filmstripScrollPosition;
		if(this.myOptions.scrollDir == 'vertical'){
			 filmstripScrollPosition = this.viewPortHeight * -(this.curPage);
		} else {
			filmstripScrollPosition = this.viewPortWidth * -(this.curPage);
		}
		this.pageSlider.stop();
		this.pageSlider.start(filmstripScrollPosition);
		
		// set the pagination controls
		this.setPaginationControls();
	
		e.stop();
	},
	setPaginationControls: function() {
		// decide whether to show or hide each pagination control
		(this.curPage == 0) ? this.prevButton.setStyle("visibility", "hidden") : this.prevButton.setStyle("visibility", "visible");
		(this.curPage == (this.pages-1) || this.numResults == 0) ? 	this.nextButton.setStyle("visibility", "hidden") : this.nextButton.setStyle("visibility", "visible");
		if($type(this.myOptions.pageCurrent)){
			this.container.getElement(this.myOptions.pageCurrent).innerHTML = this.curPage + 1;
		}
		if(this.myOptions.pageTotal) {
			this.container.getElement(this.myOptions.pageTotal).innerHTML = this.pages;	
		}
	}	
});