// vcc2.js: JavaScript functions common to Valley Concert Chorale web pages

// Last modified: September 10, 2011

var defaultHighlight;			// The default highlight image for this page
var groups = new Array();		// Groups of tabs and their corresponding content panes
var headline;				// The headline title for this page
var lastUpdateDate;			// The time this web page was last updated
var timerList = null;			// List of timer events

// You can rename the next two files if spammers get to be a problem.  But be aware
// that when either name is changed, message*.pl must also be edited to reflect the change.
var messagePage = "message2.shtml";	// Current name of message web page.
var messageScript = "message2.pl";	// Current name of CGI script.

// Display the date when this page was last updated
function showLastUpdate() {
	var html = "";
	html += 
'	 <div class="lastUpdate">' +
'	 Last modified on ' + lastUpdateDate +
'	 <address>' +
'	  &copy; 2011 Hilary Jones,' +
'	  <a href = "mailto:web-master1@valleyconcertchorale.org" title="mailto:web-master1@valleyconcertchorale.org">Webmaster</a>' +
'	 </address>' +
'	</div>';

	document.write(html);
}

// Build the list of board members using hidden email addresses
function board_member(name, site, fullname, title) {
	var email = name + "@" + site;
	if (board_members != "")
		board_members += ", ";
	board_members += email;
	var mailto = "mailto:" + email;
	var html = "<a href='" + mailto + "'" + " title='" + mailto + "'>"
+		fullname + "</a>" + title;

	document.write(html);
};


// Set up a link to the current message page.
function displayMessagePage(target) {
	/*
	 * Compute URL for the message page and display it.  We do this to make it easier to change the 
	 * name of message.shtml w/o having to change every web page that refers to it.  This will
	 * help protect us from spammers.  We also append a source parameter to help find which web page 
	 * user came from, and a target parameter to identify who should get the email.
	 */
	var url = window.location.href;				/* where he is coming from */
	var reg = /^(.*\/)(.*\..?html)(.*)$/;			/* parsed to extract the name of the web page itself */
	var components = url.match(reg);
	var source = components[2];
	reg = /^(.*\.?html)(\?.*)$/;				/* parsed to remove query string, if any */
	components = source.match(reg);
	if (components != null)
		source = components[1];
	window.location.href = messagePage + "?source=" + source + "&target=" + target;
}


// Read URL to find what tab to highlight, if any
function getDefaultTab(defaultTab) {
	// defaultTab: name of the tab to be used if not specified in URL.
	var params = window.location.search;
	params = params.substring(1);	// strip off leading "?"
	var pairs = params.split("&");
	for (var i=0; i< pairs.length; i++) {
		var pair = pairs[i].split("=");
		if (pair[0] == "tab") {
			defaultTab = pair[1];
			break;
		}
	}
	return defaultTab;
}


// Functions setupGroup and showPane were inspired by code by http://jon.hedley.net/html-tabbed-dialog-widget.

// Set up one group of tabs and their corresponding information panes
function setupGroup(groupId, defaultTabName, fixedHeight) {
	// groupId:		name of a group of tabs and corresponding panes
	// defaultTabName:	name of the tab that should be selected by default
	// fixedHeight:		set true to make all web pages have the same height
	fixedHeight = false;	// the logic for fixing the page height is broken because I set display:none

	// Find this group's tabs and panes, and memorize them.
	// Find the max height and set tab content to that height.  Ditto width.

	// Note that a tab's class name is used only while groups are being identified.  The name will be
	// changed out from under the tab later when the tab needs to be activated or deactivated.

	groups[groupId] = new Object;
	groups[groupId].panes = new Array();
	groups[groupId].tabs = new Array();

	// memorize all tabs; and find the default tab

	var defaultTab = null;
	var tabs = document.getElementById(groupId + "-bar");			// <ul class="tab-bar" id="whatever-bar">
	var tabList = tabs.getElementsByTagName("a")
	for (var i=0; i < tabList.length; i++) {
		var tab = tabList[i];
		if (tab.nodeType != 1) continue;				// nodeType != ELEMENT_NODE
		tab.originalClassName = tab.className;
		groups[groupId].tabs[tab.className] = tab;
		if (tab.className == defaultTabName)
			defaultTab = tab;
	}


	// Memorize all panes.  Find dimensions of area big enuf to contain them all.

	var maxHeight = 0; var maxWidth = 0;
	var paneContainer = document.getElementById(groupId + "-content");	// <div class="tab-content" id="whatever-content">
	var paneList = paneContainer.childNodes;				// <div class="pane1">
	for (var i=0; i < paneList.length; i++ ) {
		var pane = paneList[i];
		if (pane.nodeType != 1) continue;
		// alert(pane.className + " has size " + pane.offsetHeight + "," + pane.offsetWidth);
		if (pane.offsetHeight > maxHeight) maxHeight = pane.offsetHeight;
		if (pane.offsetWidth  > maxWidth ) maxWidth  = pane.offsetWidth;
		groups[groupId].panes[pane.className] = pane;
		pane.style.display = "none";
	}
	if (fixedHeight) {
		paneContainer.style.height = maxHeight + "px";
		paneContainer.style.width  = maxWidth + "px";
	}
	if (defaultTab != null)
		showPane(defaultTabName);
	paneContainer.style.display="inline";	// Make tab content visible.  (It was turned off in hide.css).
}

