// JavaScript Document


/*
<body>
<ol class="message_list">
	<ol class="message_list">
	<li>
		<p class="message_head"><img src="images/titles/2009.png"></p>
		<div class="message_body">
			<p>Hello Nick,<br />
				<br />
				This is the latest message display. The rest are collapsed by default</p>
		</div>
	</li>
	<li>
		<p class="message_head"><img src="images/titles/2008.png"></p>
		<div class="message_body">
			<p>Hello Nick,<br />
				<br />
				This is the latest message display. The rest are collapsed by default</p>
		</div>
	</li>
	<li>
		<p class="message_head"><img src="images/titles/2007.png"></p>
		<div class="message_body">
			<p>Hello Nick,<br />
				<br />
				This is the latest message display. The rest are collapsed by default</p>
		</div>
	</li>
</ol>
<p class="collapse_buttons"><a href="#" class="show_all_message">Show all message (9)</a> <a href="#" class="show_recent_only">Show 5 only</a> <a href="#" class="collpase_all_message">Collapse all</a></p>
</body>
*/






$(document).ready(function(){
	
	//hide message_body after the first one
	$(".message_list .message_body:gt(0)").hide();
	
	//hide message li after the 5th
	$(".message_list li:gt(10)").hide();

	
	//toggle message_body
	$(".message_head").click(function(){
		$(this).next(".message_body").slideToggle(500)
		return false;
	});

	//collapse all messages
	$(".collapse_all_message").click(function(){
		$(".message_body").slideUp(500)
		return false;
	});
	
	//show all messages
	$(".show_all_message").click(function(){
		$(".message_body").slideDown(500)
		return false;
	});
	

});
