// JavaScript Document



$(document).ready(function(){
 
 
// Below is the jquery for the content box to slide down then return back up

  $("#nav_container").hover(function(){
  		$("#content_wrapper").stop().animate({top: "250px"});  //the .stop stops the animation from moving down to 250px if it is no longer "on hover" and returns it to the normal position per the css rule
  },function(){
		$("#content_wrapper").stop().animate({top: "175px"});  //the .stop stops the animation from moving back up to 175px if it is no longer "on hover" and returns it to the normal position per the css rule
	});
  
  
  
// Below is the jquery caption box's to show up


$('.caption_description').each(function(){
		//...set the opacity to 0...
		$(this).css('opacity', 0);
		//..set width same as the image...
		$(this).css('390px', $(this).siblings('img').width());
		//...get the parent (the wrapper) and set it's width same as the image width... '
		$(this).parent().css('390px', $(this).siblings('img').width());
		//...set the display to block
		$(this).css('display', 'block');
	});
	
	$('.caption_wrapper').hover(function(){
		//when mouse hover over the wrapper div
		//get it's children elements with class description
		//and show it using fadeTo
		$(this).children('.caption_description').stop().fadeTo(500, 0.7);
	},function(){
		//when mouse out of the wrapper div
		//use fadeTo to hide the div
		$(this).children('.caption_description').stop().fadeTo(500, 0);
	});
	
});





//BELOW is the original way I made the drop down content for the "content"
//  $("#nav_container").mouseenter(function(){
//  $("#content").animate({top: "250px"});
//  });
  
//  $("#nav_container").mouseleave(function(){
//  $("#content").animate({top: "175px"});
//  });