/* 
 * This set of javascript implements a simple transitioning slide show display
 * the main interface is
 *	startSlideShow(div1, div2, arrayOfQuotes, randomize, delay, transitionSpeed);
 *	   where div1 and div2 are the "IDs" of the DIVS on the page to use for the transition (should be the same size)
 *	         arrayOfQuotes is an array of "URLS" to the image list to be displayed
 *	         randomize, if "true" will randomly select from the array, otherwise they will play in order
 *	         delay is the time between image transitions
 *	         transitionSpeed is the time (ms) to run the transition animation
 *
 *   08-14-09 developed by MikeO for Rob
 *  see sstest.php for a stand alone example (but note that it's php function is now in /global/lp/page_elements.php
*/

// variables to store the parameters
var ss_div1;
var ss_div2;
var ss_transitionIntervalStep;
var ss_delay;
var ss_randomize;
var ss_arrayOfQuotes;
var ss_current; // current index of the image being displayed
var ss_timer;
var quote_open;
var quote_close;
var isin_IE6;
var isany_IE;

// from morrison.ben@gmail.com , http://lists.evolt.org/archive/Week-of-Mon-20070115/187466.html
function ss_setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	obj.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+ opacity + ");"; //IE
	obj.style.MozOpacity = opacity/100; // Older Mozilla and Firefox
	obj.style.opacity = opacity/100; // standard CSS
}

function ss_fadeOut(id, level){
	ss_setOpacity(document.getElementById(id), level);
	if (level > 0) {
		level = level - 5;
		setTimeout( "ss_fadeOut('"+id+"', "+level+");", ss_transitionIntervalStep );
	}
}
function ss_fadeIn(id, level){
	ss_setOpacity(document.getElementById(id), level);
	if (level < 100) {
		level = level + 5;   // at 5 is 1/20 of fade on each step, so for smoother step do it 4,3,2,1; but no longer than duration of fade
		setTimeout( "ss_fadeIn('"+id+"', "+level+");", ss_transitionIntervalStep );
	}
}

function ss_findPos(obj) {
	var cleft = 0;
	var ctop = 0;
	if (obj.offsetParent) {
		do {
			cleft += obj.offsetLeft;
			ctop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [ctop,cleft];
}

function ss_transition(fromId, toId) {
	/*if (isin_IE6) return;
	 return; 
	 we turn off transition effects for all IE.  In IE6 this effect makes the text look horrible;
	 in IE7 & IE8 the text looks just slightly bad...
	 */
	if (isany_IE) 
		return;
		
	ss_setOpacity(document.getElementById(toId), 0);
	var div1 = document.getElementById(fromId);
	var div2 = document.getElementById(toId);
	var p = ss_findPos(div1);
	div2.style.top = p[0];
	div2.style.left = p[1];
	div2.style.visibility="visible";
	div2.style.display="";
	ss_fadeOut(fromId, 100);
	ss_fadeIn(toId, 0);
}

function ss_play() {
	var i1;
	var i2;
	if (ss_randomize) {
		i1 = ss_current;
		i2 = Math.floor(Math.random()*ss_arrayOfQuotes.length);
		// just in case
		if (i2 == i1) {
			i2++; // if we randomize to the same index, just be incremental
			if (i2 >= ss_arrayOfQuotes.length) {
				i2 = 0;
			}
		}
	} else {
		i1 = ss_current;
		i2 = ss_current+1;
		if (i2 >= ss_arrayOfQuotes.length) {
			i2 = 0;
		}
	}
	ss_current = i2;
	var imghere = document.getElementById(ss_div1);
	var imghere2 = document.getElementById(ss_div2);
	var pos = ss_findPos(imghere);
	imghere2.style.visibility="hidden";
	imghere2.innerHTML=quote_open+ss_arrayOfQuotes[i1][0]+quote_close+" <br>- <b>"+ss_arrayOfQuotes[i1][1]+"</b>";
	imghere2.style.top = pos[0];
	imghere2.style.left = pos[1];
	imghere2.style.visibility="visible";
	imghere2.style.display="";

	imghere.style.visibility="hidden";
	imghere.innerHTML=quote_open+ss_arrayOfQuotes[i2][0]+quote_close+" <br>- <b>"+ss_arrayOfQuotes[i2][1]+"</b>";
	ss_transition(ss_div2, ss_div1);
}

function startSlideShow(div1, div2, arrayOfQuotes, randomize, delay, transitionSpeed) {

	ss_div1 = div1;
	ss_div2 = div2;
	var imghere = document.getElementById(ss_div1);
	ss_arrayOfQuotes = arrayOfQuotes;
	ss_randomize = randomize;
	ss_delay = delay;
	ss_transitionIntervalStep = transitionSpeed;
	ss_current = 0;   // set to 1 or try 0, comment out ss_play, set image tag 
	
	/* note that we have a space char after and before these next two quotes - this is to fix a IE8 bug that misaligns the quote
	mark when the entire first line of the quote is bold */
	quote_open = "<img src='/graphics/open_quote.gif' width='14' height='11' hspace='2' align='texttop' /> "
	quote_close = " <img src='/graphics/close_quote.gif' width='14' height='11' hspace='2' align='texttop' />"

	imghere.innerHTML=quote_open+ss_arrayOfQuotes[0][0]+quote_close+" <br>- <b>"+ss_arrayOfQuotes[0][1]+"</b>";
	// ss_play();   // if I don't want to have the previous line stuff the starter image in for immediate display, then can kick off play , but that flashes past first image...

	var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
	var isMSIE = /*@cc_on!@*/false;
  isany_IE = isMSIE;
	isin_IE6 = IE6;
	/*if (IE6) return;   don't ever start the quote show on IE6, because the text after the first quote looks like hell as some side effect of the transition */

	ss_timer = setInterval("ss_play()", ss_delay); 
}

function stopSlideShow() {
	if (ss_timer != null) {
		clearInterval(ss_timer);
		ss_timer = null;
	}
}