// JavaScript Document

    var centreLat=36.96414948292435;
    var centreLon=-95.84150246069487;
    var initialZoomLevel=4;
    var n_buttonText="Map"; //Text that shows up on the button for the custom layer (n=normal, s=sat, h=hybrid)
    var h_buttonText="Hybrid";
    var mapBounds=new GLatLngBounds(new GLatLng(24.54393995530411,-124.73317397320812),new GLatLng(49.384359010544586,-66.9498309481816));
    var map; //the GMap2 itself
	var geocoder = new GClientGeocoder();
	var opacity=0.75;


    function customGetTileURL(a,b) {
      //converts tile x,y into keyhole string
	  var mDetail = document.getElementById('mDetail').value
	  var fDir = document.getElementById('theme').value
      if (b>11) { return "http://slices.vwbresearch.com/" + mDetail + "/" + fDir + "/blank-tile.png"; };

      var c=Math.pow(2,b);      
	  var x=360/c*a.x-180;
      var y=180-360/c*a.y;
      var x2=x+360/c;

      var y2=y-360/c;
      var lon=x; //Math.toRadians(x); //would be lon=x+lon0, but lon0=0 degrees
      var lat=(2.0*Math.atan(Math.exp(y/180*Math.PI))-Math.PI/2.0)*180/Math.PI; //in degrees
      var lon2=x2;
      var lat2=(2.0*Math.atan(Math.exp(y2/180*Math.PI))-Math.PI/2.0)*180/Math.PI; //in degrees
      var tileBounds=new GLatLngBounds(new GLatLng(lat2,lon),new GLatLng(lat,lon2));

      if (!tileBounds.intersects(mapBounds)) { return "http://slices.vwbresearch.com/" + mDetail + "/" + fDir + "/blank-tile.png"; };
        var d=a.x;
        var e=a.y;
        var f="t";
        for(var g=0;g<b;g++){
            c=c/2;
            if(e<c){
                if(d<c){f+="q"}
                else{f+="r";d-=c}
            }
            else{
                if(d<c){f+="t";e-=c}
                else{f+="s";d-=c;e-=c}
            }
        }
        return "http://slices.vwbresearch.com/" + mDetail + "/" + fDir + "/"+f+".png"
    }

    function changeOpacity() {
		var op = parseFloat(document.getElementById('opactity').value)/100;
		
	    //this works as long as there are at least two map types
        var current=map.getCurrentMapType();
        if (current==map.getMapTypes()[0]){
        	map.setMapType(map.getMapTypes()[1]);
		}else{
			map.setMapType(map.getMapTypes()[0]);
			opacity=op;
			map.setMapType(current); //was map.getMapTypes()[1]
    	}
	}

