// Russell Thompson
// Project: Wedding Gallery for FHCC
// Page: JavaScript / AJAX code 
// February 2009
// copyright 2009 - you are welcome to copy / use / change / distribute this code as much as you want.
// You may NOT altered THIS file in any way.

// GLOBAL VARIABLES

var windowX = 0;
var windowY = 0;
var divTop = 0;
var divLeft = 0;
var isIE = (navigator.userAgent.indexOf("MSIE") != -1); // this is to handle javascript bugs with older versions of IE

// FUNCTIONS FOR THE PHOTO GALLERY

function runajax(objId, serverPage, post_get)
{
	// check for a valid IE instance
	var xmlhttp = false;
	
	// using IE?
	try
	{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e)
	{
		// check for older versions of IE
		try
		{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (E)
		{
			// using a non-Microshit browser
			xmlhttp = false;
		}
	}
	
	// if not using IE, create an instand of the object
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
	{
		xmlhttp = new XMLHttpRequest();
	}
	
	// decide to do POST or GET
	if (post_get)
	{
		// since this is added late, and only for GET instances, post_get should always = get or be blank
		var obj = document.getElementById(objId);
		xmlhttp.open("GET", serverPage);
		xmlhttp.onreadystatechange = function()
		{
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
			{
				obj.innerHTML = xmlhttp.responseText;
				
				var inlineJs = obj.getElementsByTagName("script");
				
				if (inlineJs.length > 0)
				{
					// for testing -> 
					alert("number of script tags: " + inlineJs.length);
					
					for (var x = 0; x < inlineJs.length; x++)
					{
						var insertJavaScript = document.createElement("script");
						insertJavaScript.type = "text/javascript";
						insertJavaScript.id = "ajaxInlineJs_" + x;
						insertJavaScript.innerHTML = inlineJs[x].innerHTML;
						document.getElementsByTagName("head")[0].appendChild(insertJavaScript);
						
						// for testing -> alert("Inline JS " + x + ": " + inlinejs);
						// eval(inlineJs[x].innerHTML);
						// for testing... what is the innerHTML of this script tag?
						// alert(inlinejs[x].innerHTML);
					}
				}
			}
		}
		
		xmlhttp.send(null);
	}
	else
	{
	
		// extract the server page and the variable strings from 'serverPage' to be send using POST
		var findChar = "?";
		var indexSpot = serverPage.indexOf(findChar);
		var pageString = serverPage.substring(0, indexSpot);
		// for testing -> alert("pageSting = " + pageString + ".");
		var varString = serverPage.substring(indexSpot+1);
		// for testing -> alert("varString = " + varString + ".");
		var obj = document.getElementById(objId);
		xmlhttp.open("POST", pageString, true);
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
		xmlhttp.onreadystatechange = function()
		{
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
			{
				obj.innerHTML = xmlhttp.responseText;
				
				var inlineJs = obj.getElementsByTagName("script");
				
				if (inlineJs.length > 0)
				{
					// for testing -> alert("number of script tags: " + inlinejs.length);
					
					for (var x = 0; x < inlineJs.length; x++)
					{
						var insertJavaScript = document.createElement("script");
						insertJavaScript.type = "text/javascript";
						insertJavaScript.id = "ajaxInlineJs_" + x;
						insertJavaScript.innerHTML = inlineJs[x].innerHTML;
						document.getElementsByTagName("head")[0].appendChild(insertJavaScript);
					}
				}
			}
		}
		
		xmlhttp.send(varString);
	} // end if-else 
}

// FUNCTION TO CALC BROWSER SIZE

function calcWindowXY()
{
	if (typeof window.innerWidth == 'number')
	{
		windowX = window.innerWidth;
		windowY = window.innerHeight;
	}
	else if(document.documentElement && document.documentElement.clientWidth)
	{
		windowX = document.documentElement.clientWidth;
		windowY = document.documentElement.clientHeight;
	}
	else
	{
		windowX = document.body.clientWidth;
		windowY = document.body.clientHeight;
	}
}

function calcDivTopLeft(givenWidth, givenHeight)
{
	var scrolledX, scrolledY;
	
	displayX = givenWidth / 2;
	displayY = givenHeight / 2;
	
	// for testing ->	alert("windowX = " + windowX + " and windowY = " +windowY);
	
	centerX = windowX / 2;
	centerY = windowY / 2;
	
	if (document.all)
	{
		if (!document.documentElement.scrollLeft)
		{
			scrolledX = document.body.scrollLeft;
		}
		else
		{
			scrolledX = document.documentElement.scrollLeft;
		}

		if (!document.documentElement.scrollTop)
		{
			scrolledY = document.body.scrollTop;
		}
		else
		{
			scrolledY = document.documentElement.scrollTop;
		}
	}
	else
	{
		scrolledX = window.pageXOffset;
		scrolledY = window.pageYOffset;
	}
	
	// for testing ->
	// alert("scrolledX = " + scrolledX + " and scrolledY = " + scrolledY);
	// alert("displayX = " + displayX + " and displayY = "+ displayY);
	// alert("centerX = " + centerX + " and centerY = " + centerY);
	
	divTop = scrolledY + centerY - displayY;
	divLeft = scrolledX + centerX - displayX;
	
	// for testing ->	alert("divTop = " + divTop + " and divLeft = " + divLeft);
}

function modalLayer(passWidth, passHeight, objId, serverPage, post_get)
{
	calcDivTopLeft(passWidth, passHeight);
	
	// make sure the window is at the top, left
	// window.scrollTo(0, 0); -> not for this application
	
	// if user's browser is IE6 or lower, hide selects because of IE bug
	if (isIE)
	{
		for (var i = 0; i < document.getElementsByTagName('select').length; i++)
		{
			document.getElementsByTagName('select')[i].style.visibility = "hidden";
		}
	}
	
	// give div's some 'body'
	// the 'overlay' div is a grey area around the modal_layer div
	var overlayWidth = passWidth + 40;
	var overlayHeight = passHeight + 40;
	var overlayTop = divTop - 20;
	var overlayLeft = divLeft - 20;
	
	document.getElementById('modal_overlay').style.top = overlayTop + "px";
	document.getElementById('modal_overlay').style.left = overlayLeft + "px";
	document.getElementById('modal_overlay').style.width = overlayWidth + "px";
	document.getElementById('modal_overlay').style.height = overlayHeight + "px";
	document.getElementById('modal_overlay').style.visibility = "visible";
	
	// normally I would want the window to pop up in the top location used in the next statement, but for this app, I want it to show just below the level of the contentDiv
	// document.getElementById('popupDisplayDiv').style.top = divTop + "px";
	document.getElementById('modal_layer').style.top = divTop + "px";
	document.getElementById('modal_layer').style.left = divLeft + "px";
	document.getElementById('modal_layer').style.width = passWidth + "px";
	document.getElementById('modal_layer').style.height = passHeight + "px";
	document.getElementById('modal_layer').style.visibility = "visible";
	
	// for testing
	// alert("serverPage = " + serverPage + ".");
	// alert("objId = " + objId + ".");
	// end test code
	
	runajax(objId, serverPage, post_get);
}

function modalLayerOff()
{
	// hide the popup divs
	document.getElementById('modal_layer').innerHTML = "";
	document.getElementById('modal_layer').style.visibility = "hidden";
	document.getElementById('modal_overlay').style.visibility = "hidden";
	
	// if user's browser is IE6 or lower, the selects have been hidden because of IE bug
	// now must un-hide them
	if (isIE)
	{
		for (var i = 0; i < document.getElementsByTagName('select').length; i++)
		{
			document.getElementsByTagName('select')[i].style.visibility = "visible";
		}
	}
	
	// if the user is on the index page, the flash animation has been hidden for the modalLayer to work
	// now un-hide it
	if (document.getElementById('index_flash'))
	{
		document.getElementById('index_flash').style.visibility = "visible";
	}
}

// function to prepare the serverPage string for AJAX
function prepAJAX(theSwitch, theForm, theObj, special)
{
	switch (theSwitch)
	{
		case "friendProcess": // this case is left as an example
			var myform = theForm;
			// this is for testing -> var sendPage = "../pages/checkValues.php?";
			var sendPage = "../pages/tellAFriend.php?";
			
			for (var i = 0; i < myform.elements.length; i++)
			{
				
				sendPage += myform.elements[i].name + "=" + myform.elements[i].value + "&";
			}
			
			runajax(theObj, sendPage, 'get');
		break;
		
		case "processSection":
			var sendPage = "create_section.php" + special;
			
			runajax(theObj, sendPage, 'get');
		break;
		
		case "createSectionType":
			// the select id/name is passed in the 'theForm' arg
			var answer = document.getElementById(theForm).options[document.getElementById(theForm).selectedIndex].value;
			var sendPage = "create_section.php" + special + "&section=" + answer;
			
			runajax(theObj, sendPage, 'get');
		break;
		
		case "createAnswerType":
			document.getElementById(theObj).innerHTML = '';
			document.getElementById(theObj).innerHTML = '<br /><center><img src=\"../images/workingAnimation3.gif\" border=\"0\" alt=\"working...\" /></center>';
			
			var theServerPage = "chooseAnswerType.php?returnTo=" + theObj;
			
			modalLayer(700, 450, 'popupDisplayDiv', theServerPage, 'get');
		break;
		
		case "multiCheckboxFinal":
			var urlVariables = "?answerType=multi_checkbox_3&parent=" + theObj;
			
			for (var i = 0; i < special; i++)
			{
				var theValue = document.getElementById('theOptions_' + i).value;
				
				// get ride of fields that are blank
				if (theValue != "" && theValue != null)
				{
					urlVariables = urlVariables + "&options[]=" + theValue;
				}
			}
			
			var sendPage = "processAnswerType.php" + urlVariables;
			
			// for testing ->			alert(sendPage);
			
			runajax(theObj, sendPage, 'get');
		break;
		
		case "singleDropdownFinal":
			var urlVariables = "?answerType=single_dropdown_3&parent=" + theObj;
			
			for (var i = 0; i < special; i++)
			{
				var theValue = document.getElementById('theOptions_' + i).value;
				
				// get ride of fields that are blank
				if (theValue != "" && theValue != null)
				{
					urlVariables = urlVariables + "&options[]=" + theValue;
				}
			}
			
			var sendPage = "processAnswerType.php" + urlVariables;
			
			// for testing ->			alert(sendPage);
			
			runajax(theObj, sendPage, 'get');
		break;
	} // end switch
	
	// for testing
	// alert("The URL = " + sendPage + ".");
	// end testing
	
} // end prepAJAX function

// validation function(s)
// this function is for use with the power-survey stuff... which does not work thanks to restrictions by the vertual server provider
/*
function validateForm(theForm, special)
{
	switch (theForm)
	{
		case "answerTypeForm":
			var myForm = document.answerTypeForm;
			// for testing ->			alert ("myForm = " + myForm);
			var radioChecked = false;
			var returnValue = false;
			var theAnswerType = '';
			
			for (i=0; i<myForm.theAnswerType.length; i++)
			{
				if (myForm.theAnswerType[i].checked)
				{
					radioChecked = true;
					theAnswerType = myForm.theAnswerType[i].value;
				}
			}
			
			if (radioChecked == true)
			{
				returnValue = true;
				var sendPage = "processAnswerType.php?answerType=" + theAnswerType + "&parent=" + special;
				document.getElementById(special).removeAttribute('onclick');
				modalLayerOff();
				runajax(special, sendPage, 'get');
			}
			else
			{
				alert("You must choose one type of answer.  Click a radio button in an orange rectangle. Then click 'continue' again.");
			}
			
			return returnValue;
		break;
		
		case "answerTypeInfoMissing":
			// this isn't really validating anything, but the functions here and it serves the purpose, so...
			alert("There is information and/or data missing. The page cannot be processed.  Please us your browser's refresh button to begin again.");
			modalLayerOff();
		break
		
		case "answerTypeClosed":
			// again, not really validating...
			var findThis = "_";
			var firstLocation = special.indexOf(findThis);
			var startAgain = firstLocation + 1;
			var secondLocation = special.indexOf(findThis, startAgain) +1;
			var theCycle = special.substring(0, firstLocation);
			var theGroup = special.substring(secondLocation);
			var buttonCode = "<div id=\"" + theCycle + "_chooseAnswerType_" + theGroup + "\" name=\"" + theCycle + "_chooseAnswerType_" + theGroup + "\" class=\"addNode\">\n<span class=\"nodeButton\">Create Answer Type</span>\n</div> <!-- end nodebutton div -->\n";
			
			// in some cases the onclick attribute is removed from the answerType div, this makes sure it's there
			document.getElementById(special).setAttribute('onclick', 'javascript: prepAJAX(\'createAnswerType\', \'\', this.id);');
			
			// test, just to make sure I'm picking up the numbers only -> 			alert("the cycle: " + theCycle + " and the group: " + theGroup);
			
			document.getElementById(special).innerHTML = buttonCode;
			
			modalLayerOff();
		break;
		
		case "single5Value":
			// first make sure they've put something in for both titles
			var returnValue = false;
			var kids = document.getElementById('single5Value').childNodes;
			var textField = new Array();
			var arrayIndex = new Array();
			var k = 0;
			
			for (var i = 0; i < kids.length; i++)
			{
				if (kids[i].nodeType == 1 && kids[i].tagName.toLowerCase() == "input")
				{
					var theNodeValue = document.getElementById(kids[i].id).value;
					// for testing ->					alert("Node name = " + kids[i].name + " value: " + theNodeValue);
					
					arrayIndex[k] = i;
					textField[k] = theNodeValue;
					k++;
				}
			}
			
			// for testing ->			alert("Low Label: " + textField[0] + " High Label: " + textField[1]);
			
			if (document.getElementById(kids[arrayIndex[0]].id).value == "" || document.getElementById(kids[arrayIndex[0]].id).value == null)
			{
				alert("You must enter a value for the low end label.");
				document.getElementById(kids[arrayIndex[0]].id).focus();
			}
			else if (document.getElementById(kids[arrayIndex[1]].id).value == "" || document.getElementById(kids[arrayIndex[1]].id).value == null)
			{
				alert("You must enter a value for the high end label.");
				document.getElementById(kids[arrayIndex[1]].id).focus();
			}
			else
			{
				returnValue = true;
				var urlVariables = "?answerType=display_single_radio_5&lowLabel=" + textField[0] + "&highLabel=" + textField[1] + "&parent=" + special;
				var sendPage = "processAnswerType.php" + urlVariables;
				
				runajax(special, sendPage, 'get');
			}
			
			return returnValue;
		break;
		
		case "single3Value":
			// first make sure they've put something in for both titles
			var returnValue = false;
			var kids = document.getElementById('single3Value').childNodes;
			var textField = new Array();
			var arrayIndex = new Array();
			var k = 0;
			
			for (var i = 0; i < kids.length; i++)
			{
				if (kids[i].nodeType == 1 && kids[i].tagName.toLowerCase() == "input")
				{
					var theNodeValue = document.getElementById(kids[i].id).value;
					// for testing ->					alert("Node name = " + kids[i].name + " value: " + theNodeValue);
					
					arrayIndex[k] = i;
					textField[k] = theNodeValue;
					k++;
				}
			}
			
			// for testing ->			alert("Low Label: " + textField[0] + " High Label: " + textField[1]);
			
			if (document.getElementById(kids[arrayIndex[0]].id).value == "" || document.getElementById(kids[arrayIndex[0]].id).value == null)
			{
				alert("You must enter a value for the low end label.");
				document.getElementById(kids[arrayIndex[0]].id).focus();
			}
			else if (document.getElementById(kids[arrayIndex[2]].id).value == "" || document.getElementById(kids[arrayIndex[2]].id).value == null)
			{
				alert("You must enter a value for the high end label.");
				document.getElementById(kids[arrayIndex[2]].id).focus();
			}
			else
			{
				returnValue = true;
				
				// the center value may be left blank. so if the value is 'may be left blank' then clear it and pass a blank
				if (document.getElementById(kids[arrayIndex[1]].id).value == "may be left blank")
				{
					var theCenterValue = "";
				}
				else
				{
					var theCenterValue = document.getElementById(kids[arrayIndex[1]].id).value;
				}
				
				var urlVariables = "?answerType=display_single_radio_3&leftLabel=" + textField[0] + "&centerLabel=" + theCenterValue + "&rightLabel=" + textField[2] + "&parent=" + special;
				var sendPage = "processAnswerType.php" + urlVariables;
				
				runajax(special, sendPage, 'get');
			}
			
			return returnValue;
		break
		
		case "multiCheckbox":
			var returnValue = false;
			
			var numOfOptions = parseInt(document.getElementById('multiNumber').value);
			
			if (isNaN(numOfOptions))
			{
				alert("The number must be entered as digits only - no words, no spaces, no special charactors!");
				document.getElementById('multiNumber').focus();
			}
			else
			{
				var urlVariables = "?answerType=multi_checkbox_2&options=" + numOfOptions + "&parent=" + special;
				var sendPage = "processAnswerType.php" + urlVariables;
				
				returnValue = true;
				runajax(special, sendPage, 'get');
			}
			
			return returnValue;
		break;
		
		case "singleDropdown":
			var returnValue = false;
			
			var numOfOptions = parseInt(document.getElementById('singleDropdownNumber').value);
			
			if (isNaN(numOfOptions))
			{
				alert("The number must be entered as digits only - no words, no spaces, no special charactors!");
				document.getElementById('singleDropdownNumber').focus();
			}
			else
			{
				var urlVariables = "?answerType=single_dropdown_2&options=" + numOfOptions + "&parent=" + special;
				var sendPage = "processAnswerType.php" + urlVariables;
				
				returnValue = true;
				runajax(special, sendPage, 'get');
			}
			
			return returnValue;
		
		default:
			alert("There were no cases to handle your request. Passed argument = " + theForm + " Second argument = " + special);
		break;
	} // end switch
} // end validateForm function
*/

// Javascript for the add/remove node

function changeNode(add_remove, before_after, what, parent, currentNumber, currentNode)
{
	// for testing -> alert("The current node: " + theCurrentNode);
	
	switch (what)
	{
		case "addQuestion":
			// for testing -> 			alert("Inside 'addQuestion' currentNode is: " + currentNode);
			// for testing -> 			alert("Inside 'addQuestion' parent is: " + parent);
			parent = parent.id;
			// for testin -> 			alert("Inside 'addQuestion' parent id is: " + parent);
			var theReturn = document.createElement('input');
			
			theReturn.setAttribute('type', 'text');
			theReturn.setAttribute('id', parent + '_question[]');
			theReturn.setAttribute('name', parent + '_question[]');
			theReturn.setAttribute('value', 'enter question here');
			theReturn.setAttribute('class', 'textFieldTwo');
			theReturn.setAttribute('onclick', 'javascript: this.value=\'\';');
			
			// add the delete x ([x]) behind input
				// to solve problem with FF 3.x and the way it handles nodes with same names, at group number to a id
			var groupNumber = getGroupNumber(parent);
			var theRemoveReturn = document.createElement('a');
			var theRemoveId = groupNumber + "_removeLink_" + currentNumber;
			
			theRemoveReturn.setAttribute('onclick', 'javascript: document.getElementById(\'' + parent + '\').removeChild(document.getElementById(\'' + theRemoveId + '\').previousSibling); document.getElementById(\'' + parent + '\').removeChild(document.getElementById(\'' + theRemoveId + '\').previousSibling); document.getElementById(\'' + parent + '\').removeChild(document.getElementById(\'' + theRemoveId + '\').nextSibling); document.getElementById(\'' + parent + '\').removeChild(document.getElementById(\'' + theRemoveId + '\'));');
			theRemoveReturn.setAttribute('id', theRemoveId);
			theRemoveReturn.setAttribute('name', theRemoveId);
			theRemoveReturn.setAttribute('title', 'click to delete question');
			theRemoveReturn.setAttribute('class', 'noDecorateHand');
			var theRemoveHTML = "&nbsp;[X]";
			
			if (add_remove === "add")
			{
				var theBr = document.createElement('br');
				var the2ndBr = document.createElement('br');
				var yetAnotherBr = document.createElement('br');
				var theCurrentNode = document.getElementById(currentNode);
				var newNumber = currentNumber + 1;
				var newOnclick = "javascript: changeNode('" + add_remove + "', '" + before_after + "', '" + what + "', this.parentNode, " + newNumber + ", this.id);";
				// for testing -> 				alert("the new onclick: " + newOnclick);
				
				if (before_after === "after")
				{
					document.getElementById(parent).appendChild(theReturn);
					document.getElementById(parent).appendChild(theRemoveReturn);
					document.getElementById(parent).appendChild(theBr);
					document.getElementById(theRemoveId).innerHTML = theRemoveHTML;
					//document.getElementById(parent).appendChild(the2ndBr);
				}
				else
				{
					// for testing ->					alert("Parent Node as passed by function call: " + parent);
					document.getElementById(parent).insertBefore(theBr, theCurrentNode);
					document.getElementById(parent).insertBefore(theReturn, theCurrentNode);
					document.getElementById(parent).insertBefore(theRemoveReturn, theCurrentNode);
					document.getElementById(parent).insertBefore(the2ndBr, theCurrentNode);
					document.getElementById(theRemoveId).innerHTML = theRemoveHTML;
					// document.getElementById(parent).insertBefore(yetAnotherBr, theCurrentNode);
				}
				
				document.getElementById(currentNode).setAttribute('onclick', newOnclick);
			}
			else
			{
				document.getElementById(parent).removeChild(currentNode);
			}
		break;
		
		case "addQuestionGroup":
			// for testing -> 			alert("Inside 'addQuestionGroup' parent: " + parent);
			parent = parent.id;
			// for testing -> 			alert("Inside 'addQuestionGroup' parent id is: " + parent);
			// first, remove the button and everything else in the table cell using 'parent'
			document.getElementById(parent).innerHTML = "";
			
			// next, insert the directions row in the table -before- the current row
			var cycleNum = getCycleNumber(currentNumber);
			var groupNum = getGroupNumber(currentNumber);
			var theCurrentRow = cycleNum + "_row_" + groupNum;
			var rowParent = document.getElementById(theCurrentRow).parentNode.id;
			// for testing ->			alert("The parent row: " + rowParent + ".");
			var proceedOn = changeNode('add', 'before', 'addGroupDirections', rowParent, currentNumber, theCurrentRow);
			
			if (proceedOn == true)
			{
				// the directions were created, now put stuff inside the question cell and answer cell
				
				// create the questionGroup div
				var theDivReturn = document.createElement('div');
				var theDivId = cycleNum + "_questionGroup_" + groupNum;
				
				theDivReturn.setAttribute('id', theDivId);
				theDivReturn.setAttribute('name', theDivId);
				theDivReturn.setAttribute('class', 'questionGroupDiv');
				
				// create the input stuff for above div
				var theInputReturn = document.createElement('input');
				var theInputId = cycleNum + "_questionGroup_" + groupNum + "_question[]";
				
				theInputReturn.setAttribute('type', 'text');
				theInputReturn.setAttribute('id', theInputId);
				theInputReturn.setAttribute('name', theInputId);
				theInputReturn.setAttribute('value', 'enter question here');
				theInputReturn.setAttribute('class', 'textFieldTwo');
				theInputReturn.setAttribute('onfocus', 'javascript: this.value=\'\';');
				
				// create the button div stuff
				var theButtonDivReturn = document.createElement('div');
				var theButtonDivId = cycleNum + "_makeAnotherQuestion_" + groupNum;
				
				theButtonDivReturn.setAttribute('id', theButtonDivId);
				theButtonDivReturn.setAttribute('name', theButtonDivId);
				theButtonDivReturn.setAttribute('class', 'addNode');
				theButtonDivReturn.setAttribute('onclick', 'javascript: changeNode(\'add\', \'before\', \'addQuestion\', this.parentNode, 1, this.id);');
				
				// the stuff to go inside the button - add later, after node is in place
				var buttonDivHTML = "<span class=\"nodeButton\">Add a Question</span>\n";
				
				// one more thing... make a br element to insert where needed
				var aBr = document.createElement('br');
				
				document.getElementById(parent).appendChild(theDivReturn);
				document.getElementById(theDivId).appendChild(theInputReturn);
				document.getElementById(theDivId).appendChild(document.createElement('br'));
				// document.getElementById(theDivId).appendChild(document.createElement('br'));
				document.getElementById(theDivId).appendChild(theButtonDivReturn);
				document.getElementById(theButtonDivId).innerHTML = buttonDivHTML;
				
				// WOW, that's just the question stuff, now to insert the answer stuff!
				var answerParent = cycleNum + "_answerColumn_" + groupNum;
				
				// for testing ->				alert("The answer's parent: " + answerParent + ".");
				
				// clear the blank space that's there now
				document.getElementById(answerParent).innerHTML = "";
				
				// create the div that holds the button div and will hold the user's choice of answer types
				var theAnswerTypeDivReturn = document.createElement('div');
				var theAnswerTypeDivId = cycleNum + "_answerType_" + groupNum;
				
				theAnswerTypeDivReturn.setAttribute('id', theAnswerTypeDivId);
				theAnswerTypeDivReturn.setAttribute('name', theAnswerTypeDivId);
				theAnswerTypeDivReturn.setAttribute('class', 'answerTypeDiv');
				theAnswerTypeDivReturn.setAttribute('onclick', 'javascript: prepAJAX(\'createAnswerType\', \'\', this.id);');
				
				// create the button div for choosing the answer type
				var theAnswerBtnDivReturn = document.createElement('div');
				var theAnswerBtnDivId = cycleNum + "_chooseAnswerType_" + groupNum;
				
				theAnswerBtnDivReturn.setAttribute('id', theAnswerBtnDivId);
				theAnswerBtnDivReturn.setAttribute('name', theAnswerBtnDivId);
				theAnswerBtnDivReturn.setAttribute('class', 'addNode');
				
				// the html inside the button
				var answerBtnHTML = "<span class=\"nodeButton\">Create Answer Type</span>\n";
				
				// okay, put it all together
				document.getElementById(answerParent).appendChild(theAnswerTypeDivReturn);
				document.getElementById(theAnswerTypeDivId).appendChild(theAnswerBtnDivReturn);
				document.getElementById(theAnswerBtnDivId).innerHTML = answerBtnHTML;
				
				// FINAL - this should be the last of it... the next row with a button for creating another whole question group.
				// the new row
				var theNewRowReturn = document.createElement('tr');
				var groupPlusNum = parseInt(groupNum) + 1;
				var theNewRowId = cycleNum + "_row_" + groupPlusNum;
				
				theNewRowReturn.setAttribute('id', theNewRowId);
				theNewRowReturn.setAttribute('name', theNewRowId);
				
				// the question cell
				var theQuestionCellReturn = document.createElement('td');
				var theQuestionCellId = cycleNum + "_questionColumn_" + groupPlusNum;
				
				theQuestionCellReturn.setAttribute('id', theQuestionCellId);
				theQuestionCellReturn.setAttribute('name', theQuestionCellId);
				theQuestionCellReturn.setAttribute('class', 'makeSurveyTableCell');
				
				// the answer cell
				var theAnswerCellReturn = document.createElement('td');
				var theAnswerCellId = cycleNum + "_answerColumn_" + groupPlusNum;
				
				theAnswerCellReturn.setAttribute('id', theAnswerCellId);
				theAnswerCellReturn.setAttribute('name', theAnswerCellId);
				theAnswerCellReturn.setAttribute('class', 'makeSurveyTableCell');
				
				// create the stuff to go inside each cell.  using 'innerHTML' for this
				var groupPlusPlusNum = groupPlusNum + 1;
				// for testing ->				alert("groupPlusPlusNum is: " + groupPlusPlusNum + ".");
				var questionCellHTML = "<br />\n<center>\n<div id=\"" + cycleNum + "_makeAnotherQuestionGroup_" + groupPlusNum + "\" name=\"" + cycleNum + "_makeAnotherQuestionGroup_" + groupPlusNum + "\" class=\"addNode\" onclick=\"javascript: changeNode('add', 'after', 'addQuestionGroup', this.parentNode.parentNode, '" + cycleNum + "-" + groupPlusNum + "', this.id);\">\n<span class=\"nodeButton\">Add Question Group</span>\n</div>\n</center>\n<br />\n";
				var answerCellHTML = "&nbsp;";
				
				// now put all the stuff together for the new row
				document.getElementById(rowParent).appendChild(theNewRowReturn);
				document.getElementById(theNewRowId).appendChild(theQuestionCellReturn);
				document.getElementById(theNewRowId).appendChild(theAnswerCellReturn);
				
				// put stuff in the cells
				document.getElementById(theQuestionCellId).innerHTML = questionCellHTML;
				document.getElementById(theAnswerCellId).innerHTML = answerCellHTML;
			}
			else
			{
				// not sure I'll really need an else... but for now here is space for it
				alert("Something didn't work the way you planned!");
			}
		break;
		
		case "addGroupDirections":
			var returnValue = true; // I think I want to return true no matter what here. the return is just to hold off processing the code above until this is done
			// insert before 'currentNode'
			// give it the name in 'currentNode' + 'd'
			
			var cycleNum = getCycleNumber(currentNumber);
			var groupNum = getGroupNumber(currentNumber);
			
			// create the tr and it's attributes
			
			var theTrReturn = document.createElement('tr');
			var theTrId = cycleNum + "_row_" + groupNum + "d";
			
			theTrReturn.setAttribute('id', theTrId);
			theTrReturn.setAttribute('name', theTrId);
			
			// create the td and it's attributes
			
			var theTdReturn = document.createElement('td');
			var theTdId = cycleNum + "_groupDirections_" + groupNum;
			
			theTdReturn.setAttribute('id', theTdId);
			theTdReturn.setAttribute('name', theTdId);
			theTdReturn.setAttribute('colspan', '2');
			theTdReturn.setAttribute('class', 'makeSurveyTableCell_100');
			
			// create the textarea and it's attributes
			
			var theTextareaReturn = document.createElement('textarea');
			var theTextareaId = cycleNum + "_directions_" + groupNum;
			
			theTextareaReturn.setAttribute('id', cycleNum + '_directions_' + groupNum);
			theTextareaReturn.setAttribute('name', cycleNum + '_directions_' + groupNum);
			theTextareaReturn.setAttribute('class', 'textareaOne');
			theTextareaReturn.setAttribute('onfocus', 'javascript: this.value=\'\';');
			
			var theTextareaHTML = "enter directions for this question group here";
			
			// put it all where you want it
			// for testing ->			alert("The parent: " + parent + ".\r\nThe currentNode: " + currentNode + ".\r\nThe tr: " + theTrReturn + ".");
			
			document.getElementById(parent).insertBefore(theTrReturn, document.getElementById(currentNode));
			document.getElementById(theTrId).appendChild(theTdReturn);
			document.getElementById(theTdId).appendChild(theTextareaReturn);
			document.getElementById(theTextareaId).innerHTML = theTextareaHTML;		
			
			return returnValue;
		break;
		
		case "addNewSection":
			// for testing -> 			alert("Inside 'addNewSection' parent is: " + parent);
			parent = parent.id;
			// for testing -> 			alert("Inside 'addNewSection' parent id is: " + parent);
			// STEP ONE
			// first add new div that will hold the 'next section' add button
			currentNumber = parseInt(currentNumber);
			var nextCycleNum = currentNumber + 1;
			var newSectionContent = "<br /><center><div id=\"" + nextCycleNum + "makeAnotherSection\" name=\"" + nextCycleNum + "makeAnotherSection\" class=\"addNode\" onclick=\"javascript: changeNode('add', 'after', 'addNewSection', this.parentNode.parentNode, '" + nextCycleNum + "', this.id);\"><span class=\"nodeButton\">Add Another Section</span></div></center><br />";
			var theDivReturn = document.createElement('div');
			var theDivId = nextCycleNum + "_section";
			
			theDivReturn.setAttribute('id', theDivId);
			theDivReturn.setAttribute('name', theDivId);
			theDivReturn.setAttribute('class', 'sectionDiv');
			
			// add the new node
			document.getElementById('surveyContent').appendChild(theDivReturn);
			// insert the stuff into the new div
			document.getElementById(theDivId).innerHTML = newSectionContent;
			
			// STEP TWO
			// call the php page to insert the stuff into the current node with AJAX
				// first create the url string with the variables for the php page
			var urlVariables = "section=newSection&sectionNum=" + currentNumber + "&groupNum=0";
			var sendPage = "create_section.php?" + urlVariables;
				// next clean out the 'add section' button stuff that's currently in that div
			document.getElementById(parent).innerHTML = "";
				// then call the AJAX function that loads the new stuff into that div
			runajax(parent, sendPage, 'get');
		break;
	} // end what switch
	
	
} // end changeNode function

// functions to break up the currentNumber variable sent to changeNode, will give cycle and group numbers
function getCycleNumber(thePassedString)
{
	var findChar = "-";
	var indexSpot = thePassedString.indexOf(findChar);
	var returnCycleNumber = thePassedString.substring(0, indexSpot);
	
	return returnCycleNumber;
}

function getGroupNumber(thePassedString)
{
	var findChar = "-";
	var indexSpot = thePassedString.indexOf(findChar);
	var returnGroupNumber = thePassedString.substring(indexSpot + 1);
	
	return returnGroupNumber;
}
// end functions to break up currentNumber

// THESE ARE FOR THE WEDDING IMAGE GALLERY

function changeImage(back_forward)
{
	var currentImage = document.getElementById('weddingPhoto').src;
	
	// for testing ->	alert("The current photo is: " + currentImage);
	
	// currentImage is the entire url, only need the part after the root. So have to go from back of string to find the second occurence of '/'
	var startHere = currentImage.lastIndexOf("/");
	// now back one more time (for the second '/')
	startHere = currentImage.lastIndexOf("/", (startHere - 1));
	// now add the .. at the beginning (cus that's the way it's in the array)
	currentImage = ".." + currentImage.substring(startHere);
	
	// for testing ->	alert("Now current photo is: " + currentImage);
	
	// now go through the array and see which array value matches the currentImage value, get that values key (index number)
	for (var i = 0; i < photoArray.length; i++)
	{
		if (photoArray[i] == currentImage)
		{
			var currentIndex = i;
		}
	} // end for loop
	
	// now add the value of back_forward to currentIndex and call the displayImage function
	var sendIndex = currentIndex + back_forward;
	
	if (sendIndex < 0)
	{
		sendIndex = 0;
	}
	else if (sendIndex >= photoArray.length)
	{
		sendIndex = photoArray.length - 1;
	}
	
	displayImage(sendIndex);
	
} // end changeImage function

function displayImage(useIndex)
{
	// insert image
	document.getElementById('weddingPhoto').src = photoArray[useIndex];
	
	// hide controls if the gallery is at the beginning or end
	if (useIndex == 0 && document.getElementById('backControl').style.visibility == "visible")
	{
		// want the back / previous stuff to be hidden
		document.getElementById('backControl').style.visibility = "hidden";
		document.getElementById('previousControl').style.visibility = "hidden";
	}
	else if (useIndex == (photoArray.length - 1) && document.getElementById('forwardControl').style.visibility == "visible")
	{
		// want the foward / next stuff to be hidden
		document.getElementById('nextControl').style.visibility = "hidden";
		document.getElementById('forwardControl').style.visibility = "hidden";
	}
	else if (document.getElementById('backControl').style.visibility != "visible" || document.getElementById('forwardControl').style.visibility != "visible")
	{
		// make everything visible
		if (document.getElementById('backControl').style.visibility != "visible")
		{
			document.getElementById('backControl').style.visibility = "visible";
			document.getElementById('previousControl').style.visibility = "visible";
		}
		
		if (document.getElementById('forwardControl').style.visibility != "visible")
		{
			document.getElementById('nextControl').style.visibility = "visible";
			document.getElementById('forwardControl').style.visibility = "visible";
		}
	}
} // end displayImage function