/* Javascript to generate a rotating banner based off of a specified XML file
   Note: the odd '* 1' on several lines is to make sure that the '+' sign is used for addition instead of concatenation */

// Global vars
var imgCounter = 0, imgPaths = new Array(), imgLinks = new Array(), imgTexts = new Array(), rotateTime, bannerWidth, bannerHeight, buttonOffUrl, buttonOnUrl;

function setupBanner(srcFile, parentBlockId, bannerWidthArg, bannerHeightArg, buttonOffUrlArg, buttonOnUrlArg) {
	// If the parent block can't be found, we're out of luck, so just get out now
	try { parentBlock = document.getElementById(parentBlockId); }
	catch(err){ return; }
	// Retrieve the XML file
	if (window.XMLHttpRequest) {
		fileRequest = new XMLHttpRequest();
		fileRequest.open("GET",srcFile, false);
		fileRequest.send();
		if (fileRequest.status == 200) {
			bannerWidth = bannerWidthArg;
			bannerHeight = bannerHeightArg;
			buttonOffUrl = buttonOffUrlArg;
			buttonOnUrl = buttonOnUrlArg;
			try {
				parentBlock.innerHTML += '<map name="bannerMap" id="bannerMap"></map><div id="bannerLinks" class="bannerLinks"></div>';
				// Process the images
				imgList = fileRequest.responseXML.getElementsByTagName("photo");
				numItems = imgList.length;
				rotateTime = fileRequest.responseXML.getElementsByTagName("rotatetime")[0].childNodes[0].nodeValue * 1000;
				// For each image, create entries in the arrays and create a banner button
				for (var i = 0; i < numItems; i++) {
					// Set these up as Image objects so the browser can start preloading the images
					imgPaths[i] = new Image(1,1);
					imgPaths[i].src = imgList[i].attributes.getNamedItem("path").value;
					imgLinks[i] = imgList[i].attributes.getNamedItem("link").value;
					imgTexts[i] = imgList[i].attributes.getNamedItem("text").value;
					document.getElementById("bannerLinks").innerHTML += '<a href="javascript:goToBanner(' + i + ');"><img src="' + buttonOffUrl + '" id="bannerButton' + i + '" alt="Go to image ' + (i * 1 + 1) + '" height="27" width="27" /></a>&nbsp;';
					}
				// Dereference XML file to save memory
				fileRequest = null;
				imgList = null;
				// Put up the first image, then start the rotation
				parentBlock.innerHTML += '<img src="' + imgPaths[0].src + '" alt="' + imgTexts[0] + '" id="bannerImgOverlay" class="bannerImgOverlay" width="' + bannerWidth + '" height="' + bannerHeight + '" usemap="#bannerMap" style="opacity:1" />';
				parentBlock.innerHTML += '<img src="' + imgPaths[0].src + '" alt="' + imgTexts[0] + '" id="bannerImg" class="bannerImg" width="' + bannerWidth + '" height="' + bannerHeight + '" />';
				buttonsAndLinks();
				rotator = setTimeout("rotateBanner()",rotateTime);
				}
			catch(err) {
				parentBlock.innerHTML += '<p class="errorText" style="text-align:center;margin:0"><br />Error: Banner could not be set up.  Settings file was invalid.</p><hr /><br />';
				}
			}
		else
			parentBlock.innerHTML += '<p class="errorText" style="text-align:center;margin:0"><br />Error: Banner settings file not found.</p><hr /><br />';
		}
	}

function rotateBanner() {
	// If the images are still loading, delay this step until they're in
	if (!(imgPaths[imgCounter].complete && imgPaths[(imgCounter + 1) % numItems].complete)) {
		setTimeout("rotateBanner()",1000);
		return;
		}

	// Set the lower image to the new one
	document.getElementById("bannerImg").src = imgPaths[imgCounter].src;
	document.getElementById("bannerImg").alt = imgTexts[imgCounter];
	// Fade out the top one over it.  Once it's faded the top layer will switch to show the new image.
	fadeBanner();
	rotator = setTimeout("rotateBanner()",rotateTime);
	}

function fadeBanner() {
	bannerOverlay = document.getElementById("bannerImgOverlay");
	if (bannerOverlay.style.opacity >= 0.05) {
		if (bannerOverlay.style.opacity >= 0.45 & bannerOverlay.style.opacity < 0.50)
			buttonsAndLinks();
		bannerOverlay.style.opacity -= .05;
		bannerOverlay.style.filter = 'alpha(opacity=' + bannerOverlay.style.opacity*100 + ')';
		setTimeout("fadeBanner()",70);
		}
	else {
		bannerOverlay.src = document.getElementById("bannerImg").src;
		bannerOverlay.alt = document.getElementById("bannerImg").alt;
		bannerOverlay.style.opacity = 1;
		bannerOverlay.style.filter = 'alpha(opacity=100)';
		}
	}

function buttonsAndLinks() {
	// Handle banner buttons
	document.getElementById("bannerButton" + imgCounter).src = buttonOnUrl;
	document.getElementById("bannerButton" + imgCounter).alt = "Image " + (imgCounter * 1 + 1) + " is active";
	turnOffPrevButton();

	bannerImgMap = document.getElementById("bannerMap");
	bannerImgMap.innerHTML = "";
	var buttonSpecs = imgLinks[imgCounter].split(',');
	if (buttonSpecs.length == 1)
		bannerImgMap.innerHTML = '<area shape="rect" coords="0,0,' + bannerWidth + ',' + bannerHeight + '" href="' + imgLinks[imgCounter] + '" />';
	else if (buttonSpecs.length % 5 == 0)
		for (i = 0; i < buttonSpecs.length; i += 5)
			bannerImgMap.innerHTML = bannerImgMap.innerHTML + '<area shape="rect" coords="' + buttonSpecs[i] + "," + buttonSpecs[i+1] + "," + (buttonSpecs[i] * 1 + buttonSpecs[i+2] * 1) + "," + (buttonSpecs[i+1] * 1 + buttonSpecs[i+3] * 1) + '" href="' + buttonSpecs[i+4] + '" />';

	imgCounter = (imgCounter + 1) % numItems;
	}

function turnOffPrevButton() {
	var prevImg = (imgCounter == 0 ? imgCounter - 1 + numItems : imgCounter - 1);
	document.getElementById("bannerButton" + prevImg).src = buttonOffUrl;
	document.getElementById("bannerButton" + prevImg).alt = "Go to image " + (prevImg * 1 + 1);
	}

function goToBanner(slide) {
	pauseBanner();
	turnOffPrevButton();
	imgCounter = slide;
	rotateBanner();
	pauseBanner();
	}

function pauseBanner() { if (rotator != null) clearTimeout(rotator); }