Excursion = function() {
};

Excursion.prototype.id;
Excursion.prototype.marker;
Excursion.prototype.labelUrl;
Excursion.prototype.type;
Excursion.prototype.title;
Excursion.prototype.subtitle;
Excursion.prototype.latitude;
Excursion.prototype.longitude;
Excursion.prototype.image;
Excursion.prototype.imageWidth;
Excursion.prototype.imageHeight;

function createMenuItem(name, markers) {
  var menuItem = document.createElement("div");
  var checkbox = document.createElement("input");
  checkbox.setAttribute('type', 'checkBox');
  checkbox.defaultChecked = true;
  menuItem.appendChild(checkbox);
  menuItem.appendChild(document.createTextNode(name));

  GEvent.addDomListener(checkbox, "click", function() {
    if (checkbox.checked) {
      for (var i = 0; i < markers.length; i++) {
        map.addOverlay(markers[i]);
      }
    } else {
      for (var i = 0; i < markers.length; i++) {
        map.removeOverlay(markers[i]);
      }
    }
  });
  return menuItem;
}

function MenuControl() {
}

MenuControl.prototype = new GControl();
MenuControl.prototype.initialize = function(map) {
  var menu = document.createElement("div");
  menu.innerHTML = "<iframe frameborder='0' width='100%' height='100%' style='position: absolute; top: 0; left: 0; border: 0; background-color: white'></iframe>";

  var items = document.createElement("div");
  items.setAttribute('id', 'mapsMenu');
  items.className = 'mapsMenu';
  items.setAttribute('style', 'position: relative'); 
//  items.appendChild(createMenuItem('Noms', labels));
  items.appendChild(createMenuItem('Fotos', panoramioPhotos));
  items.appendChild(createMenuItem('Ressenya', ressenyaKml));
  items.appendChild(createMenuItem('Refugis', refugiKml));
  menu.appendChild(items);

  map.getContainer().appendChild(menu);
  return menu;
}

MenuControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 32));
}

function OpenCloseMenuControl() {
}

OpenCloseMenuControl.prototype = new GControl();
OpenCloseMenuControl.prototype.initialize = function(map) {
  this.control = document.createElement("div");
  this.control.title = 'Obrir/tancar menu';
  this.control.innerHTML = "<iframe frameborder='0' width='100%' height='100%' style='position: absolute; top: 0; left: 0; border: 0; background-color: white'></iframe>";
  var container = document.createElement("div");
  container.setAttribute('id', 'mapsMenuControl');
  container.className = 'mapsMenuControl';
  container.setAttribute('style', 'position: relative');
  this.image = document.createElement("img");
  this.image.setAttribute('src', 'imgs/markers/menuDown.gif');
  container.appendChild(this.image);
  this.control.appendChild(container);

  var obj = this;
  GEvent.addDomListener(this.control, "click", function() {
	obj.changeState();
  });

  map.getContainer().appendChild(this.control);
  return this.control;
}

OpenCloseMenuControl.prototype.changeState = function() {
  var menu = document.getElementById('mapsMenu');
  if (menu.style.display) {
    this.open();	 
  } else{
	  this.close();
  }
}

OpenCloseMenuControl.prototype.open = function() {
  var menu = document.getElementById('mapsMenu');
  menu.style.display = '';
  this.image.setAttribute('src', 'imgs/markers/menuUp.gif');
}

OpenCloseMenuControl.prototype.close = function() {
  var menu = document.getElementById('mapsMenu');
  menu.style.display = 'none';
  this.image.setAttribute('src', 'imgs/markers/menuDown.gif');
}

OpenCloseMenuControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}

function ImageControl() {
}

ImageControl.prototype = new GControl();
ImageControl.prototype.initialize = function(map) {
  map.getContainer().appendChild(this.contents);
  return this.contents;
}

ImageControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

var MarkerFrontImages = {
  RED: "http://maps.gstatic.com/intl/ca_ALL/mapfiles/marker.png",
  GREEN: "/imgs/markers/mgreen.png"
};

