var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];

var data = new Array();

data[ 0] = {lng: "10.329121", lat: "55.340836", navn: "Bed & Breakfast", beskrivelse: "Odense Bed and Breakfast i behagelige omgivelser"};
data[ 1] = {lng: "10.321827", lat: "55.333195", navn:	"Q8 Tank", beskrivelse: "Q8 benzintank med kiosk"};
data[ 2] = {lng: "10.314702", lat: "55.338032", navn: "123 Tank", beskrivelse: "Ubemandet benzintank"};
data[ 3] = {lng: "10.310646", lat: "55.337933", navn: "Pizza Lazio Leman", adresse: "Brændekildevej 9",	beskrivelse:"Tlf. 65960636"};
data[ 4] = {lng: "10.309381", lat: "55.339005", navn: "Bellinge Grillen", adresse: 	"Brændekildevej 17"};
data[ 5] = {lng: "10.309639", lat: "55.338615", navn: "Bellinge Nærbutik", adresse: "Brændekildevej 17"};
data[ 6] = {lng: "10.317192", lat: "55.337639",	navn: "Superbrugsen", adresse: 	"Elmegårdsvej 5", beskrivelse: "Ofte søndagsåbent"};
data[ 7] = {lng: "10.314702", lat: "55.337006", navn:  "SuperBest", adresse: 	"Brogårdsvej 3"};
data[ 8] = {lng: "10.315561", lat: "55.336369", navn: "Fakta", adresse: 	"Brogårdsvej 15"};
data[ 9] = {lng: "10.317449", lat: "55.334904", navn: "Lunds bageri", adresse: 	"Brogårdsvej 27"};
data[10] = {lng: "10.31693",  lat: "55.33741",	navn: "Danske Bank", adresse: 	"Elmegaardsvej 5", beskrivelse:"Kun pengeautomat"};
data[11] = {lng: "10.31378",  lat: "55.33698",	navn: "Nordea", adresse: 	"Brogårdsvej 4" , beskrivelse:"Udendørs pengeautomat"};



// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var cm_baseIcon = new GIcon();
cm_baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
cm_baseIcon.iconSize = new GSize(20, 34);
cm_baseIcon.shadowSize = new GSize(37, 34);
cm_baseIcon.iconAnchor = new GPoint(9, 34);
cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);

// Change these parameters to customize map
var param_iconType = "green";
var param_iconOverType = "orange";
 
/**
 * Loads map and calls function to load in worksheet data.
 */
function cm_load() {  
  if (GBrowserIsCompatible()) {
    // create the map
    cm_map = new GMap2(document.getElementById("cm_map"));
    cm_map.addControl(new GLargeMapControl3D());
    cm_map.addControl(new GMapTypeControl());
    cm_map.addControl(new GScaleControl());
    cm_map.addMapType(G_SATELLITE_3D_MAP);
    cm_map.setCenter(new GLatLng(55.33701550000001, 10.319251), 15);
//
//      gdir  = new GDirections(map, document.getElementById("directions")); // Husk at lave en [div id='directions']
//      gdir.load("from: ahornvej 51, 5250 odense to: Faaborgvej 434, 5250 Odense"); 

    cm_loadMapJSON(null);  // NY
  } else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  } 
}

/**
 * Function called when marker on the map is clicked.
 * Opens an info window (bubble) above the marker.
 * @param {Number} markerNum Number of marker in global array
 */
function cm_markerClicked(markerNum) {
  cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);
}

 
/** 
 * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
 * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows, 
 * creating marker and sidebar entries for each row.
 * @param {JSON} json Worksheet feed
 */       
function cm_loadMapJSON(json) {
  var bounds = new GLatLngBounds();	  

  for (var i = 0; i < data.length; i++) {
    var entry = data[i];
    var sidebarDIV = document.getElementById("oprems" + parseInt(i / 3));

    if (entry["lat"]) {
      var lat = parseFloat(entry["lat"]);
      var lng = parseFloat(entry["lng"]);
      var point = new GLatLng(lat,lng);
      var html = "<div style='font-size:12px'><strong>" + entry["navn"] + "</strong>";
      var label = entry["navn"];

      if (i == 0) {
        html += "<img style='float: left' src='img/baenk.jpg'/>";
      }
      if (entry["beskrivelse"]) {
        html += "<br/>" + entry["beskrivelse"];
      }
      html += "</div>";

      // create the marker
      var marker = cm_createMarker(point,label,html,i+1);
      cm_map.addOverlay(marker);
      cm_mapMarkers.push(marker);
      cm_mapHTMLS.push(html);
      bounds.extend(point);
	  
      var markerA = document.createElement("a");
      markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
      markerA.style.color = "#2d1c01";
      var sidebarText= "";

      label = label.replace(/&#230;/, "æ");
      label = label.replace(/&#248;/, "ø");
      label = label.replace(/&#229;/, "å");

      sidebarText += label;
      markerA.appendChild(document.createTextNode(sidebarText));
      sidebarDIV.appendChild(document.createTextNode((i+1) + ". "));
      sidebarDIV.appendChild(markerA);
      sidebarDIV.appendChild(document.createElement("br"));
    }
  }

  cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));
  cm_map.setCenter(bounds.getCenter());
}

/**
 * Creates marker with ranked Icon or blank icon,
 * depending if rank is defined. Assigns onclick function.
 * @param {GLatLng} point Point to create marker at
 * @param {String} title Tooltip title to display for marker
 * @param {String} html HTML to display in InfoWindow
 * @param {Number} rank Number rank of marker, used in creating icon
 * @return {GMarker} Marker created
 */
function cm_createMarker(point, title, html, rank) {
  var markerOpts = {};
  var nIcon = new GIcon(cm_baseIcon);

  if (rank == 1) {
    nIcon.imageOut = "http://www.odensebedandbreakfast.dk/img/blue_bb.png";
    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconOverType + "/marker" + rank + ".png";
    nIcon.image = nIcon.imageOut; 
  } else if (rank > 0 && rank < 100) {
    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconType + "/marker" + rank + ".png";
    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconOverType + "/marker" + rank + ".png";
    nIcon.image = nIcon.imageOut; 
  } else { 
    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconType + "/blank.png";
    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconOverType + "/blank.png";
    nIcon.image = nIcon.imageOut;
  }

  markerOpts.icon = nIcon;
  markerOpts.title = title;		 
  var marker = new GMarker(point, markerOpts);
	
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  GEvent.addListener(marker, "mouseover", function() {
    marker.setImage(marker.getIcon().imageOver);
  });
  GEvent.addListener(marker, "mouseout", function() {
    marker.setImage(marker.getIcon().imageOut);
  });
  GEvent.addListener(marker, "infowindowopen", function() {
    marker.setImage(marker.getIcon().imageOver);
  });
  GEvent.addListener(marker, "infowindowclose", function() {
    marker.setImage(marker.getIcon().imageOut);
  });
  return marker;
}

cm_load();