var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];
var icon;
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.

// Change these parameters to customize map
var param_wsId = "od6";
var param_ssKey = "o16162288751915453340.5631654799728214695";
var param_useSidebar = true;
var param_titleColumn = "code";
var param_descriptionColumn = "html";
var param_latColumn = "lat";
var param_lngColumn = "lng";
var param_rankColumn = "rank";
var param_iconType = "red";
var param_iconOverType = "orange";

/**
 * Loads map and calls function to load in worksheet data.
*/

function cm_load() {  
  if(locarr != undefined){
    //alert(str);
    if (GBrowserIsCompatible()) {
    // create the map
    cm_map = new GMap2(document.getElementById("cm_map"));
    //cm_map  .setCenter(point, 15);
    cm_map.addControl(new GLargeMapControl());
		cm_map.addControl(new GMapTypeControl());
    //for (var i = 0;i<locarr.length; i++) {
    //alert(locarr[i][0]+"-->"+locarr[i][1]);
		//alert(str);
    	if(str == 'str'){
      		cm_map.setCenter(new GLatLng(locarr[0][0],locarr[0][1]),15);
		}else{
     	 	var midlatitude = locarr[0][0];	 	
			var midlongitude = locarr[0][1];	 
			if(midlat){
				midlatitude = midlat;	 
			}
			if(midlon){
				midlongitude = midlon;	 
			}
			cm_map.setCenter(new GLatLng(midlatitude,midlongitude),6);
		}
	//}
    icon = new GIcon();
    icon.image = iconpath+'/arrow-icon.gif';
    icon.iconSize = new GSize(20, 34);
    icon.iconAnchor = new GPoint(9, 34);
    icon.infoWindowAnchor = new GPoint(9, 2);
    //icon.iconAnchor = new GPoint(16, 16);
    //icon.infoWindowAnchor = new GPoint(25, 7);
    cm_getJSON();
    }else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
  }else {
      //alert("Sorry, the page needs to be reload.");
      //window.location.reload();
  }
}

/**
 * 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]);
  //cm_mapMarkers[markerNum].setImage('<?=$marker_image_path?>/bubble-img.png');
}

/** 
 * 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<locarr.length; i++) {
      var lat = parseFloat(locarr[i][0]);
      var lng = parseFloat(locarr[i][1]);
      var point = new GLatLng(lat,lng);
      var html = "<div style='font-size:13px;text-align:left;'>";
		  var label = '';
	  //var label = i+1;
 	  var rank = 0;
	  rank = i;
        html += "<font color='#F4A751' size='+1'>"+resaddarr[i][0]+"</font><br>";
        if(resaddarr[i][1] != '')
          html+=resaddarr[i][1]+",<br>";
        if(resaddarr[i][2] != '')
          html+=resaddarr[i][2]+",<br>";
        if(resaddarr[i][4] != '')
          html+=resaddarr[i][4];
        if(resaddarr[i][4] != '' && resaddarr[i][3] != '')
          html+=" - ";
        if(resaddarr[i][3] != '')
          html+=resaddarr[i][3]+",<br>";
        if(resaddarr[i][5] != '')
          html+=resaddarr[i][5]+".";
      html += "</div>";
	  
      // create the marker
	  var marker = cm_createMarker(point,label,html,rank,locarr[i][2],locarr[i][3],resaddarr[i][2]);
	    cm_map.addOverlay(marker);
      cm_mapMarkers.push(marker);
      cm_mapHTMLS.push(html);
	    bounds.extend(point);
  }
}
/**
 * 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,ilocd,iCourId,mycity) {
  var markerOpts = {};
  markerOpts = {
	"icon": icon,
	"clickable": true,
	"labelText": title,
	"labelOffset": new GSize(-10, -13)
	};
  var newPoint = point;
  var marker = new LabeledMarker(newPoint, markerOpts);

  GEvent.addListener(marker, "click", function() {
    if(str == 'lockmouseover'){
      //marker.openInfoWindowHtml(html);
        window.location = SITE_URL+'venueDetails/'+mycity+'/'+ilocd+'/'+iCourId;
    }else{
      marker.openInfoWindowHtml(html);
	  GEvent.addListener(marker, "mouseover", function() {
      marker.openInfoWindowHtml(html);
	  });
	}
  });
	if(str != 'lockmouseover'){
	  GEvent.addListener(marker, "mouseover", function() {
     // marker.openInfoWindowHtml(html);
	  });
	}
  /*GEvent.addListener(marker, "mouseover", function() {
    marker.openInfoWindowHtml(html);
  });
*/
  /*GEvent.addListener(marker, "mouseout", function() {
    marker.setImage('<?=$marker_image_path?>/bubble-img.png');
  });*/

  /*GEvent.addListener(marker, "infowindowclose", function() {
    marker.setImage('<?=$marker_image_path?>/bubble-img.png');
  });*/
  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' +
                        '?orderby=column:' + param_rankColumn + 
                        '&alt=json-in-script&callback=cm_loadMapJSON');
  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
  //document.getElementById('siteLoader').style.display = 'none';
}
//document.getElementById('siteLoader').style.display = 'none';