// Define our NON EDITABLE globals
var stoped = false;
var element = 0;
var totalElements = 0;
var globalscrollerData;
var eventDelay;

// function initScroller(Array of Content, ID of DOM to put content into, DOM styling class to add just in case, scroll delay in Seconds/1000);
function launchScroller(contentArray, domId, domClass, delay) {
	eventDelay = delay;
	var scrollerData = new Array();
//	console.log("Preparing to Initalize the Scroller...");
	
	var j = 0; // Counter for inserting objects into the array.
	for (var i = 0; contentArray.length > i ; i++) {
		// Loop through all of the array content
		
		// If the start date is passed, and the stop date has not passed.
		if ((contentArray[i][0] <= new Date().getTime()) && (contentArray[i][1] >= new Date().getTime())) {
			// Add the whole data set to the final array
			scrollerData[j] = contentArray[i];
			// increment the array counter.
			j++;
			//console.log("Using: " + contentArray[i][2]);
		}
	}
	//console.log( j + " events have been found valid for this date.");
	
	// if j = 0 at this point the array is empty.
	if ( j == 0 ) {
		// We insert this object so there is some content to display always!
		scrollerData[0] = new Array((new Date().getTime() - 3600),(new Date().getTime() + 3600),"The first day of school for the 2009-2010 school year will be August 31st.");
		j++;
	}

	// The last thing we do is DOUBLE the final data set size. This compensates
	// for times when we only have one event, or when we need to loop with an
	// odd number of events.
	// Define this GLOBAL for later on
	totalElements = scrollerData.length;

	if ( (j/2) != Math.round(j/2) ) {
		for ( var k = 0; totalElements > k; k++) {
			scrollerData[totalElements+k] = scrollerData[k];
		}
	}
	
	
	// REDefine this GLOBAL for later on
	totalElements = scrollerData.length;
	
	/* At this point our data is properly validated, we
	/* just need to build our inital boxes and then start
	/* crossfading between them. */
	var innerHTML = "<span class='" + domClass + "\' id='scroller1'>&nbsp;1</span>";
		innerHTML += "<span class='" + domClass + "\' id='scroller2'>&nbsp;2</span>";
	document.getElementById(domId).innerHTML = innerHTML;
	document.getElementById('scroller1').style.zIndex = 5;
	document.getElementById('scroller2').style.zIndex = 4;
	changeOpacity(document.getElementById('scroller1'),1,10,2);
	
	/* Now we have the text boxes in place, call the
	/* rotation and correction function. This will swap
	/* opacity on layers, and will change their content.
	
	/* What we do is we increment the element, odd elements go on top, even on bottom. 
	/* We'll pass the data and constantly increment the data. First we display #1 and
	/* hide #2 behind it. Then we fade out #1, and put the data for #3 onto #1 while
	/* it's hidden, then we fade it back in, change #2 to #4, and so on. */
	globalscrollerData = scrollerData;
	
	initValues();
	
	/* The time frame is the delay */
	setTimeout("changeElement(globalscrollerData,crossfadeDelay);",(delay + 2000));
	
}

function styleArray(data) {
	var title = data[2];
	var desc = data[3];
	
	return "<h1 class='smallH1'>" + title + "</h1>" + desc;
}

function initValues() {
	var initValue = styleArray(globalscrollerData[element]);
	document.getElementById('scroller1').innerHTML = initValue;
	element++;
	
}

function changeElement(scrollerData,crossfadeDelay) {
	var targetOpacity;

//	console.log(element);
	if (element/2 == Math.round(element/2)) {
		targetOpacity = 1;
	} 
	if (element/2 != Math.round(element/2)) {
		targetOpacity = 0;
	}
//	console.log('scroller' + (-1*targetOpacity + 2));

	/* Change the content */
	document.getElementById('scroller' + (-1*targetOpacity + 2)).innerHTML = styleArray(globalscrollerData[element]);

	changeOpacity(document.getElementById('scroller1'),targetOpacity,crossfadeDelay,crossfadeDelay*.02);


	element++;
	if (element >= totalElements) {
		element = 0;
	}
	setTimeout("changeElement(globalscrollerData,crossfadeDelay);",(eventDelay+250));
}