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

/*
  Change History
	08/03/06 - Added ALT and HREF links.
  07/07/01 - Further refinement of the initial fade up and using indexed images.
  07/06/30 - Removed support for zIndex use.
  07/06/29 - Added variable for zIndexBase to try and fix DIV layout issues.
             This means that, should it be required, the DIV can have a base
             setting set from which to calculate the new DIVs zIndex value.
           - Changed to use 'inherit' rather than 'visible'.
           - Set the zIndexBase to -1 (negative) to stop zIndex use altogether,
             reverting to layered DIVs. No zIndex used at all.
  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 which will then hide the new DIVs and the existing image DIV
document.writeln('<style type="text/css">');
document.writeln('.imageBlender {position:absolute;top:0px;left:0px;visibility:hidden;}');
document.writeln('</style>');

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

  // 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) {
		var imgCode = arguments[3].split("$");
    for (var i=1; i<=arguments[2]; i++) {
			if (imgCode.length == 1)
				imgArray.push(imgCode[0]+i+".jpg");  
			else
				imgArray.push(imgCode[0]+i+imgCode[1]);  
    }
  }
  
  // if we have no images, then just exit
  if (imgArray.length == 0) {
	 return;
  }

  // set the data
  nb.name = blendName;
  nb.container = document.getElementById(blendName);
  nb.numImgs = imgArray.length+1;
  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);
  nb.altText = "Image";
  nb.currentDiv = 0;
  
  // set the speed
  setSpeed(nb, speed);
  
  // get the alt text for these images
  nb.altText = nb.container.getElementsByTagName("img")[0].alt;
  if (nb.altText == "") nb.altText = "Image";
  nb.container.getElementsByTagName("img")[0].alt = nb.altText + " (1)";
  
  // add the first image again
  if (arguments.length == 3) {
		imgArray.unshift(nb.container.getElementsByTagName("img")[0].src);
	}

  // create the DIVs in the reverse order (for layering issues)
  document.writeln();
  for (var i=0; i<nb.numImgs; i++) {
		var idx = nb.numImgs - i;
		var imgSubArray = new Array();
		if (idx == 0) idx = nb.numImgs;
		if (imgArray[idx-1] != null) {
			// break apart the image
			imgSubArray = imgArray[idx-1].split("|");
			// write output
    	document.write("<div class='imageBlender'>");
			if (imgSubArray.length == 3) document.write("<a href='"+imgSubArray[2]+"'>");
			document.write("<img src='"+imgSubArray[0]+"' width='"+nb.width+"' height='"+nb.height+"' border='0' alt='");
			if (imgSubArray.length >= 2) document.write(imgSubArray[1]+"' title='"+imgSubArray[1]+"'");
			else document.write(nb.altText+" ("+idx+")");
			document.write("'>");
			if (imgSubArray.length == 3) document.write("</a>");
			document.writeln("</div>");
		}
  }

  // resort the DIVs and then add them to this blender in correct order (reversed)
  var divs = nb.container.getElementsByTagName("div");
  nb.divs = new Array(divs.length);
  for (var i=divs.length; i>=0; i--) {
    nb.divs[divs.length-i-1] = divs[i];
  }

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

}

// change the speed at a later date
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 it
  if (b != null)
    setSpeed(b, speed);
  
}

// set the speed
function setSpeed(b,speed) {
	
  // set the speed (speed of change, pause)
  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,2];
	   break;
	 case 6:
	   b.speed = [10,10];
	   break;
	 case 7:
	   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
  setOpacity(topDiv, 0);
  
  // 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
  setOpacity(topDiv, b.percentage);
  
  // all done?
  if (b.percentage == 100) {
    setTimeout("blend('"+b.id+"')",b.speed[1]*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[b.currentDiv];
  
  // 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 next DIV is visible
  if (b.percentage == 100) {
	 setOpacity(b.divs[b.currentDiv+1], 100);
  }

  // set the percentage
  b.percentage -= b.speed[1];
  
  // set the opacity
  setOpacity(topDiv, b.percentage);

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

    // move the next image to the top of the DIV array
    b.currentDiv++;
	
	// check we are not at the end and need to go back to the start
	if (b.currentDiv >= b.numImgs) {
		b.currentDiv = 0;
	}
	
	// cue the next image, as it may have been hidden
	setOpacity(b.divs[b.currentDiv], 100);
    b.percentage = 100;

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

  } else {

    // wait a little and go again
    setTimeout("blend('"+b.id+"')", b.speed[0]);

  }
 
}
  
// set the DIV opacity
function setOpacity(d, o) {
	  
  // set the new percentage
  d.style.opacity = o / 100;
  d.style.filter = 'alpha(opacity='+o+')';

  // if the opacity is zero, then hide the thing!
  if (o <= 0)
    d.style.visibility = "hidden";
  else
  	d.style.visibility = "inherit"; 

}

// start all the arrays
function startBlender() {

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

    var b = blendArray[i];
    prepareFirst(b.id);

  }

}