// Switches between images with a "Disolve" effect (dial-up friendly)
// Does NOT reload the image (most such routines do [even if they preload], 
// and this can be a real problem on a dial-up connection.)
// Allows for a link and for hover-text.
// No need to absolutely position the image.
//
// A similar effect could be done via an animated gif, but there is no dynamic
// control, and the .gif file tends to get too big for dial-up friendliness.
// (For instance: in a disolve with 4 images an optimized animated gif took over 300k
// whereas making use of this script only used this script and 4 jpg's of apx 20k each.)
// 5/2005 by Steve M. McRoberts: http://www.geocities.com/loyal2truth

// To use: 
//
// In the Head section of your HTML:
// 1. Include findDom.js, lib.js, and disolve.js
// 2. Create one hidden style, and a style for each of your images 
//		(1 base image and any number of alternates). For example:
//		.hiddenClass {visibility:hidden;}
//		#img1 {z-index:1;}
//		#img1_alt1 {position:absolute; z-index:2; visibility:hidden;}
//		#img1_alt2 {position:absolute; z-index:3; visibility:hidden;}
//		etc...
//    

// In a script section (still within the Head section):
// 3. preload your images (they should all be exactly the same size.) For example:
//		image1 = new Image();
//		image1.src = "../../images/painplatetv1.jpg";
//		image2 = new Image();
//		image2.src = "../../images/painplatetv2.jpg";
//
// 4. Create an array of element ID's referencing your images. The names must match the style names in step 2.
//		var imgArray1 = new Array();
//		imgArray1[0] = "img1";
//		imgArray1[1] = "img1_alt1";
// 
// 5. Put that array into another array called baseArray (in case you have more than one image you want to disolve).
//		var baseArray = new Array();
//		baseArray[0] = imgArray1;

// 6. Optionally over-ride any of the timing defaults. For example:
//		delay = 250;	// How long to pause on an image before transitioning to the next 
//							(in milliseconds) (default 100).
//		speed = 200;	// When transitioning, how long to wait between each change in opacity.
//							(default 100 milliseconds -- 1/10th of a second). 
//							The higher the number, the more choppy the effect and the slower the transition.
//		nPlus = 5;		// the percent of opacity to change every time a change is made.
//								The smaller the number, the more gradual the transition. 
//								Default: 3.	
//
// In the Body section of your HTML:
// 1. In your body tag call initAnim() from the onLoad event:
//		body onload="initAnim()"
// 2. Create the base image. It must have an id matching the style name from step 2.
//							a href="painplate/index.html"
//								img 	id="img1"
//									usemap="#map1" 
//									src="../../images/painplatetv1.jpg"
//									align="center"
//									alt="Pain on Your Plate"
//									title="(What's on your plate has global consequences.) Why you should go vegetarian" 
//									border="0" 
//							/a					
//
// 3. Just before the closing body tag, create the img tags for the alternate images.
//		These must be within div tags with id's that must match the style names from step 2. 
//		They also must use the same map as the base image (if you want a link on the image). 
//  	They must be within a span with a class that has visibility set to hidden.
// span class="hiddenClass"
//		div id="img1_alt1"
//			img usemap="#mymap1" 	
//			hspace="1"
//			vspace="1"
//			src="../../images/painplatetv2.jpg"
//			align="center"
//			alt="Pain on Your Plate"
//			title="(What's on your plate has global consequences.) Why you should go vegetarian" 
//			border="0" 
//		/div
// /span
//
// 4. Finally, define the map for the optional link. The coords should cover the entire image:
//
// map name="mymap1"
//		area 
//			alt="A Plate changes to the planet Earth (a link to the transcribed video Pain on Your Plate)" 
//			coords="0,0,186,196"
//			href="painplate/index.html" 
//	/map
//
// A working example can be found at http://www.geocities.com/loyal2truth/ethics/animals/index.html
// You can find disolve.js, lib.js and findDOM.js at http://www.geocities.com/loyal2truth/scripts.
////////////////////////////////////////////////////////////////////////////////////////////////////////

var ie5=(document.getElementById && document.all);
var ns6=(document.getElementById && !document.all);

nPlus = 3   	// the % of fading for each step (the smaller the number the smoother the disolve)
speed = 100  	// the total transition speed in milliseconds (thousandths of a second) 
					// 	the smaller the number, the faster the transition.
