// JavaScript Document
var map;
var iconMed = new GIcon(G_DEFAULT_ICON);
	iconMed.image = "images/yellowTest2.png";
	iconMed.shadow = "";
	iconMed.printShadow ="";
	iconMed.printImage = "images/yellowTest2.png";
	iconMed.mozPrintImage = "images/yellowTest2.png";
	iconMed.iconSize = new GSize(32, 32);
	iconMed.iconAnchor = new GPoint(8, 32);
	iconMed.infoWindowAnchor = new GPoint(16, 16);
var iconLarge = new GIcon(G_DEFAULT_ICON);
	iconLarge.image = "images/blueTest2.png";
	iconLarge.shadow = "";
	iconLarge.printShadow ="";
	iconLarge.printImage = "images/blueTest2.png";
	iconLarge.mozPrintImage = "images/blueTest2.png";
	iconLarge.iconSize = new GSize(32, 32);
	iconLarge.iconAnchor = new GPoint(8,32);
	iconLarge.infoWindowAnchor = new GPoint(16,16);
var iconSmall = new GIcon(G_DEFAULT_ICON);
	iconSmall.image = "images/greenTest2.png";
	iconSmall.shadow = "";
	iconSmall.printShadow ="";
	iconSmall.printImage = "images/greenTest2.png";
	iconSmall.mozPrintImage = "images/greenTest2.png";
	iconSmall.iconSize = new GSize(32, 32);
	iconSmall.iconAnchor = new GPoint(8,32);
	iconSmall.infoWindowAnchor = new GPoint(16, 16);
markerSmall = { icon:iconSmall };
markerMed = { icon:iconMed };
markerLarge = { icon:iconLarge };

function load() {
  if (GBrowserIsCompatible()) {
	if(document.implementation.hasFeature(
		"http://www.w3.org/TR/SVG11/feature#SVG","1.1")){ 
	 _mSvgEnabled = true;
	  _mSvgForced  = true;
	}
	var vwbList = document.getElementById('vwbList');
	map = new GMap2(document.getElementById('map'));
	map.addControl(new GSmallMapControl());
	map.addControl(new GScaleControl());
	map.setCenter(new GLatLng(38, -92), 4);
	var mt = map.getMapTypes(); 
	for (var i=0; i<mt.length; i++) { 
		mt[i].getMinimumResolution = function() {return 4;} 
	} 
	map.clearOverlays();
	var searchUrl = 'genXML/wwbState_genxml.php';
		GDownloadUrl(searchUrl, function(data) {
		   var xml = GXml.parse(data);
		   var markers = xml.documentElement.getElementsByTagName('marker');
			if (markers.length == 0) {
			 return;
		    }
			for (var i = 0; i < markers.length; i++) {
			 var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
									 parseFloat(markers[i].getAttribute('lng')));
			 var count = markers[i].getAttribute('count');
			 var location = markers[i].getAttribute('location');
			 var abbrev = markers[i].getAttribute('abbrev');
			 var lat = parseFloat(markers[i].getAttribute('lat'));
			 var lng = parseFloat(markers[i].getAttribute('lng'));
			 var marker = createMarker(point, count, lat, lng, location, abbrev, count);
			 var sidebarEntry = createSidebarEntry(marker, location, count, abbrev);
         	vwbList.appendChild(sidebarEntry);
			map.addOverlay(marker);
		    }
		 });
	GEvent.addListener(map, "moveend", function() {
			i = loadProps();
		});
  }
}

