//FILMSTRIP
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.Tween(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);
		if (this.myOptions.pagerControls)
			this.pagerControls = this.container.getElement(this.myOptions.pagerControls);
    	this.getElementSize();
	},
	getElementSize: function() {
		($type(this.myOptions.viewPortWidth)) ? this.viewPortWidth = this.myOptions.viewPortWidth : this.viewPortWidth = this.viewPort.getSize().x;
		($type(this.myOptions.viewPortHeight)) ? this.viewPortHeight = this.myOptions.viewPortHeight : this.viewPortHeight = this.viewPort.getSize().y;
		($type(this.myOptions.filmStripHeight)) ? this.filmStripHeight = this.myOptions.filmStripHeight : this.filmStripHeight = this.filmStrip.getSize().y;
	},
	initPaging: function() {
		this.curPage = 0;
		if(this.myOptions.scrollDir == 'vertical'){
			this.pages = Math.ceil(this.filmStripHeight/this.viewPortHeight);
		} else {
			if (this.pagerControls) {
				var pages = this.pagerControls.getElements(".pages span");
				if (pages.length) pages[0].addClass("active");
				for (var i = 0; i < pages.length; i++) {
					var that = this;
					pages[i].addEvent('click', (function(index) { 
						return (function(e) {
							this.setPage(e,null,index); 
						}).bind(that)
					})(i));
				}
			}
			this.itemPerPage = this.myOptions.itemPerPage;			
			this.numResults = +this.container.getElement(this.myOptions.numResults).value;
			this.pages = Math.ceil(this.numResults/this.itemPerPage);	
			if (this.pagerControls)
				this.pagerControls.getElement(".currentPageLength").innerHTML = (this.pages == this.curPage + 1) && (this.numResults % this.itemPerPage) ? this.numResults % this.itemPerPage : this.itemPerPage;
		}	
	},
	setPage: function(e, direction, index) {
		e = new Event(e);
		// Update curpage
		if (direction !== null) {
			(direction == 1) ? this.curPage++ :	this.curPage--;
		} else {
			this.curPage = index;
		}
		
		// determine the pages new left value
		var filmstripScrollPosition;
		if(this.myOptions.scrollDir == 'vertical'){
			 filmstripScrollPosition = this.viewPortHeight * -(this.curPage);
		} else {
			filmstripScrollPosition = this.viewPortWidth * -(this.curPage);
		}
		
		if (this.pagerControls) {
			this.pagerControls.getElements(".pages span").removeClass("active")[this.curPage].addClass("active");
			this.pagerControls.getElement(".currentPageLength").innerHTML = (this.pages == this.curPage + 1) && (this.numResults % this.itemPerPage) ? this.numResults % this.itemPerPage : this.itemPerPage;
		}
			
		
		this.pageSlider.start('left', filmstripScrollPosition+"px");
		
		// 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;	
		}
	}	
});