Slideshow - stop fade on pause

[Lucy]

Following on from my previous topic here: (Which it appears it breaks my post if I link to it...) I decided to do another online course and practice some more. I am now back to doing a slideshow with pictures/info about various dogs (for practice). Code is below. The problem is that when it is paused, it's supposed to completely stop the fade in/out (whichever it was about to do) and allow it to continue when unpaused - and what's actually happening, is it starts/continues the effect it was supposed to stop, barring the very last 'timeout' (resulting in it stopping at a mostly-faded image). There are a few other problems with it, but that's the one I'm concerned with at the moment. I'm thinking clearTimeout might not be the best way to do this, maybe prevent the function from happening at all?

 

If anyone can suggest anything, that'd be great. I don't actually need this for anything, so I'm not looking for code that has already been written to copy - really want to get this working with as little help as possible.

(If you need to view the HTML, I can post that too). Thanks!

"use strict";var box = document.getElementById("slideshowbox");var imageHolder = document.getElementById("slideimage");var captions = document.getElementById("captions");var para = document.createElement("p");var pp = document.getElementById("pauseplay");var back = document.getElementById("back");var forward = document.getElementById("forward");var oddeven = 0;function dog(name, age, breed, gender, imagesrc)	{	this.name = name;	this.age = age;	this.breed = breed;	this.gender = gender;	this.image = imagesrc;	this.showInfo = function()	{		para.innerHTML = '';		imageHolder.innerHTML = '';		var picture = document.createElement("img");		picture.setAttribute("src", this.image);		picture.setAttribute("alt", this.name);		imageHolder.appendChild(picture);		para.appendChild((document.createTextNode('Name: ' + this.name)));		para.appendChild((document.createElement("br")));		para.appendChild((document.createTextNode('Age: ' + this.age)));		para.appendChild((document.createElement("br")));		para.appendChild((document.createTextNode('Breed: ' + this.breed)));		para.appendChild((document.createElement("br")));		para.appendChild((document.createTextNode('Gender: ' + this.gender)));		captions.appendChild(para);	}}var bernie = new dog('Bernie', '2 yr', 'Bernese Mountain', 'm', 'images/bernese.jpg');var fiona = new dog('Fiona', '5 yr', 'Dalmation', 'f', 'images/dalmation.jpg');var malty = new dog('Malty', '10 yr', 'Leonberger', 'm', 'images/leonberger.jpg');var shep = new dog('Shep', '8 months', 'German Shepherd', 'm', 'images/alsation.jpg')var dogs = [bernie, fiona, malty, shep];function slideShow()	{var fadeInCancel;var fadeOutCancel;var fadeInWasCancelled = false;var fadeOutWasCancelled = false;var fadeCounter;function fadeIn()	{	fadeInCancel = setTimeout(function()	{box.style.opacity="0.00"}, 1000);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.06"}, 1050);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.12"}, 1100);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.18"}, 1150);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.24"}, 1200);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.30"}, 1250);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.36"}, 1300);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.42"}, 1350);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.48"}, 1400);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.54"}, 1450);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.60"}, 1500);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.66"}, 1550);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.72"}, 1600);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.78"}, 1650);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.84"}, 1700);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.90"}, 1750);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.96"}, 1800);	fadeInCancel = setTimeout(function()	{box.style.opacity="1.00"}, 1850);	fadeCounter = true;}function fadeOut()	{	fadeOutCancel = setTimeout(function()	{box.style.opacity="1.00"}, 4150);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.96"}, 4200);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.90"}, 4250);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.84"}, 4300);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.78"}, 4350);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.72"}, 4400);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.66"}, 4450);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.60"}, 4500);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.54"}, 4550);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.48"}, 4600);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.42"}, 4650);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.36"}, 4700);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.30"}, 4750);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.24"}, 4800);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.18"}, 4850);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.12"}, 4900);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.06"}, 4950);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.00"}, 5000);	fadeCounter = false;}pp.onclick = function()	{	function pause()		{		clearTimeout;		console.log('Paused');		pp.value = 'Continue';		//Only seems to cancel the last timeout in the function		if (fadeCounter === false)	{			clearTimeout(fadeInCancel);			fadeInWasCancelled = true;		};		if (fadeCounter === true)	{			clearTimeout(fadeOutCancel);			fadeOutWasCancelled = true;		};	}	function play()	{		console.log('Continued');		pp.value = 'Pause';		timing = setInterval(x, 5000);		if (fadeInWasCancelled === true)	{			fadeIn();		};		if (fadeOutWasCancelled === true)	{			fadeOut();		};	}	if (oddeven % 2 === 0)	{	pause();	}	else	{	play();	};	oddeven++;};var counter = 0;	function x()	{		forward.onclick = function()	{			if (counter >= dogs.length)	{				counter = 0;			};			counter = counter + 1;			if (counter >= dogs.length)	{				counter = 0;			};			dogs[counter].showInfo();		};		back.onclick = function()	{			console.log('Going backward');			counter = counter - 1;			if (counter < 0)	{				counter = dogs.length -1;			};			dogs[counter].showInfo();		};				if (counter < dogs.length)	{					if (fadeOutWasCancelled === false)	{						fadeOut();					};					counter++;					if (counter >= dogs.length || counter < 0)	{					counter = 0;					console.log('Restarting...');					};					captions.innerHTML = '';					dogs[counter].showInfo();					if (fadeInWasCancelled === false)	{						fadeIn();					};				};	}var timing = setInterval(x, 5000);}slideShow();

