/*
3dss.js

This file contains javascript code specific to 3DSS (see tools.js for generic code that could be used in any web app).

Since 2009 some of this code uses jQuery (Google it if you don't know about it yet).

*/


var xmlHttp; //AJAX object
var rolesAndStaff; 
var orgChart;
var formDirty = false; //detect if a form has been modified
var calendarClicked = false; //detected if the click was from a popupcalendar

window.onbeforeunload = ConfirmSave; //hook an event to determine if the form has been modified



/*****************************************
**			3DSS Forms Manager			**
******************************************/ 
 
//method that is invoked when a user tries to post back a page that is indicated as dirty
//this is only used when user is on a formsmanager page
function ConfirmSave()
{
	var currentURL = window.location.href.toLowerCase();
	var editSections = 'editsections.aspx';
	var index = currentURL.indexOf(editSections);

	if (calendarClicked && index > 0)
	{
		//this is a click originated from the popup calendar control, hence ignore
		formDirty = true;
		calendarClicked = false;
	}
	if (formDirty)
	{
		return "This form may have unsaved changes. All changes will be lost if you navigate to another page. Do you want to continue?";
	}
} 

//method used to display the individual section welcome pages
//PARAM
//sectionId: the id of the section to display the welcome page
function DisplayWelcomePage(sectionIdandName)
{

	var split = sectionIdandName.split(",");
	var sectionId = split[0]; 
	var sectionName = split[1];

	try
	{
		//prevents user from navigating away if a form change is made
		if (formDirty)
		{
			var question = "Are you sure you want to navigate away from this page?";
			var action = "Press OK to continue, or Cancel to stay on the current page.";
			var result = confirm(question + "\n\nThis form may have unsaved changes. All changes will be lost if you navigate to another page. Do you want to continue?\n\n" + action);
			if (result)
			{
				GetWelcomePage(sectionId);
			}
		}
		else
		{
			GetWelcomePage(sectionId);
		}
		
		if(document.getElementById('pickerTable') != null)
		{
		document.getElementById('pickerTable').style.visibility = "hidden";
		}
		
		document.getElementById('bodyWrapRight').style.height = "10%";
		
		UpdateCrumbtrail(sectionName);
		document.getElementById('divAttachments').style.visibility = "hidden";
		
		//hide the folder column and the hide link
		var img = document.getElementById('imgHide');
		var menu = document.getElementById('colFolders');
		var textlink = document.getElementById('HideFolderText');
		if (img != null)
		{
			img.title = 'Show Folder...';
			img.src = 'images/rr/ico/16/showmenu16.gif';
			img.style.display = 'none';
		}
		if (textlink != null)
		{
			textlink.innerText = "Show Folder";
			textlink.style.display = 'none';
		}
		if (menu != null)
		{
			menu.style.display = 'none';
		}
		//create cookie so server can maintain state
		setCookie('collapseFolder', '1', 1);
		if (document.getElementById('folderMenu2') != null)
		{
			document.getElementById('folderMenu2').style.display = 'none';
		}
		if (document.getElementById('folderMenu1') != null)
		{
			document.getElementById('folderMenu1').style.display = '';
		}
	}
	catch(err)
	{
		alert('An error has occurred. Please report this to support: ' + err);
	}
}

function UpdateCrumbtrail(sectionName)
{
	//first get the page title
	if(document.getElementById('lnkSection') != null)
	{
//		document.getElementById('lnkSection').href = "";
//		document.getElementById('lnkSection').innerText = sectionName;
//		document.getElementById('lnkSection').value = sectionName;
		document.getElementById('lnkSection').outerHTML = "<span id=\"lnkSection\">" + sectionName + "</span>";
	}
	
		if(document.getElementById('lblSeparator3') != null)
	{
		document.getElementById('lblSeparator3').style.visibility = "hidden";
	}
	
		if(document.getElementById('lnkSubSection') != null)
	{
		document.getElementById('lnkSubSection').style.visibility = "hidden";
	}
	
		if(document.getElementById('lblSeparator4') != null)
	{
		document.getElementById('lblSeparator4').style.visibility = "hidden";
	}
	
		if(document.getElementById('lnkForm') != null)
	{
		document.getElementById('lnkForm').style.visibility = "hidden";
	}
}

//method use create AJAX request to get welcome page 
//PARAM
//sectionId: the id of the section to display the welcome page
function GetWelcomePage(sectionId)
{
	//show the progress image
	var img = document.getElementById('imgProgress').style.visibility = 'visible';
	
	//ajax to display section welcome page
	xmlHttp = GetXmlHttpObject();
	if (xmlHttp==null)
	{
		alert ("Browser does not support HTTP Request");
		return;
	}
	var siteId = GetQueryString('siteId');

	//pass to AJAX page to query database to get
	var url="EditSections.aspx?welcomePage=1&siteId="+siteId+"&sectionId="+sectionId;
	xmlHttp.onreadystatechange=ShowWelcomePage; 
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null); 
	formDirty = false;
	calendarClicked = false;
}

//error code: 1
//method that is subscribed to the AJAX complete event of GetWelcomePage(sectionId)
function ShowWelcomePage()
{
	if (xmlHttp.readyState==4)
	{
		if (xmlHttp.responseText.length > 0 && xmlHttp.status == 200)
		{ 
			//hide the progress image
			document.getElementById('imgProgress').style.visibility = 'hidden';

			//hide the section panel, we cannot overwrite as it the DOM expects it to be there on postback			
			var panel = document.getElementById('pnlSectionView');
			panel.style.visibility = 'hidden';
			
			try
			{
				//document.getElementById('CompletedForms1_lstCompletedForms').style.visibility = 'hidden';
				document.getElementById('DocumentPicker1_tvDocuments').style.visibility = 'hidden';
				//document.getElementById('DocumentPicker1_lblCount').style.visibility = 'hidden';
			}
			catch (err) {}
			
			//response text is made up of 2 parts separated by a bar |
			// <welcome content> | <section help link>
			
			var response = xmlHttp.responseText.split("|");
			
			//display the welcome page			
			var welcome = document.getElementById('welcome');
			welcome.innerHTML = response[0];
			
			// hook event for help file for section 
			// cell.onclick = function() {EditRow(cell.parentNode)};
			var linkhelp = document.getElementById('lnkHelp');
			if (linkhelp != null)
			{
				linkhelp.onclick = function () { DisplayHelp(response[1], event); };
			}
		}
		else
		{
			alert("An error has occurred, please try again later. If the problem persists please contact support and quote error code 1, status code" + xmlHttp.status);
		}
	}
}

