// slideshow.js

// Tom Auger, Zeitguys inc., www.zeitguys.com

// version history
// 1.0, Jan 2009 - automatic slideshow based on image folder containing sequential images (1.jpg, 2.jpg etc)
// 1.1, Apr 2009 - update for leorashemesh.com: add ability to designate a single folder rather than multiple folders
//               - and much more importantly, support for an opacity-based cross-fade

var slideshowDelay = 5000; // number of millisecs between images
var fadeDuration = 500; // milliseconds for cross-fade. Set to 0 for no fade

var imagesFolder = "images"; // the name of the folder that the images are stored in
var slideshowFolder = "slideshow"; // leave blank to use a folder inside the imageFolder whose name corresponds to the name of the page (eg: index/1.jpg)

var maxSlides = 20; // self-evident. Up to, but NOT including this number of images.

var fps = 60; // frames per second

// don't change below this
var lastImageIndex = 0;
var curImageIndex = 0;

var frameRate = 1000 / fps;
var currentAlphaFrame = 0;
var totalAlphaFrames = fadeDuration / frameRate;

var slideshowImages = new Array();
var slideshowStarted = false;
var imgTag;
var overImgTag;

var fadeTimer;




// Run code when the page loads.
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
addLoadEvent(startSlideshow);


function startSlideshow(){
	imgTag = document.getElementById("slideshowImage");
	
	if (imgTag){
		// slideshow image was found. go ahead with the rest
		
		if (fadeDuration){
			// we're fading images, so we need to put another image element directly over this one
			if (document.createElement){
				overImgTag = document.createElement("img");
				overImgTag.src = imgTag.src;
				overImgTag.alt = imgTag.alt;
				overImgTag.id = imgTag.id + "_over";
				
				insertAfter(imgTag, overImgTag);
				overImgTag.style.position = "absolute";
				var leftPad = getComputedStyleProperty(imgTag.parentNode, "paddingLeft");
				overImgTag.style.left = leftPad.substr(0,leftPad.length-2) + "px";
			} else {
				// createElement not supported, so cancel fade
				fadeDuration = 0;
			}
		}
		
		var nameMatch = document.location.href.match(/([^\/.]+)\.[^\/]+$/);
		var ssFolderName = slideshowFolder == "" ? nameMatch[1] : slideshowFolder;
		
		if (ssFolderName){
			for (var i=1; i<maxSlides; i++){
				var preloadImage = new Image();
				preloadImage.arrayIndex = i;
				preloadImage.onload = function(eventObj){ 
					slideshowImages[this.arrayIndex] = this; 
					if (this.arrayIndex > lastImageIndex) lastImageIndex = this.arrayIndex;
					triggerSlideshow(this.arrayIndex);
				}
				preloadImage.src = imagesFolder + "/" + ssFolderName + "/" + i + ".jpg";
			}
		} 
	} 
}

function triggerSlideshow(imageIndex){
	if (!slideshowStarted){
		slideshowStarted = true;
		imgTag.src = slideshowImages[imageIndex].src;
		setTimeout("showSlide()", slideshowDelay);
		curImageIndex = imageIndex;
	}
}


function showSlide(){
	// get next image, skipping any that might be missing or haven't loaded yet.
	while(!slideshowImages[++curImageIndex]){ // will cause a lockup if NONE of the images loaded successfully
		if (curImageIndex > lastImageIndex) curImageIndex = 0;
	}
	
	if (overImgTag && fadeDuration){
		overImgTag.src = imgTag.src;
		setAlpha(overImgTag, 100);
	}
	
	imgTag.src = slideshowImages[curImageIndex].src;
	if (overImgTag && fadeDuration){
		currentAlphaFrame = 0;
		fadeTimer = setInterval(fadeFrame, frameRate);
	} else {
		setTimeout("showSlide()", slideshowDelay);
	}
	
}

function fadeFrame(){
	currentAlphaFrame++;
	var currentAlpha;
	
	if (currentAlphaFrame < totalAlphaFrames){
		currentAlpha = 1 - (currentAlphaFrame / totalAlphaFrames);
	} else {
		clearInterval(fadeTimer);
		setTimeout(showSlide, slideshowDelay);
		currentAlpha = 0;
	}
	
	setAlpha(overImgTag, currentAlpha);
}


function getComputedStyleProperty(elemName, prop){
	var elem;
	if (typeof(elemName) == "string"){
		elem = document.getElementById(elemName);
	} else if (typeof(elemName) == "object"){
		elem = elemName;
	}
	if (window.getComputedStyle){
		return getComputedStyle(elem, null)[prop];
	} else {
		// for, what else, IE....
		return elem.currentStyle[prop];
	}
}


// This function inserts newNode after referenceNode
// thanks, Netlobo: http://www.netlobo.com/javascript-insertafter.html
function insertAfter(referenceNode, newNode){
    referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
}


// Change the opacity for different browsers
// thanks, brainerror: http://brainerror.net/scripts/javascript/blendtrans/
function setAlpha(object, opacity) {
    object.style.opacity = (opacity);
    object.style.MozOpacity = (opacity);
    object.style.KhtmlOpacity = (opacity);
    object.style.filter = "alpha(opacity=" + opacity*100 + ")";
}