// -----------------------------------------------------------------------------
// This script contains functions used by ZY Qigong website pages.
// -----------------------------------------------------------------------------

// -----------------------------------------------------------------------------
// This function is used to create the page's frame
// (header, footer and side bar).
// -----------------------------------------------------------------------------
function MakeFrame(){

	// Initialize the variables.
	var code = new String("");
	var contentfooter = null;
	var header = null;
	var sidebar = null;

	// Create the page's "footer" div.
	document.body.innerHTML +=
		"<div class=invisibleDivider id=footer>" +
			"<ul>" +
				"<li><a href=index.htm#whatiszyq>What is ZYQ?</a> ~ </li>" +
				"<li><a href=mission.htm>Our Mission</a> ~ </li>" +
				"<li><a href=feedback.htm>Feedback</a> ~ </li>" +
				"<li><a href=organization.htm>Mingtang Bio</a> ~ </li>" +
				"<li><a href=seattleteam.htm>Seattle Team</a> ~ </li>" +
				"<li><a href=china.htm>China</a> ~ </li>" +
				"<li><a href=russiaukraine.htm>Russia/Ukraine</a> ~ </li>" +
				"<li><a href=worldwide.htm>Links</a> ~ </li>" +
				"<li><a href=retreats.htm>Retreats</a> ~ </li>" +
				"<li><a href=healing.htm>Clinic</a> ~ </li>" +
				"<li><a href=core_curriculum.htm> Practice</a> ~ </li>" +
				"<li><a href=china_intensives.htm>Shaolin</a> ~ </li>" +
				"<li><a href=schedule.htm>Schedule</a> ~ </li>" +
				"<li><a href=register.htm>Registration</a> ~ </li>" +
				"<li><a href=mailing.htm>Comments</a> ~ </li>" +
				"<li><a href=shop.htm>Products</a></li>" +
			"</ul>" +
		"</div>";

	// Enclose the "contentfooter" div around the "content" and "footer" divs.
	code = "<div id=contentfooter>" + document.body.innerHTML + "</div>";
	document.body.innerHTML = code;

	// Create the page's "sidebar" and "header" div
	code =
		"<div id=sidebar>" +
			"<ul id=menus>" +
				"<li class=menu onclick=\"SwitchMenu('menu1')\">" +
					"Our Programs</li>" +
					"<li class=menu1><a href=schedule.htm>Schedule</a></li>" +
					"<li class=menu1>" +
						"<a href=core_curriculum.htm>Core Curriculum</a></li>" +
//					"<li class=menu1><a href=apprenticeship.htm>" +
//						"Image Therapy Apprenticeship</a></li>" +
					"<li class=menu1><a href=tuition.htm>Tuition</a></li>" +
					"<li class=menu1><a href=healing.htm>Healing</a></li>" +
					"<li class=menu1><a href=retreats.htm>Retreats</a></li>" +
					"<li class=menu1><a href=china_intensives.htm>" +
						"China Intensives</a></li>" +
					"<li class=menu1><a href=lectures.htm>Lectures</a></li>" +
					"<li class=menu1><a href=ongoing_practice.htm>" +
						"Ongoing Practice</a></li>" +
					"<li class=menu1>" +
						"<a href=register.htm>Registration</a></li>" +
				"<li class=menu onclick=\"SwitchMenu('menu2')\">" +
					"Contact Us</li>" +
					"<li class=menu2>" +
						"<a href=\"http://www.facebook.com/pages/Seattle-WA/Zhong-Yuan-Qigong/259915821689\">" +
						"Our Facebook Page</a></li>" +
					"<li class=menu2>" +
						"<a href=maps.htm>Map & Directions</a></li>" +
					"<li class=menu2>" +
						"<a href=\"mailto:info@zyqigong.org\">Email</a></li>" +
					"<li class=menu2>" +
						"<a href=invite.htm>Invite Teachers/Healers</a></li>" +
					"<li class=menu2>" +
						"<a href=mailing.htm>Discussion Forum</a></li>" +
					"<li class=menu2>" +
						"<a href=ZYQEDJobDescription.pdf>Job Openings</a></li>" +
				"<li class=menu onclick=\"SwitchMenu('menu3')\">" +
					"About ZYQ</li>" +
					"<li class=menu3>" +
						"<a href=index.htm#whatiszyq>What is ZYQ?</a></li>" +
					"<li class=menu3><a href=mission.htm>Our Mission</a></li>" +
					"<li class=menu3>" +
						"<a href=us_vision.htm>ZYQ in the US</a></li>" +
					"<li class=menu3>" +
						"<a href=teachings.htm>Teachings & Stories</a></li>" +
					"<li class=menu3>" +
						"<a href=feedback.htm>Testimonials</a></li>" +
					"<li class=menu3><a href=gallery>Photo Gallery</a></li>" +
				"<li class=menu onclick=\"SwitchMenu('menu4')\">ZYQ Team</li>" +
					"<li class=menu4>" +
						"<a href=organization.htm>Mingtang</a></li>" +
					"<li class=menu4>" +
						"<a href=seattleteam.htm>Teachers & Healers</a></li>" +
				"<li class=menu onclick=\"SwitchMenu('menu5')\">" +
					"ZYQ International</li>" +
					"<li class=menu5><a href=china.htm>China</a></li>" +
					"<li class=menu5>" +
						"<a href=russiaukraine.htm>Russia & Ukraine</a></li>" +
					"<li class=menu5>" +
						"<a href=worldwide.htm>Links/Other Countries</a></li>" +
				"<li class=menu onclick=\"SwitchMenu('menu6')\">" +
					"Products</li>" +
					"<li class=menu6>" +
						"<a href=\"shop.htm#popular\">Popular Products</a>" +
					"</li>" +
					"<li class=menu6>" +
						"<a href=\"shop.htm#video\">Videos</a></li>" +
					"<li class=menu6>" +
						"<a href=\"shop.htm#cd\">Meditation CDs</a></li>" +
					"<li class=menu6>" +
						"<a href=\"shop.htm#books\">Books</a></li>" +
					"<li class=menu6>" +
						"<a href=\"shop.htm#calligraphy\">Calligraphy</a>" +
					"</li>" +
					"<li class=menu6>" +
						"<a href=\"shop.htm#ordering\">How to Order</a>" +
					"</li>" +
			"</ul>" +
			"<img alt=\"Chinese Logo\" src=\"images/ZY_QigongSmall.jpg\">" +
		"</div>" +
		"<div id=header>" +
			"<img alt=\"English Logo\" src=\"images/zyQigong_logo.gif\">" +
			"<div id=headercontacts>" +
				"<p>Phone/Fax: (206) 726-0088</p>" +
				"<p>Email: <a href=\"mailto:info@zyqigong.org\">" +
					"info@zyqigong.org</a></p>" +
				"<p>Clinic: 4033 Stone Way N</p>" +
				"<p>Seattle WA 98103</p>" +
				"<p>" +
					"<a href=\"http://www.facebook.com/pages/Seattle-WA/Zhong-Yuan-Qigong/259915821689\">" +
					"On Facebook</a></p>" +
			"</div>" +
		"</div>";
	document.body.innerHTML = code + document.body.innerHTML;

	// -------------------------------------------------------------------------

	// Set variables to the div objects that will be inspected and altered.
	contentfooter = document.getElementById("contentfooter");
	header = document.getElementById("header");
	sidebar = document.getElementById("sidebar");

	// Set the Left position of the "header" and "contentfooter" divs.
	code = GetElementOuterLength(sidebar, "width");
	header.style.left = code;
	contentfooter.style.left = code;

	SwitchMenu("menu1");  // Show only menu names.

	// Vertically center the elements in the header.
	VerticallyCenterDivElements(header);

	// Determine the min-width of the "header" div.
	header.style.minWidth =
		(parseInt(GetElementStyle(document.getElementById("headercontacts"),
		"width")) + parseInt(GetElementStyle(header, "paddingLeft")) +
		parseInt(GetElementStyle(header, "paddingRight")) + 282) + "px";

	// Set the Top position of the "contentfooter" div and
	// the top padding for the "sidebar" div to be the "header" div's height.
	code = GetElementOuterLength(header, "height");
	contentfooter.style.top = code;
	sidebar.style.paddingTop = code;

}

