/*
Dynamic HTML Rotator
Author: Art Ferrara 12/2005
Description:
The rotator works by using a combination of CSS, JavaScript, and the DOM
to turn on, or turn off news elements.  This is based on setting the display
property of DIV tags on a timed basis using javascript:setinterval.

The CSS defines the class attributes which applies the style desired to the 
news element display area.  The class names assigned to the div tags are also
used to build the list of of news elements that will be displayed.

Although developed for the purpose of showing html news elements, this could also
be used for a banner ad rotating purpose just as easily.  The code to run this script
can be placed anywhere on an HTML page and will work in all browsers version 4 or above.

Execution:
1. getElementByClass looks at all tags in the html and builds the array of only those tags
matching the ones we want to include (class=dyncontent).
2. setinterval is alled so that rotatecontent function is called every xxxx milliseconds
3. rotatecontent keeps a running index of which element we are showing, and simply shows
or hides the current div each time it runs.
4. The toggle function is used to start and stop the timer and show additional text for
specific news items.  This allows us to put links inside any news element to show expanded
text, and "freeze" the news scroller while the user is reading the expanded version.  We then
start the timer again when they click a link to "return to news".
5. The display of the div is controlled by the function TransitionFunction.  I used a filter
effect to fade in / fade out the news items to give them "action".  This only works in IE since
it is the only browser that supports this type of transitioning.  This function determines the
user agent and determines whether or not we can apply a filter, or simply show the text.

Requirements:
1. Set div tags inside HTML.
2. Include this js file.
3. Create CSS classes for dyncontent and pop_div.
4. Start code by setting the onload event of the body tag to the bodyload() function.
*/

var messages = new Array();  // the array of news items
var curcontentindex = 0; // the current index into our array
var running = true;  // toggle flag to determine if we are running or not
var rotatetime = 11000;  // the amount of time between each iteration (milliseconds)
var rotatorid;  // handle given to our rotate function on setinterval

function getElementByClass(classname)
{
	var inc=0
	var alltags=document.all? document.all : document.getElementsByTagName("*")
	for (i=0; i<alltags.length; i++)
	{
		if (alltags[i].className==classname)
			messages[inc++]=alltags[i]
	}
}

function rotatecontent()
{
	// this function will run every xxx milliseconds
	// we only turn this on or off if our "running" flag is set to true
	if (running)
	{
		//get current message index (to show it):
		curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0;
		//get previous message index (to hide it):
		prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1;
		messages[prevcontentindex].style.display="none"; //hide previous message
		TransitionFunction();
		//messages[curcontentindex].style.display="block"; //show current message
	}
}

function startstop()
{
	if (running)
	{
		// we are running, and this function was called...this means we want to 
		// hide the current news item, because we are going to show a pop-up
		// in the same location.  When the toggle function gets called the next time
		// it will tell the code to turn the timer back on and re-display the current
		// news item.
		
		running = false;
		messages[curcontentindex].style.display="none"; //turn it off
		
		// by using clearInterval, the timer is essentially reset, so that when a usere goes
		// back to the news scroller, they start over with the element they left off on, and,
		// the full amount of time is re-allocated before moving onto the next one.  without
		// this, they would still return to the current news item, but may only have a few
		// milliseconds before it scrolls to the next one...
		
		clearInterval(rotatorid);  
	}
	else
	{
		running = true;
		messages[curcontentindex].style.display="block"; //turn it back on
		rotatorid = setInterval("rotatecontent()", rotatetime);
	}
			
}

function pause()
{
	// the only difference between this function and startstop() is that we only 
	// stop the timer in this function...this is called on the mouseover/mouseout
	// events so that if a user places their cursor inside the text box the scroller
	// will pause until they leave the box - this is so they can read full text
	// without it scrolling away from them
	running = false;
	clearInterval(rotatorid);  
}

function unpause()
{
	running = true;
	rotatorid = setInterval("rotatecontent()", rotatetime);
}

function bodyload()
{
	if (document.all || document.getElementById)
	{
		getElementByClass("dyncontent");
		rotatorid = setInterval("rotatecontent()", rotatetime);
	}
}

function toggle( targetId ){
	if (document.getElementById)
	{
		// we are either turning on or turning off the scroller
		// and showing or closing a pop-up div
		
		// if we are opening a pop-up we want to stop the timer
		// if we are closing a pop-up we want to start the timer
		
		startstop();
		
		target = document.getElementById( targetId );
		
		if (target.style.display == "none")
		{
			target.style.display = "";
		}
		else
		{
			target.style.display = "none";
		}
	}		
}

function TransitionFunction() 
{
	// if we are in IE ... do the transition
	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1)  // running in IE
	{
		// apply the filter to fade our text in...
		// using a 3 millisecond refresh
		
		// "wipe down"
		//messages[curcontentindex].filters.RevealTrans.Transition = 5;

		// choose random from the pool of 23 possible effects
		messages[curcontentindex].style.filter = "revealtrans(Duration=2.000,Transition=5)";
		messages[curcontentindex].filters.RevealTrans.Transition = 5;
		messages[curcontentindex].filters.RevealTrans.Duration = 2.500;
		messages[curcontentindex].filters.RevealTrans.Apply();
		messages[curcontentindex].style.display = "block";
		messages[curcontentindex].filters.RevealTrans.Play();
	}
	else
	{
		// otherwise just display the div (only IE supports filters)
		messages[curcontentindex].style.display = "block";
	}
}

function reading(txttarget)
{
	//document.getElementById(txttarget).style.color = "#00ffff";
	//document.getElementById(txttarget).style.fontWeight = "bold";
	document.getElementById(txttarget).style.backgroundColor = "#ffffcc";
	pause();
}

function donereading(txttarget)
{
	//document.getElementById(txttarget).style.fontWeight = "normal";
	document.getElementById(txttarget).style.backgroundColor = "#fff";
	unpause();
}