function load() {
      if (GBrowserIsCompatible()) {
        var copyrightCollection = new GCopyrightCollection("Demographic Data &copy;2008 ");
        copyrightCollection.addCopyright(
          new GCopyright("VWB",
          new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
          0,
          "<a href=\"http://www.vwbresearch.com\">VWB Research</a>")
        );
		copyrightCollection.addCopyright(
          new GCopyright("ESRI",
          new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
          0,
          "<a href=\"http://www.esri.com\">ESRI</a>")
        );
	
        //create a custom G_NORMAL_MAP layer
        var n_tileLayers = [ G_NORMAL_MAP.getTileLayers()[0], new GTileLayer(copyrightCollection , 0, 17)];
        n_tileLayers[1].getTileUrl = customGetTileURL;
        n_tileLayers[1].isPng = function() { return false; };
        n_tileLayers[1].getOpacity = function() { return opacity; };
        var n_customMap = new GMapType(n_tileLayers, new GMercatorProjection(n_tileLayers[0].maxResolution()+1), n_buttonText, {maxResolution:11, minResolution:0, errorMessage:"Data not available"});
        //create a custom G_HYBRID_MAP layer
        var h_tileLayers = [ G_HYBRID_MAP.getTileLayers()[0], new GTileLayer(copyrightCollection , 0, 17),G_HYBRID_MAP.getTileLayers()[1]];
        h_tileLayers[1].getTileUrl = customGetTileURL;
        h_tileLayers[1].isPng = function() { return false; };
        h_tileLayers[1].getOpacity = function() { return opacity; };
        var h_customMap = new GMapType(h_tileLayers, new GMercatorProjection(h_tileLayers[0].maxResolution()+1), h_buttonText, {maxResolution:11, minResolution:0, errorMessage:"Data not available"});
        map = new GMap2(document.getElementById("map"),{mapTypes:[n_customMap, h_customMap]});
        GEvent.addListener(map,"click", function(overlay, latlng) { 
				if (latlng) {
					var demo = document.getElementById('demos');
					demo.innerHTML = 'County Info:<br>'; 
					getCountyInfo(latlng);
				}
		});
      	
		map.addControl(new GLargeMapControl());
		var mt = map.getMapTypes(); 
		  for (var i=0; i<mt.length; i++) { 
			mt[i].getMinimumResolution = function() {return 4;} 
			mt[i].getMaximumResolution = function() {return 11;} 
		 } 
		
        map.addControl(new GMapTypeControl());
        map.enableContinuousZoom();
        map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(centreLat, centreLon), initialZoomLevel, n_customMap);
		//geocoder = new GClientGeocoder();
	}
}
	
function getCountyInfo(center) {
	 map.clearOverlays();
	 var demo = document.getElementById('demos');
     demo.innerHTML = '<font class="style4">County Info:</font><br>'; 
     var searchUrl = 'genXML/vwbCoCode_genxml.php?lat=' + center.lat() + '&lng=' + center.lng();
	 //demos.innerHTML = searchUrl;
     GDownloadUrl(searchUrl, function(data) {
       var xml = GXml.parse(data);
		var demoDiv = document.getElementById('demos');
      	var demos = xml.documentElement.getElementsByTagName('demo');
       if (demos.length == 0) {
         demoDiv.innerHTML = 'No results found.';
         return;
       }
       for (var i = 0; i < demos.length; i++) {
         var coName = demos[i].getAttribute('name');
         var coState = demos[i].getAttribute('state');
         var coCode = demos[i].getAttribute('gid');
		 var demosEntry = createDemosEntry(coName, coState, coCode, center.lat(), center.lng(), i);
         demoDiv.appendChild(demosEntry);
		 var dLine = callDrawLine(coCode, i);
       }
     });
   }

	function callDrawLine(coCode, inColor){
     var searchUrl = 'genXML/vwbCoID_genxml.php?coCode=' + coCode;
     GDownloadUrl(searchUrl, function(data) {
       var xml = GXml.parse(data);
	   var demos = xml.documentElement.getElementsByTagName('demo');
       for (var i = 0; i < demos.length; i++) {
         var coID = parseFloat(demos[i].getAttribute('gid'));
		 var coLine = vwbAddLine(coID, inColor);
        }
     });	
		
	}
   function vwbAddLine(inID, inColor) {
	   //demoDiv.innerHTML = 'called';
		var searchUrl = 'vwbCo_genxml.php?inCode=' + inID;
		GDownloadUrl(searchUrl, function(data) {
		   var xml = GXml.parse(data);
		   var points = xml.documentElement.getElementsByTagName('cPoint');
		   var gpoint = new Array(0);
			  for (var i = 0; i < points.length; i++) {
				  gpoint[i]= new GLatLng(parseFloat(points[i].getAttribute('pLat')), parseFloat(points[i].getAttribute('pLon')));
			  }
			var polylineEncoder = new PolylineEncoder();
			if (inColor == 0) { 
	  			dColor="#CC0000";
	  		}else if (inColor == 1){ 
	  			dColor="#0000CC";
	   		} else{
				dColor="#33CC00";
			}
			polyline = polylineEncoder.dpEncodeToGPolyline(gpoint, dColor);
			map.addOverlay(polyline);
		});
	}
   
