////////////////////about us//////////////////////////////////////////////////////////////////
function introTable(aryItems, strIntroduction) {
	var strText = "<center><table border=0 width=95%>\r\n";
	var bIntroTable = (strIntroduction.length > 0);
	if (bIntroTable) {
		strText += "<tr><br><td colspan=2>" + strIntroduction + "<p></td></tr>\r\n";
	}

	var strImage;
	for (var i = 0; i < aryItems.length; i++) {
		strText += "<tr><td colspan=2 class=px1 valign=top><nobr>" + aryItems[i][0] + "</nobr></td></tr>\r\n";

		strImage = aryItems[i][1];
		if (strImage.length > 0) strImage = "<img src=\"" + strImage + "\">";
		else strImage = "&nbsp;";
		strText += "<tr><td width=80 valign=top>" + strImage + "</td>\r\n";;

		strText += "<td>";
		for (var j = 2; j < aryItems[i].length; j++) 
			strText += aryItems[i][j] + ((bIntroTable) ? "<P>" : "<br>") + "\r\n";
		strText += "</td></tr>\r\n";
	}

	strText += "</table></center>";
	
	strText += contactinfo();

	return strText;
}

////////////////////weekly news///////////////////////////////////////////////////////////////
function eventcontent(nIndex) {
	var strText = "";
	switch (nIndex) {
	case 0:
		strText = twoColTable(m_aryProcedures, 100);
		break;
	case 1:
		strText = fourColTable(m_aryCoworkers);
		break;
	case 2:
		strText = fourColTable(m_aryCoworkersNextWeek);
		break;
	case 3:
		strText = threeColTable(m_arySundaySchool, 100);
		break;
	case 4:
		strText = twoColTable(m_aryStatistics , 170);
		break;
	case 5:
		strText = threeColTable(m_aryMeetings, 100);
		break;
	case 6:
		strText = oneColTable(m_aryAnnounce);
		break;
	}
	
	return mainTableHTML(m_aryWeeklyEvents[nIndex], strText);
}


///////////////////serving group///////////////////////////////////////////////////////////////////
function groupcontent(nIndex) {
	var strText = "";
	switch(nIndex) {
	case 0:
		strText = twoColTable(m_aryGoverningBoard, 150);
		break;
	case 1:
		strText = threeColTable(m_aryCommittees, 150, true);
		break;
	case 2:
		strText = twoColTable(m_aryOtherCoworkers, 150);
		break;
		
	}
	return mainTableHTML(m_aryServingGroups[nIndex], strText);

}

///////////////////schedules//////////////////////////////////////////////////
function calendarHTML(aryObj, strCaption) {
	var strText = "<table class=pxTable>\r\n";
	var strBGColor = strColor1;

	var nToday = new Date().getDate();
	var nRows = aryObj['sunday'].length;

	var aryDay, strValues, strStyle, strAlign, strVAlign;
	for (var i = 0; i < nRows; i++) {
		strText += "<tr>\r\n";

		var nCounter = 0;
		for (var item in aryObj) {
			aryDay = aryObj[item];
			strValues = aryDay[i].split("|");

			if (i == 0) { 
				strAlign = "center";
				strVAlign = "middle";
			}
			else {
				strAlign = "left";
				strVAlign = "top";
			}

			if (nCounter++ % 2 == 0) strBGColor = strColor1;
			else strBGColor = strColor2;
		
			if (strValues[0] == nToday) strBGColor = "#63B8EE"; 

			strText += "<td class=px4 bgcolor=\"" + strBGColor + "\" " +
				" style='boder-color:green' valign=" + strVAlign + " align=" + strAlign + ">";
			for (var j = 0; j < strValues.length; j++) {
				if (j == 0) {
					strStyle = " style=\"font-weight:bold; font-size:14px\"";
				}
				else strStyle = "";

				strText += "<div " + strStyle + ">" + 
					((i==0)? "<nobr>" : "") + strValues[j] + ((i ==0)?"</nobr>":"") + "</div>\r\n";
			}
			strText += "</td>";
		}
		strText += "</tr>\r\n";
	}

	strText += "</table>\r\n";

	return mainTableHTML(strCaption, strText) + contactinfo();
}

function coworkerHTML(nIndex) {
	var nCols = getServiceArray(nIndex)[0].length;
	var strText = "<table class=pxTable>\r\n";

	//sunday services
	strText += coworkerTableRows(m_strServices, getServiceArray(nIndex), nCols, true);
	//sunday school
	strText += coworkerTableRows(m_strSchool, getSchoolArray(nIndex), nCols, false);

	strText += "</table>";

	return mainTableHTML(m_aryCoworkers[nIndex] + m_strCoworkerCaption, strText);

}

