// Global variables
var map;

// web-page elements
var mapdiv = document.getElementById("map");
var report= document.getElementById("status");

// markers
var gmarker;	// namespace
gmarker={};
gmarker.shadow= "images/yellow_shadow.png";
gmarker.image = "images/yellow_box.png";
gmarker.defaults={};
gmarker.defaults.icon={};
gmarker.defaults.icon.make=function () { 
	var icon = new GIcon();
	icon.image = gmarker.image;
	icon.shadow= gmarker.shadow;
	icon.iconSize = new GSize(8, 8);
	icon.shadowSize = new GSize(8, 8);
	icon.iconAnchor = new GPoint(4, 4);
	icon.infoWindowAnchor = new GPoint(5, 1);
	return icon;
}
gmarker.defaults.marker={};
gmarker.defaults.marker.icon=gmarker.defaults.icon.make();
gmarker.defaults.marker.properties={icon:gmarker.defaults.marker.icon, draggable:true, bouncy:false, dragCrossMove:true};

gmarker.newMarker=function( point ) {

    // Make markers draggable
    var marker = new GMarker(point, gmarker.defaults.marker.properties);
    map.addOverlay(marker);

    marker.tooltip = "Drag";  // Used to show lat long of that point, see `showTooltip'

    return marker;
}

gmarker.newExtentsMarker = function( point ) {

    var extentsIcon = new GIcon();
    extentsIcon.image = "images/grey_box.png";
    extentsIcon.shadow = "images/grey_box.png";
    extentsIcon.iconSize = new GSize(6,6);
    extentsIcon.shadowSize = new GSize(6,6);
    extentsIcon.iconAnchor = new GPoint(3,3);
    extentsIcon.infoWindowAnchor = new GPoint(4, 1);
    var marker = new GMarker(point, {icon:extentsIcon, draggable:false});

    // Add tooltip
    marker.tooltip = point.lat() + " N, " + point.lng() + " E";

    // Add listeners
    GEvent.addListener(marker, "mouseover", function() {
        showTooltip(marker);
    });
  
    GEvent.addListener(marker, "mouseout", function() {
        tooltip.style.display = "none";
    });
    return marker;
}

// note, there are equivalent functions defined in the regionCorner namespace:
// **************************************************************************
gmarker.addMarkerEventListeners=function(marker) {
    GEvent.addListener(marker, "mouseover", function() {
        showTooltip(marker);
    });
  
    GEvent.addListener(marker, "mouseout", function() {
        tooltip.style.display = "none";
    });

    // Drag listener
    GEvent.addListener(marker, "drag", function() {
        tooltip.style.display= "none";
        moveMarker(marker);
    });
}
gmarker.move=function moveMarker(marker) {
	var point=marker.getLatLng();
	report.clear();
	report.say( "Lat: "+point.y+" Lng: "+point.x );
}

// ************************************************
// DOWNLOADED CODE:
// ************************************************

var tooltip;

// polygon properties
var lineColor = "#0000ff";
var fillColor = "#335599";
var lineWeight = 1;
var lineOpacity = .8;
var fillOpacity = .3;

//
// showTooltip
//
// shows Latitude and longitude of the marker
//

function showTooltip(marker) { // Display tooltips

    tooltip.innerHTML = marker.tooltip;
    tooltip.style.display = "block";
 
    // Tooltip transparency specially for IE
    if(typeof(tooltip.style.filter) == "string") {
        tooltip.style.filter = "alpha(opacity:50)";
    }

    var currtype = map.getCurrentMapType().getProjection();
    var point= currtype.fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
    var offset= currtype.fromLatLngToPixel(marker.getLatLng(),map.getZoom());
    var anchor = marker.getIcon().iconAnchor;
    var width = marker.getIcon().iconSize.width + 6;
    // var height = tooltip.clientHeight +18;
    var height = 10;
    var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y - height)); 
    pos.apply(tooltip);
}

function buildMap() {

    map = new GMap2(mapdiv, {draggableCursor:"auto", draggingCursor:"move"});

    // Add a div element for toolips
    tooltip = document.createElement("div");
    tooltip.className="tooltip";
    map.getPane(G_MAP_MARKER_PANE).appendChild(tooltip);

    // Load initial map and a bunch of controls
    map.setCenter(new GLatLng(-25.0,135.0), 3);
//    map.addControl(new GSmallMapControl()); // Zoom control
    map.addControl(new GLargeMapControl()); // Zoom control
    map.addControl(new GOverviewMapControl());
    // Force the initial map to be terrain
    map.addMapType(G_PHYSICAL_MAP);
    map.setMapType(G_PHYSICAL_MAP);
 
    // Create a hierarchical map type control
    var hierarchy = new GHierarchicalMapTypeControl();
    // make Hybrid the Satellite default
    hierarchy.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", true);
    // add the control to the map
    map.addControl(hierarchy);

    map.addControl(new GScaleControl()); // Scale bar
    map.disableDoubleClickZoom();

    // Add click listener
    GEvent.addListener(map, "click", mapLeftClick); // see region.js for this function 

    // When zooming, remain centered on the selected region (if any)
    GEvent.addListener(map, "zoomend", mapCenterRegion); 

    // These two listeners are only required is extents_trapezium_easthemi.js is used.
    //GEvent.addListener(map, "moveend", updateProductExtents); // see aggregator.js for this function 
    //GEvent.addListener(map, "dragend", updateProductExtents); // see aggregator.js for this function 

}

mapCenterRegion = function () {
	var currentCenter, newCenter;	// GLatLng
	var regionCenter;	// 2-element array containing floats or nulls.
	regionCenter=region.getCenter();
	currentCenter=map.getCenter();
	var newLat, newLon;
	if ( regionCenter[0]=="" ) { newLat=currentCenter.lat() } else { newLat=regionCenter[0] } 
	if ( regionCenter[1]=="" ) { newLon=currentCenter.lng() } else { newLon=regionCenter[1] } 
	newCenter=new GLatLng( newLat, newLon );
	map.setCenter( newCenter );
}