// JavaScript Document

// define some initial variables
var numberOfHeadings = 0;
var currentHeading = 0;
var firstTimeThrough = true;

/*************************************/
/* intialize the thumbnail code      */
/*************************************/
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 oldSliderX=0;
var newSliderX=0;
var sliderWidth=197; // this should always be the width in pixels used by the css for the slider container - the width of the knob
var thumbCounter; // this variable will tell us how many thumbnails there are;
var currentThumb=1; // tell us which thumbnail is currently being viewed;
var thumbWidth = new Array();// create an array for the width of each image.
var thumbSpacing = 20; // must match the right padding used in the style sheet for the "#thumbHolder a{" declaration
var myElementsEffects;
var oldStep = 0;
window.addEvent('domready', function() {
	myElementsEffects = new Fx.Elements($$('div#thumbHolder'));
	loadXML2();
	// start the actual code here
	
});

/**********************************/
/* end of thumbnail initialization*/
/**********************************/

// starting z-index
var counter=2;
// timed loop for heading images
function timedCount()
{	
	// determine browser type
	var browser=navigator.appName;
	var transitionDuration = 1500;// set timing for transitions
	var transitionTiming = 8000; // set the time in between transitions
	// redefine the learn more button's href value
	document.getElementById('learnMoreLink').href=xmlDoc.getElementsByTagName("node")[0].getElementsByTagName("homeHeading")[currentHeading].getElementsByTagName("href")[0].childNodes[0].nodeValue;
	// time in between loops
	setTimeout("timedCount()",transitionTiming);
	// determin which heading to work with
	var newId = "heading" + currentHeading;
	// make sure opacity starts at 0
	if (browser=="Netscape"){
		document.getElementById(newId).style.opacity = '0';
	}else if(browser=="Microsoft Internet Explorer"){
		document.getElementById(newId).style.filter='alpha(opacity=00)';
	}
	// set the z index of the new heading to be on top
	document.getElementById(newId).style.zIndex=counter;
	// only chang the first heading if this is the first time through the loop
	if(firstTimeThrough){
		var myElementsEffects = new Fx.Elements($$('#headingContainer img#heading0'),{duration: transitionDuration});
		myElementsEffects.start({
			'0': { //let's change the first element's opacity
				'opacity': [0,1]
			}
		});
		firstTimeThrough = false;
	}else{
		// hide loader graphic
		document.getElementById('loadingAnimation').style.display = "none";
		// set the new heading's opacity from 0 to 1
		var myElementsEffects = new Fx.Elements($$('#headingContainer img#heading'+currentHeading),{duration: transitionDuration});
		myElementsEffects.start({
			'0': { //change the headings's opacity
				'opacity': [0,1]
			}
		});
	}
	// reset the current Heading value appropriately if it reaches the end of the images or not
	if(currentHeading == numberOfHeadings-1){
		currentHeading = 0;
	}else{
		currentHeading++;	
	}
	counter++;
}

var getNav = function getImages()
{
	getHomeHeadings();
}

/*************************************************************************/
/* functions for the thumbnail section of the homepage                   */
/*************************************************************************/