function coworkerTableRows(strCaption, aryItems, nExpectedCols, bFirstlineBold) {
	var strBGColor;
	var strBold = new Array("<b>", "</b>");

	var strText = "<tr><td class=px3 colspan=" + nExpectedCols + " align=center><b>" + strCaption + "</b></td></tr>\r\n";
	for (var i = 0; i < aryItems.length; i++)
	{
		strText += "<tr>";
		var nCols = aryItems[i].length;
		
		for (var j = 0; j < nCols; j++)
		{
			strText += "<td class=px3 bgColor=" + ((j % 2 == 0) ? strColor1 : strColor2) + " " +
				((nCols != nExpectedCols && j > 0) ? "colspan=" + (nExpectedCols - 1) : "") + 
				((j == 0) ? "width=120" : "") + ">" + 
				((j == 0) ? "<nobr>" : "") + 
				((j == 0 || (i == 0 && bFirstlineBold)) ? strBold[0] : "") + aryItems[i][j].replace("^", "<br>") + 
				((j == 0 || (i == 0 && bFirstlineBold)) ? strBold[1] : "") + 
				((j == 0) ? "</nobr>" : "") + "</td>\r\n";
		}

		strText += "</tr>";
	}
	
	return strText;
}

////////////////////////////////////////////////////////////////////////////////////////////////////
function mapHTML(nIndex) {
	var strZoomAction = "onclick=\"document.all('id_mainbody').innerHTML=mapHTML(INDEX);\"";

	var strZoomLink = "<table>" +
		"<tr><td class=zoomin " + strZoomAction.replace("INDEX", Math.min(nIndex + 1, 3)) + ">" + m_strZoom[0] + "</td></tr>" +
		"<tr><td>&nbsp;</td</tr>" +
		"<tr><td class=zoomout " + strZoomAction.replace("INDEX", Math.max(nIndex - 1, 0)) + ">" + m_strZoom[1] + "</td></tr>" +
		"</table>";

	var strText = "<table border=0 width=95%><tr>" +
		"<td valign=top width=100>" + strZoomLink + "</td>" +
		//"<td>&nbsp:</td>" +
		"<td align=left><img border=no src=\"images/map" + nIndex + ".gif\"></td>" + 
		"</tr></table>";

	return strText + contactinfo();
	
}
////////////////////////////////////////////////////////////////////////////////////////////////////
function tableTop(strCaption) {
	var strText = "<table width=100% border=0 cellpadding=0 cellspacing=0 align=center><tr>" + 
		"<td><img src=images/top1.gif></td>" +
		"<td background=/images/top2.gif width=100% align=center><b>" + strCaption + "</b></td>" +
		"<td><img src=/images/top3.gif></td>" +
		"</tr></table>";

	return strText;
}

function tableButtom() {
	var strText = "<table width=100% border=0 cellpadding=0 cellspacing=0 align=center><tr>" +
		"<td><img src=/images/end1.gif></td>" +
		"<td background=/images/end2.gif width=100% align=center></td>" +
		"<td><img src=/images/end3.gif></td>" +
		"</tr></table>";

	return strText;
}

var strColor1 = "#F4FFFA";
var strColor2 = "#FFFFFF";

function oneColTable(aryValues) {
	var strBGColor = strColor1;

	var strText = "<table class=pxTable>";
	for(var i = 0; i < aryValues.length; i++) {
		strText += "<tr bgcolor=\""+ strBGColor + "\">";
		if (strBGColor == strColor1) strBGColor = strColor2;
		else strBGColor = strColor1;

		strText += "<td class=px3 valign=top>" + aryValues[i] + "</td>";

		strText += "</tr>";	
	}
	
	strText += "</table>";

	return strText;
}

function twoColTable(aryValues, leftwidth) {
	var strBGColor = strColor1;

	var strText = "<table class=pxTable>";
	for(var i = 0; i < aryValues.length; i++) {
		var strItem = aryValues[i].split("|");
		var strField = strItem [0];
		var strValues = strItem [1].split("^");
		var strContent = "";
		for (var j = 0; j < strValues.length; j++)
			strContent += strValues[j] + "<br>";

		strText += "<tr bgcolor=\""+ strBGColor + "\">";
		if (strBGColor == strColor1) strBGColor = strColor2;
		else strBGColor = strColor1;

		strText += "<td class=px3 width=" + leftwidth + "valign=top><b>" + strField + "</b></td>";
		strText += "<td class=px3>" + strContent + "</td>";

		strText += "</tr>";	
	}
	
	strText += "</table>";

	return strText;
}

