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

/*
  Change History
  06/11/20 - Added additional call for known image names
  06/11/19 - New version. Complete re-write.
*/

var blendArray = new Array();
var fadeDownStep = 5;

// write the code for the styles
document.writeln('<style type="text/css">');
document.writeln('.fader {position:absolute;top:0px;left:0px;z-index:0;}');
document.writeln('</style>');

// new blender with array
function ImageBlender(blendName, secsPause) {

  // new object
  var nb = new Object();
  var imgArray = new Array();
  
  // see how many arguments have been passed to determine the type
  if (arguments.length == 3) {
    imgArray = arguments[2].split(",");
  } else if (arguments.length == 4) {
    for (var i=1; i<arguments[2]; i++) {
	  imgArray.push(arguments[3]+(i+1)+".jpg");  
    }
  }
  
  // if we have no images, then just exit
  if (imgArray.length == 0) {
	 throw new Error("incorrect number of arguments or no images for ImageBlender().");  
  }

  // set the data
  nb.name = blendName;
  nb.container = document.getElementById(blendName);
  nb.numImgs = imgArray.length+1;
  nb.secsPause = secsPause;
  nb.percentage = 100;
  nb.id = blendArray.length;
  nb.width = parseInt(nb.container.style.width);
  nb.height = parseInt(nb.container.style.height);
  
  // move the first DIV to the top
  nb.container.getElementsByTagName("div")[0].style.zIndex = nb.numImgs;

  // create the DIVs
  for (var i=2; i<=nb.numImgs; i++) {
    document.writeln("<div class='fader'><img src='./"+imgArray[i-2]+"' width='"+nb.width+"' height='"+nb.height+"' alt='image "+i+"'></div>");
    nb.container.lastChild.style.zIndex = (nb.numImgs-i);
  }

  // position all the DIVs within this blender object
  nb.divs = nb.container.getElementsByTagName("div");

  // add to the array
  blendArray.push(nb);

}

// fade down the top div
function blend(id) {

  // load the blender
  var b = blendArray[id];

  // load the top div
  var topDiv = b.divs[0];

  // set the percentage
  b.percentage -= fadeDownStep;

  // see if the percentage is rock bottom
  if (b.percentage <= 0) {

    // switch around
    b.divs = shiftDiv(b);
    topDiv.style.opacity = 100;
    topDiv.style.filter = 'alpha(opacity=100)';
    b.percentage = 100;

    // wait the number of seconds
    setTimeout("blend('"+b.id+"')",b.secsPause*1000);

  } else {

    // set the new percentage
    topDiv.style.opacity = b.percentage / 100;
    topDiv.style.filter = 'alpha(opacity='+b.percentage+')';

    // wait a little and go again
    setTimeout("blend('"+b.id+"')",100);

  }

  function shiftDiv(b) {

    // arrays
    var divs = b.divs;
    var nDivs = new Array();

    // get the first div
    var topDiv = divs[0];

    // loop through and move
    for (var i=1; i<divs.length; i++) {
      var div = divs[i];
      div.style.zIndex = b.numImgs - nDivs.length;
      nDivs[i-1] = div;
    }

    // insert at end
    nDivs[nDivs.length] = topDiv;
    topDiv.style.zIndex = 0;

    // return
    return nDivs;

  }

}

// start all the arrays
function startBlender() {

  // go through each blender and then start it
  for (var i=0; i<blendArray.length; i++) {

    var b = blendArray[i];
    setTimeout("blend('"+b.id+"')",b.secsPause*1000);

  }

}