//this method is used to determine on client side if the user is trying to save a form with same id
//validates on loss focus and is used be an ASP.NET custom validator
function isNameUnique(sender, args)
{
	//user entered form id
	var formId = args.Value;

	//no need to valid if overwriting an existing form
	var trimmed = trim(formId);
	if (trimmed == document.getElementById('selectedFormId').value)
	{
		//reset back to norm
		document.getElementById('btnSave').disabled = false;
		document.getElementById('lblStatus').style.display = 'none';

		//only enable SAVEAS button if this is not loading a new form definition
		if(!document.getElementById('btnNew').disabled)
		{
			document.getElementById('btnSaveAs').disabled = false;
		}
		args.isValid = true;
		return;
	} 

	//check if the same form Id already exists by looping through the completed forms listbox
	var completedForms = document.getElementById('DocumentPicker1_tvDocuments');
	var links = completedForms.getElementsByTagName("a");
	
	for (var i=0; i< completedForms.childNodes.length; i++)
	{
		var name = completedForms.childNodes[i].innerText;
		if(name == "Templates" || name == "Completed Forms"){continue;}
		
		
		formId = trim(formId);

		if (name.toLowerCase() == formId.toLowerCase())
		{
			args.isValid = false;

			//disable saving buttons
			document.getElementById('btnSave').disabled = true;
			document.getElementById('btnSaveAs').disabled = true;
			document.getElementById('btnDelete').disabled = true;
			document.getElementById('lblStatus').style.display = '';

			//setfocus to the text box and highlight all text
			var textbox = document.getElementById('documentName');			
			textbox.focus();
			textbox.select();
			return false;
		}
	 } 

	document.getElementById('btnSave').disabled = false;
	document.getElementById('lblStatus').style.display = 'none';

	//only enable SAVEAS button if this is not loading a new form definition
	if(!document.getElementById('btnNew').disabled)
	{
		document.getElementById('btnSaveAs').disabled = false;
	}
	args.isValid = true;
}


//Check, is the template name unique within company? If not, ask user to confirm
function ConfirmSaveDuplicateTemplate()
{
	 if (confirm('A template with this name already exists for this company. Do you want to overwrite this template?'))
	 {
		document.getElementById('Button2').click();
	 }
}


//delete method for marking an entry in the Organisational Chart as to be deleted on postback
//PARAM
//chkbox: the checkbox that was selected
function DeleteOrgChart(chkBox)
{
	formDirty = true;

	var chkBoxId = chkBox.id;
	var parentRow = chkBox.parentNode.parentNode;
	var cell = parentRow.cells[0];

	if (document.getElementById(chkBoxId).checked)
	{
		//update row view to indicate to be deleted
		for (var i=0; i<parentRow.cells.length; i++)
		{
			parentRow.cells[i].className = "deleteCell";
		}

	}
	else
	{
		//update row view to indicate no longer to be deleted
		for (var i=0; i<parentRow.cells.length; i++)
		{
			if (i!=2)
			{
				parentRow.cells[i].className = "orgChartCell";
			}
			else
			{
				parentRow.cells[i].className = "orgChartCellDel";
			}
		}
}
}

//delete method for marking an entry in the RolesAndResponsibility form as to be deleted on postback
//PARAM
//chkbox: the checkbox that was selected
function DeleteRolesAndResponsibilities(chkBox)
{
	var chkBoxId = chkBox.id;
	var parentRow = chkBox.parentNode.parentNode.parentNode;

	if (document.getElementById(chkBoxId).checked)
	{
		for (var i=0; i<parentRow.cells.length; i++)
		{
			var cell = parentRow.cells[i];
			cell.className = "deleteRow";
		}
	}
	else
	{
		for (var i=0; i<parentRow.cells.length; i++)
		{
			var cell = parentRow.cells[i];
			cell.className = "optionalRow";
		}
	}
}

// method use to mark that a responsibility is to be assigned to a role on postback for the RolesAndResponsibility form 
//PARAM
//chkbox: the checkbox that was selected
function AssignRole(chkBox)
{
	formDirty = true;

	//need to switch css class depending if checkbox is checked or not
	var checkbox = document.getElementById(chkBox.id);

	if (checkbox != null)
	{
		if (checkbox.checked)
		{
			checkbox.parentNode.parentNode.parentNode.className = "roleAssigned"; 
		}
		else
		{
			checkbox.parentNode.parentNode.parentNode.className = "roleUnassigned";
		}
	}
}

//mark the RolesAndResponsibility form as dirty
//PARAM:
//table: the table that contains the roleresponsbility control
function GetRolesAndResponsibilityData(table)
{
	formDirty = false;
	calendarClicked = false;
}

