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

// 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_useSidebar = true;
var param_titleColumn = "title";
var param_urlColumn = "url";
var param_showColumn = "show";
var param_datesColumn = "dates";
var param_thumbnailColumn = "thumbnail";
var param_imageColumn = "image";
var param_addressColumn = "address";
var param_hoodColumn = "neighborhood";
var param_septaColumn = "septa";
var param_descriptionColumn = "description";
var param_latColumn = "latitude";
var param_lngColumn = "longitude";
var param_rankColumn = "rank";
var param_startdateColumn = "start";
var param_enddateColumn = "end";
var param_openingNightColumn = "openingnight";
var param_openingDateColumn = "openingdate";
var param_openingHoursColumn = "openinghours";
var param_admissionColumn = "admission";
var param_advertiserColumn = "advertiser";
var param_eventTypeColumn = "eventtype";
var param_ourpicksColumn = "ourpicks";	
var param_iconType = "green";
var param_iconOverType = "green";

/**
 * Loads map and calls function to load in worksheet data.
 */
function cm_load() {  
  if (GBrowserIsCompatible()) {
    // create the map
    cm_map = new GMap2(document.getElementById("mainContent"));
	cm_map.addControl(new GLargeMapControl());
	
	
    
    cm_map.addControl(new GMapTypeControl());
    cm_map.setCenter(new GLatLng( 43.907787,-79.359741), 2);
    cm_getJSON();
  } 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]);
  	
}

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

function createSelectOption(optionText, optionValue) {
  var option = document.createElement("option");
  option.setAttribute("value", optionValue);
  option.appendChild(document.createTextNode(optionText));
  return option;
}

function filterHood() {
  hoodSelection = document.theForm.hood.value;
  cm_loadMapJSON(jsonData); 
}

function filterOpeningNight() {
	firstFriday = document.theForm.openingNight[0].checked;
	secondThursday = document.theForm.openingNight[1].checked;
	cm_loadMapJSON(jsonData);
}

function isInHood(hood) {
	if(hoodSelection == null || hoodSelection == "All" || 
	   hoodSelection == hood)
	return true;
	else return false;   
}

function isRightNight(night){
	if(firstFriday == null && secondThursday == null) return true;
	if(night == "FirstFriday" && firstFriday == true) return true;
	if(night =="SecondThursday" && secondThursday == true) return true; 
	if ( firstFriday == false && secondThursday == false) return true;
	return false;
}

window.onload = function () {
	//talks = document.theForm.events[0].checked;
	//symposia = document.theForm.events[1].checked;
	//other = document.theForm.events[2].checked;
	firstFriday = document.theForm.openingNight[0].checked;
	secondThursday = document.theForm.openingNight[1].checked;
	hoodSelection = document.theForm.hood.value;
}
var talks, symposia, other;

function filterEvents() { 
	talks = document.theForm.events[0].checked;
	symposia = document.theForm.events[1].checked;
	other = document.theForm.events[2].checked;
	cm_loadMapJSON(jsonData);
	return true;
}

function isRightEvent(eventType){
	if(talks == null && symposia == null && other == null) return true;
	if(eventType == "Talk" && talks == true) return true;
	if(eventType =="Symposia" && symposia == true) return true;
	if(eventType =="other" && other == true) return true; 
	if(talks == false && symposia == false && other == false) return true;
	return false;
}