function reload() {
  if (GBrowserIsCompatible()) {
	var vwbList = document.getElementById('vwbList');
	vwbList.innerHTML='';
	var mt = map.getMapTypes(); 
	for (var i=0; i<mt.length; i++) { 
				mt[i].getMinimumResolution = function() {return 4;} 
		} 
	map.setCenter(new GLatLng(42, -92), 4);
	map.clearOverlays();
	var searchUrl = 'genXML/wwbState_genxml.php';
		GDownloadUrl(searchUrl, function(data) {
		   var xml = GXml.parse(data);
		   var markers = xml.documentElement.getElementsByTagName('marker');
			if (markers.length == 0) {
			 return;
		    }
			for (var i = 0; i < markers.length; i++) {
			 var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
									 parseFloat(markers[i].getAttribute('lng')));
			 var count = markers[i].getAttribute('count');
			 var location = markers[i].getAttribute('location');
			 var abbrev = markers[i].getAttribute('abbrev');
			 var lat = parseFloat(markers[i].getAttribute('lat'));
			 var lng = parseFloat(markers[i].getAttribute('lng'));
			 var marker = createMarker(point, count, lat, lng, location, abbrev, count);
			 var sidebarEntry = createSidebarEntry(marker, location, count, abbrev);
         	vwbList.appendChild(sidebarEntry);
			map.addOverlay(marker);
		    }
		 });
		var wwbLegend = document.getElementById('wwbLegend');
		wwbLegend.innerHTML = '<center>Legend: &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/greenTest2.png" width="32" height="32" alt="green" style="display:inline" /> 50 studies or less &nbsp; &nbsp; &nbsp; <img src="images/yellowTest2.png" width="32" height="32" alt="yellow" style="display:inline" />51 to 100 studies  &nbsp; &nbsp; &nbsp; <img src="images/blueTest2.png" width="32" height="32" alt="blue" style="display:inline"/>Over 100 studies </center> ' ;
  }
}
function createMarker(point, count, lat, lng, location, abbrev, count) {
	  if (count > 100) {
		  var marker = new GMarker(point, markerLarge);
	  }else if (count>50) {
		  var marker = new GMarker(point, markerMed);
	  }else{
		  var marker = new GMarker(point, markerSmall);
	  }
	 // var marker = new GMarker(point);
	  loadPanel = function(a) { 
		  GEvent.addListener(marker, 'click', function() {
			marker.openInfoWindowHtml(a);
		  });
	  }
   	  GDownloadUrl("wwbStatePu.php?inState=" + abbrev, loadPanel);
      return marker; 
    }
	
function createSidebarEntry(marker, location, count, abbrev) {
      var div = document.createElement('div');
	  var html = '<div><table border=1 width=150px><tr style="font-size: 12px"><td bordercolor="#000000" width="32px"><center>'
	 if (count > 100) {
		  html += '<img src="images/blueTest2.png" width="32" height="32" alt="blue" />';
	  }else if (count>50) {
		  html += '<img src="images/yellowTest2.png" width="32" height="32" alt="yellow" />';
	  }else{
		  html += '<img src="images/greenTest2.png" width="32" height="32" alt="green" />';
	  } 
	 html += '</center></td><td valign="middle"><b><font color=black>' + location + '</b></td></tr></table></div>';
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '3px'; 
	  GEvent.addDomListener(div, 'click', function() {
        loadState(abbrev);
      });
      return div;
    }
function loadCity(City, State, lat, lon){
	 	 map.clearOverlays();
		 map.setCenter(new GLatLng(lat, lon), 8);
		 var mt = map.getMapTypes(); 
		for (var i=0; i<mt.length; i++) { 
				mt[i].getMinimumResolution = function() {return 7;} 
		} 
        loadProps();
}

function loadCities(inState){
		var mapbounds=map.getBounds();
		var mapne=mapbounds.getNorthEast();
		var mapsw=mapbounds.getSouthWest();
		var mapSWLat=mapsw.lat();
		var mapSWLng=mapsw.lng();
		var mapNELat=mapne.lat();
		var mapNELng=mapne.lng();
		var searchUrl = 'genXML/wwbCity_genxml.php?nelat='+mapNELat+'&nelng='+mapNELng+'&swlat='+mapSWLat+'&swlng='+mapSWLng;	
		GDownloadUrl(searchUrl, function(data) {
		   var xml = GXml.parse(data);
		   var markers = xml.documentElement.getElementsByTagName('marker');
			if (markers.length == 0) {
			 return;
		    }
			for (var i = 0; i < markers.length; i++) {
			 var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
									 parseFloat(markers[i].getAttribute('lng')));
			 var city = markers[i].getAttribute('city');
			 var count = markers[i].getAttribute('count');
			 var lat = parseFloat(markers[i].getAttribute('lat'));
			 var lng = parseFloat(markers[i].getAttribute('lng'));
			 var marker = createMarkerCity(point, lat, lng, city, count);
			map.addOverlay(marker);
		    }
		 });
		loadSidebarCityList(inState);
		GEvent.addListener(map, "moveend", function() {
			i = loadProps();
		});
}

