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

// Last modified: April 10, 2010

var background_div;			// Tag that contains the old highlight image
var defaultHighlight;			// The default highlight image for this page
var groups = new Array();		// Groups of tabs and their corresponding content panes
var highlight_img;			// Tag that contains the new highlight image
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.


// 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 = "msg/" + 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;
}


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

	document.write(html);
}



// 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 oldname = highlight_img.src.split("/").pop();	// path name messes up Firefox, so trim it off
	background_div.style.backgroundImage = "url(" + 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);
};


// Make buttons for the main web pages
function make_main_buttons(active, highlight, reference) {
	// active: the class of the active button, needed so we can underline it
	// highlight: the default highlight image for this page
	// reference: ordinarily omitted; but should be "../" when making buttons for the message page!

	if (reference == undefined)
		reference = "";

	defaultHighlight = highlight;

	var html;

	// change style so the button for the active page is underlined.

	html = "<style type='text/css'>#" + active + " { text-decoration: underline; color:#460001;}</style>";
	document.write(html);

	html = "" +
"<table class='buttons' cellspacing='4px' align='center'>" +
" <tr><td class='highlight' align='center'>" +
"  <div alt='Preview' title='Preview' id='background' style='background-image: url(" + highlight + ");'>" +
"   <img alt='Preview' title='Preview' id='highlight' src='" + highlight + "' width='128' height='128'>" +
"  </div>" + 
" </td></tr>";
	document.write(html);
	background_div = document.getElementById("background");	// the <div id="background"...> element
	highlight_img = document.getElementById("highlight");	// the <img id="highlight"...> element


	/* Reference is ordinarily omitted; but should be "../" when making buttons for the message page! */
	if (reference == undefined)
		reference = "";

	button("Home", "home", reference + "index.html", "Go to the Valley Concert Chorale home page",
		reference + "highlight.jpg");
	button("About", "about", reference + "about.html", "Get more information about the Valley Concert Chorale",
		reference + "highlight_about.gif");
	button("Concerts", "concerts", reference + "concerts.html", "See our concert schedule and order tickets",
		reference + "highlight_concerts.jpg");
	button("Staff", "staff", reference + "staff.html", "Meet the artistic staff",
		reference + "highlight_staff.jpg");
	button("Contributions", "contributions", reference + "contributions.html", "Learn how to support the VCC",
		reference + "highlight_contributions.gif");
	button("Calendar", "calendar", reference + "calendar.html", "See the calendar for rehearsals and other events",
		reference + "highlight_calendar.jpg");
	button("CD Albums", "albums", reference + "albums.html", "Learn about our CD recordings",
		reference + "highlight_albums.jpg");
	button("Archives", "archives", reference + "archives.html", "Hear music, see pictures, and read about our history",
		reference + "highlight_archives.jpg");
	button("Schools", "schools", reference + "schools.html", "Learn about our Music in the Schools program",
		reference + "highlight_schools.jpg");
	button("Members", "members", reference + "members/members.html", "Get more information (chorus members only)",
		reference + "highlight_members.jpg");

	// Add a link to our facebook page beneath all the other buttons
	html = ""
+ '<tr><td align="center">'
+ ' <a href="http://www.facebook.com/pages/Valley-Concert-Chorale/130015341888" title="Please visit our Facebook web page too">'
+ '  <img src="'
+     reference + 'find_us_on_facebook_badge.gif" width="133" height="41" border="0" />'
+ ' </a>'
+ '</td></tr>';
	document.write(html);

	document.write("</table>");
	return;
}


// Make buttons for the members-only page
function make_member_buttons(active, highlight) {
	// active: the class of the active button, needed so we can underline it
	// highlight: the default highlight image for this page

	defaultHighlight = highlight;

	var html;

	// change style so the button for the active page is underlined.

	html = "<style type='text/css'>#" + active + " { text-decoration: underline; color:#460001;}</style>";
	document.write(html);

	html = "" +
"<table class='buttons' cellspacing='4px' align='center'>" +
" <tr><td class='highlight' align='center'>" +
"  <div alt='Preview' title='Preview' id='background' style='background-image: url(" + highlight + ");'>" +
"   <img alt='Preview' title='Preview' id='highlight' src='" + highlight + "' width='128' height='128'>" +
"  </div>" + 
" </td></tr>";
	document.write(html);
	background_div = document.getElementById("background");	// the <div id="background"...> element
	highlight_img = document.getElementById("highlight");	// the <img id="highlight"...> element

	// It's confusing to put the home button on the member's page, so I've eliminated it
	// button("Home", "home", "../index.html", "Go to the Valley Concert Chorale home page", "highlight.jpg");

	button("Info", "info", "info.html", "See general information of interest to VCC members", "highlight_info.gif");
	button("Members", "members", "members.html", "See an address list of VCC members", "highlight_members.jpg");
	button("Friends", "friends", "friends.html", "See an address list of past VCC members and friends", "highlight_friends.gif");
	button("Markings", "markings", "markings/index.html", "Get markings for concert music", "highlight_markings.jpg");
	button("Pronunciation", "pronunciation", "pronunciation/index.html", "Learn pronunciation for concert music",
		"highlight_pronunciation.jpg");
	button("Music", "music", "music.html", "Listen to special VCC recordings",
		"highlight_music.jpg");
	document.write("</tr></table>");
	return;
}


// 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 "";
}