//mark the Organisational Chart form as dirty and saves the client side added contents in a hidden field
//to be parsed and recreated on the server side
//PARAM
//orgChart: the client Id of the orgChart table
function GetOrgChartData(orgChart)
{
	//loops through the orgchart HTML table and creates a string that respresents the table
	//all cells will be separated by | and will be parsed by the server
	//the server expects this input: format (string role|string staff|bool delete)
	//Employer|Jimmy|true|Manager|Peter|false
	formDirty = false;
	calendarClicked = false;

	var tableData;
	var table = document.getElementById(orgChart);
	var rowCount = table.rows.length - 1;
	var cellCount = table.rows[1].cells.length - 1; //subtract 1 for delete column
	var roleId = "orgChart_role";
	var staffId = "orgChart_staff";
	var separator = "|";
	var existingRowCount = table.summary;

	//only get the newly added rows through js
	for (var i= parseInt(existingRowCount) -1; i<rowCount; i++)
	{
		for (var j=0; j<cellCount+1; j++)
		{
			if (j == 0)
			{
				//role
				var chkRole = document.getElementById(roleId+i);
				if (chkRole != null)
				{
					var roleIndex = chkRole.selectedIndex;
					//alert(chkRole.options[roleIndex].text);
					tableData += chkRole.options[roleIndex].text + separator;
				}
			}
			else if (j==1)
			{
				//staff
				var chkStaff = document.getElementById(staffId+i);
				if (chkStaff != null)
				{
					var staffIndex = chkStaff.selectedIndex;
					//alert(chkStaff.options[staffIndex].text);
					tableData += chkStaff.options[staffIndex].text + separator;
				}
			}
			else if (j==2)
			{
				var row = parseInt(i) + 2;
				var chkDelete = document.getElementById('OrgChart_'+ row);
				tableData += chkDelete.checked + separator;
			}
		}
	}
	//alert(tableData);
	document.getElementById('hiddenValues').value = tableData;
} 
 
// This method gets the table contents from the section list definitions and saves it in a hidden field
// to be parsed and recreated on the server side
function GetTableContents(folder, label, isTemplate)
{

	// check document name is not missing
	var documentName = document.getElementById('documentName');
	if (documentName != null) {
		if (documentName.value == '') {
			window.scroll(0, 0);
			$find('documentNameExt').show();
			return false;
		}
	}
	
	// check a folder was selected (unless template)
	if (isTemplate == false)
	{
		if (documentName != null)
		{
			var selectedFolder = document.getElementById(folder).value;
			if (selectedFolder == '' || parseInt(selectedFolder) < 1)
			{	
				alert('Please select a folder to save the form');
				document.getElementById(label).style.display = '';
				return false;
			}
		}
	}
	
	// Loops through the section lists HTML table and creates a string that represents the table
	// table data will be separated by ::
	// table row data will be separated by ~
	// table cell data will be separated by |
	// the server expects this input: format (string tableId1~string cell1|string cell2::string tableID2~string cell1|string cell2)
	// Table_Example~table_subheading~cell1|cell2|cell3~::Table_Example2
	// Special cases, we only record string cell data therefore we ignore cells that contain images
	// We need to record the checkbox value in the cell data and append the value as 'checked=' checked.value

	// clear formdirty variable
	formDirty = false;
	calendarClicked = false;

	// get the form lists sections within this web form that has to be recorded
	// only form section lists that can modify and add new rows need to be recorded
	var hiddenField = document.getElementById('hiddenField').value;
	var tableIds = hiddenField.split("|");
	
	// store table contents in here
	var hiddenValues = document.getElementById('hiddenValues');
	hiddenValues.value = "";
			
	// loop through required sections lists table to record date
	for (var m = 0; m < tableIds.length; m++)
	{
		if (tableIds[m].length > 0)
		{
			var table = document.getElementById(tableIds[m]);
			var rowCount = table.rows.length;
			var cellSeparator = "|";
			var rowSeparator = "~";
			
			hiddenValues.value += table.id + rowSeparator;
			
			for (var i = 0; i < rowCount; i++)
			{
				var colCount = table.rows[i].cells.length;
				for (var j = 0; j < colCount; j++)
				{
					var cellContent = table.rows[i].cells[j].innerHTML;
					if (cellContent != null)
					{
						// if cell is image do nothing
						if (cellContent.indexOf('img') < 0)
						{
							// if cell is check box rendered by formsmanager
							if (cellContent.indexOf('chkBox_') > -1)
							{
								var firstIndex = cellContent.indexOf('###');
								var lastIndex = cellContent.indexOf('^^^');
								var chkId = cellContent.substring(firstIndex, lastIndex + 3);
								var checkbox = document.getElementById(chkId);
								hiddenValues.value += cellContent + 'checked=' + checkbox.checked + cellSeparator;
							}
							// if cell is check box rendered client side by JScript
							else if (cellContent.indexOf('checkbox') > -1)
							{
								var firstIndex = cellContent.indexOf('###');
								var lastIndex = cellContent.indexOf('^^^');
								var chkId = cellContent.substring(firstIndex, lastIndex + 3);
								var checkbox = document.getElementById(chkId);
								hiddenValues.value += cellContent + 'checked=' + checkbox.checked + cellSeparator;
							}
							else
							{
								hiddenValues.value += cellContent + cellSeparator;
							}
						}
					}
				}
				hiddenValues.value += rowSeparator;
			}
			hiddenValues.value += "::";
		}
	}
	//alert(hiddenValues.value);
	//hiddenValues.value = escape(hiddenValues.value);
	return true;
} 


//method used to display calendar in a floating div positioned under where user clicked
//this is used in the ADD/EDIT form list sections within the floating modal div
//PARAM
//str: the id of the field that will have the selected calendar date displayed
//event: the mouse click event
function DisplayFloatingCalendar(str, event)
{
	var agent = navigator.userAgent.toLowerCase();
	var div = document.getElementById('divCalendar'); //get the div that contains the calendar
	
	if (div.style.display == 'block')
	{
		div.style.display = 'none';
		//document.getElementById('divAddNewRows').style.height = '';
		document.getElementById('popupFrame').src = ''; //reset iframe to prevent flicker
	}
	else
	{
		var frame = document.getElementById('popupFrame');
		frame.src = 'calendarcontrolex.aspx?fieldId=' + str.id + '&container=divCalendar';
		div.style.display = 'block';
		//div.style.position = 'relative';

		if (agent.indexOf("firefox") != -1)
		{
			//calendar div position only works for Firefox		 
			div.style.left = event.layerX + 'px';
			div.style.top = event.layerY + 'px';
		}
		else if (agent.indexOf("msie") != -1) 
		{
			//this is for IE positioning of DIV
			var pos = getRelativeCoordinates(event, document.getElementById('divAddNewRows'));		 
			div.style.left = pos.x;
			div.style.top = pos.y;
		}
		else
		{
			var pos = getRelativeCoordinates(event, document.getElementById('divAddNewRows'));
			div.style.left = pos.x;
			div.style.top = pos.y;
		}
	}
}