var jsonData;
var hoodSelection, firstFriday, secondThursday;

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

  	

  jsonData = json;
  
  var usingRank = false;
  
  var sidebarDIV = document.getElementById("below");

  if(document.getElementById("below") != null) {
  	sidebarDIV.innerHTML = "";
  }

  var bounds = new GLatLngBounds();
	
  
  cm_map.clearOverlays(); 
  cm_map.addOverlay(new GScreenOverlay("http://maps.theartblog.org/images/trans_logo_overlay.png", new GScreenPoint(1,0), new GScreenPoint(0,0), new GScreenSize(275, 125))); 
  
  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(isInHood(entry["gsx$" + param_hoodColumn].$t) && 
	  isRightNight(entry["gsx$" + param_openingNightColumn].$t) && isRightEvent(entry["gsx$" + param_eventTypeColumn].$t)) {

      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 id='leftBubble'>";
	  if (entry["gsx$" + param_imageColumn].$t != "") {
	  	html += "<img src='" + entry["gsx$" + param_imageColumn].$t + "'>";
	  }
      html += "<div id='showBubble'>" + entry["gsx$" + param_showColumn].$t+"</div>";
      
	 
	  
	  //html += "<strong>" + entry["gsx$"+param_titleColumn].$t + "</strong>";
      
              
      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 id='description'>" + entry["gsx$"+param_descriptionColumn].$t +"</div>";
      }
	   if (entry["gsx$" + param_openingDateColumn].$t != "" ) {
	  	/*if (entry["gsx$" + param_openingNightColumn].$t != "") {
			html += "<div class='openingBubble'>Opening: " + entry["gsx$" + param_openingNightColumn].$t + ", " + entry["gsx$" + param_openingHoursColumn].$t;
		}
		else {
		*/
			html += "<div class='openingBubble'>Opening: " + entry["gsx$" + param_openingDateColumn].$t + ", " + entry["gsx$" + param_openingHoursColumn].$t;
		//}
	  }
      html += "</div></div>";

      html += "<div id='rightBubble'>";
      html += "<div id='titleBubble'>";
      html += entry["gsx$" + param_titleColumn].$t;
      html += "</div>";
	  if (entry["gsx$" + param_advertiserColumn].$t != "") {
	  	html += "<div id='advertiserBubble'>";
      	html += entry["gsx$" + param_advertiserColumn].$t;
      	html += "</div>";
	  }
      html += "<div id='addressBubble'>";
      html += entry["gsx$" + param_addressColumn].$t;
      html += "</div>";
	  html += "<div id='urlBubble'>";
      html += "<a href='"+entry["gsx$" + param_urlColumn].$t+"' target='blank'>"+entry["gsx$" + param_urlColumn].$t+"</a>";
	  html += "</div>";
      html += "<div id='dates'>";
      html += "Hours: " + entry["gsx$" + param_datesColumn].$t;
	  html += "</div>";
	  if(entry["gsx$" + param_admissionColumn]) {
	  	html += "<div id='admission'>";
		html += entry["gsx$" + param_admissionColumn].$t;
	  	html += "</div>";
	  }
	  html += "<div id='septaBubble'>";
      html += entry["gsx$" + param_septaColumn].$t;
      html += "</div></div>"
      
      // create the marker
      var marker = cm_createMarker(point,label,html,rank, i);
      cm_map.addOverlay(marker);
      cm_mapMarkers.push(marker);
      cm_mapHTMLS.push(html);
	  
	  //hack to exclude lancaster
	  // older if (entry["gsx$" + param_addressColumn].$t.indexOf("17604") ==-1 ){
      // old if (hoodSelection == "Hinterlands" || entry["gsx$" + param_hoodColumn].$t != "Hinterlands" ){	  
	//bounds.extend(point);
      //}

	if (hoodSelection == "Hinterlands" || entry["gsx$" + param_hoodColumn].$t != "Hinterlands" )
	if ( entry["gsx$" + param_titleColumn].$t.indexOf("FLUXspace") == -1 || hoodSelection == "NLKens")
	if ( entry["gsx$" + param_titleColumn].$t.indexOf("My House Gallery") == -1 || hoodSelection == "SouthPhilly")
	{	  
		bounds.extend(point);
	}
	  

    var markerA = document.createElement("a");
	markerA.id = "Alisting";
    markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
    markerA.style.color = "#000000";
    
	if (entry["gsx$" + param_thumbnailColumn].$t != "") {
		var thumby = document.createElement("img");
		thumby.setAttribute('src', entry["gsx$" + param_thumbnailColumn].$t);
		markerA.appendChild(thumby);
	}	
	
    var sidebarText= "";
    if(usingRank) {
      sidebarText += rank + ") ";
    } 
    //sidebarText += label;
    
    /*var rankDiv = document.createElement("div");
    rankDiv.id = "rankDiv";
    rankDiv.appendChild(document.createTextNode(rank));   
    markerA.appendChild(rankDiv);
    */
	
    
    
    var labelDiv = document.createElement("div");
    labelDiv.id = "labelDiv";
    labelDiv.appendChild(document.createTextNode(label));  
    markerA.appendChild(labelDiv);
	
	
	
	if (entry["gsx$" + param_openingDateColumn].$t != "") {
		var openingDiv = document.createElement("div");
		openingDiv.id = "opening";
		if (entry["gsx$" + param_openingNightColumn].$t != "") {
			openingDiv.appendChild(document.createTextNode("Opening : " + entry["gsx$" + param_openingNightColumn].$t + ", " + entry["gsx$" + param_openingHoursColumn].$t));
		}
		else {
			openingDiv.appendChild(document.createTextNode("Opening : " + entry["gsx$" + param_openingDateColumn].$t + ", " + entry["gsx$" + param_openingHoursColumn].$t));
		}
		markerA.appendChild(openingDiv);
	}
	
	
    
	var showDiv = document.createElement("div");
    showDiv.id = "showDiv";
    showDiv.appendChild(document.createTextNode(entry["gsx$"+param_showColumn].$t));
    
    markerA.appendChild(showDiv);
	
	var rangeDiv = document.createElement("div");
    rangeDiv.id = "rangeDiv";
    rangeDiv.appendChild(document.createTextNode(entry["gsx$"+param_startdateColumn].$t));
	rangeDiv.appendChild(document.createTextNode(" - "));
	rangeDiv.appendChild(document.createTextNode(entry["gsx$"+param_enddateColumn].$t));
    
    markerA.appendChild(rangeDiv);
	
	if(entry["gsx$" + param_advertiserColumn].$t != "") {
		var advertiserDiv = document.createElement("div");
		advertiserDiv.setAttribute("class", "advertiser");
		advertiserDiv.appendChild(document.createTextNode(entry["gsx$" + param_advertiserColumn].$t ));
		markerA.appendChild(advertiserDiv);
	}
	
	var sidebarListingDiv = document.createElement("div");
	sidebarListingDiv.id = "listing" + i;
	if(entry["gsx$" + param_advertiserColumn].$t == "y") sidebarListingDiv.setAttribute("class", "sidebarListingAd");
	else sidebarListingDiv.setAttribute("class", "sidebarListing");
    sidebarListingDiv.appendChild(markerA);
	
    sidebarDIV.appendChild(sidebarListingDiv);
	
	var clearFloat = document.createElement("br");
	clearFloat.setAttribute("class", "clearfloat");
	sidebarDIV.appendChild(clearFloat);
    //sidebarDIV.appendChild(document.createElement("br"));
    //sidebarDIV.appendChild(document.createElement("br"));
       
    } 
  }
  if (sidebarDIV.innerHTML=="") sidebarDIV.innerHTML = "<div id = 'noresults'>There are no listings for this selection</div>"
  cm_map.closeInfoWindow();	
  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, id) {
  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);
	//document.getElementById("listing"+id).className += " active";
  });
  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);
	//var class = document.getElementById("listing"+id).className;
	//class = class.replace("active", "");
	//document.getElementById("listing"+id).className = class;
  });
  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);