//<![CDATA[

// Global variables
var mapdiv = document.getElementById("map");
var map;
var poly;
var count = 0;
var points = new Array();
var markers = new Array();
var icon_url ="http://serracapriola.net/accessori08/immagini/";
var tooltip;
var lineColor = "#0000af";
var fillColor = "#335599";
var lineWeight = 3;
var lineOpacity = .8;
var fillOpacity = .2;
var report= document.getElementById("status");


function addIcon(icon) { // Add icon attributes

 icon.shadow= icon_url + "mm_20_shadow.png";
 icon.iconSize = new GSize(12, 20);
 icon.shadowSize = new GSize(22, 20);
 icon.iconAnchor = new GPoint(6, 20);
 icon.infoWindowAnchor = new GPoint(5, 1);
}


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:70)";
 }

 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(41.80461397994342, 15.15889048576355), 16);
 map.enableScrollWheelZoom();
        map.addControl(new GSmallMapControl());
        map.addControl(new DragZoomControl()); map.addControl(new GScaleControl()); 
 map.addMapType(G_PHYSICAL_MAP);
// map.addMapType(G_SATELLITE_3D_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();
 map.setMapType(G_HYBRID_MAP);
 // Add click listener
 GEvent.addListener(map, "click", leftClick);
 }
 


function leftClick(overlay, point) {

 if(point) {
  count++;
 if(count%2 != 0) {
  var icon = new GIcon();
  icon.image = icon_url + "lightblue.png";
  addIcon(icon);
 }
  else {
   var icon = new GIcon();
  icon.image = icon_url +"mm_20_purple.png";
  addIcon(icon);
 }

  // Make markers draggable
  var marker = new GMarker(point, {icon:icon, draggable:true, bouncy:false, dragCrossMove:true});
  map.addOverlay(marker);
  marker.content = count;
  markers.push(marker);
  marker.tooltip = "Punto "+ count;

  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";
   drawOverlay();
  });

  // Second click listener
  GEvent.addListener(marker, "click", function() {
   tooltip.style.display = "none";

  // Find out which marker to remove
  for(var n = 0; n < markers.length; n++) {
   if(markers[n] == marker) {
    map.removeOverlay(markers[n]);
    break;
   }
  }

  // Shorten array of markers and adjust counter
  markers.splice(n, 1);
  if(markers.length == 0) {
    count = 0;
  }
   else {
    count = markers[markers.length-1].content;
    drawOverlay();
  }
  });
 drawOverlay();
 }
}


function toggleMode() {
 if(markers.length > 1) drawOverlay();
}


function drawOverlay(){

 // Check radio button
 var lineMode = document.forms["f"].elements["mode"][0].checked;

 if(poly) { map.removeOverlay(poly); }
 points.length = 0;

 for(i = 0; i < markers.length; i++) {
  points.push(markers[i].getLatLng());
 }
 if(lineMode) {
   // Polyline mode
   poly = new GPolyline(points, lineColor, lineWeight, lineOpacity);
   var length = poly.getLength()/1000;
   var unit = " km";
   report.innerHTML = "Lunghezza della poligonale: " + length.toFixed(3) + unit;
  }
  else {
   // Polygon mode
   points.push(markers[0].getLatLng());
   poly = new GPolygon(points, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity);
   var area = poly.getArea()/(1000*1000);
   var unit = " km&sup2;";
   report.innerHTML = "Area del poligono: " + area.toFixed(3) + unit;
  }
  map.addOverlay(poly);
}


function clearMap() {
 // Clear current map and reset arrays
 map.clearOverlays();
 points.length = 0;
 markers.length = 0;
 count = 0;
 report.innerHTML = "&nbsp;";
 
}
//]]>