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

var param_ssKey = $(".map").attr("id");
param_ssKey = param_ssKey.replace(/map_/i, "");

// Change these parameters to customize map
var param_wsId = "od6";
//var param_ssKey = "0AjVX8i77jL4ydDdOMktLVWFkbUlqb1VqNHU0cVNPbVE";
var param_useDescription = true;
var param_titleColumn = "title";
var param_categoryColumn = "category";
var param_addressColumn = "address";
var param_websiteColumn = "website";
var param_descriptionColumn = "description";
var param_latColumn = "latitude";
var param_lngColumn = "longitude";
//var param_rankColumn = "rank";
var param_iconType = "green";
var param_iconOverType = "green";


/**
* Loads map and calls function to load in worksheet data.
*/
function cm_load() {  
	var myLatlng = new google.maps.LatLng(0,0);
	var myOptions = {
		zoom: 10,
		center: myLatlng,
		mapTypeControl: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	cm_map = new google.maps.Map(document.getElementById("map_canvas_"+param_ssKey), myOptions);

	cm_getJSON();
	
	var bikeLayer = new google.maps.BicyclingLayer();
	bikeLayer.setMap(cm_map);
}


/**
* 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) {
/*
	var infowindowOptions = {
		content: 
	}
*/
	var infowindow = new google.maps.InfoWindow();
	infowindow.setContent(cm_mapHTMLS[markerNum])
	infowindow.open(cm_map, cm_mapMarkers[markerNum]);
	cm_setInfowindow(infowindow);
}

/**
* 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) {
	
	if (param_useDescription == true) {
		$('#map_'+param_ssKey).append('<table id="map_desc_'+param_ssKey+'" class="map_desc"><thead><tr><th scope="col">Key</th><th scope="col">Title</th><th scope="col">Type</th></tr></thead><tbody></tbody></table>');
		$("#map_desc_"+param_ssKey).hide();
	}

	var bounds = new google.maps.LatLngBounds();

	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);
			var label = entry["gsx$"+param_titleColumn].$t;
			var address = entry["gsx$"+param_addressColumn].$t;
			var category = entry["gsx$"+param_categoryColumn].$t;
			var website = entry["gsx$"+param_websiteColumn].$t;
			var description = entry["gsx$"+param_descriptionColumn].$t;
			
			var html = "";
			
			if(website) {
				html += "<h4><a href='"+website+"'>" + label + "</a> " + category + "</h4>";
			} else {
				html += "<h4>" + label + "</h4>";
			}
			
			if(address) {
				html += "<p class='address'>" + address + "</p>";
			}
			
			if(description) {
				html += description;
			}

			// create the marker
			var marker = cm_createMarker(cm_map,point,label,html,i+1); //,rank
			// cm_map.addOverlay(marker);
			cm_mapMarkers.push(marker);
			cm_mapHTMLS.push(html);
			bounds.extend(point);

			if (param_useDescription == true) {
			
				var entryTR = '<tr>';
				entryTR += '<td>';
				entryTR += i+1;
				entryTR += '</td>';
				entryTR += '<td><a href="javascript:cm_markerClicked('+i+')">'+label+'</a></td>';
				entryTR += '<td>'+category+'</td>';
				entryTR += '</tr>';

				$('#map_desc_'+param_ssKey+' tbody').append(entryTR);
				
			} 
		}
	}

	cm_map.fitBounds(bounds);
	cm_map.setCenter(bounds.getCenter());
	
	$("#map_desc_"+param_ssKey).tablesorter({
		widgets: ['zebra'],
		headers: { 0:{sorter:false} }
		});
	
	$("#map_desc_"+param_ssKey).show('slow');

}

function cm_setInfowindow(newInfowindow) {
	if (cm_openInfowindow != undefined) {
		cm_openInfowindow.close();
	}
	cm_openInfowindow = newInfowindow;
}

/**
* 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(map, latlng, title, html, rank) {

	var iconSize = new google.maps.Size(20, 34);
	var iconShadowSize = new google.maps.Size(37, 34);
	var iconHotSpotOffset = new google.maps.Point(9, 34);
	var iconPosition = new google.maps.Point(0, 0);
	/*
var infoWindowAnchor = new google.maps.Point(9, 34);
	var infoShadowAnchor = new google.maps.Point(18, 25);
*/
	
	var iconShadowUrl = "http://www.google.com/mapfiles/shadow50.png";
	var iconImageUrl;
	var iconImageOverUrl;
	var iconImageOutUrl;

	if(rank > 0 && rank < 100) {
		iconImageOutUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
		"markers/" + param_iconType + "/marker" + rank + ".png";
		iconImageOverUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
		"markers/" + param_iconOverType + "/marker" + rank + ".png";
		iconImageUrl = iconImageOutUrl;
	} else { 
		iconImageOutUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
		"markers/" + param_iconType + "/blank.png";
		iconImageOverUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
		"markers/" + param_iconOverType + "/blank.png";
		iconImageUrl = iconImageOutUrl;
	}

	var markerShadow =
	new google.maps.MarkerImage(iconShadowUrl, iconShadowSize,
	iconPosition, iconHotSpotOffset);
	
	var markerImage =
	new google.maps.MarkerImage(iconImageUrl, iconSize,
	iconPosition, iconHotSpotOffset);
	
	var markerImageOver =
	new google.maps.MarkerImage(iconImageOverUrl, iconSize,
	iconPosition, iconHotSpotOffset);
	
	var markerImageOut =
	new google.maps.MarkerImage(iconImageOutUrl, iconSize,
	iconPosition, iconHotSpotOffset);

	var markerOptions = {
		title: title,
		icon: markerImage,
		shadow: markerShadow,
		position: latlng,
		map: map
	}

	var marker = new google.maps.Marker(markerOptions);

	google.maps.event.addListener(marker, "click", function() {
		/*
		var infowindowOptions = {
			content: html
			//maxWidth: 250
		}
		*/
		var infowindow = new google.maps.InfoWindow();
		infowindow.setContent(html)
		cm_setInfowindow(infowindow);
		infowindow.open(map, marker);
		marker.setIcon(markerImageOut);
	});
	
	google.maps.event.addListener(marker, "mouseover", function() {
		marker.setIcon(markerImageOver);
	});
	
	google.maps.event.addListener(marker, "mouseout", function() {
		marker.setIcon(markerImageOut);
	});
	
	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.getElementById("map_canvas_"+param_ssKey).appendChild(script);
	
}

$(document).ready(function() {
    cm_load();
});