$(function(){
    // Google Map API V3
    var geo = new google.maps.Geocoder();
    
    var stylesArray = [{
    	featureType: 'water',
        elementType: 'geometry',
        stylers: [
         	{hue: '#167a80'},
          	{lightness: 0},
          	{saturation: 0}
        ]
    }];
    
    function showMap(data){
    	
    	var prop = data[0] || data;
    	
        var loc = new google.maps.LatLng(prop.Property.lat, prop.Property.long);
        
        var address = prop.Property.address+', '+prop.Property.city+', '+prop.Property.state+', '+prop.Property.zipcode;
        
        var propertyMapOptions = {
            zoom: 12,
            center: loc,
            streetViewControl: false,
            zoomControl: false,
            zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            scrollwheel: false,
            styles: stylesArray
        };
    
        var propertyMap = new google.maps.Map(document.getElementById("featured-map"), propertyMapOptions);
        
        // Use the featured address as the focal point and set a marker for it
        geo.geocode({ 'address': address }, function(results, status){
        
            if(status == google.maps.GeocoderStatus.OK){
                propertyMap.setCenter(results[0].geometry.location);
                      
                var icon = new google.maps.MarkerImage('/img/theme/mapicon-featured.png',
                    new google.maps.Size(80, 70),
                    new google.maps.Point(0, 0), // point
                    new google.maps.Point(24, 70) // anchor
                );
                var shadow = new google.maps.MarkerImage('/img/theme/mapicon-shadow.png',
                    new google.maps.Size(68, 47),
                    new google.maps.Point(0, 0),
                    new google.maps.Point(13, 42)
                );
                 
                var marker = new google.maps.Marker({
                    position: loc,
                    map: propertyMap,
                    visible: true,
                    title: address,
                    icon: icon,
                    shadow: shadow
                });         
            }
            
        });
        
        // Add the rest of the property markers
        for(i = 1; i < data.length; i++){
            
            var point = new google.maps.LatLng(data[i].Property.lat, data[i].Property.long);
            
            var icon = new google.maps.MarkerImage((data[i].Property.featured == '1') ? '/img/theme/mapicon-featured.png' : '/img/theme/mapicon.png',
                new google.maps.Size(80, 70),
                new google.maps.Point(0, 0), // point
                new google.maps.Point(24, 70) // anchor
            );
            var shadow = new google.maps.MarkerImage('/img/theme/mapicon-shadow.png',
                new google.maps.Size(68, 47),
                new google.maps.Point(0, 0),
                new google.maps.Point(13, 42)
            );
            
            new google.maps.Marker({
                position: point,
                map: propertyMap,
                visible: true,
                icon: icon,
                shadow: shadow
            });
            
        } 
       
    }
    
    $.getJSON('/properties/mapdata/featured', function(r){ showMap(r); });
    
});