/*
  Script to display blending images
  (c) 2006, Sam Sykes - Taurus Systems
  http://www.taurussystems.co.uk/
*/

// variables
var currentOpacity = 100;
var currentDiv = 'blendA';
var numImages = 0;
var imgWidth = 0;
var imgHeight = 0;
var currentImage = 0;
var imgs = new Array();
var pauseSeconds = 0;
var basePath = '';

// Method for building the DIVs and starting the cycles
function imageBlender(basePathX, numImagesX, imgWidthX, imgHeightX, pauseSecondsX) {

  // set vars
  numImages = numImagesX;
  imgWidth = imgWidthX;
  imgHeight = imgHeightX;
  pauseSeconds = pauseSecondsX;
  basePath = basePathX;
  
  // create the styles
  document.writeln('<style type="text/css">');
  document.writeln('.frontImage,.backImage{width:'+imgWidth+'px;height:'+imgHeight+'px;position:absolute;top:0px;left:0px;z-index:1;}');
  document.writeln('.backImage{z-index: 2;}');
  document.writeln('</style>');

  // build the two divs
  document.write('<div style="position:relative;">');
  document.write('<div class="frontImage" id="blendA"><img src="'+basePath+'1.jpg" width="'+imgWidth+'" height="'+imgHeight+'" border="0" id="blendAimg" alt="[Image]"/></div>');
  document.write('<div class="backImage" id="blendB"><img src="'+basePath+'1.jpg" width="'+imgWidth+'" height="'+imgHeight+'" border="0" id="blendBimg" alt="[Image]"/></div>');
  document.write('</div>');

}

// Start the slideshow
function startBlender() {
  switchImages();
}

// Fade down the images
function fadeDown() {

  // check the image is ready
  if (imgs[currentImage] == null) {
    setTimeout(fadeDown, 50);
    return;
  }
  
  // do the fading
  if (currentOpacity > 0) {
    currentOpacity -= 5;
    setOpacity(currentDiv, currentOpacity);
    setTimeout(fadeDown, 50);
  } else {
    switchImages();
  }

}

// Load the next image in the sequence
function loadNextImage() {

  // set the right index number
  currentImage++;
  if (currentImage == numImages) {
    currentImage = 0;
  }
  
  // load the image in the background if it not loaded already
  if (imgs[currentImage] == null) {
    imgs[currentImage] = new Image(imgWidth, imgHeight);
    imgs[currentImage].src = basePath+(currentImage+1)+'.jpg';
  }
  
  // set the back image
  var backImage = document.getElementById(currentDiv+'img');
  backImage.src = imgs[currentImage].src;
  
}

// Switch the images
function switchImages() {

  // load the images
  var blendA = document.getElementById('blendA');
  var blendB = document.getElementById('blendB');
  
  // switch the order
  if (currentDiv == 'blendA') {
    blendB.className = 'backImage';
    blendA.className = 'frontImage';
    setOpacity('blendA', 100);
    loadNextImage();
    currentDiv = 'blendB';
  } else {
    blendA.className = 'backImage';
    blendB.className = 'frontImage';
    setOpacity('blendB', 100);
    loadNextImage();
    currentDiv = 'blendA';
  }
  
  // reset the opacity (for the back image)
  currentOpacity = 100;
  
  // wait and the fade again
  setTimeout(fadeDown, pauseSeconds*1000);
 
}

// Set the opacity of a given DIV
function setOpacity(divName, percentage) {

  // load the div and then fade
  var activeDiv = document.getElementById(divName);
  activeDiv.style.opacity = percentage / 100;
  activeDiv.style.filter = 'alpha(opacity='+percentage+')';
  
}