$(document).ready(function(){
  $("#callout-container").height( ($(".callout-item").length)*($(".callout-item:first").height()+1)-1 );
  $(".callout-item").wrapInner('<div style=" padding: 10px;"></div>');
  container_pos_top = 0;
  container_size = {'height': $("#callout-container").height(),'width': $("#callout-container").width()};
  bigger_x=50;
  content_size = {'height': 180,'width': 960};
  $(".callout-item").mouseenter(function(){
    size = {'height': $(this).height(),'width': $(this).width()};
    pos = $(this).position();
	index=$(".callout-item").index(this);
	$('.hover-callout').each(function(){
	  $(this).remove();
	});
    $('<div class="hover-callout" style="position:absolute;right:0px;top:'+(pos.top)+'px;width:'+(size.width)+'px;height:'+(size.height)+'px;"><div class="hover-callout-open" style="height:'+(size.height)+'px;"><div style="top:50%;position:absolute;height:20px;margin-top:-10px;width:18px;text-align:center;">+</div></div>'+($(this).html())+'</div>').insertAfter(".callout-item:last");
	$(".hover-callout").animate({width: '+='+bigger_x},'fast');
	$('.hover-callout').click(function(){
	  $(this).remove();
	  flyout_start_pos = {'top': (pos.top),
	                      'left': (pos.left-bigger_x)};
	  $('<div class="callout-background" style="position:absolute;right:0px;top:'+(container_pos_top)+'px;width:'+(container_size.width)+'px;height:'+(container_size.height)+'px;"></div>').insertAfter(".callout-item:last");
	  $('.callout-background').css({opacity: 0.01});
	  
	  $('<div class="click-callout" style="position:absolute;right:0px;top:'+(flyout_start_pos.top)+'px;width:'+(size.width+bigger_x)+'px;height:'+(size.height)+'px;"><div class="flyout-close"><div style="top:50%;position:absolute;height:20px;margin-top:-10px;width:18px;text-align:center;">-</div></div><div class="actual-content" style="display:none;">'+($(".callout-content:eq("+(index)+")").html())+'</div></div>').insertAfter(".callout-background");
	  
	  flyout_end_pos = {'top': (pos.top-((content_size.height-size.height)/2)),
	                    'left': (pos.left+size.width-content_size.width)};
	  if(flyout_end_pos.top<container_pos_top) {
	    flyout_end_pos.top = container_pos_top;
	  }
	  if(flyout_end_pos.top+content_size.height>container_size.height+container_pos_top) {
	    flyout_end_pos.top = container_size.height+container_pos_top-content_size.height;
	  }
	  try{
	    $('.actual-content').find(".media-embed").each(function(){$(this).embedMedia();});
	    $('.actual-content').find(".media-overlay").each(function(){$(this).overlayMedia();});
	  }
	  catch(err){
	  }

	  $('.click-callout').animate({top: flyout_end_pos.top,
								   width: content_size.width,
								   height: content_size.height},'fast',function(){
								     $('.actual-content').fadeIn('slow');
									 $('.flyout-close').fadeIn('fast');
								   });
      $('.callout-background').animate({opacity: 0.85},'fast');
	  $('.flyout-close, .callout-background').click(function(){
	    $('.callout-background').each(function(){$(this).remove();});
		$('.click-callout').each(function(){$(this).remove();});
	  });
	});
	$('.hover-callout').mouseleave(function(){
	  $(this).remove();
	});
  });
});