var map;
function loadExcursions(excursions, forPrint) {
  if (GBrowserIsCompatible()) {
    loadSimpleMap(forPrint);          
    var bounds = new GLatLngBounds();
    for (var i=0; i < excursions.length; i++) {
      var point = new GLatLng(excursions[i].latitude, excursions[i].longitude);
      var mlabel = {"url":excursions[i].labelUrl,
                 "anchor":new GPoint(2,2),
                 "size":new GSize(16,16)};
      var icon = new GIcon(G_DEFAULT_ICON);
      icon.image = excursions[i].marker;
      var marker = new GMarker(point, {title: excursions[i].title, labelText: i+1, icon: icon});
      marker.getIcon().label = mlabel;
      var excursionId = excursions[i].id;
      var html = '';
      if (excursions[i].image != null) {
       html = '<img style="float:left; margin-right:1ex; border:1px solid black;width:'+excursions[i].imageWidth+'px;height:'+excursions[i].imageHeight+'px" src="reduced/'+excursions[i].image+'?maxWidth=150&maxHeight=150"/>';
      }
      marker.bindInfoWindow('<div style="margin-right:1ex">'+html+"<b>"+excursions[i].title+"</b><br/><i style='font-size: 83%'>"+excursions[i].subtitle+"</i><br/><br/>"+excursions[i].type+"<br/><a href='show.action?excursionId="+excursionId+"'>Veure la ressenya</a></div>");
      map.addOverlay(marker);
      GEvent.addListener(marker, "dblclick", function() {
        document.location = "show.action?excursionId="+excursionId;
      });
      bounds.extend(point);
    }
    if (excursions.length > 0) {
      establishMapOrigin(bounds);
    }
    map.setMapType(!forPrint ? G_HYBRID_MAP : G_PHYSICAL_MAP);
  }
}

var panoramioPhotos = new Array();
var imageControl = new ImageControl();
function addPhotos(photosData) {
  var photos = photosData.photos;
  var icon = new GIcon();
  icon.image = "imgs/markers/panoramio.gif";
  icon.iconSize = new GSize(16, 16);
  icon.shadowSize = new GSize(0, 0);
  icon.iconAnchor = new GPoint(8, 8);
  icon.infoWindowAnchor = new GPoint(8, 0);

  for (var i = 0; i < photos.length; i++)
  {
    var marker = new GMarker(new GLatLng(photos[i].latitude, photos[i].longitude), {icon : icon, title : photos[i].photo_title});
    marker.photo = photos[i];
    map.addOverlay(marker, icon);
    panoramioPhotos.push(marker);
  }

  GEvent.addListener(map, "click", function(overlay, point) {
    if (!overlay || !overlay.photo)
    return;
    
    var p = overlay.photo;
    
    // if photo_title is too long, cut it.
    if (p.photo_title.length > 33) {
      p.photo_title = p.photo_title.substring(0, 33) + "&#8230;";
    }
  
    var container = document.createElement('div');
    container.setAttribute('id', 'panoramioPhoto');
    container.setAttribute('style', 'width: 100%; height: 100%; margin: auto auto; text-align: center; vertical-align: middle; position: absolute; top: 0; left: 0');

    container.innerHTML =
      "<div style='position: relative; background-color: white; margin: auto auto; width: " + (p.width + 26) +"px; text-align: left;'>" + 
      "<iframe width='100%' height='100%' style='position: absolute; top: 0; left: 0; border: 0; margin: auto auto; background-color: white'></iframe>" +
      "<div style='position: relative; padding: 6px; border: 2px solid black;'>" +
      "<div style='position: relative; float: right; cursor: pointer' onclick='map.removeControl(imageControl)'><img src='imgs/markers/close.gif' width='12' height='12' alt=''/></div>" +
      "<a href='http://www.panoramio.com/' target='_blank'><img src='http://www.panoramio.com/img/logo-small.gif' width='119px' height='25px' alt='Panoramio logo' style='border: 0'/></a>" +
      "<br/><a id='photo_infowin' target='_blank' href='" + p.photo_url + "' style='border: 2px solid black'>" +
      "<img width='" + p.width + "' height='" + p.height + "' src='" + p.photo_file_url + "' style='border: 3px solid white; display: block'/></a>" +
      "<div style='font-size: 85%; overflow: hidden; padding: 2px 0; text-align: left'>" +
      "<a target='_blank' class='photo_title' href='" + p.photo_url +
      "'><strong>" + p.photo_title + "</strong></a><br/>" +
      "Enviat per <a target='_blank' href='" + p.owner_url + "'>" +
      p.owner_name + "</a></div>" +
      "</div></div>";
  
    map.removeControl(imageControl);
    imageControl.contents = container;
    map.addControl(imageControl);
  });
}

