var panelInstanceId = 0;

function scrollPanelsSetup() {
	// obtain collection of all divs of class "scrollPanels"
	var panelsCollection = $('page').getElements('div[class=scrollPanels]');
	// obtain collection of all divs of class "scrollPanelsContent"
	var panelsContentCollection = $('page').getElements('div[class=scrollPanelsContent]');
	// obtain collection of all divs of class "scrollPanelPagination"
	var paginationCollection = $('page').getElements('ul[class=scrollPanelPagination]');
	// obtain collection of all divs of class "scrollPanelPrevious"
	var previousCollection = $('page').getElements('span[class=scrollPanelPrevious]');
	// obtain collection of all divs of class "scrollPanelNext"
	var nextCollection = $('page').getElements('span[class=scrollPanelNext]');
	// loop over "scrollPanels" / "scrollPanelPagination" / "scrollPanelPrevious" / "scrollPanelNext" to incrementally give them a unique id values
	for( var i = 0; i < panelsCollection.length; ++i ){
		$(panelsCollection[i]).setProperty('id', 'scrollPanels'+(i+1));
		$(panelsContentCollection[i]).setProperty('id', 'scrollPanelsContent'+(i+1));
		$(paginationCollection[i]).setProperty('id', 'scrollPanelPagination'+(i+1));
		$(previousCollection[i]).setProperty('id', 'scrollPanelPrevious'+(i+1));
		$(nextCollection[i]).setProperty('id', 'scrollPanelNext'+(i+1));
	}
	// check for number of panel scrollers that exist in the page
	var panelsScrollerCount = panelsCollection.length;
	// setup correct number of instances of SlidingTabs depending on how many panelScroller instances there are in the page
	if( panelsScrollerCount > 0 ){	
		for( var i = 1; i <= panelsScrollerCount; ++i ){
			
			window["panelsScrollerClass"+i] = new PanelsScrollerClass('scrollPanelPagination'+i, 'scrollPanels'+i, 'scrollPanelsContent'+i, i);			

		}
	}
}
var PanelsScrollerClass = new Class({
	options: {
		
	},
	initialize: function(buttonContainer, scrollPanelsId, scrollPanelsContentId) {	
		this.instance = scrollPanelsId.split('scrollPanels')[1];
		window['globalInstance'+this.instance] = this.instance;	
		window['triggerType'+this.instance] = '';
		this.scrollPanels = $(scrollPanelsId);
		this.scrollPanelsContent = $(scrollPanelsContentId);
		// determine the number of inner panels for this instance
		this.innerPanels = this.scrollPanels.getElements('div[class=scrollPanel]');
		window['innerPanelsCount'+this.instance] = this.innerPanels.length;
		window['innerPanelsCurrent'+this.instance] = 0;		
		// determine the width and height of a sample panel for this instance
		this.innerPanelSize = this.innerPanels[0].getSize();
		window['innerPanelWidth'+this.instance] = this.innerPanelSize.x;
		this.innerPanelHeight = this.innerPanelSize.y;
		// set the width and height of the panels parent container to match the height and the width of inner a sample inner panel
		this.scrollPanels.setStyle('width', window['innerPanelWidth'+this.instance] + 'px');
		// set the width and height of the panels content container to match the height and the width multiplied by the amount of inner panels
		this.scrollPanelsContent.setStyle('width', window['innerPanelWidth'+this.instance] * window['innerPanelsCount'+this.instance] + 'px');
		// set the height of the previous and next arrow to vertically center for first inner panel
		$('scrollPanelPrevious'+this.instance).setStyle('top', (this.innerPanelHeight/2) + 'px');
		$('scrollPanelNext'+this.instance).setStyle('top', (this.innerPanelHeight/2) + 'px');
		// this sets up the previous/next buttons (binds them to the instance of SlidingTabs
		$('scrollPanelPrevious'+this.instance).addEvent('click', this.previous);
		$('scrollPanelNext'+this.instance).addEvent('click', this.next);
		//Adds events to all Elements with the class name 'email'.
		this.pageButtons = $('scrollPanelPagination'+this.instance).getElements('span.scrollPanelPage');
		this.numberOfPageButtons = this.pageButtons.length;
		for( var i = 0; i <= this.numberOfPageButtons-1; ++i ){
			this.pageButtons[i].setProperty('id', 'scrollPanelPagination'+this.instance+'Page'+(i+1));
		}
		$('scrollPanelPagination'+this.instance).getElements('span.scrollPanelPage').addEvent('click', this.pageJump);
		
		// set classes to show previous button as disabled and and current panel as selected in pagination
		$('scrollPanelPrevious'+this.instance).addClass('scrollPanelPreviousDisabled');
		$('scrollPanelPagination'+this.instance+'Page1').addClass('scrollPanelPageSelected');
	},
	next: function() { 
		this.currentInstance = this.id.split('scrollPanelNext')[1];
		window['triggerType'+this.instance] = 'next';
		window['innerPanelsCurrent'+this.currentInstance] = window['innerPanelsCurrent'+this.currentInstance] + 1;
		window['panelsScrollerClass'+this.currentInstance].pageJump(this.currentInstance, 'next');		
	},
	previous: function() {	
		this.currentInstance = this.id.split('scrollPanelPrevious')[1];
		window['triggerType'+this.instance] = 'previous';
		window['innerPanelsCurrent'+this.currentInstance] = window['innerPanelsCurrent'+this.currentInstance] - 1;
		window['panelsScrollerClass'+this.currentInstance].pageJump(this.currentInstance, 'previous');	
	},	
	pageJump: function( instance, triggerType) {
		if( this.instance ){
			this.currentInstance = this.instance;
			if( (triggerType == 'next') && (window['innerPanelsCurrent'+this.currentInstance] < window['innerPanelsCount'+this.currentInstance]) ){
				$('scrollPanelPagination'+this.currentInstance+'Page'+((window['innerPanelsCurrent'+this.currentInstance]))).removeClass('scrollPanelPageSelected');
			}
			else if( (triggerType == 'previous') && (window['innerPanelsCurrent'+this.currentInstance] > -1) ){
				$('scrollPanelPagination'+this.currentInstance+'Page'+((window['innerPanelsCurrent'+this.currentInstance])+2)).removeClass('scrollPanelPageSelected');
			}
			this.pageClicked = (window['innerPanelsCurrent'+this.currentInstance]) + 1;
		}
		else{
			this.currentInstance = this.getParent().getParent().id.split('scrollPanelPagination')[1];
			this.pageClicked = eval(this.id.split('scrollPanelPagination'+this.currentInstance+'Page')[1]);
			$('scrollPanelPagination'+this.currentInstance+'Page'+(window['innerPanelsCurrent'+this.currentInstance]+1)).removeClass('scrollPanelPageSelected'); 			
			window['innerPanelsCurrent'+this.currentInstance] = this.pageClicked;			
		}    	
		var myFx = new Fx.Scroll( $('scrollPanels'+this.currentInstance), {
			offset: {
				'x': (this.pageClicked-1) * 360,
				'y': 0
			}
		}).toLeft();	
		
		window['innerPanelsCurrent'+this.currentInstance] = this.pageClicked-1;
		if ( window['innerPanelsCurrent'+this.currentInstance] <= 0 ){
			$('scrollPanelPrevious'+this.currentInstance).addClass('scrollPanelPreviousDisabled');
			window['innerPanelsCurrent'+this.currentInstance] = 0;
		}
		else{
			$('scrollPanelPrevious'+this.currentInstance).removeClass('scrollPanelPreviousDisabled');
		}
		
		if( window['innerPanelsCurrent'+this.currentInstance] >= window['innerPanelsCount'+this.currentInstance]-1 ){
			$('scrollPanelNext'+this.currentInstance).addClass('scrollPanelNextDisabled');
			window['innerPanelsCurrent'+this.currentInstance] = window['innerPanelsCount'+this.currentInstance]-1;
		}
		else{
			$('scrollPanelNext'+this.currentInstance).removeClass('scrollPanelNextDisabled');
		}
		$('scrollPanelPagination'+this.currentInstance+'Page'+this.pageClicked).addClass('scrollPanelPageSelected');
	}	
});