/*
Rich Media JavaScript: 
DHTML routines

Created: 11.24.09 - vs
Edited: 06.08.10 - added description layer for DHTML for universalPlayer
Edited 06.11.10 - redoing the DHTML code to jQuery - making a new complete version of this code
Edited: 06.16.10 - added 3rd Party UP code
Edited: 07.14.10 - added the iPad centering DIV fix
Edited: 08.19.10(08.20.10) - adjusting embededMovies for mobiles
Edited: 09.23.10 - added embedUniversalPlayer mobile scripts.
Edited: 10.15.10 - vs - retooled completely. Should be final version.

*/

isPanelExpanded = false;
PanelExpandedName = null;

//Get Layer Function
//Returns the Layer Object (or any element by ID)
var nn4 = (document.layers) ? true : false
var ie = (document.all) ? true : false
var dom = (document.getElementById && !document.all) ? true : false

function getLayer(id){
  if(nn4) {
	  path = document.layers[id]
  }
  else if(ie) {
	  path = document.all[id]
  }
  else {
	  path = document.getElementById(id)
  }
return path  //return the path to the css layer depending on which browser is looking at the page
}



//Changes the Height and Width of a layer
//Pass -1 to either fwidth or fheight to ignore that attribute.
function rescaleLayer(id, fwidth, fheight) {
	var layer = getLayer(id) // get browser specific path to block element
	if (fheight > -1) {
		if(nn4){
			layer.height = fheight;
		}
		else{
			layer.style.height = fheight;
		}
		document[id].height = fheight;
	}
	if (fwidth > -1) {
		if(nn4){
			layer.width = fwidth;
		}
		else{
			layer.style.width = fwidth;
		}
		document[id].width = fwidth;
	}
}

function hideTheLayer(theLayer, doWhat) {
	//alert('hideTheLayer(' + theLayer + ', ' + doWhat + ')');
	var fLayer = getLayer(theLayer);
	if(nn4){
		//For Netscrape
		fLayer.style.visibility = doWhat;
	} else {
		//FireFox and IE
		fLayer.style.visibility = doWhat;
	}
}


function removeRMdiv(bLayer, tLayer, mLayer) {
	//Remove The DIV from the bottom of the body's HTML
	var swfDiv = getLayer('newMediaPlayerLayer');
	document.getElementsByTagName('body').item(0).removeChild(swfDiv);
	isPanelExpanded = false;
}



