//Slideshow.js - Allows for transitional slideshow between images passed in an array, and allows parsing thru them with buttons passed.
//Written By Kristofer Baxter (kris@intellistrand.com) for use with Mootools v83+ (http://www.mootools.net)

/************************************* OPTIONS ***************************************
1) firstPeriod: #value# - the length of time (in ms) that the first image is viewable before a transition begins
2) otherPeriod: #value# - same as firstPeriod, but for all viewable times after the first.
3) fxDuration: #value# - the length of time (in ms) that the transition between images takes.
4) mediaBufferId: '#value#' - the id of the image inserted into the DOM used for opacity effects.
5) startingPlace: #value# - place to start in the array.
6) fxMethod: '#value#' - method to switch slides (opacity, top, left, right, etc)
7) fxStart: #value# - place to start transition
8) fxEnd: #value# - place to end transition
9) loop: #boolvalue# - loop the images or not
*/

var Slideshow = new Class({
	setOptions: function(options){
		this.options = {
			firstPeriod: 5000,
			otherPeriod: 7000,
			fxDuration: 1000,
			mediaBufferId: 'slideshowbuffer',
			captionId: 'slideshowcaption',
			loop: true
		}
		Object.extend(this.options, options || {});
	},

	initialize: function(updateId, parent, nexttrigger, prevtrigger, imagearray, captionarray, options){
		this.updateId = updateId;
		this.imagearray = imagearray;
		this.captionarray = captionarray;
		this.parentObj = parent;
		this.setOptions(options);
		this.currentShow = (this.options.startingPlace) ? this.options.startingPlace : 1;
		this.fxMethod = (this.options.fxMethod) ? this.options.fxMethod : 'opacity';
		this.fxStart = (this.options.fxStart) ? this.options.fxStart : 1;
		this.fxEnd = (this.options.fxEnd) ? this.options.fxEnd : 0;
		if (nexttrigger == null && prevtrigger == null) this.options.usetriggers = false; 
		else {
			this.options.usetriggers = true; 
			this.nexttrigger = nexttrigger;
			this.prevtrigger = prevtrigger;
		}
		if (captionarray != null) {
			var captionarea = new Element('p');
			captionarea.id = this.options.captionId;
			captionarea.setHTML(this.captionarray[0]);
			this.parentObj.adopt(captionarea);
		}
		this.clicked = false;
		this.preload(0);
	},
	
	createOverlay: function() {
		if ($(this.options.mediaBufferId)) $(this.options.mediaBufferId).remove();
		var secondImg = new Element('img');
		secondImg.id = this.options.mediaBufferId;
		this.parentObj.adopt(secondImg);
	},
	
	preload: function(count) {
		if (count < this.imagearray.length) {
			var temp = new Element('img');
			temp.onload = function() { this.preload((count+1)); }.bind(this);
			temp.src = this.imagearray[count];
		}
		else this.timerAction(true, true);
	},
	
	timerAction: function(first, keepgoing) {
		if (first && this.options.usetriggers) {
			if (this.nexttrigger != null) {
				this.nexttrigger.onclick = function() { 
					this.clicked = true;
					this.timer = $clear(this.timer);
					this.currentShow = ((this.currentShow+1) > this.imagearray.length) ? 1 : ++this.currentShow;
					this.createOverlay();
					$(this.options.mediaBufferId).src = this.updateId.src;
					this.updateId.src = this.imagearray[this.currentShow-1];
					if (this.captionarray != null) $(this.options.captionId).setHTML(this.captionarray[this.currentShow-1]);
					var effect = new Fx.Style($(this.options.mediaBufferId), this.fxMethod, {duration: 1000});
					effect.custom(this.fxStart,this.fxEnd);
				}.bind(this);
			}
			if (this.prevtrigger != null) {
				this.prevtrigger.onclick = function() {
					this.clicked = true;
					this.timer = $clear(this.timer);
					this.currentShow = ((this.currentShow-1) <= 0) ? this.imagearray.length : --this.currentShow;
					this.createOverlay();
					$(this.options.mediaBufferId).src = this.updateId.src;
					this.updateId.src = this.imagearray[this.currentShow-1];
					if (this.captionarray != null) $(this.options.captionId).setHTML(this.captionarray[this.currentShow-1]);
					var effect = new Fx.Style($(this.options.mediaBufferId), this.fxMethod, {duration: 1000});
					effect.custom(this.fxStart,this.fxEnd);
				}.bind(this);
			}
		}
		this.timer = $clear(this.timer);
		if (keepgoing) this.timer = (first) ? this.transition.delay(this.options.firstPeriod, this) : this.transition.delay(this.options.otherPeriod, this);
	},
	
	loopcheck: function() {
		if (!this.options.loop && this.currentShow == 1 && this.clicked) return false;
		else return true; 
	},
	
	transition: function() {
		this.currentShow = ((this.currentShow+1) > this.imagearray.length) ? 1 : ++this.currentShow;
		if (!this.loopcheck()) this.timerAction(false, false);
		else {
			this.createOverlay();
			$(this.options.mediaBufferId).src = this.updateId.src;
			this.updateId.src = this.imagearray[this.currentShow-1];
			if (this.captionarray != null) $(this.options.captionId).setHTML(this.captionarray[this.currentShow-1]);
			var effect = new Fx.Style($(this.options.mediaBufferId), this.fxMethod, {duration: 1000});
			effect.custom(this.fxStart,this.fxEnd);
			this.timerAction(false, true);
		}
	}
})