// JavaScript Document

/* Globals */

// Bookmarks
var bookmarkURL = "http://www.gia.edu/symposium2011/index.cfm";

// Sliding DIVs
var slideAnimLength = 500;
var timerLength = 5;
var timerID = new Array();
var startTime = new Array();
var object = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();


function addBookmark()
{
	var title = "GIA | Symposium 2011";
	
	// Handle each type of browser
	
	// Firefox
	if (window.sidebar)
	{
		window.sidebar.addPanel(title, bookmarkURL, "");
	}
	
	// Internet Explorer
	else if (window.external)
	{
		window.external.AddFavorite(bookmarkURL, title);
	}
	
	// If not one of these browsers, then...
	else
	{
		alert("To bookmark this page, close this dialog and then press Command-D (Mac) or Control-D (Windows).");	
	}
	
}

function printPage()
{
	// Change the stylesheet to a printable version
	// NOTE: This is done automatically by the browser, 
	//       by specifying two stylesheets (one for screen, one for print)
	
	window.print();	
}

// Build a table with alternating colored and white rows for the advisory committee
function buildAdvisorsTable(xmlFilename, width1, width2)
{
	// Load the specified XML file
	var xmlFile = loadXML(xmlFilename);

	// Get the advisor's names and organizations
	var names = xmlFile.getElementsByTagName("name");
	var orgs = xmlFile.getElementsByTagName("org");
	
	// Create the table tags
	var tableTag = document.createElement('table');
	tableTag.className = "Bordered_Table";
	
	var tableBody = document.createElement('tbody');
	
	// Loop through and create a row for each entry
	var node;
	var tag;
	for (i = 0; i < names.length; i++)
	{
		// Create a row for this entry
		var tr = document.createElement('tr');
		
		// Every even row should be colored
		if (!(i % 2))
			tr.className = "Odd_Table_Entry";
			
		// Create a column for the name
		var tdName = document.createElement('td');
		tdName.width = width1;
		tdName.vAlign = 'top';
		
		// Add the content to the 'name' column
		node = names[i].childNodes[0];
		tdName.innerHTML = node.nodeValue;
		tr.appendChild(tdName);
		
/*		// If there is no innerHTML, then perhaps there is a style tag within the <name> tag
		if ((tdName.innerHTML == "") && node.hasChildNodes())
		{	
			// Create the tag specified in the XML, set the text inside the tag, and add it to the column
			tag = document.createElement(node.nodeName);
			tag.innerHTML = node.childNodes[0].nodeValue;
			tdName.appendChild(node);
		}
*/		
		// Create a column for the org
		var tdOrg = document.createElement('td');
		tdOrg.width = width2;
		tdOrg.vAlign = 'top';
		
		// Add the content to the 'org' column
		node = orgs[i].childNodes[0];
		tdOrg.innerHTML = node.nodeValue;
		tr.appendChild(tdOrg);
		
/*		// If there is no innerHTML, then perhaps there is a style tag within the <org> tag
		if ((tdOrg.innerHTML == "") && node.hasChildNodes())
		{	
			// Create the tag specified in the XML, set the text inside the tag, and add it to the column
			tag = document.createElement(node.nodeName);
			tag.innerHTML = node.childNodes[0].nodeValue;
			tdOrg.appendChild(node); 
		}
*/		
		// Append this row to the table body
		tableBody.appendChild(tr);
	}
	
	// Append the table body to the table
	tableTag.appendChild(tableBody);
	
	// Return the table tag
	return tableTag;
}

// Set the specified tab to a selected state, and show the content associated with that tab
var currentTab;
var currentTabContent;
function selectTab(tabID, contentDivID)
{
	// Set the current tab to unselected
	if (currentTab)
	{
		//currentTab.className = "Tab_Unselected";
		//var imgU = currentTab.getElementById("Unselected_State");
		//var imgS = currentTab.getElementById("Selected_State");
		toggleTab(currentTab.id, "Unselected");
	}
	
	// Get the selected tab
	var selectedTab = document.getElementById(tabID);
	if (selectedTab)
	{
		// Change this tab to the "selected state"
		//selectedTab.className = "Tab_Selected";
		//var imgU = selectedTab.getElementById("Unselected_State");
		//var imgS = selectedTab.getElementById("Selected_State");
		//var imgS = getDivById(selectedTab, "Selected_State");
		toggleTab(selectedTab.id, "Selected");
		
		//imgU.style.visibility = "hidden";
		//imgS.style.visibility = "visible";
		
		currentTab = selectedTab;
	}
		
	// Hide the content for the "currentTab" (the previously-selected tab)
	if (currentTabContent)
	{
		// Hide the current tab's content
		currentTabContent.style.visibility = "hidden";	
		currentTabContent.style.height = "0px";	
		currentTabContent.style.position = "absolute";		// Remove from the document flow
	}
		
	// Now, get the div containing the content associated with this tab
	var selectedTabContent = document.getElementById(contentDivID);
	if (selectedTabContent)
	{
		// Make visible and set height to auto
		selectedTabContent.style.visibility = "visible";	
		selectedTabContent.style.height = "auto";
		selectedTabContent.style.position = "static";		// Place into the document flow
		
		currentTabContent = selectedTabContent;
	}
}

