$(document).ready(function(){

	$('.hoverbox-trigger').mouseover(function() {
		
		
		var hoverboxFlipBot = false;
		
		var hoverBoxContent = $(this).find(".hoverbox-data").html();
		
		// need to test if it's a linked image because anchors reported offset is incorrect
		if ( $(this).children(".avatar").length ) {
			var triggerPos = $(this).children(".avatar").offset();
		} else {
			var triggerPos = $(this).offset();
		}
		
		if ( $("#lightbox.hoverbox").length == 0 ) {
			var hoverBoxHTML = '<table id="lightbox" class="hoverbox"><tr><td class="tl"></td><td class="tc"></td><td class="tr"></td></tr><tr><td class="ml"></td><td class="mm"><div class="contenido">';
			hoverBoxHTML += '</div></td><td class="mr"></td></tr><tr><td class="bl"></td><td class="bc"></td><td class="br"></td></tr></table>'
			$("body").append(hoverBoxHTML);
		} else {
			clearTimeout(closeTimer);
		}

		var hoverBoxContent = $(this).next(".hoverbox-data").html();
		$("#lightbox.hoverbox .contenido").html(hoverBoxContent).append('<div class="hoverbox-arrow"></div>');

		var hoverBox = $("#lightbox.hoverbox");
		var hoverBoxWidth = hoverBox.width();
		var hoverBoxHeight = hoverBox.height();
		var triggerHeight = $(this).height();
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		var windowScrollTop = $(window).scrollTop();
		var triggerWidth = $(this).width();


		
		// hoverbox default location is left/above the trigger
		
		showBottom = false;
		showLeft = false;
		
		var finalPosTop = triggerPos.top - hoverBoxHeight - 5;
		var finalPosLeft = triggerPos.left - 42 + (triggerWidth/2);
		
		if ( windowScrollTop > triggerPos.top - hoverBoxHeight ) { // show below
			showBottom = true ;
			var finalPosTop = triggerPos.top + triggerHeight + 5;
		}
		if ( triggerPos.left + hoverBoxWidth > windowWidth  ) { // show to the right
			showLeft = true ;
			var finalPosLeft = triggerPos.left - hoverBoxWidth + 41 + (triggerWidth/2) ;
		}

		if ( showBottom == true && showLeft == false ) { // hoverbox oriented to left/below of trigger
			$("#lightbox.hoverbox .hoverbox-arrow").addClass("top-left");
		} else if ( showBottom == false && showLeft == true ) { // hoverbox oriented to right/above of trigger
			$("#lightbox.hoverbox .hoverbox-arrow").addClass("bot-right");
		} else if ( showBottom == true && showLeft == true ) { // hoverbox oriented to right/below of trigger
			$("#lightbox.hoverbox .hoverbox-arrow").addClass("top-right");
		} else {
			$("#lightbox.hoverbox .hoverbox-arrow").addClass("bot-left");
		}
		// using 'hide' is a fix for opera, fadeIn now uses 'block' instead of 'table'
		hoverBox.hide().css({ top:finalPosTop, left:finalPosLeft }).fadeIn("fast");
		
	});			
	
	// if user leaves hoverbox, call to close
	$('#lightbox.hoverbox').live('mouseout', function() {
		closeHoverbox();
	});	
	// if user leaves trigger, call to close
	$('.hoverbox-trigger').mouseout(function() {
		closeHoverbox();
	});			
	// if user interacts with hoverbox, cancel call to close
	$('#lightbox.hoverbox').live('mouseover', function() {
		clearTimeout(closeTimer);
	});	
	
	closeHoverbox = function() {
		closeTimer = setTimeout('closeFoo()', 100);
	}
	closeFoo = function() {
		$("#lightbox.hoverbox").remove();
	}

});