function makeRMdiv(bName, tName, tWidth, tHeight, tContent, hasLpanel) {
//	alert('makeRMdiv called');
	
	theLayerCode = "";
	
	//Total Site Width = 978;
	swfLayerWidth = parseInt(tWidth);
	swfLayerHeight = parseInt(tHeight);
	
	totalWidth = 978;
	leftSideWidth = totalWidth - swfLayerWidth - 20;
	
	//ttWidth = parseInt(tWidth);
	//ttHeight = parseInt(tHeight);

	//make the DIVs - Layers...
	theLayerCode += '<div id="' + bName + '" onclick="removeRMplayer();" style="cursor: pointer;">&nbsp;</div>';
	
	theLayerCode += '<div id="dhtmlMediaLayer">';
	
	if (hasLpanel) {
		theLayerCode += '<div id="chapterPad" style="background-color: #FFFFFF; width:' + leftSideWidth + 'px; float:left; padding-left:20px; padding-top:20px;">';
		theLayerCode += '<div id="mediaLeftText" style=""><!-- left text will go HERE --></div>';
		//alert('left divd!!!');
		theLayerCode += '</div>';
		//ttWidth += leftSideWidth;
		swfLayerHeight -= 20;
	} else {
		totalWidth = swfLayerWidth;	
	}
	
	theLayerCode += '<div id="' + tName + '">';

	
	theLayerCode += tContent;
	
	theLayerCode += '</div>';
	
	theLayerCode += '<div id="dhtml_TextDescription" style="background-color: #FFFFFF;padding-left:16px; padding-bottom:14px; padding-right:16px; visibility: hidden;display: none;">';
	//theLayerCode += "Description Goes Here. Perhaps.";
	theLayerCode += '</div>';
	
	
	theLayerCode += '</div>';
	
	//Set the Styles
	theLayerCode += '<style type="text/css">';
	
	
	
	theLayerCode +='#' + bName + ' {position:absolute;opacity: .8;-moz-opacity: .8;top: 0px;left: 0px;filter: alpha(opacity=80);height: 100%;width: 100%;background-color: #333333;z-index: 33;visibility: hidden;}';
	theLayerCode += '#dhtmlMediaLayer {position:fixed;top: 50%;left: 50%;margin-top: -' + swfLayerHeight/2 + 'px;  margin-left: -' + totalWidth/2 + 'px; background-color: #FFFFFF; padding:0px; z-index: 34; visibility: hidden; width:' + totalWidth + 'px;}'
	theLayerCode +='#' + tName + ' {width:' + swfLayerWidth + 'px; float:right;}'
	
	//theLayerCode +='#' + tName + ' {position:fixed;top: 50%;left: 50%;margin-top: -' + layerHeightINT/2 + 'px;  margin-left: -' + layerWidthINT/2 + 'px; background-color: #FFFFFF; padding:0px; z-index: 34; visibility: hidden; width:' + layerWidthINT + 'px;}'
	//theLayerCode += '#mediaPlayerLayer { width:100%; height:100%;}';
	//theLayerCode += '.nf_style1 {font-family: Arial, Helvetica, sans-serif;	font-size: 12px;}';
	//theLayerCode += '.nf_style2 {font-family: Arial, Helvetica, sans-serif;	color: #698797;	font-size: 19px; font-style: bold; font-weight: bold;}';
	
	theLayerCode += '</style>';
	

	//Below, this doesn't work:
	//document.getElementsByTagName('body').item(0).innerHTML+=theLayerCode;
	
	//This is the proper method to insert the code
	var myElement = document.createElement('div');
	myElement.id = "newMediaPlayerLayer";
	myElement.innerHTML = theLayerCode;
	document.getElementsByTagName('body').item(0).appendChild(myElement);
	
	//Make the Layer Truely Fullscreen
	fullScreenLayer(bName);
	PanelExpandedName = bName;
	window.onresize=winResizeFunc;
	isPanelExpanded = true;
	
	return(true);
}



function fullScreenLayer(theLayer) {
	pageHeight = document.getElementsByTagName("body")[0].offsetHeight;
	browserHeight = browserWindowSize()[1];
	pageWidth = document.getElementsByTagName("body")[0].offsetWidth; //does not seem to be returning the proper value
	browserWidth = browserWindowSize()[0];

	if (BrowserDetect.browser == "Firefox" || BrowserDetect.browser == "Chrome") {
		browserWidth -= 17;	
		pageHeight += 14;
	} else if (BrowserDetect.browser == "Explorer") {
		pageHeight += 27;
	}

	if (pageHeight > browserHeight) {
		newHeight = pageHeight;
	} else {
		newHeight = browserHeight;
	}
	
	if (978 > browserWidth) {
		newWidth = 978; //978 is the content width of the site
	} else {
		newWidth = browserWidth;
	}
	

	
	var largeLayer = getLayer(theLayer);
	
	
	largeLayer.style.height = newHeight + "px";
	largeLayer.style.width = newWidth + "px";
	
}


function winResizeFunc() {
	if (isPanelExpanded == true) {
		fullScreenLayer(PanelExpandedName);
	}
}






//06.11.10 - this is the new code:
function showBlackOverlay(returnFunction) {
	//returnFunction should be a JS script as a string that get's eval'd
	//a 2nd arguement can be added to make a function fire when the black div is clicked.
	
	var blackOverlayHTML = '<div id="blackOverlay">&nbsp;</div>';
	//theLayerCode +='#' + bName + ' {position:absolute;opacity: .8;-moz-opacity: .8;top: 0px;left: 0px;filter: alpha(opacity=80);height: 100%;width: 100%;background-color: #333333;z-index: 33;visibility: hidden;}';
	//windowH = $(window).height(); //Returns the window size only.
	docH = $(document).height() + 'px'; //If the page is smaller than the window, it returns the window.

	$(blackOverlayHTML).appendTo("body");	
	$("#blackOverlay").css({"height" : docH, 'width' : '100%', 'position' : 'absolute', 'opacity' : '.8', 'background-color' : '#333333', 'z-index' : '33', 'top' : '0px', 'left' : '0px'});
	$("#blackOverlay").css({'-moz-opacity' : '.8', 'filter' :  'alpha(opacity=80)'});
	if (arguments[1]) {
		//if a click is defined. Apply the function to click
		$("#blackOverlay").css("cursor","pointer");
		var blackDivClick = arguments[1];
		$('#blackOverlay').click(function() {
		    eval(blackDivClick);
		});
	}
	
	
	eval(returnFunction);


}

