$(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);
    
    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 < 26) {
                    if (i == 0) { htmls += "<br><b>Dark Blue Markers</b><br><br>"; }
                    var letter = String.fromCharCode("A".charCodeAt(0) + i);
                    var myIcon = new GIcon(G_DEFAULT_ICON, "http://www.truckingtruth.com/test/map_markers/blue_Marker" + letter + ".png");
                 }
                 else {
                    i = i - 26;
                    if (i == 0) { htmls += "<br><b>Light Blue Markers</b><br>"; }
                    var letter = String.fromCharCode("A".charCodeAt(0) + i);
                    var myIcon = new GIcon(G_DEFAULT_ICON, "http://www.truckingtruth.com/test/map_markers/paleblue_Marker" + letter + ".png");
                    i = i + 26;
                 }
 
                 var point = new google.maps.LatLng(lat,lng);
                 point_on_map.push(point);
                  // schoolinfo will be displayed on the left side of the screen
                 schoolinfo = '<div class = "school_info" id = "school_info">' + address + "<br>" + city + "," + state + ' ' + zip + "<br>" + phone + "<br>" + our_webpage + '</div>';
                 // schoolinfo2 will be displayed on the marker infowindow
                 schoolinfo2 = '<div id = "school_info2" class = "school_info2" id ="' + i + '">' + address + "<br>" + city + "," + state + ' ' + zip + "<br>" + phone + "<br>" + our_webpage + '</div>';
                 school_info_array.push(schoolinfo);
                 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;
                 
                 }
                                  
                
                 
                 htmls +=  "<b>" + letter + ". <a class='title' href = '' name = '" + school + "' id = '" + i + "'>" + school + "</a></b><br>"; 
                 
                 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
    
                
           map.setZoom(map.getBoundsZoomLevel(bounds));
           map.setCenter(bounds.getCenter());
                  
           $('#list').html(htmls);
           
           $('#list a').each(function() {
                  var this_link = $(this);
                  var id = this.id;
                  $(school_info_array[id]).insertAfter(this_link);
                             
                             
           });
                 
           $('.title').click(function(event) {
                 
              event.preventDefault();  
              var id = this.id;
              var school = this.name;
              map.panTo(point_on_map[id]);
              markers[id].openInfoWindowHtml('<p class ="schoolinfo2_school">' + school + '</p><p class="schoolinfo2_info">' + school_info2_array[id] + '</p>');
                             
                                     
          }); 
    
   
     }); // getJson function
  
     } // function initialize
     google.setOnLoadCallback(initialize); 
       
});