function map_sitemap(){
var canvas = document.getElementById('sitemap-canvas');
var source_data = document.getElementById('sitemap-legend');
var context = canvas.getContext('2d');
var color_array = new Array('#ff690b',  '#ffd149', '#3b646c', '#f59a00', '#ff6a2a');
var track_labels = new Array('Writings', 'Creative', 'Personal', 'Social');
var text_color = '#333333';
var station_color = '#333333';
var fill_color = '#ffffff';
var associated_color = '#dddddd';
var pref_style = 'track'; // can be 'spider' or 'track';
var top_offset = 50;
var left_offset = 70;
var allow_connections = 1;
var make_connections_curved = 1;

if (canvas.getContext){
	var connections = new Array();
	var re_connections = new Array();

	// Create overlay div
	
	var dd = document.createElement('div');
	var ddn = 'map_overlay';
	dd.setAttribute('id', ddn);
	canvas.parentNode.insertBefore(dd,canvas);
	dd.style.position = "absolute";
	dd.style.zIndex = 5;

	// setup legend
	var nd = document.createElement('div');
	nd.innerHTML = ' ';
	nd.style.position = "absolute";
	dd.appendChild(nd);
	nd.className = 'sitemap_legend';
	
	for (l2=0; l2<track_labels.length; l2++){

	

		var ns = document.createElement('span');
		ns.innerHTML = '<span class="legend_color" style="background-color: '+ color_array[l2] +'"></span>&nbsp;<span class="legend_text">' + track_labels[l2] + '</span>';
		//ns.style.position = "absolute";
		ns.style.Top = (l2 * 20) + 'px';
		//ns.style.marginLeft = (canvasCenterX + 40) + 'px';
		ns.className = 'legend_line';
		nd.appendChild(ns);

	}

	

	// Setup the basic information about our system

	var canvasWidth = canvas.width - left_offset;
	var canvasHeight = canvas.height - top_offset;
	var canvasCenterX = (canvasWidth / 2);
	var canvasCenterY = (canvasHeight / 2);

	// Find the "subway lines"
	var lines = source_data.children;
	var main_line_spacing = canvasWidth / lines.length;

	var alt = 9999;

	for (l=0; l<lines.length; l++){
		context.lineWidth = 6;
		context.lineJoin = 'round';
		context.lineCap = 'round';

		var station_name = lines[l].getElementsByTagName('a')[0];
		station_name = station_name.innerHTML;
		var track_option = lines[l].className;

		// Declare what sub stations are
		var substations = lines[l].children;
		var substation_line_length = substations.length + 1;
		var station_destinationX = (l * main_line_spacing);
		var station_destinationY = (substation_line_length * 30) ;


		if (alt % 2 == 0){
			var adjustment = -20;
			// Line is a east track
			station_destinationY = canvasCenterY + (station_destinationY * 1);
		} else {
			adjustment = 20;
			// line is a west track
			station_destinationY = canvasCenterY + (station_destinationY * -1);
		}

		if (track_option == 'central_station'){ 

		} else {

			track_option = 1 * track_option.split('_')[1];
			context.beginPath();
			context.strokeStyle = color_array[track_option - 1];
			context.moveTo(canvasCenterX, canvasCenterY);
			if (pref_style != 'spider'){
				context.lineTo(station_destinationX, canvasCenterY);
			}
			context.lineTo(station_destinationX, station_destinationY);
			context.stroke();

		}

		var id = '#' + lines[l].getAttribute('id');
		var connection = lines[l].getAttribute('data-connect');
		var reconnection = lines[l].getAttribute('data-re-connect');

		if (connection){

			var connection_information = new Array(connection, id, station_destinationX, station_destinationY);
			connections.push(connection_information);
		}

		if (reconnection){

			var reconnect_information = new Array(reconnection, id, station_destinationX, station_destinationY);
			re_connections.push(reconnect_information);
		}

		// Find the individual "Sub Stations"

		for (s=0; s<substations.length; s++){
			context.lineWidth = 3;
			// FInd all "Secondary Lines"
			var sublines = substations[s].children;
			var secondary_line_spacing = sublines.length * 30;
			for (sl=0; sl<sublines.length; sl++){

				// Begin with station_destinationX and station_destinationY

				var subline_length = sublines.length * 30;

				if (alt % 2 == 0){

					// Line is a east track
					var subline_extentY = station_destinationY + subline_length;
					var subline_extentY_place = station_destinationY + (sl * 30) + 30; 

				} else {

					// line is a west track
					subline_extentY = station_destinationY - subline_length; 
					subline_extentY_place = station_destinationY - (sl * 30) - 30;

				}

				context.lineTo(station_destinationX, subline_extentY);
				context.stroke();
				var text = sublines[sl].children[0].innerHTML;

				id = '#' + sublines[sl].getAttribute('id');
				connection = sublines[sl].getAttribute('data-connect');
				reconnection = sublines[sl].getAttribute('data-re-connect');

				if (connection){

					var connection_information = new Array(connection, id, station_destinationX, subline_extentY_place);
					connections.push(connection_information);
				}

				if (reconnection){

					var reconnect_information = new Array(reconnection, id, station_destinationX, subline_extentY_place );
					re_connections.push(reconnect_information);
				}



				// Find all "Secondary Stations"
				var sec_stations = sublines[sl].getElementsByTagName('ul');
				for (ss=0; ss<sec_stations.length; ss++){



}

}

}
alt--;
}


// parse the connection information

if (allow_connections == 1){

	for (x=0; x<connections.length; x++){

		var connection = connections[x][0];
		var reconnection = connections[x][1];

		var xcoord = connections[x][2];
		var ycoord = connections[x][3];

		for (y = 0; y<re_connections.length; y++){

			var reconnection2 = re_connections[y][0];
			var connection2 = re_connections[y][1];
			var xcoord2 = re_connections[y][2];
			var ycoord2 = re_connections[y][3];

			if (connection == connection2){

				context.beginPath();
				context.strokeStyle = associated_color;
				context.moveTo(xcoord, ycoord);
				
				if (make_connections_curved == 1){
					context.bezierCurveTo(xcoord, ycoord, xcoord - 20, ycoord - 20, xcoord2, ycoord2);
				} else {
					context.lineTo(xcoord2, ycoord2);
				}
				
				context.stroke();

			}

		}

	}
}
var alt = 9999;

for (l=0; l<lines.length; l++){
	context.lineWidth = 4;
	track_option = lines[l].className;
	station_name = lines[l].getElementsByTagName('a')[0];
	station_link = station_name;
	station_name = station_name.innerHTML;

	// Declare what sub stations are
	substations = lines[l].children;
	substation_line_length = substations.length + 1;
	station_destinationX = (l * main_line_spacing);
	station_destinationY = (substation_line_length * 30) ;


	if (alt % 2 == 0){
		var adjustment = -20;
		// Line is a east track
		station_destinationY = canvasCenterY + (station_destinationY * 1);
	} else {
		adjustment = 20;
		// line is a west track
		station_destinationY = canvasCenterY + (station_destinationY * -1);
	}

	if (track_option == 'central_station'){ 
		context.beginPath();
		context.fillStyle = fill_color;
		context.arc(canvasCenterX, canvasCenterY, 10, 0, 6.218, false);
		context.fill();
		context.strokeStyle = station_color;
		context.stroke();

		var ns = document.createElement('span');
		var sc = 'class="central_station"'; 
		ns.innerHTML = '<span '+ sc + '><a href="' + station_link + '">' + station_name + '</a></span>';
		ns.style.position = "absolute";
		ns.style.overflow = "hidden";
		ns.style.marginTop = (canvasCenterY + 15) + 'px';
		ns.style.marginLeft = (canvasCenterX + -10) + 'px';
		//ns.className = 'sub_station';
		dd.appendChild(ns);


	} else {

		context.beginPath();
		context.strokeStyle = station_color;
		context.lineWidth = 2;
		context.fillStyle = fill_color;
		context.arc(station_destinationX, station_destinationY, 5, 0, 6.218, false);
		context.fill();
		context.stroke();

		var ns = document.createElement('span');
		var sc = 'class="primary_station"'; 
		ns.innerHTML = '<span '+ sc + '><a href="' + station_link + '">' + station_name + '</a></span>';
		ns.style.position = "absolute";
		ns.style.overflow = "hidden";
		ns.style.marginTop = (station_destinationY - 10) + 'px';
		ns.style.marginLeft = (station_destinationX + 20) + 'px';
		//ns.className = 'sub_station';
		dd.appendChild(ns);

	}




	// Find the individual "Sub Stations"

	for (s=0; s<substations.length; s++){

		// FInd all "Secondary Lines"
		var sublines = substations[s].children;
		var secondary_line_spacing = sublines.length * 30;
		for (sl=0; sl<sublines.length; sl++){
			var subline_link = sublines[sl].children[0];
			text = subline_link.innerHTML;

			// Begin with station_destinationX and station_destinationY

			var subline_length = sublines.length * 30;

			if (alt % 2 == 0){

				// Line is a east track
				var subline_extentY = station_destinationY + subline_length;
				var subline_extentY_place = station_destinationY + (sl * 30) + 30; 

			} else {

				// line is a west track
				subline_extentY = station_destinationY - subline_length; 
				subline_extentY_place = station_destinationY - (sl * 30) - 30;

			}


			var text = sublines[sl].children[0].innerHTML;


			// Append the sub station span to the div
			ns = document.createElement('span');
			sc = 'class="sub_station"'; 
			ns.innerHTML = '<span '+ sc + '><a href="'+ subline_link +'">' + text + '</a></span>';
			ns.style.position = "absolute";
			ns.style.overflow = "hidden";
			ns.style.width = '240px';
			ns.style.marginTop = (subline_extentY_place - 10) + 'px';
			ns.style.marginLeft = (station_destinationX + 20) + 'px';
			//ns.className = 'sub_station';
			dd.appendChild(ns);

			context.beginPath();
			context.strokeStyle = station_color;
			context.lineWidth = 2;
			context.fillStyle = station_color;
			context.arc(station_destinationX, subline_extentY_place, 3, 0, 6.218, false);
			context.fill();
			context.stroke();

			// Find all "Secondary Stations"
			var sec_stations = sublines[sl].getElementsByTagName('ul');
			for (ss=0; ss<sec_stations.length; ss++){



}

}

}
alt--;
}


}
}