var map;
var gMarkers = [];
var added_orgs = [];
var icon;
var markers = [];
var request;
var isWorking = false;
function createCookie(name,value,days) { 
	var expires;
	if (days) { 
		var date = new Date(); 
		date.setTime(date.getTime()+(days*24*60*60*1000)); 
		expires = "; expires="+date.toGMTString(); 
	} 
	else 
		expires = ""; 
	document.cookie = name+"="+value+expires+"; path=/"; 
} 
function readCookie(name) { 
	var nameEQ = name + "="; 
	var ca = document.cookie.split(';'); 
	for(var i=0;i < ca.length;i++) { 
		var c = ca[i]; 
		while (c.charAt(0)==' ') 
			c = c.substring(1,c.length); 
		if (c.indexOf(nameEQ) == 0) 
			return c.substring(nameEQ.length,c.length); 
	} 
	return null; 
} 

function select(i) {
  map.closeInfoWindow();
  map.removeOverlay(gMarkers[i]);
  createMarker(i, true);
  var theObj = document.getElementById("selected");
  var store = markers[i];
  theObj.innerHTML += "<b>" + store.childNodes[1].text + "</b>";
  var ethnic = store.childNodes[6].text;
  if ((ethnic == "Chi") || (ethnic == "chi"))
	theObj.innerHTML += " (Chinese)";
  theObj.innerHTML += "<br>" + store.childNodes[4].text + " " + store.childNodes[5].text + "<br><br>";
}

    function load() {
	var theObj = document.getElementById("waitDiv"); 
	theObj.innerHTML = "<big>Loading Map...</big>"; 
	// keep executing (ie: draw what I asked for!!!), call initMap in 10 millisec 
	setTimeout("initMap();", 10); 
}
	
function createMarker(i, selected) {
	var item = markers[i];
	var point = new GLatLng(parseFloat(item.childNodes[3].text), parseFloat(item.childNodes[2].text)); 
	var name = item.childNodes[1].text;
	var adr = item.childNodes[4].text;
	var phone = item.childNodes[5].text;
      var ethnic = item.childNodes[6].text;
	var marker;
	if (selected)
		marker = new GMarker(point, G_DEFAULT_ICON);
	else
		marker = new GMarker(point, icon); 
	GEvent.addListener(marker, "click", function() 
		{ 
			var str;

			str = name;
			str += "<br><br>";
			str += adr;
			str += "<br>" + phone;
			if (!selected)
				str += " <q onClick='select("+i+")' style='color:blue; background:orange; font-weight:bold'>Select this store</q><br>";
			marker.openInfoWindowHtml(str); 
		});
	map.addOverlay(marker); 
	gMarkers[i] = marker;
}

function sortNumber(a,b)
{
 if (a<b)
    return -1;
 else 
    return 1;
}

    function loadData() {
	if (!isWorking) {

      // first get the dimension of the current map
      var bounds = map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
                var new_markers;
	url += southWest.lat().toString() + "\&maxlat=" + northEast.lat().toString() + "\&minlng=" 
 		+ southWest.lng().toString() + "\&maxlng=" + northEast.lng().toString();
 
      request = GXmlHttp.create();
       request.open("GET", url, true);
       request.onreadystatechange = function() {
          if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
            if (xmlDoc == null)
                return;
            // obtain the array of markers and loop through it
            new_markers = xmlDoc.documentElement.getElementsByTagName("org");
             if (new_markers.length == 0) {
                isWorking = false;
		    return;
             }
            
            // hide the info window, otherwise it still stays open where the removed marker used to be
            map.getInfoWindow().hide();
            
            // map.clearOverlays();
            
            // empty the array
            // gMarkers = [];
	      var new_list = [];
	      var i = 0; 
            for (i = 0; i < new_markers.length; i++) {
	        var org_id = new_markers[i].childNodes[0].text;
		  new_list.push(parseInt(org_id));
		}
            // next, merge the added_orgs and new_list
		new_list.sort(sortNumber);
		i = 0;
		var j = 0;
		while ((i<added_orgs.length) && (j<new_list.length)) {
			if (added_orgs[i]<=new_list[j]) {
				if (added_orgs[i] == new_list[j]) {
					new_list[j] = 0;
					j++;
				}
				i++;
			}
			else {	
				j++;
			}
		}
		var item_added = false;
                                j = markers.length;
		for (i=0; i<new_list.length; i++) {
		  	if (new_list[i] != 0) {
	           	  // create the marker
			  added_orgs.push(new_list[i]);
                                                  markers.push(new_markers[i]);
			  item_added = true;
      	                                  createMarker(j, false);
                                                  j++;
			}
            }
		if (item_added)
			added_orgs.sort(sortNumber);

             // put the assembled side_bar_html contents into the side_bar div
            // document.getElementById("side_bar").innerHTML = side_bar_html;
          }
	    isWorking = false;
        };
 	  isWorking = true;
        request.send(null);
       }
      }

    function initMap() {
      if (GBrowserIsCompatible()) {
          map = new GMap2(document.getElementById("map"));
	    map.addControl(new GSmallMapControl()); 
	    map.addControl(new GMapTypeControl()); 

	var zoom = 4;
	var lat = 35.4419;
	var lng = -93.1419;
	var temp = readCookie("cmzoom");
	if (temp)
		zoom = temp;

	temp = readCookie("cmlat");
	if (temp)
		lat = temp;

	temp = readCookie("cmlng");
	if (temp)
		lng = temp;
		
	var cookie_map_type= readCookie("cmtype");
      var map_type = G_NORMAL_MAP;
	if (cookie_map_type) {
	    if (cookie_map_type=="1")
		map_type=G_SATELLITE_MAP;
	    else if (cookie_map_type=="2")
		map_type=G_HYBRID_MAP;
	}

       map.setCenter(new GLatLng(lat, lng), parseInt(zoom), map_type);


	    icon = new GIcon(); 
          icon.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png"; 
	    icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 
	    icon.iconSize = new GSize(12, 20); 
	    icon.shadowSize = new GSize(22, 20); 
	    icon.iconAnchor = new GPoint(6, 20); 
	    icon.infoWindowAnchor = new GPoint(5, 1); 

	var theObj = document.getElementById("waitDiv"); 
	theObj.innerHTML = "<big>Loading map data ...</big>"; 
 
	
	GEvent.addListener(map, "moveend", function() {
		loadData();
	});
	GEvent.addListener(map, "dragend", function() {
		loadData();
	});
	GEvent.addListener(map, "zoomend", function() {
		loadData();
	});


		loadData();
		theObj.innerHTML = ""; 
      }
    }

	function Unload() {

		for (var i = 0; i < map.getMapTypes().length; i++) { 
			if (map.getCurrentMapType() == map.getMapTypes()[i]) { 
				var cookie_map_type = i; 
			} 
		} 
		createCookie("cmtype", cookie_map_type, 30);

		createCookie("cmzoom", map.getZoom(), 30);

		var center = map.getCenter();

		createCookie("cmlat", center.lat(), 30);

		createCookie("cmlng", center.lng(), 30);

		GUnload();
	}