jQuery(document).ready(function() {

	$("#nav a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "35"}, "slow");
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "45"}, "fast");
	});


});


// ***********************************This makes ever even li to that class
/*
$("li:even").addClass("red");
*/


// ********************************This function finds all li and puts the word BAM! on the end with the number of times it occurs
/*"
$("#orderedlist").find("li").each(function(i) {
     $(this).append( " BAM! " + i );
   });
*/






//*********************************Hide everything under class .stuff
/*
$("a").toggle(function(){
     $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
   },function(){
     $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
   });
*/






//************************************for article page, hide the body of the article (see html below example)
/*
$(".article .thebody").hide();
     $("#container .article ul")
       .prepend("<li class='readbody'><a href='' title='Read the article'>Read Body</a></li>");
			 
			 
<div id="container">
   <div class="article">
     <h3>Title 01</h3>
     
     <p class="summary">Summary 01</p>
     <p class="thebody">Lorem ipsum....</p>
     
     <ul class="actions">
       <li><a href="">comment</a></li>
       <li><a href="">Trackback</a></li>
     </ul> 
     
   </div>
   
   <div class="article">
     <h3>Title 02</h3>
     
     <p class="summary">Summary 02</p>
     <p class="thebody">Lorem ipsum....</p>
     
     <ul class="actions">
       <li><a href="">comment</a></li>
       <li><a href="">Trackback</a></li>
     </ul>
   </div>
 </div>

			 
*/

//************************************hide in 10 seconds
/*
$("p").hide(10000);
*/




//**********************************Do changing art gallery
/* see http://www.webdesignerwall.com/demo/jquery/

$("h2").append('<em></em>')

	$(".thumbs a").click(function(){
	
		var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");
		
		$("#largeImg").attr({ src: largePath, alt: largeAlt });
		
		$("h2 em").html(" (" + largeAlt + ")"); return false;
	});

<h2>Illustrations<em> (Image 4)</em></h2>

<p><img id="largeImg" src="images/img4-lg.jpg" alt="Image 4"></p>

<p class="thumbs">
	<a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg"></a>
	<a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg"></a>
	<a href="images/img4-lg.jpg" title="Image 4"><img src="images/img4-thumb.jpg"></a>
	<a href="images/img5-lg.jpg" title="Image 5"><img src="images/img5-thumb.jpg"></a>
	<a href="images/img6-lg.jpg" title="Image 6"><img src="images/img6-thumb.jpg"></a>
</p>

*/





//***********************************make hovering link directions
/*
$(".menu a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
	});
	
	
<ul class="menu">
	<li>
		<a href="http://www.webdesignerwall.com">Web Designer Wall</a>		
		<em style="top: -85px; display: none;">A wall of design ideas, web trends, and tutorials</em>
	</li>
	<li>
		<a href="http://bestwebgallery.com">Best Web Gallery</a>
		<em>Featuring the best CSS and Flash web sites</em>
	</li>
	<li>
		<a href="http://www.ndesign-studio.com">N.Design Studio</a>
		<em>Blog and design portfolio of WDW designer, Nick La</em>
	</li>
</ul>

body {
-x-system-font:none;
font-family:Arial,Helvetica,sans-serif;
font-size:75%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:120%;
margin:10px auto;
width:570px;
}
.menu {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:100px 0 0;
padding:0;
}

.menu li {
float:left;
margin:0 2px;
padding:0;
position:relative;
text-align:center;
}

.menu a {
background:transparent url(images/button.gif) no-repeat scroll center center;
color:#000000;
display:block;
font-weight:bold;
padding:14px 10px;
text-decoration:none;
width:144px;
}

.menu li em {
background:transparent url(images/hover.png) no-repeat scroll 0 0;
display:none;
font-style:normal;
height:45px;
left:-15px;
padding:20px 12px 10px;
position:absolute;
text-align:center;
top:-85px;
width:180px;
z-index:2;
}
*/