$(document).ready(function() {       

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

function initialize() {
    var latlng = new google.maps.LatLng(37.4419, -122.1419);
    var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    
    var bounds = new google.maps.LatLngBounds();
        
    var points = [];
    var infowindow = new google.maps.InfoWindow({maxWidth:'300'});

    $.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 pixOffset = i*34;   
		 var myIcon = new google.maps.MarkerImage('http://truckingtruth.com/test/map_markers/marker-sprite.png', new google.maps.Size(20,34), new google.maps.Point(0,pixOffset));
			 
  	         }
                 
                 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({
                                         position: point,
                                         map: map,
                                         icon: myIcon});
                                                                     
                       google.maps.event.addListener(marker, 'click' , function() {
                                infowindow.close();
                                infowindow.setContent(html);
                                infowindow.open(map, marker);
                       });
                       return marker;
                 }
                                  
                 var marker = createMarker(point, '<div class="infowindowdiv"><u><b><p class ="schoolinfo2_school">' + school + '</p></b></u>' + schoolinfo2 + "</div>");
                 markers.push(marker);
                 bounds.extend(point);
                 marker.setMap(map);
                 i++;
    
           }); // closes points.each function
    
           $('#list').html(htmls);
                
           map.setCenter(bounds.getCenter());
           map.fitBounds(bounds);    
              
           $('#list').click(function(e) {

              var $target = $(e.target);
              if ($target.is('.title')) {
                   e.preventDefault(); 
                   infowindow.close();
       		   var id = $target.attr('id');
	           var school = $target.attr('name');
		   map.panTo(point_on_map[id]);
		   var infoHtml = '<div class="infowindowdiv"><p class ="schoolinfo2_school">' + school;
		   infoHtml += '</p><p class="schoolinfo2_info">' + school_info2_array[id] + '</p></div>';
                   infowindow.setContent(infoHtml);
                   infowindow.open(map, markers[id]);
	      }
                             
                                     
           }); 
    
   
     }); // getJson function

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