function DeleteTheRow()
{
	// Find the correct row, and delete it
	var table = document.getElementById('tableLayout');
	var formTableId = table.getAttribute('tblId');
	var rowIndex = document.getElementById('txtRowIndex').value;
	var newRow = document.getElementById(formTableId).rows[rowIndex];
	DeleteRow(newRow);
	
	//hide the div and the floating modal popup
	var div = document.getElementById('divAddNewRows').style.display = 'none';
	$find('modal2').hide();
}

//method use to update the contents user entered into the floating modal div for editing list section
//row contents
function UpdateRow()
{
	formDirty = true;

	//get table where the user entered the data
	var table = document.getElementById('tableLayout');
	var rowCount = table.rows.length;

	//get table and row that will store the new data to
	var formTableId = table.getAttribute('tblId');
	var formTable = document.getElementById(formTableId);
	var formTableColCount = formTable.rows[2].cells.length;
	var rowIndex = document.getElementById('txtRowIndex').value;
	var newRow = formTable.rows[rowIndex];
	 
	if (formTableColCount == 1)
	{
		formTableColCount = formTable.rows[2].cells.length;
	}
	 
	//the add div will have 2 additional rows for spacer row, and buttons row
	//extract data from div and replace into row
	
	for (var i = 0; i < formTableColCount - 1; i++)
	{
		var fieldId = 'savefield'+i;
		var field = document.getElementById(fieldId);
		var fieldValue = '';
		
		if (field != null)
		{
			if (field.type == 'textarea')
			{
				fieldValue = UrlEncode(field.value);
				fieldValue = ReplaceLineBreaksWithHTMLTag(fieldValue); // + ' ';
			}
			if (field.type == 'text')
			{
				fieldValue = UrlEncode(field.value);
				fieldValue = ReplaceLineBreaksWithHTMLTag(fieldValue); // + ' ';
			}
		
			// we no longer update the checkbox contents as it overwrites the values
			if (field.type == 'select-one')
			{
				fieldValue = field.options[field.selectedIndex].text;
			}
			if (field.type != 'checkbox')
			{
				if (fieldValue.length < 1)
				{
					fieldValue = '&nbsp;';
				}
				newRow.cells[i].innerHTML = fieldValue;
			}
		}
	}
	
	//hide the div and the floating modal popup
	var div = document.getElementById('divAddNewRows').style.display = 'none';
	$find('modal2').hide();
}

//method use when user clicks the EDIT icon in the list section row
//initiates an AJAX request to acquire the layout of the form in terms of fields and input boxes
//then renders the contents onto the floating modal div
//PARAM
//tableRow: the tableRow to be editted
function EditRow(tableRow)
{
	var owningTable = tableRow.parentNode.parentNode.id;
	var rowIndex = tableRow.rowIndex;
	var colCount = tableRow.cells.length - 1;
	var sectionId = GetQueryString('sectionId');
	var indexHeader = tableRow.cells[0].id.indexOf('cellHeader');
	var indexSubHeader = tableRow.cells[0].id.indexOf('cellSubHeader');

	//check if this row can be editted
	if (indexHeader != -1 || indexSubHeader != -1)
	{
		return;
	}
	
	//create a string of the combined text separated by a |
	var oldValue = '';
	for (var i=0; i<colCount; i++)
	{
		//escape & as it affects the .NET request.querystring collection
		//empty cells have &nbsp;
		oldValue += escape(tableRow.cells[i].innerHTML) + '|';
	}
		
	//AJAX to retrieve the ADD form and put results into div
	xmlHttp = GetXmlHttpObject();
	if (xmlHttp==null)
	{
		alert ("Browser does not support HTTP Request");
		return;
	}
	
	var formId = GetQueryString('formId');
	var siteId = GetQueryString('siteId');
	
	//get the table heading and the section id and pass to AJAX page to query database to get
	//oldValue = EscapeHTMLWhitespace(oldValue);
	var formDefId = document.getElementById('formDef').value;
	var url="RenderAddNewRow.aspx"+"?tableId="+owningTable+"&sectionId="+sectionId+"&oldValue="+oldValue+"&rowIndex="+rowIndex+"&edit=true&siteId="+siteId+"&formId="+formId+"&formDefinitionId="+formDefId;
	
	//need to let web service know if this add is using the latest form def, or default form def
	var defaultForm = document.getElementById('btnNew');
	
	if (defaultForm != null)
	{
		if (defaultForm.disabled)
		{
			url += "&newFormDef=true";
		}
	}
 
	xmlHttp.onreadystatechange=ShowAddNewRow;
	xmlHttp.open("GET", url, true); // changed to POST to fix 2048 char IE limit; didn't work.
	
	//change mouse cursor to loading and show loading icon
	document.body.style.cursor = 'wait';
	var img = document.getElementById('imgProgress').style.visibility = 'visible';

	xmlHttp.send(null); 
}

// Used when user clicks up or down arrow in the list section row
// Moves the row up or down in the list.
// PARAM
// tableRow: the tableRow to be moved
// direction: either "up" or "down"
//function MoveRow(this.parentNode.parentNode, 'down')
//{
//	CAN DELETE
//}

