var links = new Array (
/* ************************************************************************************ *
 *  LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS *
 *                                                                                      *
 * Here go any extra links that are to be dynamically inserted under the "EVENTS' head- *
 * ing. Eacy link is made up of a two part array. The first part is the URL pointing to *
 * the page. The second part is the plain text that will appear in the navigation bar,  *
 * (so try to keep it short).                                                           *
 * each element looks like 
    new Array("URL", "Label"),

 * don't forget the closing comma.                                                      *
 * The last line is just a dummy placeholder. Don't remove it.                          */

//	new Array ("conference.html", "Archdeaconry Conference"),
	new Array ("Exercise.html", "Women's 60+ Exercise"),
	new Array ("TripleP.html", "Triple P"),
	new Array ("Buildings.html", "Buildings Survey"),
	new Array ("http://www.i-church.org/adventcalendar", "Advent Calendar"),

/*  LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS LINKS */
/* ************************************************************************************ */
/* Don't remove this next line.                                                         */
    "Dummy line to terminate the list"
	);

/*
Create a navigation bar, inside a <td> with the id 'navbar', overwriting any existing navbar

<td id='navbar' align="left" valign="top" bgcolor="#CC9933"> 

Within that are a series of <h3> with dependent <div> and internal <p> as follows


      <h3 align="left" id='about'>About Us</h3>
      <div class='about'>
        <p><a href="index.html"    class="lightlink">Welcome</a></p>
        <p><a href="location.html" class="lightlink">Locations</a></p>
        <p><a href="vision.html"   class="lightlink">Our vision and mission</a></p>
        <p><a href="people.html"   class="lightlink">Our people</a></p>
        <p><a href="contact.html"  class="lightlink">Contact Us</a></p>
      </div>
      <h3 align="left" id='events'>Events</h3>
      <div class='events'>
        <p><a href="thismonth.html" class="darklink">This month</a></p>
        <p><a href="gallery.html"   class="darklink">Picture Gallery</a></p>
        <p><a href="calendar.html"	 class="darklink">Calendar</a></p>
      </div>

etc.

This function deletes the existing obejct with id 'navbar' and recreates it from the list below.

*/
var NAVBAR = [
	{"id": "about",			"text": "About Us",
	"div": [
		{"href": "index.html", 			"lclass": "lightlink",	"text": "Welcome"},
        {"href": "location.html", 		"lclass": "lightlink",	"text": "Locations"},
        {"href": "vision.html", 		"lclass": "lightlink",	"text": "Our vision and mission"},
        {"href": "people.html", 		"lclass": "lightlink",	"text": "Our people"},
        {"href": "contact.html", 		"lclass": "lightlink",	"text": "Contact Us"},
        ]},
	{"id": "events",		"text": "Events",
	"div": [
        {"href": "thismonth.html", 		"lclass": "darklink",	"text": "This month"},
        {"href": "gallery.html", 		"lclass": "darklink",	"text": "Picture Gallery"},
        {"href": "calendar.html", 		"lclass": "darklink",	"text": "Calendar"},
        ]},
	{"id": "services",		"text": "Services",
	"div": [
        {"href": "worship.html", 		"lclass": "lightlink",	"text": "Regular Worship"},
        {"href": "baptism.html", 		"lclass": "lightlink",	"text": "Baptism"},
        {"href": "admcomm.html", 		"lclass": "lightlink",	"text": "Admission to communion"},
        {"href": "confirmation.html", 	"lclass": "lightlink",	"text": "Confirmation"},
        {"href": "marriage.html", 		"lclass": "lightlink",	"text": "Marriage"},
        {"href": "illnessdeath.html", 	"lclass": "lightlink",	"text": "Illness and death"},
        ]},
	{"id": "kids",			"text": "Children & Youth",
	"div": [
//        {"href": "godspaceckc.html", 	"lclass": "lightlink",	"text": "Onslow Anglican Kids"},
        {"href": "kidservice.html", 	"lclass": "lightlink",	"text": "Children's Worship"},
        {"href": "boxhillkids.html", 	"lclass": "lightlink",	"text": "Box Hill Kids"},
        {"href": "Youth.html", 			"lclass": "darklink",	"text": "Youth group"},
        {"href": "TripleP.html", 		"lclass": "darklink",	"text": "Triple P"},
        ]},
	{"id": "music",			"text": "Music",
	"div": [
        ]},
	{"id": "resources",		"text": "Resources",
	"div": [
        {"href": "nurse.html", 			"lclass": "darklink",	"text": "Parish Nurse"},
        {"href": "prayer.html", 		"lclass": "darklink",	"text": "Prayer"},
        {"href": "smallgroups.html", 	"lclass": "lightlink",	"text": "Small groups"},
        {"href": "bible.html", 			"lclass": "lightlink",	"text": "The Bible"},
        {"href": "seasons.html", 		"lclass": "lightlink",	"text": "Seasons"},
        ]},
	{"id": "membership",	"text": "Membership",
	"div": [
        {"href": "membership.html", 	"lclass": "lightlink",	"text": "Joining us"},
        {"href": "helping.html", 		"lclass": "lightlink",	"text": "Ways you can help"},
        {"href": "stewardship.html", 	"lclass": "lightlink",	"text": "Stewardship"},
        ]},
]

function createNavBar() {
// This depends on the 'jquery' library. See http://jquery.com/
	var nav = $("#navbar").empty()
	NAVBAR.forEach(function(row) {
		nav
		.append(
			$("><h3></h3>")
			.text(row.text)
			.attr('align', 'left')
			.attr('id', row.id)
			)
		.append(
			$("><div></div>")
			.text('')
			.attr('class', row.id)
			)
		row.div.forEach(function(p){
			$("><p></p>")						// create an empty para
			.append(							// and inside...
				$("><a></a>")				 	// an anchor
				.text(p.text)					// with the text
				.attr('href', p.href)			// pointing at url
				.attr('class', p.lclass)		// and appropriate display class
				)
			.appendTo('div.' + row.id)			// append to the appropriate div
		})
	})
}

// This depends on the 'jquery' library. See http://jquery.com/
function undisclose(id) {
	name = id.data
	$("#"+name+">a>img")
	.attr('src','images/undisclosed.gif')
	$("#"+name+">a")
	.unbind("click", undisclose)
	.bind("click", name, disclose)
	$("."+name).slideUp("slow")
}

function disclose(id) {
	name = id.data
	$("#"+name+">a>img")
	.attr('src','images/disclosed.gif')
	$("#"+name+">a")
	.unbind("click", disclose)
	.bind("click", name, undisclose)
	$("."+name).slideDown("slow")
}

function appendEvents() {
	// Start by dynamically recreating the navbar
	createNavBar()
	var num = links.length - 1;	// Allow for dummy last element
	for (i=0; i<num; i++) {
		var url = links[i][0]
		var title = links[i][1]
		$('><p></p>')						// create an empty para
		.append(							// and inside...
			$('><a></a>')				 	// an anchor
			.text(title)					// with the text
			.attr('href',url)				// pointing at url
			)
		.appendTo('div.events')				// append to the div 'events'
	}

	$("#navbar > h3").each(function(){
		if (this.id=='events') {
			disc_char = $("><img>").attr('src','images/disclosed.gif')
			disc = undisclose
		}else{
			disc_char = $("><img>").attr('src','images/undisclosed.gif')
			disc = disclose
		}
		$("<a></a>")
		.append(disc_char)
		.addClass("disclose")
		.attr('href','#')
		.bind("click", this.id, disc)
		.prependTo(this)
		if(disc==disclose)
			$("#navbar > div."+this.id).hide()
	})
}