function loadState(inState){
		map.clearOverlays();
		var mt = map.getMapTypes(); 
		for (var i=0; i<mt.length; i++) { 
				mt[i].getMinimumResolution = function() {return 7;} 
		} 
		var vwbList = document.getElementById('vwbList');
		vwbList.innerHTML = '';
		var searchUrl = 'genXML/wwbStateCities_genxml.php?inState=' + inState;
		GDownloadUrl(searchUrl, function(data) {
		   var xml = GXml.parse(data);
		   var markers = xml.documentElement.getElementsByTagName('marker');
			if (markers.length == 0) {
			 return;
		    }
			var bounds = new GLatLngBounds();
			for (var i = 0; i < markers.length; i++) {
			 var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
									 parseFloat(markers[i].getAttribute('lng')));
			 var city = markers[i].getAttribute('city');
			 var state = markers[i].getAttribute('state');
			 var count = markers[i].getAttribute('count');
			 var lat = parseFloat(markers[i].getAttribute('lat'));
			 var lng = parseFloat(markers[i].getAttribute('lng'));
			 var marker = createMarkerCity(point, lat, lng, city, count);
			var sidebarEntry = createSidebarEntryCity(marker, city, count, state);
         	vwbList.appendChild(sidebarEntry);
			map.addOverlay(marker);
			bounds.extend(point);
		    }
		   map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
		 });
		var wwbLegend = document.getElementById('wwbLegend');
		wwbLegend.innerHTML = '<center>Legend: &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/greenTest2.png" width="32" height="32" alt="green" style="display:inline" /> 1 or 2 studies &nbsp; &nbsp; &nbsp; <img src="images/yellowTest2.png" width="32" height="32" alt="yellow"style="display:inline" />3 to 5 studies  &nbsp; &nbsp; &nbsp; <img src="images/blueTest2.png" width="32" height="32" alt="blue" style="display:inline"/>Over 5 studies </center> ' ;
  }
function createMarkerCity(point, lat, lng, city, count, state) {
	  //var marker = new GMarker(point);
	  if (count > 5) {
		  var marker = new GMarker(point, markerLarge);
	  }else if (count>2) {
		  var marker = new GMarker(point, markerMed);
	  }else{
		  var marker = new GMarker(point, markerSmall);
	  }
	  var html = city + ', ' + state;
	  GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker; 
    }
function createSidebarEntryCity(marker, city, count, state) {
      var div = document.createElement('div');
	  var html = '<div><table border=1 width=150px><tr style="font-size: 12px"><td bordercolor="#000000" width="32px"><center>'
	 if (count > 5) {
		  html += '<img src="images/blueTest2.png" width="32" height="32" alt="blue" />';
	  }else if (count>2) {
		  html += '<img src="images/yellowTest2.png" width="32" height="32" alt="yellow" />';
	  }else{
		  html += '<img src="images/greenTest2.png" width="32" height="32" alt="green" />';
	  } 
	 html += '</center></td><td valign="middle"><b><font color=black>' + city + ', ' + state + '</b></td></tr></table></div>';
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '3px'; 
	  GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      return div;
    }
	