var refugiKml = new Array();
var ressenyaKml = new Array();
function loadKml(url, refugisUrl, controls, forPrint) {
  if (GBrowserIsCompatible()) {
    if (!map) map = new GMap2(document.getElementById('map'));
    map.setCenter(new GLatLng(0, 0), 1);
    if (controls) {
      map.addControl(new GLargeMapControl());
      map.addMapType(G_PHYSICAL_MAP);
      map.addMapType(G_SATELLITE_3D_MAP);

      var hierCtrl = new GHierarchicalMapTypeControl();
      hierCtrl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, null, true);
      map.addControl(hierCtrl, new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(32, 7)));
    } else {
      map.addControl(new GSmallMapControl());
    }
    var menuControl = new MenuControl();
    map.addControl(menuControl);
    var menuCtrlControl = new OpenCloseMenuControl();
    menuCtrlControl.menu = menuControl;
    map.addControl(menuCtrlControl);

    var refugisXml = new GGeoXml(refugisUrl);
    map.addOverlay(refugisXml);
    refugiKml.push(refugisXml);
    
    var geoXml = new GGeoXml(url, function() {
      map.savePosition();
      if (map.getZoom() > 15) map.setZoom(15);

      var mapBounds = map.getBounds();
      var call = 'http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=public&from=0&to=20&minx=' + mapBounds.getSouthWest().lng() + '&miny=' + mapBounds.getSouthWest().lat() + '&maxx=' + mapBounds.getNorthEast().lng() + '&maxy=' + mapBounds.getNorthEast().lat() + '&callback=addPhotos&size=small';
      var fileref = document.createElement('script')
      fileref.setAttribute("type","text/javascript")
      fileref.setAttribute("src", call);
      document.getElementsByTagName("head")[0].appendChild(fileref)
    });
    ressenyaKml.push(geoXml);
    map.addOverlay(geoXml);
    geoXml.gotoDefaultViewport(map);
    map.setMapType(!forPrint ? G_HYBRID_MAP : G_PHYSICAL_MAP);
    document.getElementById('mapsMenu').style.display = 'none';
    
    menuCtrlControl.open();
    setTimeout(function() {
      menuCtrlControl.close();
    }, 5000);
  }
}

function loadSimpleMap(forPrint) {
  if (GBrowserIsCompatible() && !map) {
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(0, 0), 1);
    map.addMapType(G_PHYSICAL_MAP);
    if (!forPrint) {
      map.addMapType(G_SATELLITE_3D_MAP);
      map.addControl(new GLargeMapControl());
      var hierCtrl = new GHierarchicalMapTypeControl();
      hierCtrl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, null, true);
      map.addControl(hierCtrl);
    } else {
      map.addControl(new GSmallMapControl());
    }
  }
}

function establishMapOrigin(bounds) {
  var zoomLevel = map.getBoundsZoomLevel(bounds);
  if (zoomLevel > 10) zoomLevel = 10;
  map.setZoom(zoomLevel);
  map.setCenter(bounds.getCenter());
  map.savePosition();
}

function addMarkers(locations, forPrint) {
  if (GBrowserIsCompatible()) {
    loadSimpleMap(forPrint);
    var bounds = new GLatLngBounds();
    for (var i=0; i < locations.length; i++) {
      var point = new GLatLng(locations[i].latitude, locations[i].longitude);
      addMarker(locations[i].name, locations[i].latitude, locations[i].longitude, locations[i].link, locations[i].bubble);
      bounds.extend(point);
    }
    if (locations.length > 0) {
      establishMapOrigin(bounds);
    }
    map.setMapType(!forPrint ? G_HYBRID_MAP : G_PHYSICAL_MAP);
  }
}

function addMarker(name, latitude, longitude, link, bubble) {
  if (GBrowserIsCompatible()) {
    var point = new GLatLng(latitude, longitude);
    var marker = new GMarker(point, {title: name});
    if (link) {
      GEvent.addListener(marker, "dblclick", function() {
        document.location = link;
      });
    }
    if (bubble) {
      marker.bindInfoWindow(bubble);
    }
    map.addOverlay(marker);
  }
}

