//<![CDATA[
var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];
var latlng = new google.maps.LatLng(20.502599,25.126257);
var bounds = new google.maps.LatLngBounds();


// Change these parameters to customize map
var param_wsId = "od6";
var param_ssKey = "0Ag48yPbYRaULdGFyUk4tNE1DQklwcmk5YlQyQ2tBZlE";
var param_useSidebar = false;
var param_titleColumn = "title";
var param_labelColumn = "label";
var param_descriptionColumn = "description";
var param_teamNewsColumn = "teamnews";
var param_latColumn = "latitude";
var param_lngColumn = "longitude";
var param_rankColumn = "rank";
var param_teamColumn = "image";
var param_iconType = "green";
var param_iconOverType = "orange";
var infowindow = new google.maps.InfoWindow({});

/**
 * Loads map and calls function to load in worksheet data.
 */
function cm_load() {  
    // create the map

    
    var myOptions = {
      zoom: 2,
      backgroundColor: "#2F3F7A",
      scrollwheel: false,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    
    cm_map = new google.maps.Map(document.getElementById("map"),
    		myOptions);
    		


    cm_getJSON();
}

/**
 * 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]);
}

/**
 * Function that sorts 2 worksheet rows from JSON feed
 * based on their rank column. Only called if column is defined.
 * @param {rowA} Object Represents row in JSON feed
 * @param {rowB} Object Represents row in JSON feed
 * @return {Number} Difference between row values
 */
function cm_sortRows(rowA, rowB) {
  var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
  var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);

  return rowAValue - rowBValue;
}

/** 
 * 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) {


  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if(entry["gsx$" + param_latColumn]) {
      var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
      var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
      var point = new google.maps.LatLng(lat,lng);
      if(entry["gsx$" + param_teamColumn].$t !== ""){
      var team;
      team =  entry["gsx$"+param_teamColumn].$t;
      } else {
      team = "default";
      }

      var html = "<div style='font-size:12px; color: black;' class='bubble'>";
      html += "<h2 style='color: #009C32'>" + entry["gsx$"+param_titleColumn].$t 
              + "</h2>";
      var label = entry["gsx$"+param_labelColumn].$t;
      if(entry["gsx$" + param_descriptionColumn] !== "") {
        html += entry["gsx$"+param_descriptionColumn].$t;
      }
      
      html += "</div><p style='float: right; margin: 0 10px 0 0; font-weight: bold;'><a href='http://www.greenpeace.org.uk/files/gobeyondoil/index.html#updates'>Signup for ship updates</a></p><div><a href='http://www.greenpeace.org.uk/files/gobeyondoil/map.html' target='_blank' class='maplarge'>View this map full screen</a></div>";


      // create the marker
      var marker = cm_createMarker(point,label,html, team);
    }
    var number = json.feed.entry.length;
    
    // extra
    
//	var ship = json.feed.entry[0];
//	var shiplat = parseFloat(ship["gsx$" + param_latColumn].$t);
//	var shiplng = parseFloat(ship["gsx$" + param_lngColumn].$t);
//    var shippoint = new google.maps.LatLng(shiplat,shiplng);
    
    
    // end extra
    
 //   document.getElementById("number").innerHTML = number + " ";
  }

//  cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));
//  cm_map.setCenter(shippoint);
//  cm_map.setZoom(6);
}

/**
 * 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, team) {
  
  var lowteam = team.toLowerCase();

  var teamimage = "http://www.greenpeace.org.uk/files/gobeyondoil/media/images/" + lowteam;

  var marker = new google.maps.Marker({
    position: point,
    map: cm_map,
    title: title,
    icon: teamimage
  });
  
  bounds.extend(point);

  google.maps.event.addListener(marker, 'click', function() {
  infowindow.setContent(html);
  infowindow.open(cm_map,marker);
  });
//  cm_map.fitBounds(bounds);
  return marker;
}

/**
 * Creates a script tag in the page that loads in the 
 * JSON feed for the specified key/ID. 
 * Once loaded, it calls cm_loadMapJSON.
 */
function cm_getJSON() {

  // Retrieve the JSON feed.
  var script = document.createElement('script');

  script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
                         + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                        '?alt=json-in-script&callback=cm_loadMapJSON');
  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

setTimeout('cm_load()', 500); 


//]]>