function threeColTable(aryValues, leftwidth, bFirstLineCap) {
	var strBGColor = strColor1;

	var strText = "<table class=pxTable>";
	for(var i = 0; i < aryValues.length; i++) {
		//field data
		var strItem = aryValues[i].split("|");
		var strField = strItem [0];
		var strValues = strItem [1].split("^");
		//second column data
		var strContent1 = "";
		for (var j = 0; j < strValues.length; j++)
			strContent1 += strValues[j] + "<br>";
		//third column data
		var strContent2 = "";
		strValues = strItem[2].split("^");
		for (var k = 0; k < strValues.length; k++)
			strContent2 += strValues[k] + "<br>";

		//bg color
		strText += "<tr bgcolor=\""+ strBGColor + "\">";
		if (strBGColor == strColor1) strBGColor = strColor2;
		else strBGColor = strColor1;

		//first line bold
		var strBold = new Array("", "");
		if (i == 0 && bFirstLineCap) {
 			strBold[0] = "<b>";
			strBold[1] = "</b>"
		}

		strText += "<td class=px3 width=" + leftwidth + "valign=top><b>" + strField + "</b></td>";
		strText += "<td class=px3>" + strBold[0] + strContent1 + strBold[1] + "</td>";
		strText += "<td class=px3>" + strBold[0] + strContent2 + strBold[1] + "</td>";

		strText += "</tr>";	
	}
	
	strText += "</table>";

	return strText;
}

function fourColTable(aryValues) {
	var nItemCount = aryValues.length;

	if (nItemCount % 2 != 0)
		aryValues[nItemCount] = "&nbsp; | &nbsp";
	
	var strBGColor = strColor1;

	//content
	var strText = "<table class=pxTable>";
	for(var i = 0; i < aryValues.length; i++) {
		var strItem = aryValues[i].split("|");
		var strField = strItem [0];
		var strValues = strItem [1].split("^");
		var strContent = "";
		for (var j = 0; j < strValues.length; j++)
			strContent += strValues[j] + "<br>";

		if (i % 2 == 0) {
			strText += "<tr bgcolor=\""+ strBGColor + "\">";
			if (strBGColor == strColor1) strBGColor = strColor2;
			else strBGColor = strColor1;
		}
		strText += "<td class=px3 width = 20%><b>" + strField + "</b></td>";
		strText += "<td class=px3 width = 30%>" + strContent + "</td>";

		if (i % 2 != 0) strText += "</tr>";	
	}
	strText += "</table>";

	return strText;
}

///////////////////////////////////////////////////////////////////////////////////////////////
function contactinfo() {
	var strText = "<center><hr size=\"1\" noshade width=\"95%\"><font size=2>" + 
		m_aryContactInfo[0][0] + m_aryContactInfo[0][2] + "<br>" + 
		m_aryContactInfo[0][3] + "<br>" + 
		m_aryContactInfo[0][4] + "<br>" + 
		m_aryContactInfo[0][5] + "</font></center>";

	return strText;
}

function mainBodyWithNavBar(strModule, nIndex) {
	var strBGColor, strStyle, aryItems, strContent;

	switch (strModule) {
	case 'weeklynews':
		aryItems = m_aryWeeklyEvents;
		strContent = eventcontent(nIndex);
		break;
	case 'servinggroup':
		aryItems = m_aryServingGroups;
		strContent = groupcontent(nIndex);
		break;
	case 'coworkers':
		aryItems = m_aryCoworkers;
		strContent = coworkerHTML(nIndex);
		break;
	}
	if (!aryItems) return "";

	var strNavBar = "<table width = 100% cellpadding=\"10\" cellspacing=\"2\">";
	for (var i = 0; i < aryItems .length; i++) {
		//background color and text color
		if (nIndex == i) {
			strBGColor = "#63B8EE";
			strStyle = "style=\"color:green\"";
		}
		else {
			strBGColor = "#0185DA";
			strStyle = "style=\"cursor:hand;color:white\" " +
				"onmouseover=\"this.style.color='red'\" " +
				"onmouseout=\"this.style.color='white'\" " + 
				"onclick=\"document.all('id_mainbody').innerHTML = mainBodyWithNavBar('" + strModule + "'," + i + ");\""; 

		} 

		strNavBar += "<tr><td bgcolor=\"" + strBGColor + "\" " + strStyle + ">" +  
			"<nobr>" + aryItems[i] + "</nobr></td></tr>";
	}
	strNavBar += "</table>";

	var strText = "<table border = 0 cellpadding=\"1\" cellspacing=\"2\"><tr valign=\"top\">";
	strText += "<td width = 160>" + strNavBar + "</td>";
	
	strText += "<td width = 600 valign=\"top\" align=\"center\">" + strContent+ "</td>";		

	strText += "</tr></table>";

	strText += contactinfo();

	return strText;
}

function mainTableHTML(strCaption, strContent) {
	//var strText = "<center><b>" + strCaption + "</b></center>";

	//top
	var strText = "<table border=0 width = 100% cellpadding=0 cellspacing=0>";
	strText += "<tr><td>" + tableTop(strCaption) + "</td></tr>";

	//content
	strText += "<tr><td>" + strContent + "</td></tr>";

	//buttom
	strText += "<tr><td>" + tableButtom() + "</td></tr>";
	strText += "</table>";

	return strText;
}