var FilmStrip = new Class({
    initialize: function(myOptions){
		this.myOptions = myOptions;
		this.container = $(this.myOptions.id);
		
		// 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 + this.offset) +"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) {	
			e = new Event(e);
			this.setPage(1);
			e.stop(); 
		}.bind(this));
		this.prevButton.addEvent('click', function(e) {
			e = new Event(e);
			this.setPage(-1);
			e.stop();
			}.bind(this));	
	},
	setupEffect: function() {
		this.pageSlider = new Fx.Tween(this.filmStrip, {
			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.myOptions.offset) ? this.offset = this.myOptions.offset : this.offset = 0;
    	(this.myOptions.caption) ? this.caption = this.container.getElement(this.myOptions.caption) : this.caption = false;
    	this.activityLabels = this.filmStrip.getElements('a');
		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 {
			this.itemPerPage = this.myOptions.itemPerPage;			
			this.numResults = + this.activityLabels.length;
			this.pages = Math.ceil(this.numResults/this.itemPerPage);	
		}	
	},
	goToItem: function(item) {
		var targetPage = (Math.ceil((item + 1)/this.myOptions.itemPerPage)) -1;
		var diff = targetPage-this.curPage;
		if (diff != 0) this.setPage(diff)
	},
	setPage: function(direction) {
		
		// Update curpage
		this.curPage = this.curPage + direction;
		
		// determine the pages new left value
		var filmstripScrollPosition;
		if(this.myOptions.scrollDir == 'vertical'){
			 filmstripScrollPosition = this.viewPortHeight * -(this.curPage);
		} else {
			filmstripScrollPosition = (this.viewPortWidth + this.offset) * -(this.curPage);
		}
		

		(this.myOptions.scrollDir == 'vertical') ? this.styleType = 'top' : this.styleType = 'left';
		this.pageSlider.start(this.styleType , filmstripScrollPosition);
		
		// set the pagination controls
		this.setPaginationControls();
	},
	
	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 (this.caption) {
			var myFXin = new Fx.Morph(this.caption, {duration:150,  transition: Fx.Transitions.Quad.easeOut});
			var myFXout = new Fx.Morph(this.caption, {duration:150,  transition: Fx.Transitions.Quad.easeIn});
			
			myFXin.start({
				opacity: "0"
				}).chain(function(){	 
				this.caption.innerHTML = this.activityLabels[this.curPage].innerHTML;
				myFXout.start({
					opacity: "1"
				});
			}.bind(this));
		
		}
		
		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;	
		}
	}	
});