var nTabs = 0;
var tabList = new Array();
var tabListS = new Array();
var tabListU = new Array();
var TAB_HEIGHT = "56px";

// Search the specified array (list) for the specified tab (name)
function toggleTab(tabName, state)
{
	var tabIndex = -1;
	
	// First, search for the tab in the tabList
	for (var i = 1; i <= nTabs; i++)
	{
		if (tabList[i].id == tabName)
		{
			tabIndex = i;
			break;	
		}
	}

	// Return if the tab was not found
	if (tabIndex == -1)
		return;
		
	// Now, retrieve the corresponding selectedState div
	var divImgS = tabListS[tabIndex];
	var divImgU = tabListU[tabIndex];
	
	// Now set its visibility
	if (state == "Selected")
	{
		divImgS.style.visibility = "visible";
		divImgU.style.visibility = "hidden";
	}
	else
	{
		divImgS.style.visibility = "hidden";
		divImgU.style.visibility = "visible";
	}
	
}

function createTab(id, divID, label, width)
{
	// Increment nTabs
	nTabs++;
	
	// Create a new DIV for the tab
	var tab = document.createElement('div');
	tab.id = id;
	tab.className = "Tab";
	
	// Set the width
	if (width === undefined)
		width = "146px";
	tab.style.width = width;
	
	// Create two "background" images for the tab, one for the "selected" state and one for the "unselected" state
	var divImgS = document.createElement('div');
	divImgS.className = "Tab_Image_Div";
	divImgS.id = "Selected_State";
	var imgS = document.createElement('img');
	imgS.src = "images/sym2011-tab-selected.png";
	imgS.style.width = width;
	imgS.style.height = TAB_HEIGHT;
	divImgS.appendChild(imgS);
	divImgS.style.visibility = "hidden";
	
	var divImgU = document.createElement('div');
	divImgU.className = "Tab_Image_Div";
	divImgS.id = "Unselected_State";
	var imgU = document.createElement('img');
	imgU.src = "images/sym2011-tab-unselected.png";
	imgU.style.width = width;
	imgU.style.height = TAB_HEIGHT;
	divImgU.appendChild(imgU);
	divImgU.style.visibility = "visible";
	
	// Add the images to the tab
	tab.appendChild(divImgS);
	tab.appendChild(divImgU);
	
	// Set the onclick callback funtion
	tab.setAttribute("onmousedown", "selectTab('" + id + "','" + divID + "')");
	
	// Create a label for the tab
	var divLabel = document.createElement('div');
	divLabel.className = "Tab_Label_Div";
	var pTag = document.createElement('p');
	pTag.innerHTML = label;
	divLabel.appendChild(pTag);
	tab.appendChild(divLabel);
	
	// Add the tab to the tabList
	tabList[nTabs] = tab;
	
	tabListS[nTabs] = divImgS;
	tabListU[nTabs] = divImgU;
}

function drawTabs()
{
	var tabsOnFirstLine = (nTabs % 4); // Assuming 4 tabs max per line
	var isFirstLine = true;
	var currentColumn = 1;
	
	// Get the div where we will draw the tabs
	var divTabs = document.getElementById('divTabs');
	
	// Draw each tab
	for (var i = 1; i <= nTabs; i++)
	{
		// Add the tab to the tab DIV
		divTabs.appendChild(tabList[i]);
		
		// Possible start a new line
		if (isFirstLine) 
		{
			if (currentColumn == tabsOnFirstLine)
			{
				newLine(divTabs);
				
				isFirstLine = false;
				currentColumn = 0;
			}
		}
		else if ((currentColumn % 4) == 0)
		{
			newLine(divTabs);
			currentColumn = 0;	
		}

		// Increment current column
		currentColumn++;

	} 
}

function newLine(activeDiv)
{
	var cfDiv = document.createElement('div');
	cfDiv.setAttribute('display', 'block');
	//cfDiv.setAttribute('clear', 'left');
	cfDiv.style.clear = 'left';
	activeDiv.appendChild(cfDiv);
}

