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

/************************************* USAGE *****************************************
1) HTML/JS -------------------

<script type="text/javascript" charset="utf-8" src="scripts/mootools.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/slideshow.js"></script>
<script type="text/javascript" charset="utf-8">
	window.onload = function() {
		var imagearray = ['url', 'url', ..., 'url'];
		var mastheadslides = new Slideshow($('changing_image_id'), $('changing_image_id_parent'), imagearray, {optionname: optionvalue, ..., optionname: optionvalue});
	}
</script>

<div id="changing_image_id_parent">
	<img src="..." alt="Rotating Property Images" id="changing_image_id" />
</div>

2) CSS -----------------------

#changing_image_id_parent { position: relative; height: #max_height#px; overflow: hidden; }
#changing_image_id { position: absolute; top: 0; left: 0; z-index: 1; height: #max_height#px; }
#media-buffer { position: absolute; top: 0; left: 0; z-index: 2; height: #max_height#px; }
*/

/************************************* 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: 'media-buffer',
			loop: true
		}
		Object.extend(this.options, options || {});
	},

	initialize: function(updateId, parent, imagearray, options){
		this.updateId = updateId;
		this.imagearray = imagearray;
		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 (this.options.textarray) this.textParent = $(this.options.textparent);
		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) {
		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) 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];
			var effect = new fx.Style($(this.options.mediaBufferId), this.fxMethod, {duration: this.options.fxDuration});
			if (this.options.textarray) {
				textarray = $ES('div', this.textParent);
				textarray.each(function(el) {
					el.addClass('hidden');
				}.bind(this));
				textarray[this.currentShow-1].removeClass('hidden');
			}
			effect.custom(this.fxStart,this.fxEnd);
			this.timerAction(false, true);
		}
	}
})