// -----------------------------------------------------------------------------
// This function is used to display no more than one "sidebar" div menu at a
// time.  It is called when one clicks on the name of a "sidebar" div menu name.
// -----------------------------------------------------------------------------
function SwitchMenu(menu){
	var liClass = new String("");
	var li = null;
	var lis = document.getElementById("menus").getElementsByTagName("li");
	for (var index = 0; index < lis.length; index++) {
		li = lis[index];
		liClass = li.className;
		li.style.display = (liClass == menu) ?
			((GetElementStyle(li, "display") == "none") ? "block" : "none") :
			((liClass == "menu") ? "block" : "none");
	}
}

// -----------------------------------------------------------------------------
// This function is used to vertically center each element
// within the specified div.
// NOTE:  IE7 doesn't conform to HTML DOM, so "nodeType" must be checked.
// -----------------------------------------------------------------------------
function VerticallyCenterDivElements(div) {
	var element = null;
	var elements = div.childNodes;
	var maxHeight = GetMaxLength(div, "height");
	for (var index = 0; index < elements.length; index++) {
		element = elements[index];
		if(element.nodeType != 1) continue;
		element.style.paddingTop = Math.floor((maxHeight -
			parseInt(GetElementStyle(element, "height"))) / 2) + "px";
	}
}

