var markerArray = [];
var markerHtml = [];
var map = undefined;
var infowindow = undefined;

function onLoad() {

     weekDayArray = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
     colorArray = ["pur","org","red","blu","grn","yel","whi"];
     bgcolorArray = ["ee55ff", "ff9900", "ff5544", "6666ff", "339900", "ffff00", "ffffff"];
     availArray = ["not available", "<font class='red'>OPEN</font>"];

     map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(37.78, -122.438396),
                zoom: 11,
                mapTypeId: 'roadmap'
            });
     var infoWindow = new google.maps.InfoWindow;
    
     downloadUrl("data.xml", function(data) {

	var panelHtml = '<table id="mytable" class="sortable" width="600" border="0" cellspacing="0" cellpadding="5">';
	panelHtml = panelHtml + '<tr class="sortHeader"><th>#</th><th>Group Type</th><th>Neighborhood</th><th>Day</th><th>Start Time</th><th>Special Interest</th></tr>';

	var panelArray = [];
	var xml = parseXml(data);
	var markers = xml.documentElement.getElementsByTagName("marker");
	for (var i = 0; i < markers.length; i++) {
	    var xmlDoc = markers[i];
	    var dayIndex =  xmlDoc.getAttribute("day");

	    var params = {
			'image' : "images/marker" + (i+1) +  "-" + colorArray[dayIndex] + ".png",
                        'avail' : xmlDoc.getAttribute("avail"),
			'groupName' : xmlDoc.getAttribute("group_name"),
                        'area' : xmlDoc.getAttribute("area"),
                        'displayAddress' : xmlDoc.getAttribute("address"),
			'dayOfWeek' : weekDayArray[dayIndex],
                        'time' : formatTime(xmlDoc.getAttribute("start_time")),
                        'contact' : xmlDoc.getAttribute("contact"),
			'email' : xmlDoc.getAttribute("email"),
			'group_type' : xmlDoc.getAttribute("group_type"),
                        'interest' : xmlDoc.getAttribute("interest"),
                        'notes' : xmlDoc.getAttribute("notes"),
                        'point' : new google.maps.LatLng(
                                    parseFloat(xmlDoc.getAttribute("lat")),
                                    parseFloat(xmlDoc.getAttribute("lng")))
	    };

	    var iconImage = 'images/marker' + (i+1) + '-' + colorArray[dayIndex] + '.png';
	    var icon = new google.maps.MarkerImage(iconImage);
	    var shadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
		  new google.maps.Size(37, 34),
		  new google.maps.Point(0, 0),
		  new google.maps.Point(8, 34));

	    var marker = new google.maps.Marker({
		map: map,
		position: params.point,
		icon: icon,
		shadow: shadow
	    });

            var html = '<div style="width: 200px"><b>' + params.groupName + '</b> - ' + params.dayOfWeek + ' at ' +  params.time + '<br>';
	    html = html + params.area + '<br>';
            if (params.displayAddress != "") {
                html = html + params.displayAddress + '<br>';
            }
            html = html + params.contact + '</a>';
            if (params.notes != "" && params.notes != null) {
                html = html + '<p>' + params.notes;
            }
            var link = "http://www.citychurchsf.org/Join-A-CG";
            html = html + '<p><a target="signup" href="' + link + '">join a Community Group</a><br>';

	    bindInfoWindow(marker, map, infoWindow, html);
	    markerArray.push(marker);
	    markerHtml.push(html);

	    panelHtml = panelHtml + '<tr onClick="javascript:clickMarker(' + i + ')">';
	    panelHtml = panelHtml + '<td style="text-align: center; border: solid 1px #000; background-color: #' +  bgcolorArray[dayIndex] + '"><span style="color: black; font-weight: bold;">' + (i+1) + '</span></td>'; 
            panelHtml = panelHtml + '<td nowrap>' + params.group_type + '</td>';
            panelHtml = panelHtml + '<td nowrap>' + params.area + '</td>';
	    panelHtml = panelHtml + '<td>' + params.dayOfWeek + '</td>';
	    panelHtml = panelHtml + '<td nowrap>' + params.time + '</td>';
	    panelHtml = panelHtml + '<td>' + params.interest + '</td>';
	    panelHtml = panelHtml + '</td>';
        }               
        document.getElementById("panel").innerHTML = panelHtml + '</table>'; 

        var props = {
                col_0: "none",
                col_1: "select",
                col_2: "select",
                col_3: "select",
		col_4: "select",
		col_5: "select",
                display_all_text: "all",
		alternate_rows: true,
                sort_select: true,
		custom_slc_options: { 
			cols:[3], 
			texts: [[ 'select', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]],
			values: [[ 'select', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]],
			sorts: [false]
		},
		mod_filter_fn: 
		function() {
        		map.clearMarkers();
			Filter('mytable');
        		showMarkers(TF_GetColValues('mytable',0));
		}
            };
     	setFilterGrid("mytable", props);
     });
}

