var map;
var initial_location = new GLatLng(54.880399, -3.782959);
var initial_zoom = 6;
var points = new Array();
var marker_info = new Array();
var clubs = new Object();
var club_index = new Object();

//
// Initalize Function
// This is the Javascript that's executed at the loading of the page
// Mostly sets up the Map, and the list to the side.
//
function initialize() 
{
	if (GBrowserIsCompatible()) 
	{
		map = new GMap2(document.getElementById("map_canvas"));
		var list = document.getElementById("asc_list");
		map.setCenter(initial_location, initial_zoom);
		map.setUIToDefault();

		var xmlDoc=loadXMLDoc(asc_xml);
		
		// For each club node in the XML we've set up...
		var x = xmlDoc.getElementsByTagName("club");
		
		for (j=0;j<x.length;j++)
		{
			var info = new Object();
			// Go through each club node and create a location_string (if there is one).
			for (i=0;i < x[j].childNodes.length;i++)
			{
				if (x[j].childNodes[i].nodeType==1)
				{ 
					if(x[j].childNodes[i].childNodes[0])
					{
						info["" + x[j].childNodes[i].nodeName] = x[j].childNodes[i].childNodes[0].nodeValue;
					}
				}
			}
			
			// If a location string has been found, then we can use it to create a point on the map.
			// We also take this opportunity to create the HTML needed for the list.
			if(info["location"] != "")
			{
				var temp_points = info["location"].split(",");
				points[j] = new GLatLng(temp_points[0], temp_points[1]);
		
				info["name"] = x[j].getAttribute("name");				
				clubs["" + info["name"]] = createListHTML(j, info["name"]);
				club_index["" + info["name"]] = j;
				
				var marker = createMarker(points[j], info, j) 
				map.addOverlay(marker);
			}
		}
		
		var list_html = listHTMLStart();
		// Now we need to generate the HTML List of clubs.
		var listDoc = xmlDoc.getElementsByTagName("district");
		for (i=0; i<listDoc.length; i++)
		{
				list_html = list_html + "<ul class=districts><li class=district><strong>" + listDoc[i].getAttribute("name") +"</strong>";
			
				for (j=0;j < listDoc[i].childNodes.length; j++)
				{
					for (k=0; k < listDoc[i].childNodes[j].childNodes.length; k++)
					{
						var areaDoc = listDoc[i].childNodes[j].childNodes[k];
						if(areaDoc.nodeName == "area")
						{
							list_html = list_html + "<ul class=areas><li class=area>" + areaDoc.getAttribute("name") +": ";
							
							for (l=0; l < areaDoc.childNodes.length; l++)
							{
								//list_html = list_html + "<ul class=clubs>";
								for (m=0; m < areaDoc.childNodes[l].childNodes.length; m++)
								{
									clubDoc = areaDoc.childNodes[l].childNodes[m];
									if(clubDoc.nodeName == "club")
									{
										list_html = list_html + clubs["" + clubDoc.getAttribute("name")];
									}
								}
								list_html = list_html.substring(0, list_html.length-1);
							}
							list_html = list_html + "</li></ul>";
						}	
					}
				}
				list_html = list_html + "</li></ul>";
		}
		list_html = list_html + listHTMLEnd();
		// HTML that we've generated whilst going through the club list.
		list.innerHTML = list_html;
		
		// If an argument is appended to the URL, then focus on the club.
		var url_argument = decodeURI(gup("club_name"));
		var club_index_number = club_index[url_argument];
		if(url_argument != "" && club_index_number != undefined)
		{
			center_map(club_index_number);
		}
	}
}

//
// HTML Functions
// Just a nice place that I can put the headers and footers, and generally automated HTML 
// generation in one place, without having to search in the initalization function.
//

function listHTMLStart()
{
	return "<p>To find out more information about a club, click on an icon on the map <img src='icons/mini_icon.png'> or select a club from the list below. If there is no club in your area, you can <a href='registration_form.html' target='popupWin' onclick='return submitInfo(\"registration_form.html\");'>submit a little information</a> to the Membership Secretary to register your interest. If you wish to update the details listed about your club, <a href='update_form.html' target='popupUpdate' onclick='return submitUpdate(\"update_form.html\");'> please fill in this form</a> which will be submitted to the Webmaster.<br/><br/><input type=button onclick='reset_map()' value='Reset Map'/></p>";
}

function listHTMLEnd()
{
	return "";
}

function createListHTML(point, name)
{
	return " <a href='#' onclick='center_map(" + point + ")'>" + name + "</a> |";
}

function submitInfo(url)
{
	window.open(url, "popupWin", "height=200, width=455, location = 0, status = 1, resizable = 0, scrollbars=0, toolbar = 0");
	return true;
}

function submitUpdate(url)
{
	window.open(url, "popupUpdate", "height=280, width=455, location = 0, status = 1, resizable = 0, scrollbars=0, toolbar = 0");
	return true;
}

//
// GMaps Functions
// Functions used to manipulate the GMap object on the page.
//

function center_map(value)
{
	if(points[value] && marker_info[value])
	{
		map.setCenter(points[value], 14);
		map.openInfoWindowHtml(points[value], marker_info[value]);
	}
}

function reset_map()
{
	map.setCenter(initial_location, initial_zoom);
}

function createMarker(point, info, marker_value) {
  var marker = new GMarker(point);
  marker.value = marker_value;
  marker_info[marker_value] = createMarkerHTML(info, marker_value);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(marker_info[marker_value]);
  });
  return marker;
}

function createMarkerHTML(info, marker_value)
{
	var html =  "<table class=marker>";
	if(info["name"]) 			{	html = html + "<tr><td class=title>Club</td><td class=data>" + info["name"] + "</td></tr>"; }
	if(info["address"]) 		{	html = html + "<tr><td class=title>Venue</td><td class=data>" + info["address"] + " <a href='#' onclick='center_map(" + marker_value + ")'>(ZoomTo)</a></td></tr>"; }
	if(info["meeting_dates"]) 	{	html = html + "<tr><td class=title>Meeting Dates</td><td class=data>" + info["meeting_dates"] + "</td></tr>"; }
	if(info["telephone"]) 		{	html = html + "<tr><td class=title>Telephone</td><td class=data>" + info["telephone"] + "</td></tr>"; }
	if(info["email"]) 			{	html = html + "<tr><td class=title>E-Mail</td><td class=data><a href='mailto:" + info["email"] + "'>" + info["email"] +"</a></td></tr>"; }
	if(info["gender_mix"]) 		{	html = html + "<tr><td class=title>Gender Mix</td><td class=data>" + info["gender_mix"] + "</td></tr>"; }
	if(info["website"]) 		{	html = html + "<tr><td class=title>Web Site</td><td class=data><a href='" + info["website"] + "' target='_new'>" + info["website"] + "</a></td></tr>"; }
	if(info["other"]) 			{	html = html + "<tr><td class=title>Notes</td><td class=data>" + info["other"] + "</td></tr>"; }
	html = html + "</table>";
				
	return html;
}