// JavaScript Document

var currentMidImage = 1;
var currentThumb=1; // tell us which thumbnail is currently being viewed;
var thumbCounter; // this variable will tell us how many thumbnails there are;
var viewableImages=4; // this is the number of thumbnail images that are viewable at one time 
var oldSliderX=0;
var newSliderX=0;
var sliderWidth=216; // this should always be the width in pixels used by the css for the slider container - the width of the knob
var firstTimeThrough = true;
var thumbWidth = new Array();// create an array for the width of each image.
var thumbSpacing = 9; // must match the right padding plus the left and right boarders of the image used in the style sheet for the "#thumbContainer a{" declaration
var divHolderOldX=0; // this variable will keep track of where the div is on the x axis
var divHolderNewX=0; // tell us what the new value of the x axis should be

var oldStep = 0;
window.addEvent('domready', function() { 
	loadXML();	
});



/*************************************************************************/
/*                       This loads the XML                              */
/*************************************************************************/

// LOAD XML FOR RIGHT SIDE
function loadXML()
{
var timestamp = new Date();
// homepageXmlPath is the variable that sets the path to homepage.xml. This is set in the header of default.html. 
var uniqueURI = homepageXmlPath + (homepageXmlPath.indexOf("?") > 0 ? "&" : "?")+ "timestamp="+ timestamp.getTime();
	try
	{
		if (window.ActiveXObject)
		{
			var errorHappendHere = "Check Browser and security settings";
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc.async=false;
			xmlDoc.onreadystatechange=verify;
			xmlDoc.load(uniqueURI);
			getImages();
		}
		else if(window.XMLHttpRequest)
		{
			var errorHappendHere = "Error handling XMLHttpRequest request";
			var d = new XMLHttpRequest();
			d.open("GET", uniqueURI, false);
			d.send(null);
			xmlDoc=d.responseXML;
			getImages();
		} else {
			var errorHappendHere = "Error.";
			xmlDoc = document.implementation.createDocument("","",null);
			xmlDoc.onreadystatechange=verify;
			xmlDoc.async=false;
			xmlDoc.load(uniqueURI);
			xmlDoc.onload=getImages();
		}
	}	
	catch(e)
	{
		alert(errorHappendHere);
	}
}

function verify()
{
  // 0 Object is not initialized
  // 1 Loading object is loading data
  // 2 Loaded object has loaded data
  // 3 Data from object can be worked with
  // 4 Object completely initialized
  if (xmlDoc.readyState != 4)
  {
    return false;
  }return true;
}



