var map;
var geocoder;
var markers = new Array();
var polygons = new Array();
var infoInBallonnetjes = false;
var geocoder = null;

function load()
{
    if (GBrowserIsCompatible())
    {
        map = new GMap2(document.getElementById("map"));
        geocoder = new GClientGeocoder();
        
        // Hybrid knop weghalen, zoom en positie controls toevoegen
        map.removeMapType(G_HYBRID_MAP);
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        map.setMapType(G_SATELLITE_MAP);
        map.enableScrollWheelZoom();


        map.setCenter(new GLatLng(52.07188315954149, 5.108513832092285), 15);


        if (!infoInBallonnetjes)
        {
            GEvent.addListener(map, "click", function(overlay, location, overlaypoint)
            {
                if (overlay)
                {
                    if (overlay.meldingID)
                    {

                        window.location.href = '/Melding.aspx?id=' + overlay.meldingID;
                    }
                    else
                    {
                        var newMarker = makeNewEmptyMarker(overlaypoint, false);
                    }
                }
            });
        }
        else
        {
            GEvent.addListener(map, "click", function(overlay, location, overlaypoint)
            {
                if (overlay.meldingID)
                {
                    $.ajax({
                        type: "POST",
                        url: "/Meldingen.asmx/GetMelding",
                        data: "{'meldingID': '" + overlay.meldingID + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(melding)
                        {
                            var infotext = '<span style="font-size: 11px;"><div style="width: 300px;"><img src="/images/icons/stat' + melding.MeldingStatusID + '_type' + melding.MeldingTypeLetter + '.png" style="text-align: top;" />&nbsp;<strong>' + melding.Titel + '</strong> (Melding: ' + dateFormat(DateDeserialize(melding.DatumPlaatsing), 'dd-mm-yyyy') + ')</div><span style="color:#888;">' + melding.Omschrijving + '</span></span><br /><br />';



                            if (melding.MediaItems.length > 0)
                            {
                                infotext += '<div>';
                                for (var i = 0; i < melding.MediaItems.length; i++)
                                {
                                    var mediaItem = melding.MediaItems[i];
                                    infotext += '<a href="/ContentFiles/MeldingPlaatjes/' + mediaItem + '" onclick="window.open(this.href); return false;"><img src="/ContentFiles/MeldingPlaatjes/' + mediaItem + '" style="width: 70px; height: 55px; margin-right: 5px;" /></a>';
                                }
                                infotext += "</div>";
                            }


                            overlay.openInfoWindowHtml(infotext);
                        }
                    });


                }
            });

        }
    }
}



function showAddress(address)
{
    if (geocoder)
    {
        geocoder.getLatLng(
          address,
          function(point)
          {
              if (!point)
              {
                  alert(address + " not found");
              } else
              {
                  map.setCenter(point, 17);
                  var marker = new GMarker(point);
                  map.addOverlay(marker);
                  marker.openInfoWindowHtml(address);
              }
          }
        );
    }
}

var emptyMarkers = new Array();
function removeAllEmptyMarkers()
{
    for (var i = 0; i < emptyMarkers.length; i++)
    {
        map.removeOverlay(emptyMarkers[i]);
    }
}

function makeNewEmptyMarker(coords, underconstruction)
{
    removeAllEmptyMarkers();
    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.image = "/images/icons/stat0_type0.png";
    baseIcon.shadow = '';
    baseIcon.iconSize = new GSize(18, 18);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(8, 8);


    marker = new GMarker(coords, { draggable: true, icon: baseIcon });
    
    emptyMarkers.push(marker);


    map.addOverlay(marker);
    if (!underconstruction)
    {
        marker.openInfoWindowHtml("<a href=\"Melding.aspx?coords=" + coords + "\">Aanmaken</a> | <a href=\"#\" onclick=\"removeAllEmptyMarkers();\">Annuleren</a>");
    }
    return marker;
}

function makeNewMeldingMarker(melding)
{
    
    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.image = "/images/icons/stat" + melding.MeldingStatusID + "_type" + melding.MeldingTypeLetter + ".png";
    baseIcon.shadow = '';
    baseIcon.iconSize = new GSize(18, 18);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(8, 16);

    marker = new GMarker(new GLatLng(melding.Breedtegraad, melding.Lengtegraad), { draggable: true, icon: baseIcon });
    marker.meldingID = melding.MeldingID;
    GEvent.addListener(marker, "dragend", markerDragEnd);
    map.addOverlay(marker);
    
    markers.push(marker);
    
    return marker;
}



function markerDragEnd()
{
    $.ajax({
        type: "POST",
        url: "/Meldingen.asmx/ChangeMeldingPositie",
        data: "{'meldingID': '" + marker.meldingID + "', 'breedtegraad' : '" + marker.getPoint().lat() + "', 'lengtegraad': '" + marker.getPoint().lng() + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(meldingen)
        {
            
        }
    });
}

var breedtegraadHdn;
var lengtegraadHdn;

function getPointFromHiddenFields()
{
    return new GLatLng(breedtegraadHdn.attr('value'), lengtegraadHdn.attr('value'))
}

function newMarkerDragEnd()
{
    breedtegraadHdn.attr('value', marker.getPoint().lat());
    lengtegraadHdn.attr('value', marker.getPoint().lng());
}