/*******************************************************************************
file:			slideshow.js
author:			oh@design-aspekt.com
date:			13-09-2005

requires:		Array with Image-Paths
				image with distinctive name

input params:	essential: Array with Image-Paths, image-name
				optional: layerID, direction, autostart
********************************************************************************/
var slideObject = null;						// very important: stores the Slideshow-Object, because setTimeout cannot call function with "this"
var activeLink = null;						// stores the active link-element in jump-navi -> used for swapHighlight

function slideshow() {	// Object constructor
	// object attributes defined by input params
	this.aSlides = arguments[0];			// name of the layer in which the image is located: relevant for NS4, otherwise var can be empty
	this.imgName = arguments[1];
	if(arguments[2]) {
		this.layerID = arguments[2];		// name of the image to be rotated
	} else { this.layerID = null; }
	if(arguments[3]) {
		this.direction = arguments[3];		// can be 1 or -1; e.g. the direction can be changed via mouse-click etc.
	} else { this.direction = 1; }
	if(arguments[4]) {
		this.autostart = arguments[4];		// can be "true" or "false"
	} else { this.autostart = "true"; }
	
	// further object attributes
	this.start = "true";					// initial state to prevent counting in rotate() before first rotation
	this.counter = 0;
	this.delay = false;						// Timeout for rotating Images
	this.slide = false;						// Timeout for delaying image rotation during loading process
	this.aPreLoad = new Array();			// Array used to preload images by creating new Image-Objects
	
	this.playStatus = (this.autostart == "true" ? "play" : "stop");		// switch to toggle Play/Stop-Button
	
	// global var to handle timeout
	slideObject = this;						// stores the Object for use in setTimeout()
	
	// object methods
	this.getImage = getImage;				// infamous cross-browser method to retrieve the image
	this.checkImg1 = checkImg1;				// checks if first image is loaded and then starts preLoader and rotation
	this.preLoader = preLoader;				// method creating new Image-Objects and thus forcing the browser to load the images at once
	this.rotateImg = rotateImg;				// method for rotating the image
	this.changeDirection = changeDirection;	// method to change the direction, e.g. triggered by Event-Handler
	this.stopSlide = stopSlide;				// method to to manually start slideshow, e.g. triggered by Event-Handler
	this.startSlide = startSlide;			// method to to manually interrupt slideshow, e.g. triggered by Event-Handler
	this.skipBack = skipBack;				// method to skip one image back, e.g. triggered by Event-Handler
	this.skipForward = skipForward;			// method to skip one image forward, e.g. triggered by Event-Handler
	this.jump2img = jump2img;				// method to jump to particular image, e.g. triggered by Event-Handler
	this.dropItem = dropItem;				// method to delete images from array when loading process is interrupted
	this.swapHighlight = swapHighlight;		// method to highlight image-links in jump-navi
	this.createImgLinks = createImgLinks	// writes numbered Links to jump to images directly
	this.createImgButtons = createImgButtons// writes clickable images to jump to images directly
	this.togglePlayButton = togglePlayButton// swaps Play-Button (play/stop)
	
	// init actions
	this.aPreLoad[0] = new Image();			// loads first Image into preLoad-Array
	this.aPreLoad[0].onerror = dropItem;	// if loaded image data is corrupt, the image is deleted from the array to prevent interruption during rotation
	this.aPreLoad[0].src = this.aSlides[0];
	this.checkImg1();
}

function getImage(imgName,layerID) {
	return (document.all || document.getElementById ? window.document.images[imgName] : layerID ? document.layers[layerID].document.images[imgName] : window.document.images[imgName]);
}

function checkImg1() {
	if(this.aPreLoad[0].complete == true) {
		this.preLoader();	// preloads images after first image has been loaded
		if(this.autostart == "true") { this.rotateImg(); }
	}
	else { setTimeout('slideObject.checkImg1()',100); }
}

function preLoader() {
	for(i=1; i<this.aSlides.length; i++) {
		this.aPreLoad[i] = new Image();
		this.aPreLoad[i].onerror = dropItem;	// if loaded image data is corrupt, the image is deleted from the array to prevent interruption during rotation
		this.aPreLoad[i].src = this.aSlides[i];	
	}
}