function createDemosEntry(coName, coState, coCode, cLat, cLon, inColor) {
	if (inColor == 0) { 
		dColor='#CC0000';
	}else if(inColor == 1){ 
		dColor='#0000CC';
	}else{
		dColor='#33CC00';
	}
	var div = document.createElement('div');
	var html = '<div style="border-color:' + dColor + '; border-width:2px; border-style:solid"><font color=blue><a href="../demos/CountySearch.php?coCode=' + coCode + '" target=_BLANK>' + coName + ', ' + coState + '</a></font><br><font size=-1>-Fair Market Rents<br>-Income Limits<br>-Demographics</font></div>';
      div.innerHTML = html;
      div.style.marginTop = '5px';
	  return div;
    }
	
function searchCenter() {
     var address = document.getElementById('addressInput').value;
     geocoder.getLatLng(address, function(latlng) {
       if (!latlng) {
         alert(address + ' not found');
       } else {
         map.setCenter(latlng, 9);
		 getCountyInfo(latlng);
		var marker = new GMarker(latlng);
		var html = 'Search Address:<br> ' + address;
		GEvent.addListener(marker, 'click', function() {
			marker.openInfoWindowHtml(html);
		 });
	   map.addOverlay(marker);
       }
     });
   }

	
	function changeLegend(){
		var theme = document.getElementById('theme').value;
		var mDetail = document.getElementById('mDetail').value;
		
		if (theme=='rentershare') {
			var html = '<table style="font-family:Arial, Helvetica, sans-serif" bgcolor="#EFEFEF"><tr><td class="scale_colour"><img src="legends/rs1.png" width="12" height="18" /></td><td>&lt; -10%</td></tr><tr><td class="scale_colour"><img src="legends/rs2.png" width="12" height="18" /></td><td>-10% to -5%</td></tr><tr><td class="scale_colour"><img src="legends/rs3.png" width="12" height="18" /></td><td>-5% to 0</td></tr><tr><td class="scale_colour"><img src="legends/rs4.png" width="12" height="18" /></td><td>0 to 5%</td></tr><tr><td class="scale_colour"><img src="legends/rs5.png" width="12" height="18" /></td><td>5% to 10%</td></tr><tr><td class="scale_colour"><img src="legends/rs6.png" width="12" height="18" /></td><td>10% to 20%</td></tr><tr><td class="scale_colour"><img src="legends/rs7.png" width="12" height="18" /></td><td>20% to 30%</td></tr><tr><td class="scale_colour"><img src="legends/rs8.png" width="12" height="18" /></td><td>&gt;30%</td></tr></table>';
		} else if (theme=='popgrowth') {
			var html = '<table style="font-family:Arial, Helvetica, sans-serif"  bgcolor="#EFEFEF"><tr><td class="scale_colour"><img src="legends/pg1.png" width="12" height="18" /></td><td>&lt; -10%</td></tr><tr><td class="scale_colour"><img src="legends/pg2.png" width="12" height="18" /></td><td>-10% to - 5%</td></tr><tr><td class="scale_colour"><img src="legends/pg3.png" width="12" height="18" /></td><td>-5% to 0%</td></tr><tr><td class="scale_colour"><img src="legends/pg4.png" width="12" height="18" /></td><td>0 to 5%</td></tr><tr><td  class="scale_colour"><img src="legends/pg5.png" width="12" height="18" /></td><td>5% to 10%</td></tr><tr><td class="scale_colour"><img src="legends/pg6.png" width="12" height="18" /></td><td>10% to 20%</td></tr><tr><td class="scale_colour"><img src="legends/pg7.png" width="12" height="18" /></td><td>20% to 30%</td></tr><tr><td class="scale_colour"><img src="legends/pg8.png" width="12" height="18" /></td><td>&gt; 30%</td></tr></table>';
		}  else if (theme=='hhgrowth') {
			var html = '<table style="font-family:Arial, Helvetica, sans-serif"  bgcolor="#EFEFEF"><tr><td class="scale_colour"><img src="legends/hg1.png" width="12" height="18" /></td><td>&lt;-10%</td></tr><tr><td class="scale_colour"><img src="legends/hg2.png" width="12" height="18" /></td><td>-10% to - 5%</td></tr><tr><td class="scale_colour"><img src="legends/hg3.png" width="12" height="18" /></td><td>-5% to 0 </td></tr><tr><td class="scale_colour"><img src="legends/hg4.png" width="12" height="18" /></td><td>0 to 5%</td></tr><tr><td class="scale_colour"><img src="legends/hg5.png" width="12" height="18" /></td><td>5% to 10%</td></tr><tr><td class="scale_colour"><img src="legends/hg6.png" width="12" height="18" /></td><td>10% to 20%</td></tr><tr><td class="scale_colour"><img src="legends/hg7.png" width="12" height="18" /></td><td>20% to 30%</td></tr><tr><td class="scale_colour"><img src="legends/hg8.png" width="12" height="18" /></td><td>&gt; 30%</td></tr></table>';
		} 
	else if (theme=='renter' & mDetail=='county'){
			var html ='<table style="font-family:Arial, Helvetica, sans-serif"  bgcolor="#EFEFEF"><tr><td class="scale_colour"><img src="legends/rent1.png" width="12" height="18" /></td><td>&lt;-500</td></tr><tr><td class="scale_colour"><img src="legends/rent2.png" width="12" height="18" /></td><td>-500 to 0</td></tr><tr><td class="scale_colour"><img src="legends/rent3.png" width="12" height="18" /></td><td>1 to 500</td></tr><tr><td class="scale_colour"><img src="legends/rent4.png" width="12" height="18" /></td><td>501 to 1,000</td></tr><tr><td class="scale_colour"><img src="legends/rent5.png" width="12" height="18" /></td><td>1,001 to 2,000</td></tr><tr><td class="scale_colour"><img src="legends/rent6.png" width="12" height="18" /></td><td>2,001 to 5,000</td></tr><tr><td class="scale_colour"><img src="legends/rent7.png" width="12" height="18" /></td><td>5,001 to 10,000</td></tr><tr><td class="scale_colour"><img src="legends/rent8.png" width="12" height="18" /></td><td>&gt;10,000</td></tr></table>';
	}
	else if (theme=='renter' & mDetail=='zip'){
			var html ='<table style="font-family:Arial, Helvetica, sans-serif"  bgcolor="#EFEFEF"><tr><td class="scale_colour"><img src="legends/rent1.png" width="12" height="18" /></td><td>&lt;-100</td></tr><tr><td class="scale_colour"><img src="legends/rent2.png" width="12" height="18" /></td><td>-100 to 0</td></tr><tr><td class="scale_colour"><img src="legends/rent3.png" width="12" height="18" /></td><td>1 to 100</td></tr><tr><td class="scale_colour"><img src="legends/rent4.png" width="12" height="18" /></td><td>101 to 250</td></tr><tr><td class="scale_colour"><img src="legends/rent5.png" width="12" height="18" /></td><td>251 to 500</td></tr><tr><td class="scale_colour"><img src="legends/rent6.png" width="12" height="18" /></td><td>501 to 750</td></tr><tr><td class="scale_colour"><img src="legends/rent7.png" width="12" height="18" /></td><td>751 to 1,000</td></tr><tr><td class="scale_colour"><img src="legends/rent8.png" width="12" height="18" /></td><td>&gt;1,000</td></tr></table>';		
	}else	{
			var html = '<table style="font-family:Arial, Helvetica, sans-serif"  bgcolor="#EFEFEF"><tr><td class="scale_colour"><img src="legends/hh1.png" width="12" height="18" /></td><td>&lt;-10%</td></tr><tr><td class="scale_colour"><img src="legends/hh2.png" width="12" height="18" /></td><td>-10% to - 5%</td></tr><tr><td class="scale_colour"><img src="legends/hh3.png" width="12" height="18" /></td><td>-5% to 0 </td></tr><tr><td class="scale_colour"><img src="legends/hh4.png" width="12" height="18" /></td><td>0 to 5%</td></tr><tr><td class="scale_colour"><img src="legends/hh5.png" width="12" height="18" /></td><td>5% to 10%</td></tr><tr><td class="scale_colour"><img src="legends/hh6.png" width="12" height="18" /></td><td>10% to 20%</td></tr><tr><td class="scale_colour"><img src="legends/hh7.png" width="12" height="18" /></td><td>20% to 30%</td></tr><tr><td class="scale_colour"><img src="legends/hh8.png" width="12" height="18" /></td><td>&gt; 30%</td></tr></table>';			
		}
		var legendDiv = document.getElementById('themeLegend');
		legendDiv.innerHTML = '';
	 	var div = document.createElement('div');
	    div.innerHTML = html;
		legendDiv.appendChild(div);
	}
	