function loadXML2()
{
var timestamp = new Date();
var uri = "/xml/imageGallery.xml";
var uniqueURI = uri + (uri.indexOf("?") > 0 ? "&" : "?")+ "timestamp="+ timestamp.getTime();
	try
	{
		if (window.ActiveXObject)
		{
			var errorHappendHere = "Check Browser and security settings";
			xmlDoc2 = new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc2.async=false;
			xmlDoc2.onreadystatechange=verify;
			xmlDoc2.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);
			xmlDoc2=d.responseXML;
			getImages();
		} else {
			var errorHappendHere = "Error.";
			xmlDoc2 = document.implementation.createDocument("","",null);
			xmlDoc2.onreadystatechange=verify;
			xmlDoc2.async=false;
			xmlDoc2.load(uniqueURI);
			xmlDoc2.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 (xmlDoc2.readyState != 4)
  {
    return false;
  }
}

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";
	document.getElementById('homeImg').style.display = "block";
	var xmlImages=xmlDoc2.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, imageLinkPath, lgImageSrc, thumbnailText, thumbTextMaker;
	for(var i=0; i<numImages; i++){
		imageSrc = xmlDoc2.getElementsByTagName("image")[i].getElementsByTagName("source")[0].childNodes[0].nodeValue;
		imageAlt = xmlDoc2.getElementsByTagName("image")[i].getElementsByTagName("altText")[0].childNodes[0].nodeValue;
		imageLinkPath = xmlDoc2.getElementsByTagName("image")[i].getElementsByTagName("linkPath")[0].childNodes[0].nodeValue;
		thumbWidth[i] = xmlDoc2.getElementsByTagName("image")[i].getElementsByTagName("width")[0].childNodes[0].nodeValue;
		
		if(i == 0){
			thumbMaker = '<a href="javascript:homePageImage(\''+i+'\', \''+numImages+'\');"><img class="thumb" border="0" src="'+imageSrc+'" id="image' + i +'" alt="' + imageAlt + '" />  </a>';
			lgImgMaker = '<img src="/Images/homeMain' + i +'.jpg" id="homeImg' + i + '" alt="Home Image"/>';
			divWidth = parseInt(xmlDoc2.getElementsByTagName("image")[i].getElementsByTagName("width")[0].childNodes[0].nodeValue)+thumbSpacing;
		}else{
			thumbMaker = thumbMaker + '<a href="javascript:homePageImage(\''+i+'\', \''+numImages+'\');"><img class="thumb" border="0" src="'+imageSrc+'" id="image' + i +'" alt="'+ imageAlt +'" /></a>';
			lgImgMaker = lgImgMaker + '<img src="/Images/homeMain' + i +'.jpg" id="homeImg' + i + '" alt="Home Image"/>';
			divWidth = divWidth + (parseInt(xmlDoc2.getElementsByTagName("image")[i].getElementsByTagName("width")[0].childNodes[0].nodeValue)+thumbSpacing);
		}
	}
	 
	// set widths and height of containers
	document.getElementById('thumbHolder').style.height = xmlDoc2.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;
	// add the large images to the page
	document.getElementById('homeImg').innerHTML = lgImgMaker;
	// start the left button out as semi-invisible
	var browser=navigator.appName;
	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)';
	}
	
	//randomly put the large image on the homepage
	var random = (Math.floor(Math.random()*5));
	document.getElementById('homeImg' + random).style.display = "block";
	document.getElementById('homeImg' + random).style.zIndex = (numImages);
	//apply the thumbnail text
	document.getElementById('thumbTextHolder').innerHTML = xmlDoc2.getElementsByTagName("image")[random].getElementsByTagName("thumbnailText")[0].childNodes[0].nodeValue;
	
	//fade the thumbnail image that is randomly selected
	if (browser=="Netscape")
	{
		document.getElementById('image'+random).style.opacity = '.5';
	}
	else if(browser=="Microsoft Internet Explorer")
	{
		document.getElementById('image'+random).style.filter='alpha(opacity=50)';
	}
	
	//move the slider to show the current image
	if(random > 3)
	{
		myElementsEffects.start({'0': {'left': [parseInt(divHolderOldX), -1*(parseInt(thumbWidth[0])+thumbSpacing)]}});
	}
}

function checkRightButton(){
	var browser=navigator.appName;
	
	if(currentThumb <= thumbCounter-4){
		currentThumb++;
		divHolderNewX = parseInt(divHolderOldX) - (parseInt(thumbWidth[currentThumb-1])+thumbSpacing);
		// assign new value for newSliderX
		newSliderX = sliderWidth * (parseInt(currentThumb-1) / parseInt(thumbCounter-1));
		if(currentThumb == thumbCounter){
			newSliderX=sliderWidth+1;
		}
		// slide the images
		myElementsEffects.start({
			'0': { //let's change the first element's position
				'left': [divHolderOldX,divHolderNewX]
			}
		});
			
		
		// reset the old Value of x after everything else is done
		divHolderOldX = divHolderNewX;
		oldSliderX = newSliderX;
	}
	// change visibility of buttons as needed 
	// the 3 in the line below is the number of thumbnails showing - 1
	if (currentThumb == thumbCounter-3){   //Changed 7-29-09 from 3 to 4
		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)';
		}
	}else if (currentThumb != 0){
		if (browser=="Netscape"){
			//alert("in firefox");
			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)';
		}
	}else{
		if (browser=="Netscape"){
			//alert("in firefox");
			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)';
		}
	}
}

function checkLeftButton(){
	var browser=navigator.appName;
	if(currentThumb > 1){
		currentThumb--;
		divHolderNewX = parseInt(divHolderOldX) + (parseInt(thumbWidth[currentThumb-1])+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;
	}
	// change visibility of buttons as needed
	if (currentThumb == 1){
		if (browser=="Netscape"){
			//alert("in firefox");
			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)';
		}
	}else{
		if (browser=="Netscape"){
			//alert("in firefox");
			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)';
		}
	}
}

/**********************************************************/
/*     The Thumbnails have been clicked on                */
/**********************************************************/
function homePageImage(photoNum, numImages){
	photoNum = parseInt(photoNum);
	for(var i = 0; i<numImages; i++)
	{
	    document.getElementById('homeImg' + i).style.display = "block";
		document.getElementById('homeImg' + i).style.zIndex = i;
	}
	//bring the main image that was clicked on to the top to be visible	
	document.getElementById('homeImg' + photoNum).style.zIndex = (numImages+1);// +1 added 8-17-09
	//display the thumbnail text according to the thumbnail that was clicked on from the XML file
	document.getElementById('thumbTextHolder').innerHTML = xmlDoc2.getElementsByTagName("image")[photoNum].getElementsByTagName("thumbnailText")[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('image'+x).style.opacity = '1';
		}else if(browser=="Microsoft Internet Explorer"){
			document.getElementById('image'+x).style.filter='alpha(opacity=100)';
		}
	}
	// set the selected thumbnail to 50% opacity
	if (browser=="Netscape"){
		document.getElementById('image'+photoNum).style.opacity = '.5';
	}else if(browser=="Microsoft Internet Explorer"){
		document.getElementById('image'+photoNum).style.filter='alpha(opacity=50)';
	}
}