var getImages = function getImages()
{
	// Make left and right buttons visible if javascript is on
	//document.getElementById('leftArrow').style.display = "block";
	//document.getElementById('rightArrow').style.display = "block";
	var xmlImages=xmlDoc.getElementsByTagName("node")[0].getElementsByTagName("image");
	var numImages=xmlImages.length; // find out how many images there are
	thumbCounter = numImages; // assign the number of images to a higher level variable for use in other functions
	var thumbMaker; // assign all img sourcecode to this variable and use it in innerHTML.
	var lgImgMaker; // assign all Large Image sourcecode to this variable and use it in innerHTML.
	var divWidth, divHeight; // decide how tall and wide to make the div holding the thumbnails
	var imageSrc, imageAlt, lowerLeftText;
	var browser=navigator.appName;
	
	//use a transparent .gif in IE, otherwise use a .png for the arrows
	if(browser == "Microsoft Internet Explorer"){
		var thumbContainer = '<a href="javascript:checkLeftButton()" style="float:left;" id="leftLink"><img src="Images/global/leftArrowTrans.gif" id="leftArrow" class="arrow" alt="left" /></a><div id="mainThumbContainer"><div id="thumbHolder">&nbsp;</div></div><a href="javascript:checkRightButton();" id="rightLink"><img src="Images/global/rightArrowTrans.gif" id="rightArrow" class="arrow" alt="right" /></a>';
	}else{
		var thumbContainer = '<a href="javascript:checkLeftButton()" style="float:left;" id="leftLink"><img src="Images/global/leftArrow.png" id="leftArrow" class="arrow" alt="left" /></a><div id="mainThumbContainer"><div id="thumbHolder">&nbsp;</div></div><a href="javascript:checkRightButton();" id="rightLink"><img src="Images/global/rightArrow.png" id="rightArrow" class="arrow" alt="right" /></a>';
	}
	
	for(var i=0; i<numImages; i++){
		imageSrc = xmlDoc.getElementsByTagName("image")[i].getElementsByTagName("source")[0].childNodes[0].nodeValue;
		altText = xmlDoc.getElementsByTagName("image")[i].getElementsByTagName("altText")[0].childNodes[0].nodeValue;
		thumbWidth[i] = xmlDoc.getElementsByTagName("image")[i].getElementsByTagName("width")[0].childNodes[0].nodeValue;
		
		if(i == 0){													 
			thumbMaker = '<a href="javascript:homePageImage(\''+i+'\', \''+numImages+'\');"><img src="' + imageSrc + '" border="0" id="thumbImage'+i+'" alt="'+altText+'" /></a>';	
			divWidth = parseInt(xmlDoc.getElementsByTagName("image")[i].getElementsByTagName("width")[0].childNodes[0].nodeValue)+thumbSpacing; 
		}else{
			thumbMaker = thumbMaker + '<a href="javascript:homePageImage(\''+i+'\', \''+numImages+'\');"><img src="' + imageSrc + '" border="0" id="thumbImage'+i+'" alt="'+altText+'" /></a>';
			divWidth = divWidth + (parseInt(xmlDoc.getElementsByTagName("image")[i].getElementsByTagName("width")[0].childNodes[0].nodeValue)+thumbSpacing);
		}
	}

	document.getElementById('thumbContainer').innerHTML = thumbContainer;
	
	document.getElementById('leftArrow').style.display = "block";
	document.getElementById('rightArrow').style.display = "block";
	
	myElementsEffects = new Fx.Elements($$('div#thumbHolder'));
	
	// set widths and height of containers
	document.getElementById('thumbHolder').style.height = xmlDoc.getElementsByTagName("image")[0].getElementsByTagName("height")[0].childNodes[0].nodeValue + "px";
	document.getElementById('thumbHolder').style.width = divWidth+"px";
	// add the thumbnails to the page
	document.getElementById('thumbHolder').innerHTML = thumbMaker;
	
	// start the left button out as semi-invisible
	if (browser=="Netscape"){
		//alert("in firefox");
		document.getElementById('leftLink').style.opacity = '.25';
	}else if(browser=="Microsoft Internet Explorer"){
		//alert("in IE");
		document.getElementById('leftLink').style.filter='alpha(opacity=25)';
	}
	
	//grab a random number between 0 and the number of images to display
	var randomNum = (Math.floor(Math.random()*numImages));
	//randomly put the large image on the homepage - MODIFIED BY DC 9/10/2009
	document.getElementById('lowerMiddle').innerHTML = '<img src="Images/homepage/image1.jpg" alt="Albertus Magnus College"/>'; 
	//apply the text that goes along with the image - MODIFIED BY DC 9/10/2009
	/*document.getElementById('lowerLeftText').innerHTML = xmlDoc.getElementsByTagName("image")[randomNum].getElementsByTagName("lowerLeftText")[0].childNodes[0].nodeValue;*/
	
	//fade the thumbnail image that is randomly selected
	if (browser=="Netscape")
	{
		document.getElementById('thumbImage'+randomNum).style.opacity = '.5';
	}
	else if(browser=="Microsoft Internet Explorer")
	{
		document.getElementById('thumbImage'+randomNum).style.filter='alpha(opacity=50)';
	}
	
	// The image randomly selected is the last one in the container. Turn right arrow off
	if (numImages == randomNum+1)
	{
		if (browser=="Netscape"){
			document.getElementById('rightLink').style.opacity = '.25';
		}else if(browser=="Microsoft Internet Explorer"){
			//alert("in IE");
			document.getElementById('rightLink').style.filter='alpha(opacity=25)';
		}
	}
	
	// The image selected is away from the original viewing area. Turn the left arrow on
	if (randomNum > viewableImages-1)
	{
		if (browser=="Netscape"){
			document.getElementById('leftLink').style.opacity = '1';
		}else if(browser=="Microsoft Internet Explorer"){
			//alert("in IE");
			document.getElementById('leftLink').style.filter='alpha(opacity=100)';
		}
	}
	
	//move the slider to show the current image

	/* For this example, the number of viewable images at one time is 4. Since this is a zero based numbering system, the forth image is actually image #3. 
	(That is why we are looking for a random number that is greater than viewableImages-1. We are looking to see if the random number is beyond 0,1,2, or 3) 
	So if the random number is greater than the maximum number of thumbnails to view (for this case, thumbnails 4 and 5), then we are going to move the slider 
	to show them. So then we take the random number+1 and subtract it from the number of viewable images. For example: if the random number was 5, the 
	viewable images (4) minus the random number +1 (6) will give you -2 which means we want to slide the container 2 places to the left so that the #5 image 
	can be seen. */
	if(randomNum > viewableImages-1)
	{
		myElementsEffects.start({'0': {'left': [parseInt(divHolderOldX), (viewableImages-(randomNum+1))*(parseInt(thumbWidth[0])+thumbSpacing)]}});
	}
	else
	{
		myElementsEffects.start({'0': {'left': [0,0]}});
	}
}


