// photo player thingies

var css_shadow=false; /* toggle between two different ways of shadowing */

var photo_boxes=new Object();

function create_photobox(playerid,photos,width,height,caption_color,caption_background_color,auto_play) {

	// photos is array of things with src, title, caption, color

	var playerinfo;

	playerinfo=new Object;
	playerinfo.curIMG=0; // index of currently shown photo
	playerinfo.photos=photos; // the list of photos
	playerinfo.vcr=false; // stores setTimeout results
	playerinfo.status='paused';
	photo_boxes[playerid]=playerinfo;

	
	var str = '';
	
	//str += "<div id='"+playerid+"' class='homeboxContainer'>";
	str += "<a href='#' onclick='return storyLinkClick(\""+playerid+"\");'>"; // why not a normal link?  3/8/10 changed to onclick instead of the weirdo href="javascript:" thingie, for msie
	str += "<div>";
	str += "<table width='100%' cellspacing='0' cellpadding='0' border='0'><tr><td valign='bottom' id='"+playerid+"_imgRotate' class=\"imgRotate\" style=\"background-image: url('"+photos[0].src+"'); height: "+height+"px; width: "+width+"px; color: "+photos[0].color+";\" >";
	if (css_shadow)
		str += "<div id='"+playerid+"_shadowMe' style='text-shadow: #343434 2px 2px 0;'>"+photos[0].title+"</div>";
	else
		str += "<div id='"+playerid+"_shadowMe' style='line-height: 85%; margin-bottom: 12px;'>"+photos[0].title+"</div>"; // white-space: nowrap;
	str += "</td></tr></table>";
	str += "</div>"; // unnamed
	str += "</a>";
		       
	str += "<div id='"+playerid+"_controllerInfoBox' class='controllerInfoBox'";
	color_style_attr="";
	color_style="";
	if (caption_color || caption_background_color) {
		color_style_attr+=" style=\"";
		if (caption_color)
			color_style+="color:"+caption_color+";";
		if (caption_background_color)
			color_style+="background-color:"+caption_background_color+";";
		color_style_attr+=color_style;
		color_style_attr+="\"";
		str += color_style_attr;
	}
	str += ">";
	str += "<div>"; // pointless?
	str += "<table width='100%' cellpadding='0' cellspacing='0' border='0'>";

	str += "<tr>";
	str += "<td align='left' width='100%'>";
	str += "<div id='"+playerid+"_rotateCredit' class='rotateCredit'";
	str += color_style_attr; /* 4/22/11 */
	str += " >"+photos[0].credit+"</div>"; /* new 6/16/10 */
	str += "<div id='"+playerid+"_rotateDesc' class='rotateDesc' style='white-space:nowrap;";
	str += color_style; /* 4/22/11 */
	str += "'>"+photos[0].caption+"</div>";
	str += "</td>"; 
	str += "<td valign='top' align='right' class='boxControls' id='"+playerid+"_boxControls' nowrap";
	/* 4/22/11 wtf? */
	if (caption_background_color)
		str += " style='background-color:"+caption_background_color+";'";
	str += ">";
	str += "<a style='font-size: 16px;color: #ffffff;' href='#' onclick='return contBack(\""+playerid+"\");'>&#171;</a>&nbsp;";
	str += "<a href='#' onclick='return contPlay(\""+playerid+"\");' id='"+playerid+"_playSign'><img src='/images/redesign/";
	if (auto_play)
		str += "pause.gif";
	else
		str += "play.gif";
	str += "' border='0'></a>&nbsp;";
	str += "<a style='font-size: 16px;color: #ffffff;' href='#' onclick='return contNext(\""+playerid+"\");'>&#187;</a>&nbsp;";
	str += "</td>";
	str += "</tr>";
	str += "</table>";
	str += "</div>"; // pointless?
	str += "</div>"; // controllerInfoBox
	
	//str += "</div>"; // homeboxContainer
	//document.write(str);
	document.getElementById(playerid).innerHTML=str;
	if (!css_shadow)
		applyShadow(playerid+'_shadowMe',width,photos[0].background_color);
	if (auto_play)
		contPlay(playerid);
	
	// preload images
	for(var i=0; i<photos.length; i++) { // 12/22/10
		throwaway = new Image();
		throwaway.src = photos[i].src;
	}
}

function storyLinkClick(playerid) { // why couldn't they have just been hyperlinks?
	curIMG=photo_boxes[playerid]['curIMG']; // which image is currently showing?
	storyLink=photo_boxes[playerid]['photos'][curIMG]['link']; // does it have a link?
	if (storyLink)
		window.location = storyLink; // go there
	return true;
}

