var map         =   null;
var gmarkers = [];
var infowindow  = null;

function GetMap() {
    var mapOptions = {
        zoom: defaultZoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(defaultLng, defaultLat)
    };

    map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);

    var listener = google.maps.event.addListener(map, "idle", function () {
        if (map.getZoom() > defaultZoom) map.setZoom(defaultZoom);
        google.maps.event.removeListener(listener);
    });

    LoadMarker();
    $(".loader").hide();
}

function GetMapAutoComplete(point) {
    var mapOptions = {
        center: new google.maps.LatLng(defaultLng, defaultLat),
        zoom: defaultZoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('insertMapCanvas'), mapOptions);

    var input = document.getElementById('address');
    var autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.bindTo('bounds', map);

    if (!point.type) {
        var label = $("input[name='label']").val();
        var city = $("input[name='city']").val();

        var address = label + " (" + city + ")";
        CreateMarker(point, address);
        map.setCenter(point);
        map.setZoom(17);
    }

    infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        map: map
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        infowindow.close();
        var place = autocomplete.getPlace();

        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
        }

        marker.setIcon("/Design/Images/SiteImages/tent-icon.png");
        marker.setPosition(place.geometry.location);

        var address = '';
        if (place.address_components) {
            $("input[name='lat']").val(place.geometry.location.lat());
            $("input[name='lng']").val(place.geometry.location.lng());

            var label = GetLabel(place.address_components);
            var city = GetCity(place.address_components);

            $("input[name='label']").val(label);
            $("input[name='city']").val(city);

            address = label + " (" + city + ")";
        }

        infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
        infowindow.open(map, marker);
    });
}

function LoadMarker() {
    $.ajax({
        type: "POST",
        url: "/" + section + "/Camps/Markers",
        success: function (data) {
            var bounds = new google.maps.LatLngBounds();
            $(data).each(function (index, item) {
                var html = GetMarkerHTML(item, index);
                var point = new google.maps.LatLng(item.Lat, item.Lng);
                var marker = CreateMarker(point, html);

                gmarkers[index] = marker;

                bounds.extend(marker.position);
            });
            map.fitBounds(bounds);
        }
    });
}

function GetMarkerHTML(item, index) {
    var html = "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"infoWindow\"><tr>";
    var padding = "";
    if (item.AlbumUrl != "" && item.AlbumDefaultImage != "") {
        html += "<td><a href=\"" + item.AlbumUrl + "\"><img src=\"" + item.AlbumDefaultImage + "\"alt=\"\" /></a></td>";
        padding = "style=\"padding-top:10px\"";
    }
    html += "<td valign=\"top\" " + padding + ">" + item.Label + " ( " + item.City + " ) </strong><br />" + item.DateCamp + "</td></tr></table>";
    if (displayTools) {
        html += "<strong styme=\"display:block; margin:5px 0\"><a href=\"" + item.EditURL + "\">Editer</a> - <a href=\"javascript:DeleteAlert(" + item.ID + "," + index + ");\" class=\"js-delete\">Supprimer</a></strong>";
    }
    return html;
}

function GetLabel(addressComponent) {
    //administrative_area_level_1
    for (var i = 0; i < addressComponent.length; i++) {
        if (addressComponent[i].types[0] == "administrative_area_level_1") {
            return addressComponent[i].long_name;
        }
    }

    //administrative_area_level_2
    for (var i = 0; i < addressComponent.length; i++) {
        if (addressComponent[i].types[0] == "administrative_area_level_2") {
            return addressComponent[i].long_name;
        }
    }

    return GetCity(addressComponent);
}

function GetCity(addressComponent) {
    //locality
    for (var i = 0; i < addressComponent.length; i++) {
        if (addressComponent[i].types[0] == "locality") {
            return addressComponent[i].long_name;
        }
    }
}

function CreateMarker(point, html) {
    
    var marker = new google.maps.Marker({
        position: point,
        map: map,
        icon: "/Design/Images/SiteImages/tent-icon.png",
        html : html,
        animation: google.maps.Animation.DROP
    });

    infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', function () {
        if (infowindow) {
            infowindow.close();
        }

        infowindow.setContent(html);
        infowindow.open(map, this);
    });
    
    return marker;
}