function removeBlackOverlay() {
	$("#blackOverlay").remove();
}

function removeUPdiv() {
	$("#UPcontainer").remove();
	
	//Remove the IE6 interval if nessessary.
	if (typeof ie6inter != 'undefined') {
		if (ie6inter) {
			clearInterval(ie6inter);
		}
	}
	
}




function makeUniversalPlayerDiv(returnFunction) {
	dString = arguments[1];
	var parsedParm = parseString(dString);
	
	var upDIVhtml = '<div id="UPcontainer">';
	
	if (parsedParm['closeButton'] == 'true') {
		upDIVhtml += '<div id="up_margin">';
		upDIVhtml += '<div id="closeButton"><a href="" onClick="blackDivClicked();return false;"><img src="/global/images/rm_images/rm_closeButton.gif" border="0"/></a></div>';
	}
	
	upDIVhtml += '<div id="up_top"></div>';
	upDIVhtml += '<div id="up_left"></div>';
	upDIVhtml += '<div id="up_main"></div>';
	upDIVhtml += '<div id="up_right"></div>';
	upDIVhtml += '<div id="up_bottom"></div>';
	
	if (parsedParm['closeButton'] == 'true') {
		upDIVhtml += '</div>';
	}
	
	upDIVhtml += '</div>';
	
	$(upDIVhtml).appendTo("body");
	$("#UPcontainer").css({'position' : 'absolute', 'background-color' : '#FFFFFF', 'z-index' : '34', 'top' : '0px', 'left' : '0px'});
	$("#up_left").css({'float' : 'left', 'width' : '1px'});
	$("#up_right").css({'float' : 'left', 'width' : '1px'});
	$("#up_main").css({'float' : 'left', 'width' : '1px'}); //, 'width' : '185px', 'border' : '1px solid #808080'
	$("#up_bottom").css({'clear' : 'both', 'width' : '1px'});
	$("#up_top").css({'clear' : 'both', 'width' : '1px'});
	
	
	if (parsedParm['closeButton'] == 'true') {
		$("#up_margin").css({'margin' : '16px'});
		$("#closeButton").css({'position' : 'absolute', 'top' : '8px'});
	}
	
	//Hide All But the Middle Layer.
	$("#up_left").css({'visibility' : 'hidden', 'display' : 'none'});
	$("#up_right").css({'visibility' : 'hidden', 'display' : 'none'});
	$("#up_bottom").css({'visibility' : 'hidden', 'display' : 'none'});
	$("#up_top").css({'visibility' : 'hidden', 'display' : 'none'});
	
	eval(returnFunction);
}

function setUPdivWidth() {
	//sets the UPcontainer DIV's width to prevent breaking on thin browsers.
	w1 = $("#up_left").outerWidth(true)
	w2 = $("#up_right").outerWidth(true);
	w3 = $("#up_main").outerWidth(true);
	
	newWidth = w3;

	if ($("#up_left").css('display') != "none") {
		newWidth += w1;
	}
	if ($("#up_right").css('display') != "none") {
		newWidth += w2;
	}
	
	$("#UPcontainer").css({'width' : newWidth +'px'});
}