function loadSidebarCityList(inState){
		var vwbList = document.getElementById('vwbList');
		vwbList.innerHTML = '';
		var searchUrl = 'genXML/wwbCityList_genxml.php?inState='+inState;	
		GDownloadUrl(searchUrl, function(data) {
		   var xml = GXml.parse(data);
		   var markers = xml.documentElement.getElementsByTagName('marker');
			if (markers.length == 0) {
			 //alert(searchUrl);
			 return;
		    }
			for (var i = 0; i < markers.length; i++) {
			 var city = markers[i].getAttribute('city');
			  var state = markers[i].getAttribute('state');
			   var count = markers[i].getAttribute('count');
			 var sidebarEntry = createSidebarEntryCitySimple(city, state, count);
         	vwbList.appendChild(sidebarEntry);
		    }
		 });
}
function createSidebarEntryCitySimple(city, inState, count) {
      var div = document.createElement('div');
	 var html = '<div><table border=1 width=150px><tr style="font-size: 12px"><td bordercolor="#000000" width="32px"><center>'
	 if (count > 5) {
		  html += '<img src="images/blueTest2.png" width="32" height="32" alt="blue" />';
	  }else if (count>2) {
		  html += '<img src="images/yellowTest2.png" width="32" height="32" alt="yellow" />';
	  }else{
		  html += '<img src="images/greenTest2.png" width="32" height="32" alt="green" />';
	  } 
	 html += '</center></td><td valign="middle"><b><font color=black>' + city + ', ' + state + '</b></td></tr></table></div>';
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '3px'; 
	  GEvent.addDomListener(div, 'click', function() {
        loadCity(city, inState);
      });
      return div;
    }
function loadProps(){
		if (map.getZoom()>5) {
		var vwbList = document.getElementById('vwbList');
		vwbList.innerHTML = '';	
		map.clearOverlays();
		var wwbLegend = document.getElementById('wwbLegend');
		wwbLegend.innerHTML = '<center>Legend: &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/greenTest2.png" width="32" height="32" alt="green" style="display:inline"/> 1 or 2 studies &nbsp; &nbsp; &nbsp; <img src="images/yellowTest2.png" width="32" height="32" alt="yellow" style="display:inline"/>3 to 5 studies  &nbsp; &nbsp; &nbsp; <img src="images/blueTest2.png" width="32" height="32" alt="blue" style="display:inline"/>Over 5 studies </center> ' ;
		var mapbounds=map.getBounds();
		var mapne=mapbounds.getNorthEast();
		var mapsw=mapbounds.getSouthWest();
		var mapSWLat=mapsw.lat();
		var mapSWLng=mapsw.lng();
		var mapNELat=mapne.lat();
		var mapNELng=mapne.lng();
		var searchUrl = 'genXML/wwbCity_genxml.php?nelat='+mapNELat+'&nelng='+mapNELng+'&swlat='+mapSWLat+'&swlng='+mapSWLng;	
		GDownloadUrl(searchUrl, function(data) {
		   var xml = GXml.parse(data);
		   var markers = xml.documentElement.getElementsByTagName('marker');
			if (markers.length == 0) {
			 return;
		    }
			for (var i = 0; i < markers.length; i++) {
			 var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
									 parseFloat(markers[i].getAttribute('lng')));
			 var city = markers[i].getAttribute('city');
			 var count = markers[i].getAttribute('count');
			 var state = markers[i].getAttribute('state');
			 var lat = parseFloat(markers[i].getAttribute('lat'));
			 var lng = parseFloat(markers[i].getAttribute('lng'));
			 var marker = createMarkerCity(point, lat, lng, city, count, state);
			var sidebarEntry = createSidebarEntryCity(marker, city, count, state);
         	vwbList.appendChild(sidebarEntry);
			map.addOverlay(marker);
			//bounds.extend(point);
		    }
		 });
		}else{
			var wwbLegend = document.getElementById('wwbLegend');
			wwbLegend.innerHTML = '<center>Legend: &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/greenTest2.png" width="32" height="32" alt="green" style="display:inline" /> 50 studies or less &nbsp; &nbsp; &nbsp; <img src="images/yellowTest2.png" width="32" height="32" alt="yellow" style="display:inline" />51 to 100 studies  &nbsp; &nbsp; &nbsp; <img src="images/blueTest2.png" width="32" height="32" alt="blue" style="display:inline" />Over 100 studies </center> ' ;
		}
}