/* 	Code and theory borrowed from steve@slayeroffice.com's Image 
	Cross Fade Redux. Works like a charm, Steve, thanks! */

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

var	d = document,
	total_items = new Array(),
	filenames = new Array(),
	names = new Array(),
	text = new Array(),
	number_in_rotation = 7,
	interval = 0.06,
	duration = 5000,
	initial_timeout = 2400,
	fade_in_interval = 45,
	repeat = 1,
	current = 0;

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

	filenames = ['pam_justice','dee_massey','ron_lance'];
	names = ['Pam Justice','Dee Massey','Ron Lance'];
	text = ['Pam Justice, assistant principal at Tuscola High School, making a difference in high school students’ lives.','Dee Massey has taught over 330 professionals in the past year through HCC’s Continuing Education Division.','Ron Lance works to give our land a more natural look while ensuring a higher diversity of plant life.'];
	alt = ['Pam Justice beside several ficus branches','Dee Massey standing in front of a fire truck','Ron Lance standing to the left of a mounted stuffed bobcat'];
	

	setTimeout("load_and_fade_in(filenames[0],names[0],text[0])",initial_timeout);
}

function load_and_fade_in(f,n,t,a) {
	
	var main = document.getElementById("main");
	
	// Create .heroes_container div id'ed for this set
	heroes_container = d.createElement("div");
	heroes_container.className = "heroes_container";
	heroes_container.id = ("heroes"+total_items.length);
	
	// Create image
	new_img = d.createElement("img");
	new_img.src = ("/UserFiles/image/heroes/"+f+".jpg");
	new_img.alt = a;

	// Create .heroes_info div and elements appended within
	new_heroes_info = d.createElement("div");
	new_heroes_info.className = "heroes_info";
	new_heroes_info_a = d.createElement("a");
	new_heroes_info_a.href = ("/heroes/"+f);
	new_heroes_info_a_text = d.createTextNode(n);
	new_heroes_info_a.appendChild(new_heroes_info_a_text);
	new_heroes_info_p = d.createElement("p");
	new_heroes_info_text = d.createTextNode(t);
	new_heroes_info_p.appendChild(new_heroes_info_text);
	more_everyday_heroes_a = d.createElement("a");
	more_everyday_heroes_a.href = "/heroes/";
	more_everyday_heroes_a.className = "more_everyday_heroes";
	more_everyday_heroes_a_text = d.createTextNode("More Everyday Heroes");
	more_everyday_heroes_a.appendChild(more_everyday_heroes_a_text);

	// Append elements to .heroes_info
	new_heroes_info.appendChild(new_heroes_info_a);
	new_heroes_info.appendChild(new_heroes_info_p);
//	new_heroes_info.appendChild(more_everyday_heroes_a);

	// Finish up .heroes_container...
	heroes_container.style.display = 'none';
	heroes_container.appendChild(new_img);
	heroes_container.appendChild(new_heroes_info);
	
	// ...and attach it to #main before anything else.
	main.insertBefore(heroes_container, main.firstChild);
	
	// This array keeps track of each set, how many images have been loaded,
	// and which image to load next
	total_items.push(heroes_container);

	if (total_items.length == 1) {
		// This is the first set. Perform initial fade from back.
		heroes_container.xOpacity = 0;
		fade_in();
	} else if ((repeat == 0) && (total_items.length == number_in_rotation)) {
		// Do nothing if set to not repeat. Ends on last image.
	} else {
		// This is a subsequent set. Use so_xfade, start opaque.
		heroes_container.xOpacity = 0;
		setTimeout(so_xfade,duration);
	}
}

function fade_in() {
	heroes_container.style.display = 'block';
	cOpacity = total_items[current].xOpacity;
	cOpacity += interval;

	total_items[current].xOpacity = cOpacity;

	setOpacity(total_items[current]);

	if(cOpacity>=1)
	{
		if ((total_items.length < filenames.length) && (total_items.length < number_in_rotation)) {
			load_and_fade_in(filenames[total_items.length],names[total_items.length],text[total_items.length],alt[total_items.length]);
		} else setTimeout(so_xfade,duration);
	}
	else
	{
		setTimeout(fade_in,fade_in_interval);
	}
}

function so_xfade() {
	cOpacity = total_items[current].xOpacity;
	nIndex = total_items[current+1]?current+1:0;
	nOpacity = total_items[nIndex].xOpacity;

	cOpacity -= interval;
	nOpacity += interval;

	total_items[nIndex].style.display = 'block';
	total_items[current].xOpacity = cOpacity;
	total_items[nIndex].xOpacity = nOpacity;

	setOpacity(total_items[current]);
	setOpacity(total_items[nIndex]);

	if(cOpacity<0)
	{
		total_items[current].style.display = 'none';
		current = nIndex;
		if ((total_items.length < filenames.length) && (total_items.length < number_in_rotation)) {
			load_and_fade_in(filenames[total_items.length],names[total_items.length],text[total_items.length],alt[total_items.length]);
		} else setTimeout(so_xfade,duration);
	}
	else
	{
		setTimeout(so_xfade,fade_in_interval);
	}
}

function setOpacity(obj)
{
	if(obj.xOpacity>1)
	{
		obj.xOpacity = 1;
		return;
	}

	obj.style.opacity = obj.xOpacity;
	obj.style.MozOpacity = obj.xOpacity;
	obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}