var nextSlideshowImg = 0;
var nextSlideshowPic = 0;
var fadeInSlideshowObjectName;
var fadeOutSlideshowObjectName;

function nextSlideshow() {
  // We have two slideshow div's to cycle between and an array of images to cycle through

  // Figure out which direction we are transitioning
  var slideshowImgNewNum = nextSlideshowImg;
  var slideshowImgOldNum = (nextSlideshowImg + 1)%2;
  var slideshowImgNewName = "SlideShowImg"+slideshowImgNewNum;
  var slideshowImgOldName = "SlideShowImg"+slideshowImgOldNum;
  var slideshowImgNew = document.getElementById(slideshowImgNewName);
  var slideshowImgOld = document.getElementById(slideshowImgOldName);

  // Get ready - make sure we're at a known state
  // Some browsers flicker at 0.99 to 1.00 transition, so stay at max 0.99
  slideshowImgNew.style.opacity = 0.00;
  slideshowImgNew.style['-moz-opacity'] = 0.00;
  slideshowImgNew.style['-khtml-opacity'] = 0.00;
  //slideshowImgNew.style.border = '1px black solid';
  slideshowImgOld.style.opacity = 0.99;
  slideshowImgOld.style['-moz-opacity'] = 0.99;
  slideshowImgOld.style['-khtml-opacity'] = 0.99;

  // Set the background inner-div in the new div to load new image
  slideshowImgNew.src = slideshowPix[nextSlideshowPic];

  // Run the transition
  fadeInSlideshowObjectName = slideshowImgNewName;
  fadeOutSlideshowObjectName = slideshowImgOldName;
  fadeInSlideshow();
  if (slideshowPix.length > 1) fadeOutSlideshow();

  // Set next slideshow pic
  nextSlideshowPic++;
  if (nextSlideshowPic >=slideshowPix.length) nextSlideshowPic = 0;

  // Set next slideshow img
  nextSlideshowImg = (nextSlideshowImg+1)%2;

  // Let the next image preload out of sight in case we decided not to
  // preload all the images ahead of time
  document.getElementById("SlideShowPreloadImg").src = slideshowPix[nextSlideshowPic];

  // Let's do this again soon...
  setTimeout('nextSlideshow()',5000);
}

function fadeInSlideshow() {
  var o = document.getElementById(fadeInSlideshowObjectName);
  var currentOpacity = parseFloat(o.style.opacity);
  if (currentOpacity < 0.99) {
    var newOpacity = currentOpacity + 0.05;
    if (newOpacity > 0.99) newOpacity = 0.99;
    o.style.opacity = newOpacity;
    o.style['-moz-opacity'] = newOpacity;
    o.style['-khtml-opacity'] = newOpacity;
    setTimeout('fadeInSlideshow()',50);
  }
}

function fadeOutSlideshow() {
  var o = document.getElementById(fadeOutSlideshowObjectName);
  var currentOpacity = parseFloat(o.style.opacity);
  if (currentOpacity > 0) {
    var newOpacity = currentOpacity - 0.05;
    if (newOpacity < 0) newOpacity = 0;
    o.style.opacity = newOpacity;
    o.style['-moz-opacity'] = newOpacity;
    o.style['-khtml-opacity'] = newOpacity;
    setTimeout('fadeOutSlideshow()',50);
  }
}