Edited March 5, 2015 by Lucy

[davej]

When you are paused why do you keep calling x() ?

[Lucy]

?

 

Did none of my post make sense...?

 

Edit - For some reason only the question mark in your post showed up before.

 

I'm not seeing that? It only calls x if you click play again.

Edited March 5, 2015 by Lucy

[justsomeguy]

One issue is that in your fadeIn and fadeOut functions, you keep overwriting the fadeInCancel and fadeOutCancel variables. They will point to the last animation only. Instead of queuing up all of the animations at once like that, it's more common to have a single function when checks the current value and changes it by a little bit until it doesn't need to run any more. So your fadeIn function, for example, would get the current opacity, check to make sure it is less than 1, add .06 to it (or whatever your step value is), set the new opacity, and if it's still less than 1 then it would call setTimeout to schedule itself to run again for the next step. That way you only have one timeout to cancel.

[davej]

Yeah, as JSG says, as a first step please take your crazy fadeIn and fadeOut functions and rewrite them.

 

Perhaps something like...

var fadeValue; //globalfunction fadeIn() {   var FADESTEP = .06;   var FADETIMESTEP = 50;   if(fadeValue<1){      box.style.opacity = fadeValue;      fadeValue += FADESTEP;      setTimeout(fadeIn, FADETIMESTEP);   }else if(fadeValue>=1){      fadeValue = 1;      box.style.opacity = fadeValue;   }   fadeCounter = true;}

... and as far as fadeInCancel goes... why would you ever want to cancel a fade?

[justsomeguy]

why would you ever want to cancel a fade?

Maybe you decided you're so over that fade.Whatever the case, it's technically possible.

[davej]

I think her main problem is that she doesn't cancel the setInterval. The fade ends quickly even if you don't cancel it.

[Lucy]

Okay, thanks for the advice. I'll work on it...

 

 

... and as far as fadeInCancel goes... why would you ever want to cancel a fade?

 

 

 

 

 

Because if the slideshow is paused, I want it to stop on the image it's at, not wait a few seconds and fade it out most of the way and then stop - it looks ridiculous.

[davej]

 

Because if the slideshow is paused, I want it to stop on the image it's at, not wait a few seconds and fade it out most of the way and then stop - it looks ridiculous.

 

Yes if you pause a slideshow do you want to look at a half faded image? That is the question. I would expect the answer is no. So then you don't need a variable like fadeInCancel assigned to setTimeout(). You just need a boolean decision before starting the next image transition.

[Lucy]

