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

/*
  Change History
  07/04/12 - Z-Index fix
  06/11/20 - Added additional call for known image names
           - Added checkers to ensure that images are loaded before fading begins
		   - New command SetBlenderSpeed() added to increase blend speed
  06/11/19 - New version. Complete re-write.
*/

var blendArray = new Array();

// write the code for the styles
document.writeln('<style type="text/css">');
document.writeln('.fader {position:absolute;top:0px;left:0px;z-index:0;visibility:hidden;}');
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 = 0;
  nb.speed = [100,5];
  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);

}

// set the speed
function SetBlenderSpeed(id,speed) {
	
  // define the var
  var b;
	
  // scan for the right blender
  for (var i=0; i<blendArray.length; i++) {
     b = blendArray[i];
	 if (b.name == id) break;
  }
	
  // set the speed
  switch (speed) {
	 case 1:
	   b.speed = [200,5];
	   break;
	 case 2:
	   b.speed = [100,5];
	   break;
	 case 3:
	   b.speed = [50,5];
	   break;
	 case 4:
	   b.speed = [20,5];
	   break;
	 case 5:
	   b.speed = [10,10];
	   break;
	 case 6:
	   b.speed = [10,20];
	   break;
	 default:
	   break;
  }
  
}

// prepare the first image
function prepareFirst(id) {
	
  // load the blender
  var b = blendArray[id];

  // load the top div
  var topDiv = b.divs[0];
  
  // check that the image in the top div has loaded before we start to fade
  var topDivImg = topDiv.getElementsByTagName("img")[0];
  if (!topDivImg.complete) {
    setTimeout("prepareFirst('"+b.id+"')",10);
	return;
  }
  
  // make completely invisible to start with
  topDiv.style.opacity = 0;
  topDiv.style.filter = 'alpha(opacity=0)';

  // let's go
  topDiv.style.visibility = "visible"; 
  
  // and start
  fadeUpFirst(b.id);
  
}

// fade up the first image (sexy!)
function fadeUpFirst(id) {
	
  // load the blender
  var b = blendArray[id];

  // load the top div
  var topDiv = b.divs[0];
  
  // set the opacity
  b.percentage += 20;
  
  // make completely invisible to start with
  topDiv.style.opacity = b.percentage / 100;
  topDiv.style.filter = 'alpha(opacity='+b.percentage+')';
  
  // all done?
  if (b.percentage == 100) {
    setTimeout("blend('"+b.id+"')",b.secsPause*1000);
  } else {
	setTimeout("fadeUpFirst('"+b.id+"')", 25);  
  }
  
}

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

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

  // load the top div
  var topDiv = b.divs[0];
  
  // check that the image in the top div has loaded before we start to fade
  var topDivImg = topDiv.getElementsByTagName("img")[0];
  if (!topDivImg.complete) {
    setTimeout("blend('"+b.id+"')",10);
	return;
  }
  
  // make sure that the second div is visible
  if (b.percentage == 100) {
	 b.divs[1].style.visibility = "visible"; 
  }

  // set the percentage
  b.percentage -= b.speed[1];

  // 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+"')", b.speed[0]);

  }

  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];
    prepareFirst(b.id);

  }

}