var currentContent = 1;// Global variable to hold current content id
var response; // Global variable that holds the content.html page. 
var numberOfTitleDivs = 0; //Global variable that holds the number content divs.
var noHoverButtonImage = "/images2005/button-hover-off2.png"; //Graphic to use for button in the "off" state.
var hoverButtonImage = "/images2005/button-hover-new2.png";  //Graphic to use for button in the "on" state.
var contentPage = "/content/content4.html"; // File to use for the content.

function loadContent() {
		new Ajax.Request(''+contentPage+'',
		  {
			method:'get',
			onSuccess: function(transport){
			  response = transport.responseText || "no response text";
			  document.getElementById("contentHolder").innerHTML = response;
			 new Effect.Fade("contentTransition"+currentContent, { duration:0.5, from: 1, to: .9});

				buildButtons(); 
				initDivs(1);	
			},
			onFailure: function(){ alert('Error loading content...') }	
		  });
}

function initDivs(id) {	
	for(i=1; i<5; i++) {
		if (i!=id) {
			document.getElementById("contentTransition"+i).style.display = "none";
		}
	}	
}


function switchContent(id) {
				
				if(id != currentContent) {
					for(i=1; i<5; i++) { //hard coded for a maximum of 4 content divs.
						if (i!=id && i!=currentContent) { //Hide all of the divs except for the 2 that are transitioning.
							document.getElementById("contentTransition"+i).style.display = "none"; 
						}
					}
					new Effect.Fade("contentTransition"+currentContent, { duration:0.5}); //Fade the current div out.
					new Effect.Appear("contentTransition"+id, {duration:0.5, from: 0.0, to: .9}); //Fade the new div in.
					currentContent = id; //Keep track of which div is currently "on".
					
					
				}

				turnOnButton();
}

function turnOnButton() {
	// Fired from switchContent() function.
	// Loop through the li's.  The current button is determined from switchContent. During the loop, when we encouter the current button,
	// turn it on.  If not the current button, turn it off.
	for(j=1; j<numberOfTitleDivs+1; j++) {
		if(currentContent == j) {
			document.getElementById("button"+j).style.background="url("+hoverButtonImage+")";
		}
		else {
			document.getElementById("button"+j).style.background="url("+noHoverButtonImage+")";
		}
	}
}


function changeLocation(newHref) {
	//Take the passed url and have js change the page.
	//This is done so we can apply the url to the buttons's li container (using onClick) instead of just the text in the button.
	location.href = newHref;
}

function buildButtons() {
					var buttonContent = "";
					var navHolderWidth;
					var buttonWidth;
					var counter = 1;
					el = document.getElementById("navButtons");
					if(el.currentStyle) navHolderWidth = el.currentStyle.width;
					if(document.defaultView) navHolderWidth = document.defaultView.getComputedStyle(el, '').getPropertyValue("width");
					var contentDivs = document.getElementById("contentHolder").getElementsByTagName("DIV");
					
					//Find the number of "title" divs.
					
					for (i=0; i<contentDivs.length; i++) {
						if(contentDivs[i].id.indexOf("title") == 0) {
							numberOfTitleDivs++;
						}
					}
					
					// Take the number of title divs (really the number of buttons we'll need) and figure out how wide to make them.
					
					buttonWidth = (parseInt(navHolderWidth)/numberOfTitleDivs)-16+"px";
					
					// Loop through the title divs, grab the innerHTML values and apply that text to dynamically created li tags. 
					for (i=0; i<contentDivs.length; i++) {
						if(contentDivs[i].id.indexOf("title") == 0) {
							
							 // Grab the href value of each title and so we can assign it to an onClick event for the li.
							 // Otherwise, the href only works on the text, not the whole button.
							
							
							linkContent = contentDivs[i].getElementsByTagName("A")[0].href;
							 
							 
							 buttonContent += "<li onMouseOver = 'switchContent("+counter+");' id = 'button"+counter+"' class='navButton' style='width:"+buttonWidth+"' onClick='changeLocation(\""+linkContent+"\")'>"+contentDivs[i].innerHTML+"</li>";
							 counter++;
						}	
					}
					// Take the li's created from above and insert them into the navButtons div container.
					document.getElementById("navButtons").innerHTML = buttonContent;
					// Set the first button to the "on" state.
					document.getElementById("button1").style.background="url("+hoverButtonImage+")";
}