var Fader = Class.create({
	
	initialize: function(a) {
		this.options = a;
		this.imgclass = a.className;			//classname which you've defines each outer box
		if(this.imgclass == '') {
			console.log('this class requires a classname');
			return;
		}
		
		this.imgs 		= 	new Array();		//empty array to hold img information
		this.totalImgs = 0;						//holds total image count
		this.fholder	=	0;
		this.boxHeight;
		this.boxWidth;
		this.prevCounter;
		this.imgCounter = 1;
		this.pause = false;
		this.clicked = false;
		
		switch(a.mode) {
			case 'paginate':
			this.mode	=	a.mode;
			this.getAllPages();
			break;
			
			default:
			this.imgTimer = a.delay;				//length of time images are shown
			this.getAllImgs();
			this.setTimer();						//starts the show
		}
		
		
		if(a.loopNum != '' ) {
			this.loopNum = a.loopNum;			//optional loop a x number of times
		}
		
	},
	
	getAllImgs: function() {
		var allDivs = $$('#fader div.'+this.imgclass);
		var numDivs = allDivs.length;

		var counter = 0;
		for(i=0; i<numDivs; i++) {
			if($(allDivs[i]).hasClassName(this.imgclass))
				{
					counter++;
					this.totalImgs++;
					this.imgs[counter] = $(allDivs[i]);
					$(this.imgs[counter]).setStyle({
						display: 'none'
					});
				}
		}
		
		$('content').observe('click', this.parseEvent.bindAsEventListener(this));

	},
	
	getAllPages: function() {
		var pages	=	$$("#fader div."+this.imgclass);
		var numDivs = pages.length;
		this.height	=	$(pages[0]).getHeight();
		this.width	=	$(pages[0]).getWidth();
		
		
		var counter = 0;
		for(i=0; i<numDivs; i++) {
			if($(pages[i]).hasClassName(this.imgclass))
				{
					counter++;
					this.totalImgs++;
					this.imgs[counter] = $(pages[i]);
					$(this.imgs[counter]).setStyle({
						display: 'inline'
					});
				}
		}
		
		this.fholder	=	this.width * pages.length;

		$('fholder').setStyle({
			width: this.fholder+'px',
			overflow: 'hidden'
		});
		
		$('content').observe('click', this.parseEvent.bindAsEventListener(this));
		//this.showImage();
		
	},
	
	parseEvent: function(e) {
		element	=	e.target;
		if(element.tagName == 'A' || $(element).tagName == 'IMG') {
			if($(element).hasClassName('gonext') || $(element).up().hasClassName('gonext')) {
				this.goNext();
			} else if($(element).hasClassName('goprev') || $(element).up().hasClassName('goprev')) {
				this.goPrev();
			} else if($(element).hasClassName('gopause')) {
				this.goPause();
			}
		}
	},
	
	getDimensions: function(dim) {
		switch(dim) {
			case 'height':
			return this.boxHeight;
			
			case 'width':
			return this.boxWidth;
		}
	},
	
	setTimer: function() {
		this.showImage();
		new PeriodicalExecuter(this.runApp.bind(this, 'next'), this.imgTimer);
	},
	
	showImage: function() {

		new Effect.Appear($(this.imgs[this.imgCounter]), {
			duration: 1.0
		});
		
		//$(this.imgs[this.imgCounter]).show();
	},
	
	fadeImage: function() {
		

		new Effect.Fade($(this.imgs[this.prevCounter]), {
			duration: 1.0
		});

		//$(this.imgs[this.prevCounter]).hide();
		
	},
	
	goNext: function() {
		this.clicked = true;
		if(this.mode == 'paginate') {
			if(this.imgCounter == this.totalImgs) {
				new Effect.Move($('fholder'), {
					x: (this.fholder - this.width)
				});
				this.imgCounter = 1;
			} else {
				new Effect.Move($('fholder'), {
					x: -this.width
				});
				this.imgCounter++;
			}
		} else {
			this.goPause();
			this.runApp('next');
			
		}
		
	},
	
	goPrev: function() {
		this.clicked = true;
		if(this.mode == 'paginate') {
			
			if(this.imgCounter == 1) {

			} else {
				new Effect.Move($('fholder'), {
					x: 	this.width
				});
				this.imgCounter--;
			}
			
		} else {
			this.goPause();
			this.runApp('prev');
			
		}
		
		
	},
	
	goPause: function() {
		if(!this.pause) {
			this.imgTimer = 0;
			this.pause = true;
			
		} else {
			this.imgTimer = this.options.delay;
			this.pause = false;
			
		}
		
	},
	
	runApp: function(e) {
		
		var now = new Date();
		   var ticks = now.getTime();

		
		this.prevCounter = this.imgCounter;
		
		if(e == 'next') {
			
			if(this.imgCounter == this.totalImgs) {
				
				this.imgCounter = 1;
				
			} else {
				
				if(this.imgTimer == 0) {
					if(this.clicked) {
						this.imgCounter++;
					}
				} else {
					this.imgCounter++;
				}
				
			}
			
		} else {
			
			this.imgCounter--;
			if(this.imgCounter == 1) {
				
				this.imgCounter == this.totalImgs;
				
			}
			
		}
		
		if(this.clicked) {
			this.show();
			this.clicked = false;
		}
		
		if(!this.pause) {
			this.show();
			this.clicked = false;
		}
	},
	
	show: function() {
		
			this.showImage();
			this.fadeImage();
	}
	
});