////NO need to edit beyond here/////////////
/* Place the following wherever you want the images to be placed:
   <SCRIPT LANGUAGE="JavaScript1.2">StartUP_displayFadingImages()</SCRIPT>
   (replace &gt; with > and &lt; with <) */
   
   
/* Other Global Definitions */
var ie4 = document.all
var dom = document.getElementById
var curCanvas = "canvas0"
var curpos = 10
var degree = 10
var curImageIndex = 0 
var ForwardRotation = true;
var RotateTimerObjID = null;
var FaderTimerObjID  = null;  /* another timer obj ID */

/*****************************************************************************
 ** Use this function to place the DIV tag where you want it to go.
 ** (an img tag will be placed there for non supported browsers)             */
function StartUP_displayFadingImages(container)
{
  var preloadedimages=new Array()
  for (p=0;p<fadeimages.length;p++)
  {
    preloadedimages[p]=new Image()
    preloadedimages[p].src=fadeimages[p]
  }

  if (ie4||dom)
  {
    container.innerHTML = '<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>';
    //document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
    var crossobj=ie4? eval("document.all." + curCanvas) : document.getElementById(curCanvas);
    crossobj.innerHTML = '<img height="' + slideshow_height + '" width="' + slideshow_width + '" src="' + fadeimages[curImageIndex]+'">';
    FaderTimerObjID = eval('setInterval("fadeImage(curCanvas)",50)');
    
    // start the script after window loads... makes the first image display correct
    // amount of time
    window.onload = startRotation
  }
  else
  {
    container.innerHTML = '<img height=' + slideshow_height + ' width=' + slideshow_width + ' name="defaultslide" src="'+fadeimages[0]+'">';
    //document.write('<img height=' + slideshow_height + ' width=' + slideshow_width + ' name="defaultslide" src="'+fadeimages[0]+'">')
    startRotation()
  }
} /* end StartUP_displayFadingImages() */

/* This function starts the timer that changes the images. 
 * The timerID is stored in RotateTimerObjID */
function startRotation()
{
	window.clearInterval(RotateTimerObjID);
	RotateTimerObjID = eval('setInterval("rotateImage(' + ForwardRotation + ')",pause)');
}

function rotateImage(forwards)
{
  var nextImageIndex = 0
  if (!forwards)
     nextImageIndex = (curImageIndex-1 >= 0) ? curImageIndex-1  : fadeimages.length-1
  else
     nextImageIndex = (curImageIndex < fadeimages.length-1) ? curImageIndex+1 : 0

  if (ie4 || dom)
  {
    nextCanvas = (curCanvas!="canvas0") ? "canvas0" : "canvas1"
    resetCanvas(nextCanvas) /* make the next image come up nearly all faded */

	/* Put the next image in the hidden canvas */
	var tempobj = ie4 ? eval("document.all."+nextCanvas) : document.getElementById(nextCanvas)
	tempobj.innerHTML = '<img height="' + slideshow_height + '" width="' + slideshow_width + '" src="' + fadeimages[nextImageIndex]+'">';
	tempobj.style.zIndex = 20  /* set the image on top */
    var crossobj=ie4? eval("document.all."+curCanvas) : document.getElementById(curCanvas)
    crossobj.style.zIndex = 19 /* demote the previous images display order */
    /* start the fader */
    curCanvas = nextCanvas
    FaderTimerObjID = eval('setInterval("fadeImage(curCanvas)",50)')
	
    nextCanvas = (curCanvas!="canvas0") ? "canvas0" : "canvas1"
 }
  else  
    document.images.defaultslide.src=fadeimages[nextImageIndex]
 
  window.defaultStatus = ""
  curImageIndex = nextImageIndex
}

function resetCanvas(Canvas)
{
  curpos=10
  var crossobj=ie4? eval("document.all."+Canvas) : document.getElementById(Canvas)
  if (crossobj.filters)
    crossobj.filters.alpha.opacity=curpos
  else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=curpos/100
}
  
function fadeImage(strCanvas)
{
  var canvasObj = ie4 ? eval("document.all." + strCanvas) : document.getElementById(strCanvas)

  if (curpos<100){
    curpos += 10
  if (canvasObj.filters)
    canvasObj.filters.alpha.opacity=curpos
  else if (canvasObj.style.MozOpacity)
    canvasObj.style.MozOpacity=curpos/100
  }
  else{
    window.clearInterval(FaderTimerObjID)
  }
}


function killAllThreads()
{
  window.clearInterval(RotateTimerObjID)
  window.clearInterval(FaderTimerObjID)
  RotateTimerObjID = null
}

/*****************************************************************************/
/* USER BUTTONS */

function playPauseImg()
{
  Paused = (RotateTimerObjID == null)
  killAllThreads()
  displayPausePlay(Paused);
  if (Paused)
    startRotation()
}
function previousImg()
{
  if (RotateTimerObjID != null) playPauseImg();
  killAllThreads()
  rotateImage(false);
}
function nextImg()
{
  if (RotateTimerObjID != null) playPauseImg();
  killAllThreads()
  rotateImage(true);
}

function displayPausePlay(Paused)
{
  var playObj= ie4 ? document.all.PLAYPAUSEIMG : document.getElementById("PLAYPAUSEIMG")
  if (Paused) 
	playObj.innerHTML='<b>Pause</b>'
  else
	playObj.innerHTML='<b>Play</b>'
}