// -----------------------------------------------------------------------------
// This function is used to retrieve the specified style property value
// of the specified element.
// NOTE:  IE7 doesn't conform to HTML DOM,
//        so "currentStyle" and "client*" properties must be used, instead.
// -----------------------------------------------------------------------------
function GetElementStyle(element, property) {
	var value = new String("");
	value = element.currentStyle ? element.currentStyle[property] :
		document.defaultView.getComputedStyle(element, null)[property];
	if(value != "auto") return value;
	if(property == "width") value = element.clientWidth -
		parseInt(GetElementStyle(element, "paddingLeft")) -
		parseInt(GetElementStyle(element, "paddingRight"));
	else if(property == "height") value = element.clientHeight -
		parseInt(GetElementStyle(element, "paddingTop")) -
		parseInt(GetElementStyle(element, "paddingBottom"));
	else return value;
	return value + "px";
}

// -----------------------------------------------------------------------------
// This function is used to retrieve the specified outer length (width or
// height) value of the specified element (i.e., padding and border thicknesses
// are included in the return value).  NOTE:  IE7 doesn't conform to HTML DOM,
// so "currentStyle" and "offset*" properties must be used, instead.
// -----------------------------------------------------------------------------
function GetElementOuterLength(element, property) {
	var value = new String("");
	if(property == "width") {
		value = (element.currentStyle) ? element.offsetWidth : (
			parseInt(GetElementStyle(element, "width")) +
			parseInt(GetElementStyle(element, "borderLeftWidth")) +
			parseInt(GetElementStyle(element, "borderRightWidth")) +
			parseInt(GetElementStyle(element, "paddingLeft")) +
			parseInt(GetElementStyle(element, "paddingRight")));
	}
	else if(property == "height") {
		value = (element.currentStyle) ? element.offsetHeight : (
			parseInt(GetElementStyle(element, "height")) +
			parseInt(GetElementStyle(element, "borderTopWidth")) +
			parseInt(GetElementStyle(element, "borderBottomWidth")) +
			parseInt(GetElementStyle(element, "paddingTop")) +
			parseInt(GetElementStyle(element, "paddingBottom")));
	}
	return value + "px";
}

// -----------------------------------------------------------------------------
// This function is used to determine the largest specified length
// of the elements within the specified div.
// NOTE:  IE7 doesn't conform to HTML DOM, so "nodeType" must be checked.
// -----------------------------------------------------------------------------
function GetMaxLength(div, property) {
	var element = null;
	var elementLength = null;
	var elements = div.childNodes;
	var maxLength = parseInt(GetElementStyle(elements[0], property));
	for (var index = 0; index < elements.length; index++) {
		element = elements[index];
		if(element.nodeType != 1) continue;
		elementLength = parseInt(GetElementStyle(element, property));
		if(elementLength > maxLength) maxLength = elementLength;
	}
	return maxLength;
}