var points = [];
var markers = [];
var counter = 0;
var sidebar_html = "";
var marker_html = [];
var to_htmls = [];
var from_htmls = [];
var map = null;


    if (GBrowserIsCompatible()) {
      // Display the map, with some controls
      var map = new GMap(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(40.75604, -73.986941), 12);
   
      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var side_bar_html = "";
      var gmarkers = [];
      var htmls = [];
      var i = 0;

      
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }
      
      // A function to create the marker and set up the event window
      function createMarker(point,name,price,bedrooms,bathrooms,thumb,html) {
        var marker = new GMarker(point);
        
        
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html + '<div class="f_clear"><!--.--></div>');
        });
        
        
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
        
        // add a line to the side_bar html
        side_bar_html += '<li class="gmapSidebarItem" id="gmapSidebarItem_'+ i +'"><a href="javascript:myclick(' + i + ')">';

        // Do we need the image tag?
        if (thumb != null)
        {
        	// Yup, we have an image;
			side_bar_html += '<div class="img"><img src="/assets/users_images/resized/90x80/' + thumb + '" border="0" align="middle" /></div>';
        }

        // Rest of the info;
        side_bar_html += '<p class="title">' + name + '</p>' + price + bedrooms + bathrooms + '</a><div class="f_clear"><!--.--></div></li>';
        
        //sidebar_html += '<li class="gmapSidebarItem" id="gmapSidebarItem_'+ i +'"><a href="javascript:click_sidebar(' + i + ')">' + name + '</a></li>';
        i++;
        return marker;
      }

      
      // ================================================================
      // === Define the function thats going to process the JSON file ===
      process_it = function(doc) {
        // === Parse the JSON document === 
        var jsonData = eval('(' + doc + ')');
        
        // Data before the loop;
        side_bar_html += '<ul class="gmapSidebar">';
        
        // === Plot the markers ===
        for (var i=0; i<jsonData.markers.length; i++) {
          var point = new GLatLng(jsonData.markers[i].lat, jsonData.markers[i].lng);
          var marker = createMarker(point, jsonData.markers[i].label, jsonData.markers[i].price, jsonData.markers[i].bedrooms, jsonData.markers[i].bathrooms, jsonData.markers[i].thumb, jsonData.markers[i].html);
          map.addOverlay(marker);
        }
        
        // Data after the loop;
        side_bar_html += '</ul>';

        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("sidebar_map").innerHTML = side_bar_html;
        
		if (jsonData.lines)
    	{
	        // === Plot the polylines ===
	        for (var i=0; i<jsonData.lines.length; i++) {
	          var pts = [];
	          for (var j=0; j<jsonData.lines[i].points.length; j++) {
	            pts[j] = new GLatLng(jsonData.lines[i].points[j].lat, jsonData.lines[i].points[j].lng);
	          }
	          map.addOverlay(new GPolyline(pts, jsonData.lines[i].colour, jsonData.lines[i].width)); 
	        }
		}
      }          
      
      // ================================================================
      // === Fetch the JSON data file ====  
      if (typeof search_key == 'undefined')
      {
      	GDownloadUrl("/assets/json/json_data/latest.json", process_it);
      }
      else
      {  
      	GDownloadUrl("/assets/json/json_data/" + search_key + ".json", process_it);
      }
      // ================================================================

    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    //} // OnLoad()