/*
 * Photo Slide Show
 * Ex:
 *
 * 	pSlide = new PhotoSlide;
 *  pSlide.setImageHolder(document.getElementById("imageHolder"));
 *  pSlide.setPrevButtonHolder(document.getElementById("prevButton"));
 *  pSlide.setPlayButtonHolder(document.getElementById("playButton"));
 *  pSlide.setNextButtonHolder(document.getElementById("nextButton"));
 *  pSlide.setPlayImage(playImage);
 *  pSlide.setPauseImage(pauseImage);
 *  pSlide.setImages(images);
 *  pSlide.start();
 */

var PhotoSlide = function(){};
PhotoSlide.prototype = {
	imageHolder: "",
	imageLinkHolder: "",
	maxImageWidth: 0,
	imageHolderID: "",
	imageHolderDiv: "",
	imageHolderDivID: "",
	playButtonHolder: "",
	playImage: "",
	pauseImage: "",
	images: new Array(),
	imageLinks: new Array(),
	timeoutTime: 6000,
	transitionTime: 2000,
	lastEffect: "Appear",

	scriptEffects: [
		/* Effects from Scriptaculous effects.js library. Each effect is an array of the effect name followed by the options to be passed to the effect */
		["Appear", { duration: 1.5}],
		["BlindDown"],
		["SlideDown"],
		["Grow"]
	],

	scriptCounterEffects: {
		"Appear" : ["Fade"],
		"BlindDown" : ["BlindUp"],
		"SlideDown" : ["SlideUp"],
		"Grow" : ["Shrink"]
	},

	currentImage: 0,
	timeout: 0,
	isPlay: true,

	setImageHolder: function(imgHolderID) {
		this.imageHolderID = imgHolderID;
		this.imageHolder = document.getElementById(imgHolderID);
		this.maxImageWidth = this.imageHolder.style.width;
		return this;
	},

	setImageLinkHolder: function(imgLinkHolderID) {
		this.imageLinkHolder = document.getElementById(imgLinkHolderID);
		return this;
	},

	setImageHolderDiv: function(imgHolderDivID) {
		this.imageHolderDivID = imgHolderDivID;
		this.imageHolderDiv = document.getElementById(imgHolderDivID);
		return this;
	},

	setPrevButtonHolder: function(btnHolderID) {
		// Self reference for object scope
		var _self = this;
		var btnHolder = document.getElementById(btnHolderID);
		btnHolder.onclick = function() { _self.manualPrevImage(); return false; };
		btnHolder.style.cursor = 'pointer';
		return this;
	},

	setPlayButtonHolder: function(btnHolderID) {
		// Self reference for object scope
		var _self = this;
		var btnHolder = document.getElementById(btnHolderID);		
		btnHolder.onclick = function() { _self.playImages(); return false; };
		btnHolder.style.cursor = 'pointer';
		this.playButtonHolder = btnHolder;
		this.prevPlayButtonClass = this.playButtonHolder.className;
		return this;
	},

	setNextButtonHolder: function(btnHolderID) {
		// Self reference for object scope
		var _self = this;
		var btnHolder = document.getElementById(btnHolderID);
		btnHolder.onclick = function() { _self.manualNextImage(); return false; };
		btnHolder.style.cursor = 'pointer';
		return this;
	},

	setImages: function(imgs) {
		this.images = imgs;
		return this;
	},

	setImageLinks: function(imgLinks) {
		this.imageLinks = imgLinks;
		return this;
	},

	setPlayImage: function(playImgID) {
		this.playImage = document.getElementById(playImgID);
		return this;
	},

	setPauseImage: function(pauseImgID) {
		this.pauseImage = document.getElementById(pauseImgID);
		return this;
	},

	setTimeoutTime: function(toTimeID) {
		this.timeoutTime = document.getElementById(toTimeID);
		return this;
	},

	swapPhoto: function(currentImageID) {
		// Self reference for object scope
		var _self = this;
		clearTimeout(this.timeout);
		this.currentImage = currentImageID;
		
		// Fix image number
		if(this.currentImage >= this.images.length) this.currentImage = 0;
		if(this.currentImage < 0) this.currentImage = this.images.length - 1;
		this.transitionOut();
		this.timeout = setTimeout(function(){_self.transitionIn();}, this.transitionTime);
	},

	start: function() {
		var _self = this;
		this.timeout = setTimeout(function(){_self.swapPhoto(1);}, this.timeoutTime);
	},

	pauseImages: function() {
		this.playButtonHolder.src = this.playImage.src;
		this.playButtonHolder.className = this.prevPlayButtonClass + ' play';
		this.isPlay = false;
		clearTimeout(this.timeout);
	},

	nextImage: function() {
		this.currentImage++;
		this.swapPhoto(this.currentImage);
	},

	prevImage: function() {
		this.currentImage--;
		this.swapPhoto(this.currentImage);
	},

	playImages: function() {
		if (this.isPlay) this.pauseImages();
		else
		{
			this.playButtonHolder.src = this.pauseImage.src;	
			this.playButtonHolder.className = this.prevPlayButtonClass;		
			this.isPlay = true;
			this.nextImage();
		}
	},

	manualNextImage: function() {
		this.pauseImages();
		this.nextImage();
	},

	manualPrevImage: function() {
		this.pauseImages();
		this.prevImage();
	},

	transitionOut: function(nextImage) {
		var counterEffect = this.scriptCounterEffects[this.lastEffect];
		var counterEffectType = counterEffect[0];
		var counterEffectOptions = {};
		if (counterEffect.length == 2) counterEffectOptions = counterEffect[1];

		Effect[counterEffectType](this.imageHolderDiv, counterEffectOptions);
	},

	transitionIn: function(nextImage) {
		var _self = this;
		var effectRand = this.scriptEffects[Math.floor(Math.random() * this.scriptEffects.length)];
		var effectType = effectRand[0];
		var effectOptions = {};
		if (effectRand.length == 2) effectOptions = effectRand[1];
		this.lastEffect = effectType;
		
		if (this.imageLinkHolder != '')
		{
			this.imageLinkHolder.href = this.imageLinks[this.currentImage];
		}
		this.imageHolder.src = this.images[this.currentImage].src;

		/* Fix width and height */
		if (parseInt(this.maxImageWidth) > this.images[this.currentImage].width) this.imageHolder.style.width = this.images[this.currentImage].width + 'px';
		else this.imageHolder.style.width = this.maxImageWidth;
		
		this.imageHolder.style.height = this.images[this.currentImage].height + 'px';

		clearTimeout(this.timeout);

		Effect[effectType](this.imageHolderDiv, effectOptions);
		if (this.isPlay) this.timeout = setTimeout(function(){_self.nextImage();}, this.timeoutTime);
	}
};