/*	
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('div', 'container'));
	(end)
*/
var Pager = new Class({
	options: {
		handlers:		false,
		prevBtn:		false,
		nextBtn:		false,
		transition:		Fx.Transitions.Quad.easeInOut,
		direction:		'horz',
		width:			500,
		height:			500,
		marginLeft:		3,
		duration:		500,
		allowOX:		true,
		allowOY:		true,
		start:			0,
		pagerLinks:		false
	},
	
	initialize: function(pages, options){
		this.setOptions(options);
		this.pages			= pages;
		this.currentEle		= 0;
		this.previousEle	= 0;
		this.build();
		this.setNav();
		if(this.options.pagerLinks){
			this.setPagerLinks();
		}
		this.start();
		if(this.options.prevBtn){
			this.setButtons('back', this.options.prevBtn);
		}
		if(this.options.nextBtn){
			this.setButtons('foward', this.options.nextBtn);
		}
	},
	
	build: function(){
		var width 		= 0;
		var height 		= 0;
		var mleft		= 0;
		this.sfloat		= ''
		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){
			mleft = mleft + this.options.marginLeft;
			if(this.options.direction === 'horz'){
				width 	= width + this.options.width;
				height	= this.options.height;
				this.sfloat	= 'left';
			}else{
				height 	= height + this.options.height;
				width	= this.options.width;
				this.sfloat	= '';
			}			
			page.setStyles({
				'width':		this.options.width +'px',
				'height':		this.options.height +'px',
				'margin-left':	this.options.marginLeft +'px',
				'overflow':		'hidden',
				'float':		this.sfloat,
				'display':		'block'
			});
			$(pcId).adopt(page.id);
		}.bind(this));
		if(this.options.direction === 'horz') width = width + mleft;
		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: this.options.transition
		});
		if(this.options.handlers){
			this.options.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_a		= (this.options.allowOX && this.options.allowOY) ? 'auto' : '';
		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':		flow_a,
				'overflow-x':	flow_x,
				'overflow-y':	flow_y
			});
			this.previousEle = this.currentEle;
		}.bind(this));	
	},
	
	setPagerLinks: function(){
		$(this.navPane).getElements('a[rel^=pager:]').each(function(link, i){
			if(link.id == ''){
				link.id = 'auto_pager_' + i;
			}
			var page = link.rel.split(':');
			$(link.id).removeEvent('click');
			$(link.id).addEvent('click', function(e){
				e = new Event(e);
				this.pageTo(page[1]);
				e.stop();
			}.bind(this));
		}.bind(this));		
	},
	
	next: function(){
		if(this.currentEle < (this.pages.length - 1))
			var next = ++this.currentEle;
		else 
			var next = 0;
		this.pageTo(next);
	},
	
	previous: function(){
		if(this.currentEle > 0)
			var prev = --this.currentEle;
		else 
			var prev = this.pages.length-1;
		this.pageTo(prev);
	},
	
	start: function(){
		this.currentEle = this.options.start;
		this.pageTo(this.currentEle);
	},
	
	setButtons: function(direction, ele){
		ele.addEvent('click', function(e){
			e = new Event(e);
			switch(direction){
				case 'foward': this.next(); break;
				case 'back': this.previous(); break;
			}
			e.stop();
		}.bind(this));
	}
});
Pager.implement(new Options, new Chain);