var geocoder, map, infowindow;
  var jsonCache = new Array();
/*  var jsonArray = new Array();
      jsonArray['firsttab'] = 'seattle-olympia.json';
      jsonArray['secondtab'] = 'moses-lake.json';
      jsonArray['thirdtab'] = 'oregon.json';
      */
 var jsonPath = 'maps-markers-jsons/';
  function loadMarkersData(jsonUrl, id) {
	  jsonUrl = jsonPath + jsonUrl;
	  $.getJSON(jsonUrl, {},function(jsonData){
		  jsonCache[id] = jsonData;
		  initialize(jsonData)
	  });
  }
  function initialize(jsonData) {
    geocoder = new google.maps.Geocoder();
    infowindow = new google.maps.InfoWindow();
    var myOptions = {
      zoom: 9,
     // disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var markers = jsonData.markers;
    for(var i=0;i<markers.length;i++) {
    var communityImage = '<br/>';
    if(markers[i].image!='') {
    	communityImage = '<img width="122" height="65" src="imgsize.php?w=122&h=65&img=cms/cimage/' + markers[i].image + '"/>';
    }
    var infoHtml = '<span>' + markers[i].title + '</span><br/>'+ communityImage +'<br/>';
    infoHtml = infoHtml + '<span>' + markers[i].type + '</span><br/><span>' + markers[i].address_1 + '</span><br/>';
    infoHtml = infoHtml + '<span>' + markers[i].address_2 + '</span><br/><span>' + markers[i].price + '</span>';
    infoHtml = infoHtml + '<div id="seemore"><a href="'+ markers[i].link +'">See More >></a></div>';
    codeAddress(markers[i].map_address, i+1, infoHtml);
    }
  }
 
  function codeAddress(address, icon, infoHtml) {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            icon: "images/marker" + icon + ".png",
            position: results[0].geometry.location
        });
         google.maps.event.addListener(marker, 'click', function() {
	     infowindow.setContent('<div><div id="infobox">'+ infoHtml +'</div></div>'); 
	     infowindow.open(map, marker);
	  });
      } else {
        //alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
  
  function changeMap(id) {
	  $('#sidenav div').each(function() {
		  if($(this).hasClass('changebg')){
			  $(this).removeClass('changebg');  
		  }
	  });
	  $('#'+id).addClass('changebg');
	  if(typeof jsonCache[id]!='undefined') {
		  initialize(jsonCache[id]);
	  }
	  else {
		  loadMarkersData(id+".json",id);
 	 }
  }