var map = null;
var stores = [];
var searchedPoint = null;

function init_map() {
	if (GBrowserIsCompatible() && document.getElementById("map_canvas") != null) {	   
		// create the map		
		map = new GMap2(document.getElementById("map_canvas"));
		map.addControl(new GMapTypeControl);
		map.addMapType(G_PHYSICAL_MAP);
		map.addControl(new GLargeMapControl());		
		map.enableScrollWheelZoom();
		get_markers();
	}
};

function search_markers() {
	if (map == null) {
		init_map();	
	}
	map.clearOverlays();
	get_loc($('#searchloc').val(), location_callback );
};

function location_callback(point) {
	searchedPoint = point;

	for(var i = 0; i < stores.length; i++) {
//		var distance = searchedPoint.distanceFrom(stores[i].point);
		//if the distance is below 10km then add to the map 
//		if (distance < 10000) {
			var marker = createMarker(stores[i].point,stores[i].markerInfo);
			map.addOverlay(marker);
//		}
	}
	
	// finally center on the searched location
	if (searchedPoint == null) {
		map.setCenter(new GLatLng(52.286643,5.202026), 7, G_HYBRID_MAP);		
	} else {
		map.setCenter(searchedPoint, 12, G_HYBRID_MAP);
	}
};

function get_markers() {	
	// arrays to hold copies of the markers and html used by the side_bar
	// because the function closure trick doesnt work there
	var gmarkers = [];
	var htmls = [];
	var i = 0;	
	
	var request = GXmlHttp.create();
	request.open("POST", "functions.php", true);
	request.setRequestHeader("Cache-Control", "no-cache");
	request.setRequestHeader("X_USERAGENT", "celtics");
	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	request.setRequestHeader('Connection', 'close');		
	request.onreadystatechange = function() {
		if (request.readyState == 4) {			
			var xmlDoc = GXml.parse(request.responseText);
			// obtain the array of markers and loop through it
			var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			
			for (var i = 0; i < markers.length; i++) {
				// obtain the attribues of each marker
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var point = new GLatLng(lat,lng);

				stores[i] = new GIcon();
				stores[i].markerInfo = {"title": markers[i].getAttribute("title"), "desc":  markers[i].getAttribute("desc"), "web" : markers[i].getAttribute("web")};
				stores[i].point = point;
			}
		}
	}
	var req_string = "action=getmarkers&";
	request.send(req_string);	
};

// A function to create the marker and set up the event window
function createMarker(point,markerInfo) {
	var marker = new GMarker(point);
	
	var html = document.createElement('div');
	html.className = "mapMarker";

	var header = document.createElement('h2');
	header.innerHTML = markerInfo.title;
	html.appendChild(header);
	
	var description = document.createElement('p');
	description.innerHTML = markerInfo.desc;
	html.appendChild(description);
	
	var website = document.createElement('a');
	website.innerHTML = markerInfo.web.replace("http://","");;
	website.href = markerInfo.web;
	html.appendChild(website);

	GEvent.addListener(marker, "click", function() {
	  marker.openInfoWindowHtml(html);
	});
	
	return marker;
};

function get_loc(address, func) {
  var geocoder = new GClientGeocoder();
  geocoder.getLatLng(address, func);
};