function rotateImg() {
	if(this.aPreLoad[this.counter].complete == true) {	// checks if current image has been loaded
		if(this.direction == 1 && this.start == "false") { (this.counter == (this.aPreLoad.length-1)) ? this.counter=0 : this.counter++; }
		else if(this.direction == -1  && this.start == "false") { (this.counter < 1) ? this.counter=this.aPreLoad.length-1 : this.counter--; }
		this.getImage(this.imgName,this.layerID).src = this.aPreLoad[this.counter].src;
		self.status = "Picture "+ (this.counter+1) + " of " + this.aPreLoad.length;
		if(this.start == "true") { this.start = "false"; }
		this.swapHighlight((this.counter+1));
		this.slide = setTimeout('slideObject.rotateImg()',5000);
	}
	else { // if image has still not been loaded, the function is called again with less delay
		self.status = "Picture "+ (this.counter+1) + " is still loading...";
		this.slide = setTimeout('slideObject.rotateImg()',100);
	}
}

function changeDirection() {
	if(this.direction == 1) { this.direction = -1; }
	else if(this.direction == -1) { this.direction = 1; }
}

function startSlide() { this.rotateImg(); }
function stopSlide() {
	if(this.slide != false) { clearTimeout(this.slide); }
}

function skipBack() {
	if(this.slide != false) { clearTimeout(this.slide); }
	if(this.delay != false) { clearTimeout(this.delay); }
	(this.counter < 1) ? this.counter=this.aPreLoad.length-1 : this.counter--;
	this.getImage(this.imgName,this.layerID).src = this.aPreLoad[this.counter].src;
	self.status = "Picture "+ (this.counter+1) + " of " + this.aPreLoad.length;
	this.delay = setTimeout('slideObject.rotateImg()',5000);
}

function skipForward() {
	if(this.slide != false) { clearTimeout(this.slide); }
	if(this.delay != false) { clearTimeout(this.delay); }
	(this.counter == (this.aPreLoad.length-1)) ? this.counter=0 : this.counter++;
	this.getImage(this.imgName,this.layerID).src = this.aPreLoad[this.counter].src;
	self.status = "Picture "+ (this.counter+1) + " of " + this.aPreLoad.length;
	this.delay = setTimeout('slideObject.rotateImg()',5000);
}

function jump2img(counter) {
	if(this.slide != false) { clearTimeout(this.slide); }
	if(this.delay != false) { clearTimeout(this.delay); }
	this.counter = counter;
	this.getImage(this.imgName,this.layerID).src = this.aPreLoad[this.counter].src;
	this.swapHighlight((this.counter+1));
	self.status = "Picture "+ (this.counter+1) + " of " + this.aPreLoad.length;
}

function dropItem() { this.del = this.aPreLoad.pop(); }

function swapHighlight(linkId) {
	if (this.linkType == "text") {
		linkElement = eval("document.getElementById('slide" + linkId + "')");
		if (activeLink) { activeLink.style.fontWeight = "normal"; }
		if (linkElement) {
			linkElement.style.fontWeight = "bold";
			activeLink = linkElement;
		}
	}
	else if (this.linkType == "icons") {
		linkElement = getImage("icn_prj_" + linkId);
		if (activeLink) { getImage(activeLink).src = Bilder["icn_prj"]["aus"].src; }
		if (linkElement) {
			linkElement.src = Bilder["icn_prj"]["an"].src;
			activeLink = "icn_prj_" + linkId;
		}
	}
}

function createImgLinks(imgName, layerID) {
	this.linkType = "text";	// type of link to jump to images directly
	for (i=0; i<this.aSlides.length; i++) {
		linkCounter = i+1;
		newSrc = this.aSlides[i];
		document.write("<a href=\"javascript:if (Slideshow.playStatus == 'play') { Slideshow.togglePlayButton('" + imgName + "', '" + layerID +"'); } Slideshow.jump2img(" + i + ");\" onFocus=\"this.blur()\" class=\"media\"><span id=\"slide" + linkCounter + "\">" + linkCounter + "</span></a>&nbsp;&nbsp;");
	}
}

function createImgButtons(imgName, layerID) {
	this.linkType = "icons"; // type of link to jump to images directly
	for (i=0; i<this.aSlides.length; i++) {
		linkCounter = i+1;
		newSrc = this.aSlides[i];
		document.write("<a href=\"javascript:if (Slideshow.playStatus == 'play') { Slideshow.togglePlayButton('" + imgName + "', '" + layerID +"'); } Slideshow.jump2img(" + i + ");\" onFocus=\"this.blur()\"><img src=\"./web/pix/icn_prjimg.gif\" name=\"icn_prj_" + linkCounter + "\" width=\"10\" height=\"10\" border=\"0\" alt=\"\"></a><br>");
	}
}

function togglePlayButton(imgName, layerID) {
	if (this.playStatus == "play") {
		this.getImage(imgName, layerID).src = Bilder[imgName]["an"].src;
		this.stopSlide();
		this.playStatus = "stop";
	}
	else {	
		this.getImage(imgName, layerID).src = Bilder[imgName]["aus"].src;
		this.startSlide();
		this.playStatus = "play";
	}
}