var map;
var geoXml; 
var goverlays = [];
var postPageTitle;
      
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}

function initializeGMap() {
      if (GBrowserIsCompatible()) {

	geoXml = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF8&hl=en&vps=1&jsv=185c&msa=0&output=nl&msid=101421356223109618080.0004776f96c6af920915b");
	//geoXml = new GGeoXml("http://www.nicolayoon.com/nsla.kml");
        this.map = new GMap2(document.getElementById("map_canvas")); 
		var postPageTitle = $('.post-title a').text();
		if (postPageTitle){
			// this is a narrowed post. Zoom out to let the listener "catch" the pin.
			this.map.setCenter(new GLatLng(34.070162,-118.368089), 10); 
		} else {
			// this is a general post. Don't zoom out so far.
			this.map.setCenter(new GLatLng(34.0732,-118.3546), 11); 
		}
	map.addControl(new GSmallMapControl());

	// addoverlay listener that watches UNDOCUMENTED values to find & show the default map point.
	// courtesy of the very nice gmap tutorials of Mike Williams at econym.org.uk/gmap/
	var  myEventListener = GEvent.bind(this.map,"addoverlay", this, function(overlay) {
//	GEvent.addListener(map,"addoverlay",function(overlay) {
	      if (overlay.name) {		 // If this is a named overlay (e.g. not the GGeoXml itself, or the infowindow)
		    if (overlay.Known) {		// check to see if we already know about this one
		    // do nothing
		    } else {
		    // Add a sidebar entry
		    	i = goverlays.length;
			if ( document.getElementById("side_bar")){
			  document.getElementById("side_bar").innerHTML  += '<div class="side_bar_link"><a href="javascript:showInfoBubble(' + i + ')">' + overlay.name + '<\/a></div>';
			}
			goverlays.push(overlay);		// Save a reference
			  overlay.Known = true;		 // remember that we know about this one
			
			// find the page title. We expect the page title to be inside an anchor tag inside a "post-title" div.
			var postPageTitle = $('.post-title a').text();
			if (postPageTitle){
				if (overlay.name == postPageTitle){
//				if (postPageTitle.match(str)){
					// find the corresponding gmap point and zoom/recenter to it.
					 showInfoBubble(i); 
					 this.map.setCenter(overlay.getPoint());
					 this.map.setZoom(14);
//					 break;
				  } else {
					// this isn't a before/after page. show the general map.
//					this.map.setCenter(new GLatLng(34.050162,-118.438089), 10); 
				  }
			} else { 
					// looks like we're in Big Map view. Center over LA and zoom out.
//					this.map.setCenter(new GLatLng(34.0732,-118.3546), 12); 
			}
		}
	    }
	}); 

	// infowindowprepareopen listener (UNDOCUMENTED) that waits to see if 
	// the first info bubble map tab is loaded, so we can style it up the way we like.
	// also a way to keep the default geoxml anchor tag from opening in a new window, grr
	// courtesy of the very nice gmap tutorials of Mike Williams at econym.org.uk/gmap/
	var  myInfoBubbleListener = GEvent.bind(this.map,"infowindowprepareopen", this, function(iwtabs) { 
		theTab = iwtabs[0].contentElem;
		$(theTab).css("font-family", "Arial Narrow, Arial, Helvetica, sans-serif");
		$(theTab).find("div").css("font-weight", "normal");
		$(theTab).find("div").css("margin-bottom", ".2em");
		$(theTab).find("a").attr('target', '_self');
	}); 
	this.map.addOverlay(geoXml);
      }
} 

// This function picks up the click and tells GGeoXml to open the corresponding info window
function showInfoBubble(i) {
	GEvent.trigger(goverlays[i], "click");
}

$(document).ready(function(){
	// show the title below the picture, not above it (default)
	// because that's the way I want it, dammit
	var allPosts = $(".post");
	for(i=0;i<allPosts.length;i++){
		thisPost = allPosts[i];
		theTitle = $(thisPost).find(".post-title");
		theTitleRepeat = $(thisPost).find("#titleRepeat");
		$(theTitleRepeat).html($(theTitle).html());
	}
	
  	// photo slide-to-reveal animation
	$(".reveal").click(function(event){
		$(this).fadeOut(100);
		 var targetPic = $(this).parent().find(".after");
		 var beforePic = $(this).parent().find(".before");
		 beforePic.unbind();
		 beforePic.css("cursor", "default");
		targetPic.css("visibility", "visible");
		 targetPic.css("opacity", 0);
		targetPic.animate( { 
			   left: targetPic.width() + 28,
			   opacity:1
		}, {
		duration: 1000,
		easing: 'easeOutQuint'
		});
		event.preventDefault();
	});
	
	$(".before").css("cursor", "pointer");
	
	$(".before").mouseover(function(event){
		 var targetPic = $(this).parent().find(".after");
		targetPic.css("visibility", "visible");
		 targetPic.css("opacity", .5);
		 targetPic.stop();
		targetPic.animate( { 
			   left: 32
		}, {
		duration: 400,
		easing: 'easeOutElastic'
		});
   });	

	$(".before").mouseout(function(event){
		 var targetPic = $(this).parent().find(".after");
		targetPic.css("visibility", "visible");
		 targetPic.css("opacity", .5);
		 targetPic.stop();
		targetPic.animate( { 
			   left: 0
		}, {
		duration: 400,
		easing: 'easeOutBounce'
		});
   });	

	$(".before").click(function(event){
		 var targetPic = $(this).parent().find(".after");
		 var revealLink = $(this).parent().find(".reveal");
		 $(this).unbind();
		 $(this).css("cursor", "default");
		targetPic.css("visibility", "visible");
		 targetPic.css("opacity", .5);
//		 targetPic.css("left", 32);
		 targetPic.stop();
		targetPic.animate( { 
			   left: targetPic.width() + 28,
			   opacity:1
		}, {
		duration: 650,
		easing: 'easeOutBack'
		});
		revealLink.fadeOut(100);
   });	

	// is there a map (are we on a blog post detail page)? prepare the map.
	if(document.getElementById("map_canvas")){
		initializeGMap();
	}
  
});