/*	
Arguments:
	handlers 	- (array) a group of elements that control which page to show.
	pages		- (array) a grop of elements that represent the pages.
	options 	- (object) a set of key/value options

Options:
	direction	- either horz for horizontal or vert for vertical paging.
	width		- width of the pager in pixels
	height		- height of the pager in pixels
	duration	- time in ms for the scroller to go from page to page
	allowOX		- allow overflow-x, default true
	allowOY		- allow overflow-y, defualt true
	pagerLilnks	- checks the rel of each link within the pager and gives them the necessary actions to page throguh the pager
		
Examples:
	(start code)
		var x = new pager($ES('a','controller'), $ES('div', 'container'));
	(end)
*/
var pager = new Class({
	options: {
		direction:		'horz',
		width:			500,
		height:			500,
		duration:		500,
		allowOX:		true,
		allowOY:		true,
		pagerLinks:		false
	},
	
	initialize: function(handlers, pages, options){
		this.setOptions(options);
		this.handlers		= handlers;
		this.pages			= pages;
		this.currentEle		= 0;
		this.build();
		this.setNav();
		//if(this.options.pagerLinks) 
		this.setPagerLinks();
	},
	
	build: function(){
		var width 		= 0;
		var height 		= 0;
		var float1		= '';
		this.navPane	= this.pages[0].getParent().id;
		var pcId		= this.navPane +'_page_controller';
		var pc	 		= new Element('div',{'id':	pcId}).injectInside(this.navPane);
		
		this.pages.each(function(page){
			if(this.options.direction === 'horz'){
				width 	= width + this.options.width;
				height	= this.options.height;
				float1	= 'left';
			}else{
				height 	= height + this.options.height;
				width	= this.options.width;
				float1	= '';
			}			
			page.setStyles({
				'width':	this.options.width +'px',
				'height':	this.options.height +'px',
				'overflow':	'hidden',
				'float':	float1
			});
			$(pcId).adopt(page.id);
		}.bind(this));
		
		pc.setStyles({
			'height': 	height +'px',
			'width':	width +'px',
			'overflow':	'hidden'
		});
		
		$(this.navPane).setStyles({
			'width':	this.options.width +'px',
			'height':	this.options.height +'px',
			'overflow':	'hidden'
		});		
	},
	
	setNav: function(){
		this.nav = new Fx.Scroll(this.navPane, {
			wait: false,
			duration: this.options.duration,
			transition: Fx.Transitions.Quad.easeInOut
		});
		this.handlers.each(function(handler, i){
			if(handler.id == ''){
				handler.id = this.navPane +'_controller_'+ i;
			}
			$(handler.id).addEvent('click', function(e){
				var e = new Event(e);
				this.pageTo(i);
				e.stop();
			}.bind(this));
		}.bind(this));
	},
	
	pageTo: function(page){
		this.currentEle = page;
		var curPage		= this.pages[page].id;
		var flow_x		= (this.options.allowOX) ? 'auto' : '';
		var flow_y		= (this.options.allowOY) ? 'auto' : '';
		
		/**
		* KLUDGE to remove all overflow because of ff's scrolling of element with visible scrollbars seem to skip
		*/
		this.pages.each(function(hd){
			$(hd.id).setStyles({
				'overflow':		'hidden',
				'overflow-x':	'hidden',
				'overflow-y':	'hidden'
			});	
		});	
		
		this.nav.toElement(curPage).chain(function(){
			$(curPage).setStyles({
				'overflow':		'auto', //opera fix
				'overflow-x':	flow_x,
				'overflow-y':	flow_y
			});
		}.bind(this));	
	},
	
	setPagerLinks: function(){
		$(this.navPane).getElements('a[rel^=pager:]').each(function(link){
			var page = link.rel.split(':');
			$(link.id).addEvent('click', function(){
				this.pageTo(page[1]);
			}.bind(this));
		}.bind(this));		
	},
	
	next: function(){
		if(this.currentEle < (this.pages.length - 1)){
			var next = (this.currentEle+1);
			this.pageTo(next);
		}
	},
	
	previous: function(){
		var prev = (this.currentEle > 0) ? this.currentEle - 1 : 0;
		this.pageTo(prev);
	}
});

window.addEvent('domready', function(){
pager.implement(new Options, new Chain);
});