$(document).ready(function(){


	// Hover timing configuration for thumbnails
	var config = {    
		 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
		 interval: 100, // number = milliseconds for onMouseOver polling interval    
		 over: showCaption, // function = onMouseOver callback (REQUIRED)    
		 timeout: 100, // number = milliseconds delay before onMouseOut    
		 out: hoverOut // function = onMouseOut callback (REQUIRED)    
	};   

	// HoverIntent Initiation
	$("#thumbContainer a.imgHover").hoverIntent(config);
	
	// Reveal Triggering
	function showCaption(){

		// What caption should we take?
		var captionSelector = "#captionContainer ." + $(this).attr("id");
		var thumbCaption = "#thumbContainer ." + $(this).attr("id");


		// Clear protection and set it
		$(".mostRecent").removeClass("mostRecent")
		$(this).addClass("mostRecent");

		var $x = $(this); // Remember what we're dealing with

		// set class
		$x.addClass("hovering");

		// We are going to assume margin and border symmetry. If that changes, do checks for top and bottom, left and right, together.
		var $putTo = $x.parent(); // Where are we putting it?		
		var topBorder = $x.border().top; // What is the right margin
		var captionHeight = $x.height() + (topBorder * 2) + "px"; // What height should it be?
		var rightMargin = $x.margin().right; // What is the right margin
		var blockWidth = $x.width() + rightMargin * 2 + topBorder * 2; // Full block width
		var captionWidth = blockWidth * 2; // Twice the width of a block is the caption...
		var blocksDeep = $x.prevAll().length; // How many blocks deep is it?
		var totalSiblings = $x.siblings().length; // How many other blocks are there?
		var topPos = $x.margin().top; // What is it's top position?


		// Copy the caption, put it in dom, set its height and width
		$(captionSelector)
			.clone(true)
			.height(captionHeight)
			.width(0)
			.appendTo($putTo); 

		// If it's at least half way across, expand to the right
		if (blocksDeep <= totalSiblings/2){

			// Left position it:
			var leftPos = (blocksDeep + 1) * blockWidth - 1 - rightMargin + "px"; // Left Position

			// Position and animate it
			$(thumbCaption)
				.css({"left": leftPos, "top": topPos, width:captionWidth})
				.show( "slide", {direction: "left", easing: "easeOutQuad"}, function(){
					$(this).find(".innards").fadeIn();
					$(this).addClass("active")
			}); 

		}
		
		// Expand to the left
		else {
			// Left position should be less two blocks and up two margins
			var leftPos = (blocksDeep - 2) * blockWidth + 1 + rightMargin + "px"; // Left Position

			// Position and animate it
			$(thumbCaption)
				.css({"left": leftPos, "top": topPos, width:captionWidth})
				.show( "slide", {direction: "right", easing: "easeOutQuad"}, function(){
					$(this).find(".innards").fadeIn();
			}); 				
		}
		
	}


	// Easiest function ever
	function hoverOut(){
		
		var thumbCaption = "#thumbContainer ." + $(this).attr("id");
		
		
		
		$(thumbCaption).fadeOut(function(){	
								 
			// Otherwise delete it
			$(this).remove();
		})	
	}

	

});