// Constants.
var secondsPerImage = 5;
var secondsPerFade = 1;
var stepsPerSecond = 25;

// Timer variables.
var imageList;
var timeIndex = 0;

// DOM objects.
var frontDiv;
var frontImage;
var backDiv;
var backImage;

function setOpacity(image, div, value)
{
 image.style.MozOpacity = value;
 image.style.opacity = value;
 image.style.filter = "alpha(opacity="+value*100+")";
}

function stepTail(animationIndex)
{
var time = animationIndex / ((secondsPerImage + secondsPerFade) * stepsPerSecond);

  ++timeIndex;

  window.setTimeout(step, 1000 / stepsPerSecond);
}

function createImage(container)
{
  var image = document.createElement("img");
  image.className = "burnsImage";
  container.appendChild(image);
  return image;
}

function step()
{
  var animationIndex = timeIndex % (secondsPerImage * stepsPerSecond);

  if (animationIndex == 0)
  {
    // Clear the background.
    frontDiv.innerHTML = "";
    frontImage = createImage(frontDiv);
    frontImage.onload = function()
    {
      stepTail(animationIndex);
    }
    var currentImage = Math.floor(timeIndex / (secondsPerImage * stepsPerSecond)) % imageList.length;
    frontImage.src = imageList[currentImage];
  }
  else
  {
    if (animationIndex <= (secondsPerFade * stepsPerSecond))
    {
      var fade = animationIndex / (secondsPerFade * stepsPerSecond);
      setOpacity(frontImage, 'ImgContainer2', fade);
    }
    if (animationIndex >= 100)
    {
        
        var fade = animationIndex / (secondsPerFade * stepsPerSecond)-4;
        //window.alert(fade);
        setOpacity(frontImage, 'ImgContainer2', 1-fade); 
    }
    

    stepTail(animationIndex);
  }
}

function startSlideshow(images, frontDivName)
{
  imageList = images;

  frontDiv = document.getElementById(frontDivName);

  step();
}