$(function() 
{
		
	$('.content').hide();
	$('#infoBox').hide();
	
	/*init the scrolling function on the div */
	$("div.scrollablestaff").scrollable({ size:5, prev:'.prevstaff',next:'.nextstaff',items:'#thumbsstaff', hoverClass:'hover',loop:true});
	
	/*bind mouse events to the holder div to listen for mouseover & mouseout*/
	$('a',$('#thumbsstaff')).bind('mouseover', function() { showInfo($(this)) } );
	$('a',$('#thumbsstaff')).bind('mouseout',  function() { hideInfo($(this)) } );
	
	
});


function showInfo(theDiv) 
{

	$content = $('#'+ $(theDiv).attr("id") +'Content').html();
	
	$(theDiv).parent().addClass('current');
	$('#thumbsstaff div:not(.current)').stop().animate({opacity:0.1}, 500);

	$('#infoBox').stop().show().animate({opacity:0.9}, 500);

	$('#infoBox').html($content);
	
	/* Cufon.replace('#infoBox h4')('#infoBox h5'); */
	
		if(($(theDiv).position().left + $('#thumbsstaff').position().left) < 300)
		{
			left = $(theDiv).width() + $(theDiv).position().left + 10 + $('#thumbsstaff').position().left;
			$('#infoBox').css({ "left": left})
			//$("#infoBox").stop().animate({  "left" : left   }, 500); 
		}
		
			else
			{
				left = $(theDiv).position().left - 100 - $(theDiv).width() + $('#thumbsstaff').position().left;
				$('#infoBox').css({ "left": left});
				
				
				   // $("#infoBox").stop().animate({  "left" : left   }, 500);  
				
			}
			
}//end showInfo


function hideInfo(theDiv)
{
	$('#infoBox').stop().animate({opacity:0}, 500, function(){ $('#infoBox').hide() });
	$('#thumbsstaff div').stop().animate({opacity:0.9}, 500);
	$(theDiv).parent().removeClass('current');
}//end hideInfo