// this approach doesn't work if the text and its shadow wrap differently, so shouldn't be
// used for anything that wraps or comes close to wrapping.
// CSS3's text-shadow works more reliably, but MSIE doesn't know it, and the shadow isn't
// a mere luxury: the MSIE users _must_ have it.
if (!css_shadow) {
	function applyShadow(targetElement,width,background_color) {

		shadowColor = background_color; /* 12/1/10, was: '#343434'; */
		shadowOffset = 2;
		shadowVerticalOffset = 3;

	
		// shadow all textnodes underneath targetElement
		if (typeof(targetElement) != 'object') {
			targetElement = document.getElementById(targetElement);
		}
		if (targetElement) {
			// first move them all into a new div.  With our current test data,
			shadowed=document.createElement('div');
			shadowed.className='shadowed';
			shadowed.style.whiteSpace='normal';
			shadowed.style.width=width;
			node=targetElement.firstChild;
			while (node) {
				next=node.nextSibling;
				shadowed.appendChild(node);
				node=next;
			}
			// then copy the whole thing
			shadow=shadowed.cloneNode(true); // true: copy the subtree
			shadow.className='shadow';
			shadow.style.color = shadowColor;
			shadow.style.position = 'absolute';
			shadow.style.left = shadowOffset + 'px';
			shadow.style.top = shadowVerticalOffset + 'px';
			shadow.style.zIndex = 0;
			
			shadowed.style.zIndex=1;
			shadowed.style.position='relative';
			
			targetElement.style.position='relative';
			targetElement.appendChild(shadow);
			targetElement.appendChild(shadowed);
		}
	}
}

function contBack(playerid) {
	return imgController(playerid,'back');
}

function contNext(playerid) {
	return imgController(playerid,'next');
}

function contPlay(playerid) {
	return imgController(playerid,'play');
}

function imgController(playerid,func) {
	
	var pauseNow = false;
	if(func == 'back') {
		pauseNow = true;
		clearTimeout(photo_boxes[playerid].vcr);
		if (photo_boxes[playerid].curIMG > 0) {
			photo_boxes[playerid].curIMG--;
		} else {
			photo_boxes[playerid].curIMG = photo_boxes[playerid].photos.length - 1;
		}
		rotateIMG(playerid,false);
	} else if(func == 'next') {
		pauseNow = true;
		clearTimeout(photo_boxes[playerid].vcr);
		photo_boxes[playerid].curIMG++;
		if (photo_boxes[playerid].curIMG >= photo_boxes[playerid].photos.length) {
			photo_boxes[playerid].curIMG=0;
		}
		rotateIMG(playerid,false);
	}
	if (pauseNow || func == 'play') {
		if (photo_boxes[playerid].status == 'play') {
			// it's currently playing, so pause
			//alert('stopping '+photo_boxes[playerid].vcr);
			clearTimeout(photo_boxes[playerid].vcr); // stop the player
			photo_boxes[playerid].status = 'paused';
			document.getElementById(playerid+'_playSign').innerHTML = "<img src='/images/redesign/play.gif' border='0'>";
		} else if (!pauseNow) {
			// it's currently paused, so play
			photo_boxes[playerid].vcr = setTimeout('rotateIMG("'+playerid+'",true)', 8000); // start the player
			photo_boxes[playerid].status = 'play';
			document.getElementById(playerid+'_playSign').innerHTML = "<img src='/images/redesign/pause.gif' border='0'>";
		}
	}
	return false;
}


function rotateIMG(playerid,advance) {

	//alert('photo_boxes['+playerid+']='+photo_boxes[playerid]);

	if (advance) {
		// we were called by the automatic timeout, so advance the image
		photo_boxes[playerid].curIMG++;
		if (photo_boxes[playerid].curIMG >= photo_boxes[playerid].photos.length) {
			photo_boxes[playerid].curIMG=0;
		}
	}

	curIMG=photo_boxes[playerid].curIMG;
	//alert('curIMG='+curIMG);
	//alert(photo_boxes[playerid]);
	imgRotate=document.getElementById(playerid+'_imgRotate');
	imgRotate.style.backgroundImage = 'url('+photo_boxes[playerid].photos[curIMG].src+')';
	imgRotate.style.color = photo_boxes[playerid].photos[curIMG].color;
	if (css_shadow)
		imgRotate.innerHTML = "<div id='"+playerid+"_shadowMe' style='text-shadow: "+photo_boxes[playerid].photos[curIMG].background_color+" 2px 2px 0;'>" + photo_boxes[playerid].photos[curIMG].title + "</div>"; /* 12/1/10 */
	else
		imgRotate.innerHTML = "<div id='"+playerid+"_shadowMe' style='line-height: 85%; margin-bottom: 12px;'>" + photo_boxes[playerid].photos[curIMG].title + "</div>"; // white-space: nowrap; 
	
	document.getElementById(playerid+'_rotateDesc').innerHTML = photo_boxes[playerid].photos[curIMG].caption;
	document.getElementById(playerid+'_rotateCredit').innerHTML = photo_boxes[playerid].photos[curIMG].credit; /* 6/16/10 */

	if (!css_shadow)
		applyShadow(playerid+'_shadowMe',imgRotate.style.width,photo_boxes[playerid].photos[curIMG].background_color); /* 12/1/10 */
	
	if (advance)
		photo_boxes[playerid].vcr = setTimeout('rotateIMG("'+playerid+'",true)', 8000);
}

function initPlayer(playerid) { // not sure we use this anymore
	document.getElementById(playerid+'_boxControls').style.visibility = 'visible';
	setTimeout('rotateIMG(\''+playerid+'\')', 8000);
}