// JavaScript Document


var thumbCounter; // this variable will tell us how many thumbnails there are;
var thumbWidth = new Array();// create an array for the width of each image.

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



/*************************************************************************/
/*   This loads the XML for the thumbnails on the interior4.html page     */
/*************************************************************************/

function loadXML()
{

if(document.getElementById('slideshowImage')==null)
return;

var timestamp = new Date();
//the variable interior4XmlPath is set in the header of Interior4.html to hold the path to interior4.xml.
var uniqueURI = interior4XmlPath + (interior4XmlPath.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;
  }
  else
  {
    return true;
  }
}



var getImages = function getImages()
{
	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 imageSrc, imageAlt, slideshowHeader;
	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 = '<div class="thumbHolder"><a href="javascript:homePageImage(\''+i+'\', \''+numImages+'\');"><img src="' + imageSrc + '" border="0" id="thumbImage'+i+'" alt="'+altText+'" /></a></div>';	
		}
		else
		{
			thumbMaker = thumbMaker + '<div class="thumbHolder"><a href="javascript:homePageImage(\''+i+'\', \''+numImages+'\');"><img src="' + imageSrc + '" border="0" id="thumbImage'+i+'" alt="'+altText+'" /></a></div>';
		}
	}
	// add the thumbnails to the page
	document.getElementById('thumbWrapper').innerHTML = thumbMaker;  								
	//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 interior4 page
	document.getElementById('slideshowImage').innerHTML = "<img src='" + xmlDoc.getElementsByTagName("image")[randomNum].getElementsByTagName("largeImage")[0].childNodes[0].nodeValue + "' id='InteriorImage" + randomNum + "' alt='Interior Image'/>";
	
	//apply the text that goes along with the image 
	document.getElementById('slideshowHeader').innerHTML = xmlDoc.getElementsByTagName("image")[randomNum].getElementsByTagName("slideshowHeader")[0].childNodes[0].nodeValue;
	
	// detect browser type
	var browser=navigator.appName;
	
	//fade the thumbnail image that is randomly selected
	if (browser=="Netscape")
	{
		document.getElementById('thumbImage'+randomNum).style.opacity = '0.5';
	}
	else if (browser=="Microsoft Internet Explorer")
	{
		document.getElementById('thumbImage'+randomNum).style.filter='alpha(opacity=50)';
	}
}


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

	//display the large image from the thumbnail that was clicked on
	document.getElementById('slideshowImage').innerHTML = "<img src='" + xmlDoc.getElementsByTagName("image")[photoNum].getElementsByTagName("largeImage")[0].childNodes[0].nodeValue + "' id='InteriorImage" + photoNum + "' alt='Interior Image'/>";
	
	//display the photo gallery text according to the thumbnail that was clicked on (This is stored in the XML file)
	document.getElementById('slideshowHeader').innerHTML = xmlDoc.getElementsByTagName("image")[photoNum].getElementsByTagName("slideshowHeader")[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)';
	}
}