//method used to create a new entry in the organisation chart form
//initiates an AJAX request to create the combo boxes filled with roles and staffs
//PARAM
//table: the orgchart table
function AddOrgChartRow(table)
{
	formDirty = true;

	//AJAX call to fetch list of roles and list of staffs
	orgChart = table;
	xmlHttp = GetXmlHttpObject();
	if (xmlHttp==null)
	{
		alert ("Browser does not support HTTP Request");
		return;
	}
	var url="RolesAndStaff.aspx?sectionId="+ GetQueryString('sectionId') + '&siteId=' + GetQueryString('siteId') + "&ms=" + new Date().getTime();
	xmlHttp.onreadystatechange=RolesAndStaffComplete; 
	xmlHttp.open("GET",url,true);
	
	//change mouse cursor and show progress icon
	document.body.style.cursor = 'wait';
	var img = document.getElementById('imgProgress').style.visibility = 'visible';
	
	xmlHttp.send(null); 
}

//error code 2
//this method is called on completion of AddOrgChartRow()
//this constructs the combos of staffs and roles
function RolesAndStaffComplete()
{
	if (xmlHttp.readyState==4)
	{
		if (xmlHttp.status == 200 && xmlHttp.responseText.length > 0)
		{
			// this is the format of the responsetext that makes up the roles and staffs
			// {} separator roles from staffs
			// || separator for roles
			// :: separator for staffs
			
			rolesAndStaff = xmlHttp.responseText;
			var table = document.getElementById(orgChart);
			var rowCount = table.rows.length - 1;
			var newRow = table.insertRow(rowCount);
			newRow.className = "row";
			
			//split up the roles and staff data
			var data = rolesAndStaff.split('{}');
			var roles = data[0].split('||');
			var staffs = data[1].split('::');
			
			//add the 3 cells, roles, staff, delete
			var cellRole = newRow.insertCell(0);
			cellRole.className = "orgChartCell";
			var roleDropDown = "<SELECT class=\"formsManagerInputField\" id=\"orgChart_role" + rowCount + "\">";
			for (var i=0; i<roles.length; i++)
			{
				if (roles[i] != "")
				{
					roleDropDown += "<OPTION>" + roles[i] + "</OPTION>";
				}
			}
			roleDropDown += "</SELECT>";
			cellRole.innerHTML = roleDropDown;
			
			var cellStaff = newRow.insertCell(1);
			cellStaff.className = "orgChartCell";
			var staffDropDown = "<SELECT class=\"formsManagerInputField\" id=\"orgChart_staff" + rowCount + "\">";
			for (var j=0; j<staffs.length; j++)
			{
				if (staffs[j] != "")
				{
					staffDropDown += "<OPTION>" + staffs[j] + "</OPTION>";
				}
			}
			staffDropDown += "</SELECT>";
			cellStaff.innerHTML = staffDropDown;
			
			var cellDelete = newRow.insertCell(2);
			cellDelete.className = "orgChartCellDel";
			cellDelete.innerHTML = "<input id=\"OrgChart_" + table.rows.length + "\" type=\"checkbox\" onclick=\"DeleteOrgChart(this);\"/>";
		}
		else
		{
			alert("An error has occurred, please try again later. If the problem persists please contact support and quote error code 2, status code" + xmlHttp.status);
		}
		document.body.style.cursor = 'default';
		var img = document.getElementById('imgProgress').style.visibility = 'hidden';
	}
}


// SaveNewRow, but first try to check if there are too many characters in form answers ( > 1100 )
// for IE to handle (if IE, you have a http request limit of 2048 characters, which also needs to
// include URL, form names, etc)
function TryToSaveRow(rowAlreadyExists) {

	if ($.browser.msie) {
	
		// add up length of all values of elements where id starts with "savefield"
		var totalChars = 0;
		var saveFields = $("[id^='savefield']");
		for (var i = 0; i < saveFields.length; i++) {
			if (saveFields[i].value != null) {
				totalChars += saveFields[i].value.length;
			}
		}

		// if too much, alert and don't save/close
		if (totalChars > 1100) { 
			alert("Browser error: Entries too long (" + totalChars + " characters) \n\nInternet Explorer cannot open rows containing more than 1100 characters (including letters, spaces, punctuation). \n\nPlease shorten your entries, or save them elsewhere and then try again using another web browser.")
			return;
		}
	}

	// save and close modal window
	if (rowAlreadyExists) {
		UpdateRow();
	} else {
		SaveNewRow();
	}
}