function loadXML(xmlFilename)
{
	var xml_http;
	
	// On modern browsers, the window should have an XMLHttpRequest object
	if (window.XMLHttpRequest)
	{
		xml_http = new XMLHttpRequest();
	}
	// For older browsers (IE6, IE5), use an ActiveXObject
	else
	{
		xml_http = new ActiveXObject("Microsoft.XMLHTTP");	
	}
	
	// Create a request to open an XML file, and send it
	xml_http.open("GET", xmlFilename, false);
	xml_http.send();
	
	// Create an object for the resulting XML object
	var xmlFile = xml_http.responseXML;
	
	// Return the open XML file
	return xmlFile;
}

var recursionLevel = 0;
function toHTMLString(element, parentTag)
{
	alert("Recursion level: " + recursionLevel);
	
	if (!element)
		return;
		
	alert("current element is " + element.tagName);
	
	// Maybe it would be better to assume that <element> has already been added; this function could then loop through each of element's children...less recursion this way, I think
	
	var tag;
	if (element.tagName != 'tabContent') // If the tag name is one of our custom-defined XML tags, do not create an HTML version
	{
		// Create a tag, and add it to the parentTag
		tag = document.createElement(element.tagName);
		parentTag.appendChild(tag)
	}
	else
	{
		tag = parentTag;	
	}
	
	alert("current tag's innerHTML: " + tag.innerHTML);
	
	// If the element has children, then process each child
	if (element.hasChildNodes())
	{
		alert("This element has " + element.childNodes.length + " children.");
		for (i = 0; i < element.childNodes.length; i++)
		{
			//recursionLevel++;
			//toHTMLString(element.childNodes[i], tag);
			//recursionLevel--;
			//alert("Now, recursion level is: " + recursionLevel);
			alert(element.childNodes.length);
		}
	}
	
	alert("Returning...");

	//alert("toHTMLString: " + element);
}

var divObject = new Array();
var fPtr = null;
var startTime = new Array();
var animLength = 500;
var moveLength = new Array();
var maxLength = 0;
var topCoord = new Array();
var nObjects = 0;
var imageBoxOpen = true;
var moveDirection = 1;
var moveType = "";
var imageBoxIsMoving = false;
var placeholder;

// Determine whether the imageBox should start expanded (open) or collapsed (closed)

/*alert(document.URL);

if (getCookie("collapsed") == "true")
	imageBoxOpen = false;
else
	imageBoxOpen = true; */

function collapseExpand()
{
	// Do not move, if already moving
	if (imageBoxIsMoving)
		return;
	
	// Set the moving flag
	imageBoxIsMoving = true;
	
	// Determine whether to collapse or expand
	if (imageBoxOpen)	
			moveType = "collapse";
		else
			moveType = "expand";

	// Loop through all the arguments
	nObjects = 0;
	for (var a = 0; a < arguments.length; a+=2)
	{
		// Every 2 arguments represents one object...
		var n = a/2;
		
		// Get the next object
		divObject[n] = document.getElementById(arguments[a]);
	
		//topCoord[n] = parseInt(divObject[n].style.top);
		//if (moveType == "expand")
			//topCoord[n] = topCoord[n] + moveLength[n];
	
		// Get the amount to move this object
		moveLength[n] = parseInt(arguments[a+1]);
		if (moveLength[n] > maxLength)
			maxLength = moveLength[n];
			
		// Keep a count of the total number of objects
		nObjects++;
	}
	
	// Hard-coded for now...
	topCoord[0] = 0;
	topCoord[1] = 220;
		
	// Get the imageBoxPlaceholder	
	placeholder = document.getElementById('divImageBoxPlaceholder');
	
	// If collapsing, make divImageBoxCollapsed visible
	if (moveType == "collapse")
		document.getElementById('divImageBoxCollapsed').style.visibility = "visible";
	
	// Start the animation loop
	fPtr = setInterval(collapseExpandStep, 4);
	
	// Set the start time
	startTime = (new Date()).getTime();
}

