/* javascript fade-in effect 
by roman valderrama

 given an array of id's, will fade in each element slowly 

attributes:
fadein(id_array, tixs, delay);



*/

window.onload = fadeinit;

var timeline;
var id_array = ["item-f1","item-f2","item-f3","item-f4"];
var fadetime;
var nextdelay;
var fps;

var startdelay;


var startitem;
var enditem;
var currleading; 
var currtrailing; 

var op = []; 
var divobj=[];

var msdelay, steppoint;

var fadeinc;   // fade increment; amount to fade per each event;
var fadestep;

var	nextcounter=0; // counter for when to start next item

var intid; // interval ID for fader routine

var cnt = 0;

function fadeinit()
{ 

startdelay = 500;

// precalc all positional references
startitem = 0;
enditem = id_array.length;
   
currleading = 0;
currtrailing = 0;
   
// fade attributes---
fps = 24;		 // refresh rate in frames per sec
fadetime = 5000; // msec to complete linear fade for one item
fadestep = 1000;	 // msec betweeen starting fades for next item
	
// precalculate millisec constants 
msdelay = 1000/fps;	// javascript millisec delay between each refresh
steppoint = fps * (fadestep / 1000);	// amount of frames before we start fading next item
fadeinc = 100 / (fadetime / msdelay); // amount to increment fade in order to achieve fadetime, based on fps


// set up delay before invoking all fade-ins
startdelay = 100;

  var i;
  for (i=0; i<id_array.length; i++)
  {
	// set visibility on, but turn opacity to 0%
  	document.getElementById(id_array[i]).style.visibility = "visible";

	// set up divobject references
    divobj[i] = document.getElementById(id_array[i]);

	//clear all opacities    
	op[i] = 1.0;


	fader(i,1);
  }

	//document.getElementById("theend").innerHTML = "Initializing";

	window.setInterval("intid=window.setInterval(\'dofade()\',msdelay);",startdelay);

}

//////////////////////////////////////
// dofade is invoked at every moment of the opacity shift

function dofade()
{
var i;  

 //document.getElementById("theend").innerHTML = "RUNNING "+currtrailing+" "+enditem+" "+cnt;
// cnt++;


// if it's time to start fading the next item, we include the next item
//
	nextcounter++;
	if ((nextcounter > steppoint) && (currleading < (enditem-1))) {
		++currleading;
		nextcounter=0;		
	}

// loop though all elements that we're fading.
for (i=currleading; i>=currtrailing; i--)
{
	// do actual fade increments on each item div;
	op[i] += fadeinc;
	fader(i,op[i]);	
	
	// if the last item is pegged,  we no longer include it on loop
	if (op[i] >= 99)
		{ currtrailing++; }
	
}
  
 // if we're finished fading last item, stop executing
 if (currtrailing == enditem) { 
 		window.clearInterval(intid);
		//document.getElementById("theend").innerHTML = "FINISHED!";
 	}

}


function fader(imageNumber,opacity) {
	/* helper function to deal with cross-browser differences in opacity handling */
	var obj=divobj[imageNumber];
	if (obj.style) {
		if (obj.style.MozOpacity!=null) {  
			/* Mozilla's pre-CSS3 proprietary rule */
			obj.style.MozOpacity = (opacity/100) - .001;
		} else if (obj.style.opacity!=null) {
			/* CSS3 compatible */
			obj.style.opacity = (opacity/100) - .001;
		} else if (obj.style.filter!=null) {
			/* IE's proprietary filter */
			obj.style.filter = "alpha(opacity="+opacity+")";
		}
	}
}