function reLoad() {
      if (GBrowserIsCompatible()) {
		mCenter = map.getCenter();
		mZoom = map.getZoom();
        //resizeMapDiv();
        
        var copyrightCollection = new GCopyrightCollection("Demographic Data &copy;2008 ");
        copyrightCollection.addCopyright(
          new GCopyright("VWB",
          new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
          0,
          "<a href=\"http://www.vwbresearch.com\">VWB Research</a>")
        );
		copyrightCollection.addCopyright(
          new GCopyright("ESRI",
          new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
          0,
          "<a href=\"http://www.esri.com\">ESRI</a>")
        );
	
        //create a custom G_NORMAL_MAP layer
        var n_tileLayers = [ G_NORMAL_MAP.getTileLayers()[0], new GTileLayer(copyrightCollection , 0, 17)];
        n_tileLayers[1].getTileUrl = customGetTileURL;
        n_tileLayers[1].isPng = function() { return false; };
        n_tileLayers[1].getOpacity = function() { return opacity; };
        var n_customMap = new GMapType(n_tileLayers, new GMercatorProjection(n_tileLayers[0].maxResolution()+1), n_buttonText,
            {maxResolution:11, minResolution:0, errorMessage:"Data not available"});

            
        //create a custom G_HYBRID_MAP layer
        var h_tileLayers = [ G_HYBRID_MAP.getTileLayers()[0], new GTileLayer(copyrightCollection , 0, 17),G_HYBRID_MAP.getTileLayers()[1]];
        h_tileLayers[1].getTileUrl = customGetTileURL;
        h_tileLayers[1].isPng = function() { return false; };
        h_tileLayers[1].getOpacity = function() { return opacity; };
        var h_customMap = new GMapType(h_tileLayers, new GMercatorProjection(h_tileLayers[0].maxResolution()+1), h_buttonText,
            {maxResolution:11, minResolution:0, errorMessage:"Data not available"});

        //Now create the custom map. Would normally be G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP
        map = new GMap2(document.getElementById("map"),{mapTypes:[n_customMap, h_customMap]});
        var mt = map.getMapTypes(); 
		  for (var i=0; i<mt.length; i++) { 
			mt[i].getMinimumResolution = function() {return 4;} 
			mt[i].getMaximumResolution = function() {return 11;} 
		  } 
		map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.enableContinuousZoom();
        map.enableScrollWheelZoom();
        map.setCenter(mCenter, mZoom, n_customMap);
		geocoder = new GClientGeocoder();
		GEvent.addListener(map,"click", function(overlay, latlng) { 
							if (latlng) {
								var demo = document.getElementById('demos');
								demo.innerHTML = 'County Info:<br>'; 
								getCountyInfo(latlng);
							}});
      	}
		changeLegend();
      }