function centerDiv(divID) {
	setUPdivWidth();
	
	//Center's a DIV
	dW = $("#"+divID).width();
	dH = $("#"+divID).height();
	
	dW2 = (dW / 2) * -1; // These need to be negative half the width/height;
	dH2 = (dH / 2) * -1;
	
	$("#"+divID).css({'position' : 'fixed', 'top' : '50%', 'left' : '50%', 'margin-top' : dH2 + 'px', 'margin-left' : dW2 + 'px'});	
	
	
	//Close Button:
	dW -= 14;
	$("#closeButton").css({'position' : 'absolute', 'top' : '5px', 'left' : dW + 'px'});
	
	//IE6 fix...
	if ((BrowserDetect.browser == "Explorer" && BrowserDetect.version == 6)) {
		$("#"+divID).css({'position' : 'absolute'});
		$("#up_left").css({'display' : 'inline'});
		ie6inter = window.setInterval(ie6divMove, 200);
	}
	
	//Ipad fix...
	if(isiPad) {
		//Find where we are scrolled to, subtract the height of the div, place it there.
		//Div WILL scroll
		sT = window.pageYOffset;
		dH3 = sT - (dH / 2);
		$("#" + divID).css({"position" : "absolute", 'margin-top' : dH3 + 'px', 'margin-left' : dW2 + 'px'}); 	
		
	}
	
	
}



function ie6divMove() {
	//This function is called by a interval to constantly move the UP div to the middle of the screen.
	var lH = $("#UPcontainer").height();
	var offset = ((lH / 2) + ((browserWindowSize()[1] - lH) / 2)); 
	var ie6top = (document.documentElement.scrollTop + offset);
	$("#UPcontainer").css({'top' : ie6top+ 'px'});	
}




function adjustMPlandingPage() {
	//This function removes the embeded mediaPlayer for the landing pages, and places the description cleanly...
	//Build the layer to display the description and the 'relaunch' button.
	doMobile = false;
	if (isiPhone || isAndroid || isPalm || qsParm['rm_iPhoneToggle'] == 'true') {
		doMobile = true;	
	}

	
	//Remove the mediaLeftText layer
	$("#mediaLeftText").remove();
	
	theLayer = getLayer(arguments[0]);
	theLayer.className = "div.visible";
	
	var tURL = location.href.split('?');
	var funcData = "'" + tURL[0] + "','dhtml_XHTML', "; //Just need the URL - not the extra stuff after it.
	var funcParams = "'";
	for (key in qsParm) {
		 if (key != "rm_autoLaunch") {
			 funcParams += key + "=" + qsParm[key] + ","; //Add each of the query string parameters (except autoLaunch)
		 }
	}
	funcParams = funcParams.substring(0, funcParams.length - 1) + "'";
	funcData += funcParams;
	
	var MovieDesc = $("#description > ul > #text").html();
	var MovieImage = $("#description > ul > #logoImage").html();
	
	var theLayerCode;
	theLayerCode += '<div id="thetextlayer">';
	if (MovieImage) {
		theLayerCode += '<div class="rm_textDisplay">' + MovieImage + '</div>';
	}
	if (doMobile) {
		//Get Video Path:
		pageURL = window.location.pathname;
		mPath = getMobileVideoPath(pageURL);
		pPath = getProxyPath(mPath);
		
		if (MovieDesc) {
			theLayerCode += '<div class="rm_textDisplay">Video Description: ' + MovieDesc + '</div>';
		}
		theLayerCode += '<div class="rm_textDisplay" id="rm_videoLink">Checking For Mobile Version...</div>';
	} else {
		theLayerCode += '<div class="rm_textDisplay">Now playing: ' + MovieDesc + '</div>';
		theLayerCode += '<div class="rm_textDisplay">Your video should be playing now. If you have closed it, or need to launch it, click <a href="" onclick="openMediaPlayer2('+funcData+');return false;">here</a>.</div>';
	}
	theLayerCode += '</div>';
	$(theLayerCode).appendTo($(theLayer));
	if (doMobile) {
		if (qsParm['rm_isMobile'] == 'true') {
			placeMobileMovie();
		} else {
			fileExists = checkIfFileExists(pPath, 'placeMobileMovie()', 'placeNoMovie()');	
		}
	}

	
}


function placeNoMovie() {
	theLayerCode = '<p>We are sorry, but the video you have selected has not be converted to play on your mobile device.</p><p><a href="javascript: history.go(-1)">Click Here</a> to return where you were previously. (Or hit the back button on your browser.)</div>';
	$('#rm_videoLink').html(theLayerCode);
}

function placeMobileMovie() {
	theLayerCode = 'To launch and view this video, click <a href="'+mPath+'">here</a>.';
	$('#rm_videoLink').html(theLayerCode);
}