function checkRightButton(){
	var browser=navigator.appName;
	if (browser=="Netscape"){
		document.getElementById('leftLink').style.opacity = '1';
		document.getElementById('rightLink').style.opacity = '1';
	}else if(browser=="Microsoft Internet Explorer"){
		//alert("in IE");
		document.getElementById('leftLink').style.filter='alpha(opacity=100)';
		document.getElementById('rightLink').style.filter='alpha(opacity=100)';
	}
	if(parseInt(document.getElementById('thumbHolder').style.left)-(parseInt(thumbWidth[0])+thumbSpacing) == (-1 * (thumbCounter-viewableImages)*(parseInt(thumbWidth[0])+thumbSpacing))){	
		if (browser=="Netscape"){
			document.getElementById('leftLink').style.opacity = '1';
			document.getElementById('rightLink').style.opacity = '.25';
		}else if(browser=="Microsoft Internet Explorer"){
			//alert("in IE");
			document.getElementById('leftLink').style.filter='alpha(opacity=100)';
			document.getElementById('rightLink').style.filter='alpha(opacity=25)';
		}
	}
	  
	  
	  
	  
	  
	  
	  if(parseInt(document.getElementById('thumbHolder').style.left) > - (thumbCounter-viewableImages)*(parseInt(thumbWidth[0])+thumbSpacing)){	
		currentThumb++;

		divHolderNewX = parseInt(document.getElementById('thumbHolder').style.left) - ((parseInt(thumbWidth[0])+thumbSpacing)*1);
		divHolderOldX = parseInt(document.getElementById('thumbHolder').style.left);

		if(currentThumb == thumbCounter){
			newSliderX=sliderWidth+1;
		}
		// slide the images
		myElementsEffects.start({
			'0': { //let's change the first element's position
				'left': [divHolderOldX,divHolderNewX]
			}
		});
		
	}
}

function checkLeftButton(){
	var browser=navigator.appName;
	
	if (browser=="Netscape"){
		document.getElementById('leftLink').style.opacity = '1';
		document.getElementById('rightLink').style.opacity = '1';
	}else if(browser=="Microsoft Internet Explorer"){
		//alert("in IE");
		document.getElementById('leftLink').style.filter='alpha(opacity=100)';
		document.getElementById('rightLink').style.filter='alpha(opacity=100)';
	}
	if(parseInt(document.getElementById('thumbHolder').style.left)+(parseInt(thumbWidth[0])+thumbSpacing) == 0){	
		if (browser=="Netscape"){
			document.getElementById('leftLink').style.opacity = '.25';
			document.getElementById('rightLink').style.opacity = '1';
		}else if(browser=="Microsoft Internet Explorer"){
			//alert("in IE");
			document.getElementById('leftLink').style.filter='alpha(opacity=25)';
			document.getElementById('rightLink').style.filter='alpha(opacity=100)';
		}
	}
	
	if(parseInt(document.getElementById('thumbHolder').style.left) < 0){
		currentThumb--;
		divHolderOldX = parseInt(document.getElementById('thumbHolder').style.left);
		divHolderNewX = parseInt(document.getElementById('thumbHolder').style.left) + (parseInt(thumbWidth[0])+thumbSpacing);
		// assign new value for newSliderX
		newSliderX = sliderWidth * (parseInt(currentThumb-1) / parseInt(thumbCounter-1));
		if(currentThumb == 0){
			newSliderX=0;
		}
		// start image slider
		
		myElementsEffects.start({
			'0': { //let's change the first element's left position
				'left': [divHolderOldX,divHolderNewX]
			}
		});
		
		// reset the old Value of x after everything else is done
		divHolderOldX = divHolderNewX;
		oldSliderX = newSliderX;
	}
}

/**********************************************************/
/*     The Thumbnails have been clicked on                */
/**********************************************************/
function homePageImage(photoNum, numImages){  
	photoNum = parseInt(photoNum);


	//bring the slideshow image that was clicked on to the top to be visible
	document.getElementById('lowerMiddle').innerHTML = "<img src='" + xmlDoc.getElementsByTagName("image")[photoNum].getElementsByTagName("largeImage")[0].childNodes[0].nodeValue + "' id='homeImage" + photoNum + "' alt='Home Image'/>";
	
	//display the thumbnail text according to the thumbnail that was clicked on from the XML file
	document.getElementById('lowerLeftText').innerHTML = xmlDoc.getElementsByTagName("image")[photoNum].getElementsByTagName("lowerLeftText")[0].childNodes[0].nodeValue;

	// detect browser type
	var browser=navigator.appName;
	var b_version=navigator.appVersion;
	var version=parseFloat(b_version);

	// set all thumbnails to 100% opacity
	for(var x=0; x<thumbCounter; x++){
		if (browser=="Netscape"){
			document.getElementById('thumbImage'+x).style.opacity = '1';
		}else if(browser=="Microsoft Internet Explorer"){
			document.getElementById('thumbImage'+x).style.filter='alpha(opacity=100)';
		}
	}
	// set the selected thumbnail to 50% opacity
	if (browser=="Netscape"){
		document.getElementById('thumbImage'+photoNum).style.opacity = '.5';
	}else if(browser=="Microsoft Internet Explorer"){
		document.getElementById('thumbImage'+photoNum).style.filter='alpha(opacity=50)';
	}
}