// method is used to save the contents user entered into the floating modal div for create a
// new record in the section list 
function SaveNewRow()
{
	formDirty = true;
 
	//get table where the user entered the data
	var table = document.getElementById('tableLayout');
	var rowCount = table.rows.length;
	
	//get table that will store the new data to
	var formTableId = table.getAttribute('tblId');
	var formTable = document.getElementById(formTableId);
	
	// get the table header row
	var headerRow = formTable.rows[0];

	// get the best example row from the list section (table) to 
	// form the basis of creating the new table row
	var exampleRow = findAnExampleRow(formTable);
	
	// count rows/columns in table
	var formTableColCount = exampleRow.cells.length;
	var formTableRowCount = formTable.rows.length;

	//create the new row in HTML to store the data
	var newRow = formTable.insertRow(formTableRowCount);

	var thisRowHasAutoNumber = false;

	for (var i = 0; i < formTableColCount; i++) {
		var cell = newRow.insertCell(i);
		cell.className = "formsManagerTableCell";

		// if it's an autonumber column, make this cell an autonumber
		if (exampleRow.cells[i].className == "formsManagerAutoNumberTableCell") {
			cell.className = "formsManagerAutoNumberTableCell";
			thisRowHasAutoNumber = true;
		}

		//this is edit col
		if (i == formTableColCount - 1) {
			cell.onclick = function() { EditRow(cell.parentNode) };
			var imgEdit = document.createElement('img');
			imgEdit.src = 'images/rr/ico/16/newentry16.gif';
			//give hand pointer
			imgEdit.style.cursor = 'pointer';
			cell.appendChild(imgEdit);
		}
		//this is delete col
		//		else if (i == formTableColCount-1)
		//		{
		//			cell.onclick = function() {DeleteRow(cell.parentNode)};
		//			var imgDelete = document.createElement('img');
		//			
		//			//the URL link is dependant on the IIS virtual director/website alias
		//			imgDelete.src = 'images/delete.gif';
		//			//give hand pointer
		//			imgDelete.style.cursor = 'pointer';
		//			cell.appendChild(imgDelete);
		//		}
	}
	
	// the add div will have 2 additional rows for spacer row, and buttons row
		
	
	// extract data from div
	var cellPosition = 0;
	for (var i = 0; i < rowCount - 1; i++) {
		var fieldId = 'savefield' + i;
		var field = document.getElementById(fieldId);
		var fieldValue = '';

		if (field != null) {
			if (field.type == 'textarea') {
				fieldValue = UrlEncode(field.value);
				fieldValue = ReplaceLineBreaksWithHTMLTag(fieldValue) + ' ';
			}

			if (field.type == 'text') {
				fieldValue = UrlEncode(field.value);
				fieldValue = ReplaceLineBreaksWithHTMLTag(fieldValue) + ' ';
			}

			if (field.type == 'checkbox') {
				cellPosition = cellPosition + 1;
				var id = '###' + cellPosition + formTableId + formTableRowCount + '^^^';

				if (field.checked) {
					newRow.cells[i].innerHTML = "<input type=\"checkbox\" checked=checked id=\"" + id + "\" />";
					newRow.cells[i].setAttribute('align', 'left');
				}
				else {
					newRow.cells[i].innerHTML = "<input type=\"checkbox\" id=\"" + id + "\" />";
					newRow.cells[i].setAttribute('align', 'left');
				}

				//create mutual exclusive checkbox extender if it exists
				try {
					$create(AjaxControlToolkit.MutuallyExclusiveCheckBoxBehavior, { "id": id, "Key": formTableId + ' ' + formTableRowCount }, null, null, $get(id));
				}
				catch (err) { }
			}

			if (field.type == 'select-one') {
				fieldValue = field.options[field.selectedIndex].text;
			}

			if (field.type != 'checkbox') {
				if (fieldValue.length < 1 || fieldValue == " ") {
					fieldValue = '&nbsp;';
				}

				if (newRow.cells[i] != null) {
					newRow.cells[i].innerHTML = fieldValue;

					// if autonumber, overwrite with row number
					if (i == 0 && thisRowHasAutoNumber) {
						newRow.cells[i].innerHTML = (formTableRowCount - 1).toString();
					}
				}
			}
		}
	}
	
	//hide the div and the modal popup
	var div = document.getElementById('divAddNewRows').style.display = 'none';
	$find('modal2').hide();

	// refresh the code that makes the table drag-and-drop-able
	EnableDragAndDropOnTables(".listTable");
}

// given a section list, chooses the best row to use as an example row
function findAnExampleRow(formTable) {

	// get the first normal row, if there is one
	if (formTable.rows[1] != null) {
		// avoid subheader row
		if ((formTable.rows[1].cells[0].className.indexOf('SubHeader') > -1) || (formTable.rows[1].id.indexOf('listSubHeader') > -1)) {
			// first row is subheader, try next one
			if (formTable.rows[2] != null) {
				return formTable.rows[2];
			}
		}
		// row[1] exists and isn't a subheader, so use that
		return formTable.rows[1];
	}

	// no normal rows (list has headers but is emtpy), so try just using header row
	return formTable.rows[0];
}
 
//this method is used to delete an existing row in the section list 
//PARAM
//tableRow: the row to be deleted
function DeleteRow(tableRow)
{
	var indexHeader = tableRow.cells[0].id.indexOf('cellHeader');
	var indexSubHeader = tableRow.cells[0].id.indexOf('cellSubHeader');
	//var indexMandatory = tableRow.cells[0].id.indexOf('mandatory');
 
	if (indexHeader == -1 && indexSubHeader == -1)
	{
//		var result = confirm("Are you sure you want to delete this row?");
//		if (!result)
//		{
//			return;
//		}
		//get the owning parent table id
		var table = tableRow.parentNode.parentNode;
		var tableId = table.id;
		document.getElementById(tableId).deleteRow(tableRow.rowIndex);
		
		//set dirty flag
		formDirty = true;
	}
}
 
 
//method use when user clicks the ADD button for the section lists
//initiates an AJAX request to acquire the layout of the form in terms of fields and input boxes
//then renders the contents onto the floating modal div
function CreateNewTableRow(tableId)
{
	var rowCount = document.getElementById(tableId).rows.length;
	var colCount = document.getElementById(tableId).rows[0].cells.length;
	var headerRow = document.getElementById(tableId).rows[0];
	var formId = GetQueryString('formId');
	var siteId = GetQueryString('siteId');

	//gets the section id from the URL and the table heading
	var sectionId = GetQueryString('sectionId');
	
	//AJAX to retrieve the ADD form and put results into div
	xmlHttp = GetXmlHttpObject();
	if (xmlHttp==null)
	{
		alert ("Browser does not support HTTP Request");
		return;
	}

	//get the table heading and the section id and pass to AJAX page to query database to get
	//need to fix for tables without headings, new req that all tables must have unique heading
	var formDefId = document.getElementById('formDef').value;
	var url="RenderAddNewRow.aspx"+"?tableId="+tableId+"&sectionId="+sectionId+"&formId="+formId+"&siteId="+siteId+"&formDefinitionId="+formDefId + "&ms=" + new Date().getTime();
	
	//need to let web service know if this add is using the latest form def, or default form def
	var defaultForm = document.getElementById('btnNew');
	
	if (defaultForm != null)
	{
		if (defaultForm.disabled)
		{
			url += "&newFormDef=true";
		}
	}
	
	xmlHttp.onreadystatechange=ShowAddNewRow; 
	xmlHttp.open("GET",url,true);
	
	//show loading icon and change mouse cursor
	document.body.style.cursor = 'wait';
	var img = document.getElementById('imgProgress').style.visibility = 'visible';
	
	xmlHttp.send(null); 
}

