// TailsHQ.com application.js

// Boot
$(document).ready(function(){
	
	// Assign behaviours for various pages:
	
		// Tour
		$("#tour h3 a").click(function(e) {
			// TODO Apply behaviour to tour link.
 			goTourItem(this.id);
			return false;
		});
	
});

// Activates a tour item from the tour page
var activeTourItem = "welcome";
var animLength = 250;
function goTourItem(id_prefix) {
	if(id_prefix != activeTourItem) {
		var ol = $("#tour");
		var li = $("#tour_"+id_prefix);
			var old_li = $("#tour_"+activeTourItem);
		var h3 = $("h3", li)
			var old_h3 = $("h3", old_li);
		var marker = $("#tour .marker");
		var content = $(".tour_content", li);
			var old_content = $(".tour_content", old_li);
					
		// Close the existing description:
		old_content.animate(
			{"opacity": 0}, animLength
		);
		$(".description", ol).animate(
			{"opacity": "0", "height": 0},
			animLength,
			function() {
				// Okay, old stuff all closed up. Now open the new:
				// 1. Move the marker to the LI's screen location, minus the marker's vertical padding.
				var t = parseInt(h3.position().top)-3;
			   	marker.animate(
					{top: t+"px"},
					animLength
				);
				// 2. Unfurl the description paragraph by affecting a line height transition.
				$(".description", li).animate(
					{"height": $(".description p", li).height()+"px", "opacity": 1},
					animLength
				);
				// 3. Do the main content swap
				content.show();
				content.animate(
					{"opacity": 1}, animLength
				);	
			}
		)
		// 4. Mark active item
		activeTourItem = id_prefix;
	}
	return false;
}