var map;
var currentselected=0;
var ltblueIcon = getGIcon("/community/images/blue_light.png");
var blueIcon = getGIcon("/community/images/blue.png");
var blueIconSelected = getGIcon("/community/images/blue-selected.png");
var redIcon = getGIcon("/community/images/red.png");
var ltredIcon = getGIcon("/community/images/red_light.png");
var ltredIconSelected = getGIcon("/community/images/red_light-selected.png");
var yellowIcon = getGIcon("/community/images/yellow.png");
var yellowIconSelected = getGIcon("/community/images/yellow-selected.png");
var greenIcon = getGIcon("/community/images/green.png");
var greenIconSelected = getGIcon("/community/images/green-selected.png");
var selectedschools=Array();
var unselectedschools=Array();
var lastdiv;


function getGIcon(imageurl) {
  var theicon=new GIcon();
  theicon.image = imageurl;
  theicon.shadow = "images/shadow50.png";
  theicon.iconSize = new GSize(32, 32);
  theicon.shadowSize = new GSize(37, 34);
  theicon.iconAnchor = new GPoint(9, 34);
  theicon.infoWindowAnchor = new GPoint(19, 2);
	return theicon;
}
      
function init() {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	updateMarkers();
	GEvent.addListener(map,'zoomend',function() {
		updateMarkers();
	});
	GEvent.addListener(map,'dragend',function() {
		updateMarkers();
	});
}

function schooltypesortfunction(a, b){
	var val_a=0;
	var val_b=0;
	
	if (a=='primary') {
		val_a=1;
	}if (b=='primary') {
		val_b=1;
	}
	if (a=='elementary') {
		val_a=2;
	}if (b=='elementary') {
		val_b=2;
	}
	if (a=='middle') {
		val_a=3;
	}if (b=='middle') {
		val_b=3;
	}
	if (a=='high') {
		val_a=4;
	}if (b=='high') {
		val_b=4;
	}
	if (val_a>0 && val_b>0) {
		return (val_a-val_b);
	}
	return (a<b); //otherwise sort by type name if unknown type
		
}

function updateMarkers() {
	lastdiv=0;
	currentselected=0;
	//remove the existing points
	map.clearOverlays();
	//create the boundary for the data
	var bounds = map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
	var getVars = 'ne=' + northEast.toUrlValue()
	+ '&sw=' + southWest.toUrlValue()
	//log the URL for testing
	//GLog.writeUrl('js/server_schools.php?'+getVars);
	//retrieve the points using Ajax
	var request = GXmlHttp.create();
	request.open('GET', 'js/server_schools.php?'+getVars, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var jscript = request.responseText;
			var points;
			var resultslist=new Array();
			eval(jscript);
			var totalresults=0;
			for (i in points) {
				++totalresults;
				if (resultslist[points[i].level]==undefined) {
					resultslist[points[i].level]="";
				}
				resultslist[points[i].level]+="\n<li><div id=\"schooldiv"+totalresults+"\">"+points[i].school;		
				resultslist[points[i].level]+="<br/><a class=\"centermap\" href=\"#top\" onClick='selectAndCenterMap("+totalresults+","+points[i].lat+","+points[i].lng+");'>Center map on school</a></div></li>\n";
			
			}
			var rlkeys=new Array(resultslist.length);
			for (schooltype in resultslist) {
				//document.write(schooltype);
				rlkeys.push(schooltype);
			}
			rlkeys.sort(schooltypesortfunction);
			
			
			totalresults=0;
			//create each point from the list
			for (i in points) {
				++totalresults;
				var point = new GLatLng(points[i].lat,points[i].lng);
				var marker = createMarker(point,points[i].school,points[i].level,totalresults,false);
				map.addOverlay(marker);
				marker = createMarker(point,points[i].school,points[i].level,totalresults,true);
				map.addOverlay(marker);
				marker.hide();
			}
			var resultstext="";
			for (level in rlkeys) {
				var thekey=rlkeys[level];
				resultstext+="<div class=\"title\">"+thekey+"</div>\n<ul>"+resultslist[thekey]+"</ul><br>\n";
			}
			var divel=document.getElementById('listdiv');
			if (totalresults==0) {
				if (startZoom!==0) {
					startZoom--;
					map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
				}
			} else if (totalresults==1) {
				divel.innerHTML="<div class=\"results\">"+totalresults+" school was found in this area.</div>"+resultstext;
			} else {
				divel.innerHTML="<div class=\"results\">"+totalresults+" schools were found in this area.</div>"+resultstext;
			}
		} //end if readystate 4
		
	}
 
	request.send(null);
}

function selectAndCenterMap(itemnum,maplat, maplong) {
	map.panTo(new GLatLng(maplat,maplong), 13);
	markselected(itemnum);
	return true;
}

function createMarker(point, html, level,itemnum,isselected) {
	
	var markerLevel = level;
	if (!isselected) {
		if (markerLevel == 'high') {
			var icon=greenIcon; 
		} else if (markerLevel == 'middle') {
			var icon=blueIcon; 
		} else if (markerLevel == 'elementary') {
			var icon=yellowIcon;
		} else if (markerLevel == 'primary') {
			var icon=ltredIcon;
		} else { 	
			var icon=yellowIcon;
		}
	}
	else {
		if (markerLevel == 'high') {
			var icon=greenIconSelected; 
		} else if (markerLevel == 'middle') {
			var icon=blueIconSelected; 
		} else if (markerLevel == 'elementary') {
			var icon=yellowIconSelected;
		} else if (markerLevel == 'primary') {
			var icon=ltredIconSelected;
		} else { 	
			var icon=yellowIconSelected;
		}
	}
	//alert("isselected: "+isselected+", image is "+icon.image);
	var marker = new GMarker(point,icon);
	GEvent.addListener(marker, 'click', function() {
					var markerHTML = html;
					marker.openInfoWindowHtml(markerHTML);
					markselected(itemnum);
	});
	if (isselected) {
		marker.hide();
		selectedschools[itemnum]=marker;
	}
	else {
		marker.show();
		unselectedschools[itemnum]=marker;
	}
	return marker;
}

function markselected(itemnum) {
		if (currentselected>0) {
			selectedschools[currentselected].hide();
			unselectedschools[currentselected].show();
    }
    unselectedschools[itemnum].hide();
    selectedschools[itemnum].show();
    currentselected=itemnum;
		if (lastdiv!=undefined && lastdiv != 0) {lastdiv.style.backgroundColor="white";}
	  var thediv=document.getElementById("schooldiv"+itemnum);
	  thediv.style.backgroundColor="#eeeeee"
	  lastdiv=thediv;
	  document.getElementById("map").focus();
}

window.onload = init;