var map = null;
var map2 = null;
var geocoder = null;
var markers = [];

function LoadCaptureMap() {

    if (GBrowserIsCompatible()) {
    
        var map = new GMap2(document.getElementById("CaptureCoords_MapCaptureCoords"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addMapType(G_PHYSICAL_MAP);
        map.setCenter(new GLatLng(51.45, -2.59), 14);
        //map.setMapType(G_SATELLITE_MAP);
        //map.setMapType(G_HYBRID_MAP);
        map.setMapType(G_PHYSICAL_MAP);

        GEvent.addListener(map, "click", function(overlay, latlng) {
            map.clearOverlays();

            if (latlng) {

                //var myHtml = "The GPoint value is: " + latlng + " at zoom level " + map.getZoom();
                //map.openInfoWindow(latlng, myHtml);

                document.getElementById("CaptureCoords_hdCapturedCoords").value = latlng

                //Another ICON approach
                // Create a base icon for all of our markers that specifies the
                // shadow, icon dimensions, etc.
                var customIcon = new GIcon(G_DEFAULT_ICON);
                customIcon.image = "css/images/SparrowIcon.png";
                customIcon.shadow = "css/images/SparrowIconShadow.png";
                customIcon.iconSize = new GSize(64, 65);
                customIcon.shadowSize = new GSize(64, 65);
                customIcon.iconAnchor = new GPoint(32, 65);
                customIcon.infoWindowAnchor = new GPoint(32, 32);

                //var customIcon = new GIcon(G_DEFAULT_ICON);
                //customIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";

                markerOptions = { icon: customIcon, draggable: false };

                var marker = new GMarker(latlng, markerOptions);

                //GEvent.addListener(marker, "dragstart", function() {
                //    map.closeInfoWindow();
                //});

                //GEvent.addListener(marker, "dragend", function() {
                //    marker.openInfoWindowHtml("Just bouncing along...");
                //});

                map.addOverlay(marker);


                //POP up window for sparrow spotting
                //marker.openInfoWindowHtml("This is where I spotted the house sparrow");
                //GEvent.addListener(marker, "click", function() {

                //GEvent.trigger(marker, "mouseout");
                //});

                //Also translate the coords into an address if we can

                geocoder = new GClientGeocoder();
                geocoder.getLocations(latlng, function(response) {

                    if (!response || response.Status.code != 200) {
                        alert("Status Code:" + response.Status.code);
                    } else {
                        place = response.Placemark[0];
                        document.getElementById("CaptureCoords_hdAddress").value = place.address
                    }
                });
            }
        });

        

    }
}

function LoadDisplayMap() {

    //GMAP 2
    map2 = new GMap2(document.getElementById("DisplayCoords_MapDisplayCoords"));
    map2.addControl(new GLargeMapControl());
    map2.addControl(new GMapTypeControl());
    map2.addMapType(G_PHYSICAL_MAP);
    map2.setCenter(new GLatLng(51.45, -2.59), 10);
    //map.setMapType(G_SATELLITE_MAP);
    //map.setMapType(G_HYBRID_MAP);
    map2.setMapType(G_PHYSICAL_MAP);

    //This function is generated from the Code behind page
    getRoutes()

    var bounds = new GLatLngBounds();
    for (var i = 0; i < markers.length; i++) {
        bounds.extend(markers[i].getLatLng());
    }

    //map2.setZoom(map2.getBoundsZoomLevel(bounds));
    //map2.setCenter(bounds.getCenter(), map2.getBoundsZoomLevel(bounds));
}

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


function createMarker(Lat, Long, html, markerCounter) {

    var customIcon = new GIcon(G_DEFAULT_ICON);
    customIcon.image = "css/images/SparrowIconSmall.png";
    customIcon.shadow = "css/images/SparrowIconShadowSmall.png";
    customIcon.iconSize = new GSize(32, 33);
    customIcon.shadowSize = new GSize(32, 33);
    customIcon.iconAnchor = new GPoint(16, 16);
    customIcon.infoWindowAnchor = new GPoint(16, 16);

    markerOptions = { icon: customIcon, draggable: false };

    //var marker = new GMarker(latlng, markerOptions);

    var markerColour = 'red';
    markers[markerCounter] = new GMarker(new GLatLng(Lat, Long), markerOptions)
    map2.addOverlay(markers[markerCounter]);


    //marker.setImage("css/images/marker_" + markerColour + ".png");
    //if (index == 0) { marker[index].setImage("css/images/marker_start.png"); }

    if (html != '') {
        GEvent.addListener(markers[markerCounter], "click", function() {
        markers[markerCounter].openInfoWindowHtml(html);
            GEvent.trigger(markers[markerCounter], "mouseout");
        });
    }

    GEvent.addListener(markers[markerCounter], 'mouseover', function() {
    markers[markerCounter].setImage("css/images/marker_on.png");
        //document.getElementById("RouteMapSideBar").getElementsByTagName("div")[index].style.background = "#035003";
        //document.getElementById("RouteMapSideBar").getElementsByTagName("div")[index].style.color = "white";
    });

    GEvent.addListener(markers[markerCounter], 'mouseout', function() {
    markers[markerCounter].setImage("css/images/marker_" + markerColour + ".png");
        //if (index == 0) { marker[index].setImage("css/images/marker_start.png"); }
        //document.getElementById("RouteMapSideBar").getElementsByTagName("div")[index].style.background = "white";
        //document.getElementById("RouteMapSideBar").getElementsByTagName("div")[index].style.color = "black";
    });

    GEvent.addListener(markers[markerCounter], "infowindowclose", function() {
        //map.removeOverlay(marker);
        //ZMarker(point, label, count(), 4, i, marker[i].visited);
    })

    //Now add Sidebar link
    //createSideBarLink(name, index, newRoute)
   
    var sidebar = "<div class='SparrowSightingDetails'";
    sidebar += "onclick='GEvent.trigger(markers[" + markerCounter + "],\"click\")' ";
    sidebar += "onmouseover='GEvent.trigger(markers[" + markerCounter + "],\"mouseover\")' ";
    sidebar += "onmouseout='GEvent.trigger(markers[" + markerCounter + "],\"mouseout\")' ";
    sidebar += ">";
    sidebar += html;
    sidebar += "</div>";

    if (markerCounter < 10) {
        document.getElementById("DisplayCoords_pnCoords").innerHTML = document.getElementById("DisplayCoords_pnCoords").innerHTML + sidebar;
    }
}

function createSideBarLink(text, index, newRoute) {

    if (newRoute != '') {
        sidebar += "<h3>" + newRoute + "</h3>";
        document.getElementById("pnSightings").innerHTML = sidebar;
    }

    sidebar += "<div class='sidebar'";
    sidebar += "onclick='GEvent.trigger(marker[" + index + "],\"click\")' ";
    sidebar += "onmouseover='GEvent.trigger(marker[" + index + "],\"mouseover\")' ";
    sidebar += "onmouseout='GEvent.trigger(marker[" + index + "],\"mouseout\")' ";
    //sidebar += "><img src='css/images/marker_on.png' height='15px' valign='middle'>&nbsp;";
    sidebar += ">";
    sidebar += text;
    sidebar += "</div>";
    document.getElementById("RouteMapSideBar").innerHTML = sidebar;
}