// == Display stores declared by array StoreList on google map where div id=MapId
function StoreGoogleMap(Mapid, StoreList){
// == Instantiate a new map based on gmap function (which snags new map object/class instance from Gmap API 3)
	 var map = new gmap();
     map.init(Mapid);
     map.display(StoreList);
}
// === New Google Map class to display stores
function gmap() {    
    // == Array to hold marker for clusterer
    var markers = [];
    var map = null;   
    var bounds = null;

    // == gmaps-level var for the infowindows
    var infowindow = new google.maps.InfoWindow();
    
    // == Public methods
    this.init = init; // initialize a map
    this.display = display; // display list of stores
    this.showAddress = showAddress; 
    this.openStoreWindow = openStoreWindow;
    
    //   == Initialize new map
    function init(mapid){
        // == Short-circuit if not valid
        if (! mapid)
            return;
        var m = document.getElementById(mapid);   
        var options = {
                zoom: 4,
                panControl: true,
                //zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                overviewMapControl: true,
                    overviewMapControlOptions: {
                    opened: false
                }
                // == Options to change navigation controls style
                //navigationControlOptions: {
                //    style: google.maps.NavigationControlStyle.ZOOM_PAN
                //}
            };    
        map = new google.maps.Map(m, options);	
        bounds = new google.maps.LatLngBounds();                 
    }    
                     
    //  == Display stores on the map issue: can't get at lat/lng
    function display(stores){
        if (! map) return;
        if (stores){
            for(var i=0; i<stores.length; i++)
            {
                showAddress(stores[i]['lat'], stores[i]['lng'], stores[i]['buble'], i);
            }
            // == Options for the clusterer
            var mcOptions = {
            gridSize: 65, 
            maxZoom: 7    
            }; 
            // == Marker Clusterer Obj ~ looks to markercluster.js file               
            var markerCluster = new MarkerClusterer(map, markers, mcOptions); 
        }
    }  
                         
    // == Private method to display store address
    function showAddress(lat, lng, html, index) 
    {
        var point = new google.maps.LatLng(lat, lng);
        if (point){
            // == Determine the zoom level from the bounds and set it to 15         
            var listener = google.maps.event.addListener(map, "idle", function() { 
                if (map.getZoom() > 15) map.setZoom(15); 
                google.maps.event.removeListener(listener);
                var curr_zoom = map.getZoom(); 
            });
            bounds.extend(point); 
            createMarker(point, html, index);         
            // == Bounds get updated by show address loop
            map.fitBounds(bounds);
            map.setCenter(bounds.getCenter());
        }                   			
    } 
        
    function createMarker(point, html, index){                   
	    // == Set up matching marker points and shadow points	    	    
        var image = new google.maps.MarkerImage(RemoteImageServerURL + "/common/images/mapfiles/markers/marker" + (index+1) + ".png",
        new google.maps.Size(20, 32),
        new google.maps.Point(0,0),
        new google.maps.Point(0, 32));
        
        var shadow = new google.maps.MarkerImage("https://www.google.com/mapfiles/shadow50.png",
        new google.maps.Size(37, 32),
        new google.maps.Point(0,0),
        new google.maps.Point(0, 32));               
	                   
	    // == Auxilliary string var to handle infoWindow custom attributes/properties                
	    var contentString = '<div id="infoWindowTraits" class="bubble selfclear">' + html + '</div>';              
	                    
        var marker = new google.maps.Marker({ 
            shadow: shadow,
            position: point,
            icon: image,
            map: map
            });   
        google.maps.event.addListener(marker, 'click', function() {
            //infowindow.close();
            infowindow.setContent(contentString); 
            infowindow.open(map, marker);
            }); 
            
        // == Set marker into global level array for use by MarkerClusterer() obj             
        markers.push(marker);            
        return marker;
        map.setZoom(7);  
   }  
    // == Opens info Window
    function openStoreWindow(lat, lng, html, index) 
    {    
        var point = new google.maps.LatLng(lat, lng);
        if (point){       
            marker = createMarker(point, html, index);         
            map.fitBounds(bounds);
            map.setCenter(point);
             
        //var infowindow = new google.maps.InfoWindow()
            infowindow.setContent(html); 
            infowindow.open(map, marker);
            map.setZoom(15);       
        } 			
    }                                                 
}       //== END Gmap() class ==//
 
// == Opens a bubble on google map with store info
function OpenStoreBubleOnGoogleMap(Mapid, Lat, Lng, Html, Index)
{       
     var map = new gmap();
     map.init(Mapid);
     var point = new google.maps.LatLng(Lat, Lng);
     //map.showAddress(Lat, Lng, Html, Index);    
     map.openStoreWindow(Lat, Lng, Html, Index);
}

// ============== GOOGLE MAP DIRECTIONS ==================
function DisplayDirectionsToFrom(id, dir){
      var dirOptions = document.getElementById("DirectionsOptions" + id);
      var dirTo = document.getElementById("DirectionsTo" + id);
      var dirFrom = document.getElementById("DirectionsFrom" + id);
     
      if (dirOptions && dirTo && dirFrom){
            if (dir == "to"){
                  dirOptions.style.display = "none";                   
                  dirFrom.style.display = "none";
                  dirTo.style.display = "inline";
            }
            else if (dir == "from"){
                  dirOptions.style.display = "none";                   
                  dirTo.style.display = "none";
                  dirFrom.style.display = "inline";                    
            }                      
      }                
}    
function OpenGoogleDirections(startAddress, endAddress){         
      var openGoogle = true;
     
      if (startAddress == "" || startAddress == "undefined" || startAddress == null)      {
            alert("Please enter Start Address");
            openGoogle = false;
      }
     
      if (endAddress == "" || endAddress == "undefined" || endAddress == null)      {
            alert("Please enter End Address");
            openGoogle = false;
      }
     
      if (openGoogle){
            window.open("http://maps.google.com/maps?f=d&hl=en&saddr=" + startAddress + "&daddr=" + endAddress);
      }
} // ============== END OF DIRECTIONS SECTION ===========