//<![CDATA[
var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];

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);

var param_wsId = "od6";
var param_ssKey = "pGQT3S7Jo6rezx8iYaL4pKw";
var param_useSidebar = true;
var param_titleColumn = "sitcom";
var param_descriptionColumn = "info";
var param_latColumn = "lat";
var param_lngColumn = "lng";
var param_locationColumn = "location";
var param_videoColumn = "videos";
var param_linkColumn = "link";
var param_rankColumn = "";
var param_iconType = "green";
var param_iconOverType = "orange";

function cm_load() {  
	if (GBrowserIsCompatible()) {
		cm_map = new GMap2(document.getElementById("cm_map"));
		cm_map.addControl(new GLargeMapControl());
		cm_map.addControl(new GMapTypeControl());
		cm_map.setCenter(new GLatLng(41.259751,-95.942336), 4);
		cm_getJSON();
	} else {
		alert("Sorry, the Google Maps API is not compatible with this browser");
	} 
}

function cm_markerClicked(markerNum) {
	cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);
}

// rank
function cm_sortRows(rowA, rowB) {
	var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
	var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);
	return rowAValue - rowBValue;
}


function cm_loadMapJSON(json) {
	var usingRank = false;

	// sidebar
	if(param_useSidebar == true) {
		var sidebarTD = document.createElement("td");
		sidebarTD.setAttribute("width","150");
		sidebarTD.setAttribute("valign","top");
		var sidebarDIV = document.createElement("div");
		sidebarDIV.id = "cm_sidebarDIV";
		sidebarDIV.style.overflow = "auto";
		sidebarDIV.style.height = "600px";
		sidebarDIV.style.fontSize = "13px";
		sidebarDIV.style.color = "#000000";
		sidebarTD.appendChild(sidebarDIV);
		document.getElementById("cm_mapTR").appendChild(sidebarTD);
	}

	var bounds = new GLatLngBounds();	  

	if(json.feed.entry[0]["gsx$" + param_rankColumn]) {
		usingRank = true;
		json.feed.entry.sort(cm_sortRows);
	}

	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 GLatLng(lat,lng);
			var html = "<div class='stl-story-section'>'" + entry["gsx$"+param_titleColumn].$t + "'</div>";
			var label = entry["gsx$"+param_titleColumn].$t;
			var rank = 0;
			if(usingRank && entry["gsx$" + param_rankColumn]) {
				rank = parseInt(entry["gsx$"+param_rankColumn].$t);
			}
			if(entry["gsx$" + param_descriptionColumn]) {
				html += "<div class='stl-story-cutline'><strong>Location:</strong> " + entry["gsx$"+param_locationColumn].$t;
				html += "<br/><strong>Original run:</strong> " + entry["gsx$"+param_descriptionColumn].$t;
				html += "<br/><strong>Starring:</strong> " + entry["gsx$"+param_linkColumn].$t;
				html += "<br/><br/>" + entry["gsx$"+param_videoColumn].$t;
			}
			html += "</div>";

			var marker = cm_createMarker(point,label,html,rank);
			cm_map.addOverlay(marker);
			cm_mapMarkers.push(marker);
			cm_mapHTMLS.push(html);
			bounds.extend(point);
	
			if(param_useSidebar == true) {
				var markerA = document.createElement("a");
				markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
				markerA.style.color = "#000000";
				var sidebarText= "";
				if(usingRank) {
					sidebarText += rank + ") ";
				} 
				sidebarText += label;
				markerA.appendChild(document.createTextNode(sidebarText));
				sidebarDIV.appendChild(markerA);
				sidebarDIV.appendChild(document.createElement("br"));
				sidebarDIV.appendChild(document.createElement("br"));
			} 
		}
	}

	// cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));
	// cm_map.setCenter(bounds.getCenter());
}

function cm_createMarker(point, title, html, rank) {
	var markerOpts = {};
	var nIcon = new GIcon(cm_baseIcon);

	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;
}

function cm_getJSON() {
	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); 

//]]>