//error code 3
//this method is consumed by both ADD and EDIT row as it displays the modal floating div.
function ShowAddNewRow() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			if (xmlHttp.responseText.length > 0) {
				var div = document.getElementById('divAddNewRows');
				div.style.display = '';
				div.innerHTML = xmlHttp.responseText;
				//use popupmodal extender to display
				$find("modal2").show();

				// default to first textbox, if we can. 
				try {
					$("#savefield0")[0].focus();
				}
				catch (err) {
					// do nothing
					var noop = err;
				}
			}
		}
	}
	else {
		//alert("An error has occurred, please try again later. If the problem persists please contact support and quote error code 3, status code" + xmlHttp.status);
	}

	//change cursor back to default
	document.body.style.cursor = 'default';
	var img = document.getElementById('imgProgress').style.visibility = 'hidden';
}


function DisplayTaskPanel(str, obj)
{
	var div = document.getElementById(str);
	if (div.style.display == 'none')
	{
		div.style.display = '';
		//obj.value = 'Hide Add New';
	}
	else
	{
		div.style.display = 'none';
		//obj.value = 'Show Add New';
	}
}

function DisplayTaskCalendar(event, open, parent, close, textfield)
{
	var txt = document.getElementById(textfield);
	var coord = findPos(txt);

	var frame;
	var xpos = event.layerX;
	var ypos = event.layerY;
	frame = document.getElementById(open);
	if (frame.style.display == 'none')
	{
		var agent = navigator.userAgent.toLowerCase();
		
		if (agent.indexOf("firefox") != -1)
		{
			frame.style.left = coord[0] + txt.offsetWidth + 10 + 'px';
			frame.style.top = coord[1] + 'px';
			
			frame.style.display = '';
			document.getElementById(close).style.display = 'none';
		}
		//treat as IE
		else
		{
			//var pos = getRelativeCoordinates(event, document.getElementById(parent));
			frame.style.left = coord[0] + txt.offsetWidth + 10 + 'px';
			frame.style.top = coord[1] +'px';
			
			frame.style.display = '';
			document.getElementById(close).style.display = 'none';
		}
	}
	else
	{
		frame.style.display = 'none';
	}
}

function RecordMenuState()
{
	var url;
	var img = document.getElementById('imgCollapse');
	var img2 = document.getElementById('imgCollapse2');
	var menu = document.getElementById('colSectionMenu');
	var textlink = document.getElementById('ShowHideMenuTextLink');
	var textlink2 = document.getElementById('ShowHideMenuTextLink2');
	
	if (img.title == 'Hide Menu...')
	{ 
		//visible
		//change icon and change title and show section menu
		img.title = 'Show Menu...';
		img.src = 'images/rr/ico/16/showmenu16.gif';
		textlink.innerText = "Show menu";
		menu.style.display = 'none';
		
		img2.title = 'Show Menu...';
		img2.src = 'images/rr/ico/16/showmenu16.gif';
		textlink2.innerText = "Show menu";
		
		//create cookie so server can maintain state
		setCookie('collapseMenu', '1', 1);
		
		//decrease width of folders
		if (document.getElementById('divFolder') != null)
		{
			document.getElementById('divFolder').style.width = '500px';
		}
	}
	else
	{
		//invisible
		//change icon and change title and hide section menu
		img.title = 'Hide Menu...';
		img.src = 'images/rr/ico/16/hidemenu16.gif';
		textlink.innerText = "Hide menu";
		img2.title = 'Hide Menu...';
		img2.src = 'images/rr/ico/16/hidemenu16.gif';
		textlink2.innerText = "Hide menu";
		menu.style.display = '';
		
		//create cookie so server can maintain state
		setCookie('collapseMenu', '0', 1);
		
		//increase width of folders
		if (document.getElementById('divFolder') != null)
		{
			document.getElementById('divFolder').style.width = '250px';
		}
	}
}

function RecordFolderState()
{
	var url;
	var img = document.getElementById('imgHide');
	var menu = document.getElementById('colFolders');
	var textlink = document.getElementById('HideFolderText');
	
	if (img.title == 'Hide Folder...')
	{ 
		//visible
		//change icon and change title and show section menu
		img.title = 'Show Folder...';
		img.src = 'images/rr/ico/16/showmenu16.gif';
		textlink.innerText = "Show Folder";
		menu.style.display = 'none';
		
		//create cookie so server can maintain state
		setCookie('collapseFolder', '1', 1);
		
		document.getElementById('folderMenu2').style.display = 'none';
		document.getElementById('folderMenu1').style.display = '';
		
	}
	else
	{
		//invisible
		//change icon and change title and hide section menu
		img.title = 'Hide Folder...';
		img.src = 'images/rr/ico/16/hidemenu16.gif';
		textlink.innerText = "Hide Folder";
		menu.style.display = '';
		
		//create cookie so server can maintain state
		setCookie('collapseFolder', '0', 1);
		
		document.getElementById('folderMenu2').style.display = '';
		document.getElementById('folderMenu1').style.display = 'none';
	}
}

function ToggleSectionVisbility(img, tableId)
{
	var table = document.getElementById(tableId);
	
	if (img.title == 'Minimise')
	{
		img.title = 'Maximise';
		img.src = 'images/rr/ico/16/expand16.gif';
		img.align = 'right';
		
		//hide all table rows except row heading
		for (var i=1; i<table.rows.length; i++)
		{
			var row = table.rows[i];
			row.style.display = 'none';
		}
		
		//hide ADD button if it exists
		var btnAdd = img.getAttribute('buttonAdd');
		if (btnAdd != null && btnAdd.length > 0)
		{
			var btn = document.getElementById(btnAdd);
			btn.style.display = 'none';
		}
	}
	else
	{
		img.title = 'Minimise';
		img.src = 'images/rr/ico/16/collapse16.gif';
		
		//show all table rows except row heading
		for (var i=1; i<table.rows.length; i++)
		{
			var row = table.rows[i];
			row.style.display = '';
		}
		
		//show ADD button if it exists
		var btnAdd = img.getAttribute('buttonAdd');
		if (btnAdd != null && btnAdd.length > 0)
		{
			var btn = document.getElementById(btnAdd);
			btn.style.display = '';
		}
	}
}