Ah, that makes sense. In your solution, you use the function inside the function - is that intentional, and if so, is it commonly done? I didn't actually expect that to work, but it does and doesn't show any errors, I'm just surprised that it can tell what the function is. If that makes sense.

Edited March 8, 2015 by Lucy

[davej]

...you use the function inside the function - is that intentional, and if so, is it commonly done?

 

Do you mean this?

function fadeMe() {    // do some stuff  setTimeout(fadeMe, 5000);}

Yes, that is commonly done. You are merely scheduling a future event so that the same function will be called again.

[Lucy]

Question relating to this:

If a function is run every five seconds, but something makes the function take longer than that - what happens? Does it wait for the function to complete, then wait five seconds before running again, or is the function interrupted after five seconds?

 

Edit - never mind, found the answer - it waits

Edited March 13, 2015 by Lucy

[Lucy]

I now have this code:

"use strict";var box = document.getElementById("slideshowbox");var imageHolder = document.getElementById("slideimage");var captions = document.getElementById("captions");var para = document.createElement("p");var pp = document.getElementById("pauseplay");var back = document.getElementById("back");var forward = document.getElementById("forward");var oddeven = 0;function dog(name, age, breed, gender, imagesrc)	{	this.name = name;	this.age = age;	this.breed = breed;	this.gender = gender;	this.image = imagesrc;	this.showInfo = function()	{		para.innerHTML = '';		imageHolder.innerHTML = '';		var picture = document.createElement("img");		picture.setAttribute("src", this.image);		picture.setAttribute("alt", this.name);		imageHolder.appendChild(picture);		para.appendChild((document.createTextNode('Name: ' + this.name)));		para.appendChild((document.createElement("br")));		para.appendChild((document.createTextNode('Age: ' + this.age)));		para.appendChild((document.createElement("br")));		para.appendChild((document.createTextNode('Breed: ' + this.breed)));		para.appendChild((document.createElement("br")));		para.appendChild((document.createTextNode('Gender: ' + this.gender)));		captions.appendChild(para);	}}var bernie = new dog('Bernie (pos 1)', '2 yr', 'Bernese Mountain', 'm', 'images/bernese.jpg');var fiona = new dog('Fiona (pos 2)', '5 yr', 'Dalmation', 'f', 'images/dalmation.jpg');var malty = new dog('Malty (pos 3)', '10 yr', 'Leonberger', 'm', 'images/leonberger.jpg');var shep = new dog('Shep (pos 4)', '8 months', 'German Shepherd', 'm', 'images/alsation.jpg')var dogs = [bernie, fiona, malty, shep];function slideShow()	{var fadeInCancel;var fadeOutCancel;var fadeCounter;var j = 0;var k = 1;var o;var paused = false;var fadeInRunning = false;var fadeOutRunning = false;var timing;function opacity(opac)	{		o = opac.toString();		box.style.opacity = o;}function fadeIn()	{fadeInRunning = true;	if (paused === true)	{		j = 0;		opacity(1);	}	else if (j <= 1.03)	{		opacity(j);		j += 0.06;		setTimeout(fadeIn, 50);	}	else if (j ===  1.0200000000000005 || j === 1.0800000000000005)	{		opacity(1);	};	if (j > 1)	{		fadeInRunning = false;	};}function fadeOut()	{fadeOutRunning = true;	if (paused === true)	{		k = 1;		opacity(1);	}	else if (k >= 0)	{		opacity(k);		k -= 0.06;		setTimeout(fadeOut, 50);			}	else if (k === -0.020000000000000406)	{		opacity(0);	};	if (k < 0)	{		fadeOutRunning = false;	};}//on pause/play//pp.onclick = function()	{	function pause()		{		paused = true;		pp.value = 'Continue';		opacity(1);				if (secsLeft < 0)	{			secsLeft = 0;		};	}	function play()	{		paused = false;		console.log('Continued');		pp.value = 'Pause';	}	if (oddeven % 2 === 0)	{	pause();	}	else	{	play();	};	oddeven++;};var counter = 0;	function x()	{	//forwards/backwards//		forward.onclick = function()	{			paused = true;			console.log(paused);			if (counter >= dogs.length)	{				counter = 0;			};			console.log('Going forward');			counter = counter + 1;			if (counter >= dogs.length)	{				counter = 0;			};			paused = false;			dogs[counter].showInfo();		};		back.onclick = function()	{			paused = true;			console.log('Going backward');			counter = counter - 1;			if (counter < 0)	{				counter = dogs.length -1;			};			paused = false;			dogs[counter].showInfo();		};				//main//				if (paused === false)	{				fadeOutRunning = false;				//k === 1 means that fadeout wasn't finished before the pause//				if (k === 1 && fadeInRunning === false)	{						counter--;						fadeOut();					};				if (counter < dogs.length)	{					if (paused === false && fadeOutRunning === false)	{						j = 0;						fadeIn();					};					if (fadeOutRunning === false)	{					captions.innerHTML = '';					dogs[counter].showInfo();					};					k = 1;					if (fadeOutRunning === false)	{					setTimeout(fadeOut, 3900);					};					counter++;					if (counter >= dogs.length || counter < 0)	{						counter = 0;					};					j = 0;				};				};	}timing = setInterval(x, 10000);}slideShow();}

The problem is that if you pause as it is fading out, then continue, it waits for 1-5 seconds on the still image (it varies... haven't figured out why) before fading out again and going onto the next slide. I don't know where this delay is coming from. I've disabled the fade in function, I've changed the interval to ten seconds for the slideshow to check it isn't that (because if it was, the delay would be longer). If I put a console.log statement right after 'if (paused === false)' that is also delayed. So the delay is happening right at the beginning of that section of code. Any ideas?

[davej]

Ok, what I immediately see is that you have a function named x() and you are calling that function every 10000 milliseconds (every 10 seconds) and so that is definitely going to limit the pace of anything that x does. Also you never cancel the ten second interval, so you are definitely on a ten second cycle of activity. What this means is that pressing the continue button does not immediately call x() to get the slideshow to continue.

 

Then I see your goofy value tests...

 if (j ===  1.0200000000000005 || j === 1.0800000000000005)

...which are an utterly terrible idea. Don't do this.

 

The main complication you seem to have thrown into this is an override of the fade opacity during pause. This idea was indeed suggested earlier -- but somehow the idea has mutated into a messy thing that seems rather pointless. What I was actually suggesting earlier was to simply not allow a pause to occur until after the fade was completed.

 

But here is something that aborts the fade... which I'm presuming is what you want to do?

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>#photo{display:block;height:480px;width:640px;border:5px solid #bbb;border-radius:5px;}#caption{width:640px;border:5px solid #bbb;border-radius:5px;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>"use strict";window.onload = function(){document.getElementById('debug').innerHTML = '';var box = document.getElementById("slideshowbox");var imageHolder = document.getElementById("slideimage");var captions = document.getElementById("captions");var para = document.createElement("p");var pp = document.getElementById("pauseplay");var back = document.getElementById("back");var forward = document.getElementById("forward");var oddeven = 1;function Dog(name, age, breed, gender, imagesrc) {//constructor    this.name = name;    this.age = age;    this.breed = breed;    this.gender = gender;    this.image = imagesrc;    this.showInfo = function() {        para.innerHTML = '';        imageHolder.innerHTML = '';        var picture = document.createElement("img");        picture.setAttribute("src", this.image);        picture.setAttribute("alt", this.name);        picture.setAttribute("id", 'photo');        imageHolder.appendChild(picture);        para.appendChild((document.createTextNode('Name: ' + this.name)));        para.appendChild((document.createElement("br")));        para.appendChild((document.createTextNode('Age: ' + this.age)));        para.appendChild((document.createElement("br")));        para.appendChild((document.createTextNode('Breed: ' + this.breed)));        para.appendChild((document.createElement("br")));        para.appendChild((document.createTextNode('Gender: ' + this.gender)));        captions.appendChild(para);    };}//end of class constructorvar bernie = new Dog('Bernie (pos 0)', '2 yr', 'Bernese Mountain', 'm', 'images/bernie.jpg');var fiona = new Dog('Fiona (pos 1)', '5 yr', 'Dalmation', 'f', 'images/fiona.jpg');var malty = new Dog('Malty (pos 2)', '10 yr', 'Leonberger', 'm', 'images/malty.jpg');var shep = new Dog('Shep (pos 3)', '8 months', 'German Shepherd', 'm', 'images/shep.jpg')var dogs = [bernie, fiona, malty, shep];var fade = 1;var o;var paused = false;var timing;var counter = null;var fading = false;pp.onclick = plypse; // assign event handlersforward.onclick = fwd;back.onclick = bck;function plypse() {//alert('play-pause');    function pause(){        paused = true;        pp.value = 'Continue'; // set button label        opacity(1);        clearTimeout(timing); // abort the next() callback    };    function play() {        paused = false;        console.log('Continued');        if(fading==true){            next(false);        }else{            next(true);        }        pp.value = 'Pause'; // set button label    };    if (oddeven % 2 === 0) {        pause();    } else {        play();    }    oddeven++;}// end of plypsefunction fwd() {            paused = true;            pp.value = 'Continue'; // set pause button label            clearTimeout(timing); // abort the next() callback            console.log(paused);            counter = counter + 1;            if (counter >= dogs.length)    {                counter = 0;            }            console.log('Going forward');            dogs[counter].showInfo();}// end of fwdfunction bck() {            paused = true;            pp.value = 'Continue'; // set pause button label            clearTimeout(timing); // abort the next() callback            console.log('Going backward');            counter = counter - 1;            if (counter < 0)    {                counter = dogs.length-1;            }            dogs[counter].showInfo();}//end of bckfunction opacity(opac) {   o = opac.toString();   box.style.opacity = o;}function fadeIn() {    if (paused === true) {        fade = 1;        opacity(1);    }    else if (fade < 1.00) {        opacity(fade);        fade += 0.06;        setTimeout(fadeIn, 50);    }    else if (fade >= 1.00) {        opacity(1);        fade = 1;        fading = false;    }}// end funcfunction fadeOut()    {    fading = true;    if (paused === true)    {        fade = 1;        opacity(1);    }    else if (fade > 0)    {        opacity(fade);        fade -= 0.06;        setTimeout(fadeOut, 50);    }    else if (fade <= 0)    {        opacity(0);        fade = 0;        dogs[counter].showInfo();        setTimeout(fadeIn, 50);    }    }// end funcfunction next(inc) {    //document.getElementById('debug').innerHTML += 'before: x counter='+counter+' paused='+paused +'<br/>';        if (paused === false) {       if (counter == null) {          counter = 0;       }else if (inc == false){          // don't increment counter       }else{          counter++;          if (counter >= dogs.length) {             counter = 0;          }       }       fadeOut(); // begin fadeout           timing = setTimeout(next,10000); // rate of slides is 10 seconds    }}//end of next}//end onload</script></head><body><div id="slideshowbox"><div id="slideimage"></div><div id="captions"></div></div><input type="button" id="pauseplay" value="Play"/><input type="button" id="back" value="Back"/><input type="button" id="forward" value="Forward"/><div id="debug"></div></body>    </html>

Here is another version that does not abort a fade -- which is what I had proposed you consider...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>#photo{display:block;height:480px;width:640px;border:5px solid #bbb;border-radius:5px;}#caption{width:640px;border:5px solid #bbb;border-radius:5px;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>"use strict";var box; var imageHolder;var captions; var para; var pp; var back;var forward;var oddeven;var dogs;var fade;var o;var paused;var counter;var timing;window.onload = function(){box = document.getElementById("slideshowbox");imageHolder = document.getElementById("slideimage");captions = document.getElementById("captions");para = document.createElement("p");pp = document.getElementById("pauseplay");back = document.getElementById("back");forward = document.getElementById("forward");oddeven = 1;fade = 1;paused = true;counter = null;var bernie = new Dog('Bernie (pos 0)', '2 yr', 'Bernese Mountain', 'm', 'images/bernie.jpg');var fiona = new Dog('Fiona (pos 1)', '5 yr', 'Dalmation', 'f', 'images/fiona.jpg');var malty = new Dog('Malty (pos 2)', '10 yr', 'Leonberger', 'm', 'images/malty.jpg');var shep = new Dog('Shep (pos 3)', '8 months', 'German Shepherd', 'm', 'images/shep.jpg')dogs = [bernie, fiona, malty, shep];pp.onclick = playpse;forward.onclick = fwd;back.onclick = bck;}//end onloadfunction Dog(name, age, breed, gender, imagesrc) {//constructor	this.name = name;	this.age = age;	this.breed = breed;	this.gender = gender;	this.image = imagesrc;	}//endDog.prototype.showInfo = function() {    para.innerHTML = '';    imageHolder.innerHTML = '';    var picture = document.createElement("img");    picture.setAttribute("src", this.image);    picture.setAttribute("alt", this.name);    picture.setAttribute("id", 'photo');    imageHolder.appendChild(picture);    para.appendChild((document.createTextNode('Name: ' + this.name)));    para.appendChild((document.createElement("br")));    para.appendChild((document.createTextNode('Age: ' + this.age)));    para.appendChild((document.createElement("br")));    para.appendChild((document.createTextNode('Breed: ' + this.breed)));    para.appendChild((document.createElement("br")));    para.appendChild((document.createTextNode('Gender: ' + this.gender)));    captions.appendChild(para);}//endfunction playpse()	{//alert('play-pause');	function pause(){		paused = true;		console.log(paused);		forward.disabled = '';		back.disabled = '';		pp.value = 'Continue'; // set button label	};	function play()	{ // play/continue event		document.getElementById('debug').innerHTML += '<br/>'+ pp.value +': ';		paused = false;		console.log('Continued');		pp.value = 'Pause'; // set button label		forward.disabled = 'true';		back.disabled = 'true';		fadeOut();	};	if (oddeven % 2 === 0) {	    pause();	} else {	    play();	}	oddeven++;}//end of funcfunction fwd() {				counter = counter + 1;	if (counter >= dogs.length)	{	    counter = 0;	}	console.log('Going forward');	dogs[counter].showInfo();}function bck() {	counter = counter - 1;	if (counter < 0)	{	    counter = dogs.length-1;	}	console.log('Going backward');	dogs[counter].showInfo();}function opacity(opac)	{   o = opac.toString();   box.style.opacity = o;}function fadeIn() {	if (fade < 1.00)	{	    fade += 0.06;	    opacity(fade);	    timing = setTimeout(fadeIn, 50);	}	else if (fade >= 1.00)	{	    opacity(1);            fade = 1;	    clearTimeout(timing);	    timing = setTimeout(fadeOut, 8000);	}}// end funcfunction fadeOut() {	if (fade==1 && !paused){		var d = new Date(); 		var s = d.getSeconds();                document.getElementById('debug').innerHTML += d.getMinutes() +':'+ (s<10?'0'+s:s) +' ';		fade -= 0.06;		opacity(fade);		clearTimeout(timing);		timing = setTimeout(fadeOut, 50);	} else if (fade<1 && fade>0) {		fade -= 0.06;		opacity(fade);		timing = setTimeout(fadeOut, 50);	} else if (fade <= 0) { 		fade = 0;		opacity(0);                		if (counter == null) {	      	    counter = 0;		}else{		    counter++;		    if (counter>=dogs.length){		        counter = 0;		    }		}                dogs[counter].showInfo();                timing = setTimeout(fadeIn, 50);	}	}// end func</script></head><body><div id="slideshowbox"><div id="slideimage"></div><div id="captions"></div></div><input type="button" id="pauseplay" value="Play"/><input type="button" id="back" value="Back"/><input type="button" id="forward" value="Forward"/><div id="debug"></div></body>    </html>