// Helper methods
function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
	infoWindow.setContent(html);
	infoWindow.open(map, marker);
    });
}

function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
	new ActiveXObject('Microsoft.XMLHTTP') :
	new XMLHttpRequest;

    request.onreadystatechange = function() {
	if (request.readyState == 4) {
	    request.onreadystatechange = doNothing;
	    callback(request.responseText, request.status);
	}
    };

    var d = new Date();
    request.open('GET', url + "?z=" + d.getTime(), true);
    request.send(null);
}

function parseXml(str) {
    if (window.ActiveXObject) {
	var doc = new ActiveXObject('Microsoft.XMLDOM');
	doc.loadXML(str);
	return doc;
    } else if (window.DOMParser) {
	return (new DOMParser).parseFromString(str, 'text/xml');
    }
}

function formatTime(val) {
     var regExp = /(\d+):(\d+)/;
     var tokens = regExp.exec(val);
     var hr = tokens[1];
     var mi = tokens[2];
     var tm = 'am';
     if (hr > 12) {
       hr = hr - 12;
       tm = 'pm';
     }
     return hr + ':' + mi + ' ' + tm;
}

function doNothing() {}

function clickMarker(markerNum) {
  var infowindowOptions = {
    content: markerHtml[markerNum]
  }
  if (infowindow != undefined) {
    infowindow.close();
  }
  infowindow = new google.maps.InfoWindow(infowindowOptions);
  infowindow.open(map, markerArray[markerNum]);
}

function myPop() {
    this.square = null;
    this.overdiv = null;

    this.popOut = function(msgtxt) {
	//filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
	this.overdiv = document.createElement("div");
	this.overdiv.className = "overdiv";

	this.square = document.createElement("div");
	this.square.className = "square";
	this.square.Code = this;
	var msg = document.createElement("div");
	msg.className = "msg";
	msg.innerHTML = msgtxt;
	this.square.appendChild(msg);
	var closebtn = document.createElement("button");
	closebtn.onclick = function() {
	    this.parentNode.Code.popIn();
	}
	closebtn.innerHTML = "Close";
	this.square.appendChild(closebtn);

	document.body.appendChild(this.overdiv);
	document.body.appendChild(this.square);
    }
    this.popIn = function() {
	if (this.square != null) {
	    document.body.removeChild(this.square);
	    this.square = null;
	}
	if (this.overdiv != null) {
	    document.body.removeChild(this.overdiv);
	    this.overdiv = null;
	}
    }
}

function showMarkers(ids) {
  if (markerArray) {
    for (i=0; i<ids.length; i++) {
      markerArray[(ids[i]-1)].setMap(map);
    }
  }
}

function resetFilters() {
	map.clearMarkers();
	TF_ClearFilters('mytable');
	TF_Filter('mytable');
  	showMarkers(TF_GetColValues('mytable',0));
}

                       
(function () {
google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;

google.maps.Marker.prototype.setMap = function(map) {
    if (map) {
        map.markers[map.markers.length] = this;
    }
    this._setMap(map);
}
})()