function collapseExpandStep()
{
	// Return, if there is no divObject to collapse or expand
	if (!divObject)
		return;
		
	// Determine how much time has elapsed so far
	var elapsedTime = (new Date()).getTime() - startTime;

	// If the elapsedTime is greater than animLength, then stop animating
	if (elapsedTime > animLength)
		collapseExpandEnd();
	
	// Otherwise, perform one step of the animation
	else
	{
		// Determine the current position of divObject
		var currentPos = Math.round(elapsedTime / animLength * maxLength);
		
		// This animation is, by default, programmed to perform a "collapse"
		// If "expand" is desired, then reverse the animation
		if (moveType == "expand")	// Then reverse it
		{
			currentPos = maxLength - currentPos;
		}
		
		// Set the current position of each object
		var objectPos;
		for (var i = 0; i < nObjects; i++)
		{
			// Don't position this object farther than its maximum moveLength
			objectPos = currentPos;
			
			// If collapsing (moving upward) and currentPos is greater than maximum move length...
			if (currentPos > moveLength[i])
				objectPos = moveLength[i];
			
			// Set the current position of the object
			divObject[i].style.top = "" + (topCoord[i] - objectPos) + "px";
		}
		
		// Change the size of the placeholder, in order to "pull" the document flow along with the collapse/expand
		var pHeight;
		if (currentPos > moveLength[1])
			pHeight = (maxLength - moveLength[1]);
		else
			pHeight = (maxLength - currentPos);
			
		placeholder.style.height = "" + pHeight + "px";
	}
	
	return;
}

function collapseExpandEnd()
{
	// Stop the animation loop
	clearInterval(fPtr);
	
	// Set the final height
	for (var i = 0; i < nObjects; i++)
	{
		if (moveType == "collapse")
			divObject[i].style.top = "" + (topCoord[i] - moveLength[i]) + "px";
		else
			divObject[i].style.top = "" + topCoord[i] + "px";
	}
	
	// Perform final clean-up actions, based on whether we just collapsed or expanded
	if (moveType == "collapse")
	{
		// Set the final height of placeholder
		placeholder.style.height = "" + (moveLength[0] - moveLength[1]) + "px";
		
		// Set a cookie to keep track of the state of the imageBox
		setCookie("collapsed", "true", 1);
		
		// Set the collapse/expand button
		MM_swapImage('btnCollapse','','images/sym2011-btnExpand.png',1);
	}
	else
	{
		// Set the final height of placeholder
		placeholder.style.height = "" + maxLength + "px";
		
		// Set a cookie to keep track of the state of the imageBox
		setCookie("collapsed", "false", 1);
		
		// Hide divImageBoxCollapsed
		document.getElementById('divImageBoxCollapsed').style.visibility = "hidden";
		
		// Set the collapse/expand button
		MM_swapImage('btnCollapse','','images/sym2011-btnCollapse.png',1);
	}
	
	// Toggle imageBoxOpen
	imageBoxOpen = !imageBoxOpen;
	
	// Animation complete
	imageBoxIsMoving = false;
}

function testCrossFile()
{
	alert("cross file test!");	
}

function setCookie(name, value, expireDays)
{
	// Set-up the expiration date for this cookie
	var expireDate = new Date();
	expireDate.setDate(expireDate.getDate() + expireDays);
	
	// Now, create the cookie
	var cookieString = name + "=" + value + "; expires=" + expireDate.toUTCString();
	document.cookie = cookieString;
}

function getCookie(name)
{
	// Search for this cookie; return its value if found
	var searchStr = new RegExp(name + "=[^;]+", "i");
	if (document.cookie.match(searchStr))
		return document.cookie.match(searchStr)[0].split("=")[1];
	else
		return "";
}

function setFooterDate()
{
	// Get the date that this page was last modified
	var dateModified = getLastModifiedDate();
	
	var footerText = "";
	if (dateModified != "Unknown")
	{
		footerText = "" + "This site was last updated " + dateModified;
	}
	
	// Now set this text in the footer
	var dateSpan = document.getElementById("FooterDate");
	if (dateSpan)
	{
		dateSpan.innerHTML = footerText;	
	}
}

// Get the date that the current document was last modified

// *************************************************
// datelastmod.js   Display Date Format: 31 Mar 2000
// © Pat Drummond  www.patdrummond.org
// Modified 9 Sept 2010 by Michael Steffen, GIA
// *************************************************
// Get the last modified date of this webpage
function getLastModifiedDate()
{
  var lmd = document.lastModified;
  var s   = "Unknown";
  var d1;
  // check if valid date
  if(0 != (d1=Date.parse(lmd)))
  { s = "" + date_ddmmmyyyy(new Date(d1)); }
  return s;
}

function date_ddmmmyyyy(date)
{
  var d = date.getDate();
  var m = date.getMonth() + 1;
  var y = date.getYear();
  var mmm =
    ( 1==m)?'Jan':( 2==m)?'Feb':(3==m)?'Mar':
    ( 4==m)?'Apr':( 5==m)?'May':(6==m)?'Jun':
    ( 7==m)?'Jul':( 8==m)?'Aug':(9==m)?'Sept':
    (10==m)?'Oct':(11==m)?'Nov':'Dec';
  return "" +
    mmm + " " + d + ", " + (y<1000?1900+y:y);
}

// Dreamweaver-created

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}