function HideFormSections(bool)
{
	var imgMin = document.getElementsByName('minimiseSection');

	if (bool == true)
	{
		//minimise all
		for (var i=0; i<imgMin.length; i++)
		{
			var img = imgMin[i];
			img.title = 'Maximise';
			img.src = 'images/rr/ico/16/expand16.gif';
			img.align = 'right';
			
			var tableName = img.getAttribute('tableName');
			var table = document.getElementById(tableName);
			
			//hide all table rows except table heading
			for (var j=1; j<table.rows.length; j++)
			{
				var row = table.rows[j];
				row.style.display = 'none'
			}
			
			//hide ADD button if it exists
			var btnAdd = img.getAttribute('buttonAdd');
			if (btnAdd != null && btnAdd.length > 0)
			{
				var btn = document.getElementById(btnAdd);
				btn.style.display = 'none';
			}
		}
	}
	else
	{
		//maximise all
		for (var i=0; i<imgMin.length; i++)
		{
			var img = imgMin[i];
			img.title = 'Minimise';
			img.src = 'images/rr/ico/16/collapse16.gif';
			
			var tableName = img.getAttribute('tableName');
			var table = document.getElementById(tableName);
			
			//hide all table rows except table heading
			for (var j=1; j<table.rows.length; j++)
			{
				var row = table.rows[j];
				row.style.display = ''
			}
			//show ADD button if it exists
			var btnAdd = img.getAttribute('buttonAdd');
			if (btnAdd != null && btnAdd.length > 0)
			{
				var btn = document.getElementById(btnAdd);
				btn.style.display = '';
			}
		}
	}
}

function ToggleVisibility(obj)
{
	if (document.getElementById(obj).style.display == 'none')
	{
		document.getElementById(obj).style.display = '';
	}
	else
	{
		document.getElementById(obj).style.display = 'none';
	}
} 

function HideModal()
{
	$find('modal2').hide();
}


function DisplayCalendar(textBox)
{
	var text = document.getElementById(textBox);
	if (!text.disabled)
	{
		text.focus();
	}
}

function SetDirtyBool()
{
	var agent = navigator.userAgent.toLowerCase();
	if (agent.indexOf("firefox") != -1)
	{
		formDirty=true;
	}
	else
	{
		calendarClicked=true; 
	}
}

function SelectDate()
{ 
	var selectedDate = document.getElementById('TextBox1');
	var fieldId = document.getElementById('fieldId').innerHTML;
	var container = document.getElementById('container').innerHTML;
	
	var div = window.parent.document.getElementById(container);
	div.style.display = 'none';	
	window.parent.document.getElementById(fieldId).value = selectedDate.value;
	window.parent.document.getElementById('popupFrame').src = ''; //reset floating div to prevent flicker
}

var myWindow;
function DisplayHelp(str, event)
{ 
	var x = event.screenX;
	var y = event.screenY;
 
	try
	{	
		if (myWindow.closed)
		{
			openCenterWin(str, screen.width, screen.height, 0, 0);
		}
		else
		{
			myWindow.close();
		}
	}
	catch (err)
	{
		openCenterWin(str, screen.width, screen.height, 0, 0);
	}
}

function openCenterWin(url,theWidth,theHeight, xPos, yPos)
{
	var features='height='+theHeight+',width='+theWidth+',left='+xPos+',top='+yPos+',scrollbars=yes';
	myWindow=window.open(url,'',features);
}


function AddSectionSiteChange(obj, hiddenid)
{
	var id = obj.getAttribute("SectionSiteID");
	var Parent = obj.childNodes[0];
	var RadioButtonList = Parent.childNodes[0];
	
	//var Item = document.getElementById(obj);
 // alert(Item);
	//var value= Item.checked;
	//alert(value);
	
	var Item1 = obj.childNodes[0];
	var Item2 = obj.childNodes[1];
	var Item3 = obj.childNodes[2];
	alert(Item1+Item2+Item3);
	var NoAccess = Item1.childNodes[0].checked;
	var ReadOnly = Item2.childNodes[0].checked;
	var FullAccess = Item3.childNodes[0].checked;
	
	//var o2 = document.getElementById('hidden'); 
	var o2 = document.getElementById(hiddenid.id); 
	
	if(o2 == null)
	{
		//nothing
	}
	else
	{
		var oldval = o2.value;
		if(NoAccess == true)
		{
			o2.value = oldval + '/' + id + 'N';
			alert('1');
		}
		if(ReadOnly == true)
		{
			o2.value = oldval + '/' + id + 'R';
			alert('2');
		}
		if(FullAccess == true)
		{
			o2.value = oldval + '/' + id + 'F';
			alert('3');
		}
	}
	
	alert(o2.value);
}

function ShowRelated(title) {
	$find('modal1').show();
	document.getElementById('title').innerHTML = title
}




// ".listTable"
function EnableDragAndDropOnTables(tableClassName) {

	// Make any formsManagerTable tables drag-and-drop sortable
	$(tableClassName).tableDnD({

		// keep autonumber columns auto-numbered (even when drag-and-drop sorting)
		onDrop: function(table, row) {
			var autoNumber = 1;
			var rows = table.tBodies[0].rows;
			for (var r = 0; r < rows.length; r++) {
				for (var c = 0; c < rows[r].cells.length; c++) {
					// change all autonumber cells to the right number
					if (rows[r].cells[c].className == "formsManagerAutoNumberTableCell") {
						rows[r].cells[c].innerHTML = autoNumber;
						autoNumber++;
					}
				}
			}
		}

	});
}