// Handle tab selection
function showPane(tab) {
	// tab:		Either the name of the tab to be activated, or the tab itself -- for example, showPane(this).

	// Change class of the active tab so it is highlighted
	// Change other tabs so they are unhighlighted
	// Make the selected pane visible, and hide the others.

	var tabName;
	if (typeof(tab) == "string")
		tabName = tab;
	else
		tabName = tab.originalClassName;


	// Find which group this tab is in.  It shouldn't be in several groups; but if user makes
	// a mistake, use the first group encountered.

	var groupId = null;
	for (var g in groups) {
		if (groups[g].tabs[tabName] != null && groups[g].panes[tabName] != null) {
			groupId = g;
			break;
		}
	}
	if (groupId == null) {
		alert("cannot find tab " + tabName);		// This should never happen if page is formatted right
		return;
	}


	activeTab = groups[groupId].tabs[tabName];

	activeTab.blur();
	activeTab.className = "tab-active";
	activeTab.parentNode.className = "tab-active";

	var pane = groups[groupId].panes[tabName];
	pane.style.display = "block";
	var tabs = document.getElementById(groupId + "-bar");
	var tabList = tabs.getElementsByTagName("a")
	for (var i=0; i<tabList.length; i++ ) {
		var tab = tabList[i];
		if (tab != activeTab) {
			tab.className = "tab-disabled";
			tab.parentNode.className = "tab-disabled";
		}
	}
	for (var i in groups[groupId].panes) {
		var pane = groups[groupId].panes[i];
		if (pane == undefined) continue;
		if (pane.className == tabName) continue;
		pane.style.display = "none"
	}

	return;
}


// Make one button.  Note that onclick handler makes entire button active, not just the <a> tag.
function button(name, id, href, description, highlight) {
	var html = ""
+ "		<tr><td align='center' class='button' onclick='top.location.href=" + '"' + href + '"' + "'>"
+ "			<a class='button' href='" + href + "' "
+ "			id='" + id + "'"
+ "			onmouseover='changeHighlight(\"" + highlight + "\", 0, 200); return true;'"
+ "			onmouseout='changeHighlight(\"" + defaultHighlight + "\", 500, 1000); return true;'"
+ "			title='" + description + "'"
+ "		>"
+		"<div>" + name + "</div>"
+ "		</a>"
+ "		</td></tr>";
	document.write(html);
	return;
}


// Change the highlight image to the named file
function changeHighlight(filename, delay, duration) {
	// filename: the name of the highlight file
	// delay: time to wait before starting change in msec
	// duration: cross-fade time in msec

	clearTimers();
	// Save original image, then change to new one and blend it in
	var highlight_img = document.getElementById("highlight");	// the <img id="highlight"...> element
	var oldname = highlight_img.src.split("/").pop();	// path name messes up Firefox, so trim it off
	var background_div = document.getElementById("background");	// the <div id="background"...> element
	background_div.style.backgroundImage = "url(images/" + oldname + ")";
	changeOpac(0, "highlight");
	highlight_img.src = filename;
	var i = 0;
	var speed = Math.round(duration/100);
	for (i = 0; i <= 100; i++) {
		timerList = new timerNode(timerList, setTimeout("changeOpac(" + i + ",'" + "highlight" + "')", delay + i * speed));
	}
}


// Change opacity for different browsers (http://brainerror.net/scripts/javascript/blendtrans)
function changeOpac(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
} 


// Clear timers so that buttons don't flicker
function clearTimers() {
	while (timerList != null) {
		clearTimeout(timerList.timerID);
		timerList = timerList.next;
	}
}


// Node for linked list of timers
function timerNode(next, timerID) {
	this.next = next;
	this.timerID = timerID;
}


// Send mail to someone without exposing their address to spammers
function mail_to(name, site, fullname) {
	if (fullname == null)
		fullname = name + "@" + site;
	var mailto = "mailto:" + name + "@" + site;
	var html = "<a href='" + mailto + "'" + " title='" + mailto + "'>"
+		fullname + "</a>";

	document.write(html);
};


// Generate one roster entry
function member(name, address, home, work, email) {
	if (email != "") {
		if (everybody != "")
			everybody += ", ";
		everybody += email;
	}
	var html = ""
+ "	  <tr>"
+ "	    <td>" + name + "</td>"
+ "	    <td>" + address + "</td>"
+ "	    <td align='right'>" + home + "</td>"
+ "	    <td align='right'>" + work + "</td>"
+ "	    <td>&nbsp;&nbsp;</td>"
+ "	    <td><a href='mailto:" + email + "'>" + email + "</a></td>"
+ "	  </tr>";

	document.write(html);
	return;
}


// Parse URL for query parameters of form name=value.  Returns the value, or "" if param is missing.
function getQueryParam(name) {
	var params;			/* Parameter string from the URL */
	var value;			/* Value, if any */

	var query = window.location.search.substring(1);	/* everything after the question mark */
	var vars = query.split("&");
	for (var i = 0; i < vars.length; i++) {
		var pair = vars[i].split("=");
		if (pair[0] == name)
			return pair[1];
	}
	return "";
}

// Function to call when the mouse leaves a button
function mouseOut() {
	changeHighlight(defaultHighlight, 500, 1000);
}


// Function to call when the mouse hovers over a button
function mouseOver(filename) {
	changeHighlight(filename, 0, 200);
}


// Set the title in the headline area
function set_headline() {
      headline_div = document.getElementById("headline"); // the <h1 id="headline"> element
      headline_div.innerHTML = headline;
}


function set_highlight() {
	// Assumes that the calling page has defined defaultHighlight in the <head> section.
	// Also assumes that bp1.html has set up the highlight image area using the following elements.

	document.getElementById("background").style.backgroundImage = "url(" + defaultHighlight + ")";
	document.getElementById("highlight").src = defaultHighlight;
}