$(document).ready(function() {       

var hidden_state_value = $('#hidden_state').attr('value');

function initialize() {
    var map = new google.maps.Map2(document.getElementById("map"));
   // map.addControl(new GLargeMapControl());
   // map.addControl(new GMapTypeControl());
    map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
    map.setUIToDefault();
    
    var bounds = new google.maps.LatLngBounds();
        
    var points = [];

    $.getJSON('./includes/school_by_state.php', {'school_state2':hidden_state_value}, function(points_a) {
   
            var points = points_a
	    var i = 0;
	    var markers = [];
	    var htmls = "";
	    var schoolinfo = "";
	    var school_info_array = [];
	    var school_info2_array = [];
	    var point_on_map = [];
	   
	    $(points).each(function() {
    
                 var school = this.school;  
                 var lat = this.lat;
                 var lng = this.lng
                 var address = this.school_addr;
                 var city = this.school_city;
                 var state = this.school_state;
                 var zip = this.school_zip;
                 var phone = this.school_phone; 
                 var the_webpage = this.our_webpage;
                 
                 if (the_webpage != '')  {
                         var our_webpage = "<a target='blank' href='" + the_webpage + "'>[More Info]</a>";
                 }
                 else { our_webpage = ''; }
                 
                 if (i>51) {i=i-52;} 
                 if (i < 52) {
                    if (i == 0) { htmls += "<br><b>Dark Blue Markers</b><br><br>"; }
                    if (i < 26) { var letter = String.fromCharCode("A".charCodeAt(0) + i); }
                    if (i >= 26) { var letter = String.fromCharCode("A".charCodeAt(0) + (i-26)); }
                    if (i == 26) { htmls += "<br><b>Light Blue Markers</b><br>"; } 

                    var myIcon = new GIcon(G_DEFAULT_ICON);
		    myIcon.sprite = {};
		    myIcon.sprite.image = "/test/map_markers/marker-sprite.png";
		    myIcon.sprite.top = i * 34;
			 
  	         }
                 
                 var point = new google.maps.LatLng(lat,lng);
                 point_on_map.push(point);
                 
                  // htmls will be displayed on the left side of the screen
                 htmls += "<b>" + letter + ". <a class='title' href = '#' name = '";
                 htmls += school + "' id = '" + i + "'>" + school + "</a></b><br>"; 
                 htmls += '<div class = "school_info">' + address + "<br>" + city + ",";
                 htmls += state + ' ' + zip + "<br>";
                 if (phone !== '') { htmls += phone + "<br>"; }
                 if (our_webpage != '') { htmls += our_webpage + "<br>"; }
                 htmls += '<br></div>';
                 
                 // schoolinfo2 will be displayed on the marker infowindow
                 schoolinfo2 =  '<div class = "school_info2" id ="' + i + '">' + address;
                 schoolinfo2 += "<br>" + city + "," + state + ' ' + zip + "<br>" + phone + "<br>" + our_webpage + '<br></div>';
                 school_info2_array.push(schoolinfo2);
                 
                 function createMarker (point, html){
                       var marker = new google.maps.Marker(point, {icon:myIcon});
                       google.maps.Event.addListener(marker, "click" , function() {
                                marker.openInfoWindowHtml(html);
                       });
                       return marker;
                 }
                                  
                 var marker = createMarker(point, '<u><b><p class ="schoolinfo2_school">' + school + '</p></b></u>' + schoolinfo2);
                 markers.push(marker);
                 bounds.extend(point);
                 map.addOverlay(marker);
                 i++;
    
           }); // closes points.each function
    
           $('#list').html(htmls);
                
           map.setZoom(map.getBoundsZoomLevel(bounds));
           map.setCenter(bounds.getCenter());
                  
           $('#list').click(function(e) {
              e.preventDefault();   
              var $target = $(e.target);
              if ($target.is('.title')) {
                    
       		   var id = $target.attr('id');
	           var school = $target.attr('name');
		   map.panTo(point_on_map[id]);
		   var infoHtml = '<p class ="schoolinfo2_school">' + school;
		   infoHtml += '</p><p class="schoolinfo2_info">' + school_info2_array[id] + '</p>';
                   markers[id].openInfoWindowHtml(infoHtml);  
	      }
                             
                                     
           }); 
    
   
     }); // getJson function

     } // function initialize
     google.setOnLoadCallback(initialize); 
       
});