function clearMarkers() {
  if (GBrowserIsCompatible()) {
    map.clearOverlays();
  }
}

LocationLabel = function() {
};

LocationLabel.prototype.name;
LocationLabel.prototype.latitude;
LocationLabel.prototype.longitude;
LocationLabel.prototype.link;
LocationLabel.prototype.bubble;

var labels = new Array();
function addLabels(locations) {
  if (GBrowserIsCompatible()) {
    if (!map) map = new GMap2(document.getElementById('map'));
    locations.sort(locationSorter);
    var distance = 0.0005;
    var previous;
    for (i = 0; i<locations.length; i++) {
      var location = locations[i];
      var name = location.name || '';
      name = name.replace(/^\s*/, "").replace(/\s*$/, "");
      if (name.length > 0) {
        var position = new GSize(20, -10);
//        if (previous) {
//          var distHeight = Math.abs(previous.latitude - location.latitude);
//          var distWidth = Math.abs(previous.longitude - location.longitude);
//          if (distHeight < distance && distWidth < distance) {
//            if (distHeight > 0) position.height += 10;
//            else position.height -= 10;
//          }
//        }
        var label = new ELabel(
            new GLatLng(location.latitude, location.longitude), 
            '<div id="mlabel'+i+'" onmouseover="mouseOverLabel(\'mlabel'+i+'\')" onmouseout="mouseOutOfLabel(\'mlabel'+i+'\')">'+location.name+'</div>',
            "mapLabel", position, 75, false);
        labels.push(label);
        label.nameLength = name.length;
        label.srcPoint = label.getPoint();
        previous = location;
      }
    }
    labels.sort(labelSorter);
//    for (i = 0; i<labels.length; i++) {
//      map.addOverlay(labels[i]);
//    }
    GEvent.addListener(map, "mousemove", mouseMoved);
  }
}

var currentLabels = new Array();
function mouseMoved(latlong) {
  for (i = 0; i<currentLabels.length; i++) {
    map.removeOverlay(currentLabels[i]);
  }
  currentLabels.length = 0;
  var point = map.fromLatLngToContainerPixel(latlong);
  point.y = point.y + 10;
  var maxy = 0;
  var miny = 9999;
  for (i = 0; i<labels.length; i++) {
    var labelPoint = map.fromLatLngToContainerPixel(labels[i].srcPoint);
    var distance = ((point.x - labelPoint.x)* (point.x - labelPoint.x)) + ((point.y - labelPoint.y)*(point.y - labelPoint.y));
    if (distance < 400) {
      currentLabels.push(labels[i]);
      maxy = Math.max(labelPoint.y, maxy);
      miny = Math.min(labelPoint.y, miny);
    }
  }
  if (currentLabels.length > 0) {
    if (currentLabels.length > 3) {
      currentLabels.length;
    }
    currentLabels.sort(latitudeSorter);
    var height = currentLabels.length * 20;
    var offset = Math.abs((height - (maxy - miny))/2);
    for (i = 0; i<currentLabels.length; i++) {
      var latlng = map.fromContainerPixelToLatLng(new GPoint(200, miny - offset + (20 * i) + 10));
      currentLabels[i].point = new GLatLng(latlng.lat(), currentLabels[i].srcPoint.lng());
      map.addOverlay(currentLabels[i]);
    }
  }
}

function mouseOverLabel(labelId) {
  var element = document.getElementById(labelId);
  element.className = 'mapLabelHover';
  element.parentNode.parentNode.className = 'mapLabelHoverParent';
}

function mouseOutOfLabel(labelId) {
  var element = document.getElementById(labelId);
  element.className = '';
  element.parentNode.parentNode.className = '';
}

function locationSorter(a, b) {
  if (a.longitude < b.longitude) return -1;
  if (a.longitude > b.longitude) return 1;
  return 0;
}

function labelSorter(a, b) {
  if (a.nameLength < b.nameLength) return 1;
  if (a.nameLength > b.nameLength) return -1;
  return 0;
}

function latitudeSorter(a, b) {
  if (a.srcPoint.lat() < b.srcPoint.lat()) return 1;
  if (a.srcPoint.lat() > b.srcPoint.lat()) return -1;
  return 0;
}