/*****
Image Cross Fade Redux Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com
http://slayeroffice.com/code/imageCrossFade/index.html
*****/

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
var slideShowSpeed = 3000; // slide duration (milliseconds)
var crossFadeDuration = 20; // transition duration (milliseconds)
var numImages = 62; // number of images from which to pick, 1.jpg up to numImages.jpg
var numDisplay = 5; // number of images to load and display--keep 'em few & small
                    // html file requires id=imageContainer with numDisplay+1 layers
var Pic = new Array(); // the array of image names to load and display
var Random = new Array(); // an array of random numbers and indices
var locStyles = 'styles/', locImages = 'images/';


// create a two-dimensional array for randomizing
for (i=0; i<=numImages; i++) Random[i]= new Array();

// in our case, each row will be a two-column array
// specify first value to point to image 0, our logo
// sequential integers pointing to image file names 1.jpg, 2.jpg, etc

// col 1 are random numbers, col 2 are image name-numbers
for (i=0; i<=numImages; i++) { // rows in our array
	Random[i][1] = Math.random();  // random value for shuffling the image pool
	Random[i][2] = i;  // sequential integers pointing to image file names
}
	Random[0][1] = 0;  // always use 0.img as the first image

sort2D(Random, numImages); // sort array rows by the random numbers in col 1

// to add more images, just continue the pattern, adding to the array below
// image size is 450w x 300h. Fill with  background color RGB:218,218,218 
// (so wide or narrow images 'float' on background)

// - - - - - - - - 

// Create array Pic[i] of image names we'll display on the web page
// from the first numDisplay integers in col 2 of the now-sorted list.
// Result will be numDisplay randomly selected images
for (i=1; i<=numDisplay; i++) {
	Pic[i] = locImages + Random[i][2] + '.jpg'; // images are named 1.jpg, 2.jpg, ...
}
Pic[0] = locImages + '0.jpg'; // start with logo: 0.jpg

// preload the numDisplay images...note--small file sizes load more quickly!
var preLoad = new Array();
for (i = 0; i < Pic.length; i++) {
	preLoad[i] = new Image();
	preLoad[i].src = Pic[i];
}

// - - - - - - - - 

// sort 2-column arrayName by the values in column 1
//
function sort2D(arrayName,length) {
    for (var i=1; i<=length; i++)
        for (var j=i+1; j<=length; j++) {
            if (arrayName[j][1] < arrayName[i][1]) { // bubble sort by first column
                var dummy = arrayName[i][1]; // reorder by first column
                arrayName[i][1] = arrayName[j][1];
                arrayName[j][1] = dummy;
                var dummy = arrayName[i][2]; // tag-along second column
                arrayName[i][2] = arrayName[j][2];
                arrayName[j][2] = dummy;
           }
        }
}

// ----------------------------
function so_init() {
	if(!d.getElementById || !d.createElement)return;

	// DON'T FORGET TO GRAB THIS CSS FILE AND PLACE IT IN THE SAME DIRECTORY AS THE JAVASCRIPT!
	// http://slayeroffice.com/code/imageCrossFade/xfade2.css
	css = d.createElement("link");
	css.setAttribute("href",locStyles + "xfade2.css");
	css.setAttribute("rel","stylesheet");
	css.setAttribute("type","text/css");
	d.getElementsByTagName("head")[0].appendChild(css);

   // html file must have img tags within <div id="imageContainer">

	imgs = d.getElementById("imageContainer").getElementsByTagName("img");
	for(i=1;i<Pic.length;i++){
	   imgs[i].xOpacity = 0;
	   imgs[i].src=preLoad[i].src;
	}
	imgs[0].style.display = "block";
	imgs[0].xOpacity = .99;
	
	setTimeout(so_xfade,1000);
}
// ----------------------------

// ----------------------------
function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;

	nOpacity = imgs[nIndex].xOpacity;
	
	cOpacity-=.05; 
	nOpacity+=.05;
	
	imgs[nIndex].style.display = "block";
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;
	
	setOpacity(imgs[current]); 
	setOpacity(imgs[nIndex]);
	
	if(cOpacity<=0) {
		imgs[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,slideShowSpeed);
	   } else {
		setTimeout(so_xfade,crossFadeDuration);
	}
	
  // ----------------------------
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
  // ----------------------------
	
}