delay = 	1  	// How long to delay on each image before transitioning to the next.				

nOpac = new Array();
nPlus = new Array();
imageShown = new Array();

function initAnim() {
	var mainIdx;
	for(mainIdx=0; mainIdx < baseArray.length; mainIdx++) {
		nOpac[mainIdx] = 100;
		nPlus[mainIdx]= -3;
		var subArray = baseArray[mainIdx];
		imageShown[mainIdx] = subArray.length;
		initPos(subArray);
	}
	disolveTransition();
}

function initPos(sArray) {
	 var baseImgName = sArray[0];
	 var baseImgHdl = findDOM(baseImgName);
    var left = getRealLeft(baseImgHdl);
    var top  = getRealTop(baseImgHdl);
	 var imgIdx;
	 var objImg = new Array();
	 for(imgIdx=sArray.length - 1; imgIdx >=0; imgIdx--) {
	 	 var thisImgName = sArray[imgIdx];
		 el = new lib_obj(thisImgName);
		 elStyle = new lib_obj(thisImgName);
		 el.moveIt(left, top);
	 	 elStyle.zIndex = imgIdx + 1;
	    elStyle.showIt();
	 }
}

function getRealLeft(el) {
    xPos = el.offsetLeft;
    tempEl = el.offsetParent;
    while (tempEl != null) {
        xPos += tempEl.offsetLeft;
        tempEl = tempEl.offsetParent;
    }
    return xPos;
}

function milliWait(msecs) {
	var startTime = new Date();
	while(true) {
		now = new Date()
		diff = now - startTime;
		if( diff > msecs ) {
			break;
		}
	}
}

function getRealTop(el) {
    yPos = el.offsetTop;
    tempEl = el.offsetParent;
    while (tempEl != null) {
        yPos += tempEl.offsetTop;
        tempEl = tempEl.offsetParent;
    }
    return yPos;
}


function disolveTransition(){
	var mIdx;
	for(mIdx=0; mIdx < baseArray.length; mIdx++) {
		var sArray = baseArray[mIdx];
		disolve(sArray, nOpac, nPlus, imageShown, mIdx);
	}
	setTimeout('disolveTransition()',speed);
}

function disolve(subArray, nOpac, nPlus, imgShown, mainIdx) {
	if(imgShown[mainIdx] > 1) {
		opacity = nOpac[mainIdx]+nPlus[mainIdx];
		nOpac[mainIdx] = opacity;
		if(opacity > 100) { // Just solidified the frontmost image: now disolve it.
         nPlus[mainIdx] = -nPlus[mainIdx];
			nOpac[mainIdx] = 100;
			// Make sure every image underneath is opaque:
			for(var i=1; i < imageShown[mainIdx]; i++) {			
				makeOpaque(subArray[i]);
			}
			milliWait(delay);
		}
		else if(opacity < 0){
			nOpac[mainIdx] = 100;
			// Switch to next image.
				var imgArg;
				if(imgShown[mainIdx] == 2) {	// If we reached the end, loop  back to the start:
					nOpac[mainIdx] = 0;
					nPlus[mainIdx] = -nPlus[mainIdx];
					imgShown[mainIdx] = subArray.length + 1
				}
				imgShown[mainIdx]--;
				milliWait(delay);
		}
		else {
			// Do a step in the transition:
			var imgArg;
			var imgNbr = imgShown[mainIdx];
			imgArg = subArray[imgNbr-1];
			imgArgHdl = findDOM(imgArg);
			imgArgStyle = findDOM(imgArg, 1);
			
			if(ie5){
		   	imgArgStyle.filter="alpha(opacity=0)";
				imgArgHdl.filters.alpha.opacity = opacity;
			}
			if(ns6){
				imgArgStyle.MozOpacity = 0 + '%';
				imgArgStyle.MozOpacity = opacity + '%';
			}
		}		
	}
}

function makeOpaque(imgArg) {
	imgArgHdl = findDOM(imgArg);
	imgArgStyle = findDOM(imgArg, 1);
		
	if(ie5){
   	imgArgStyle.filter="alpha(opacity=0)";
		imgArgHdl.filters.alpha.opacity = opacity;
	}
	if(ns6){
		imgArgStyle.MozOpacity = 0 + '%';
		imgArgStyle.MozOpacity = opacity + '%';
	}
}