$(document).ready(function() {

	// When Mark As Read button is pressed, change the look to As Read.
	$(".first .mark_as_read").click(function () {
		$(".first").removeClass("unread");
		$(".first").addClass("read");
		var howMany = $(".unread");
		$("#message_count").text("(" + howMany.size() + " unread messages)");
		});
	$(".first .mark_as_unread").click(function () {
		$(".first").removeClass("read");
		$(".first").addClass("unread");
		var howMany = $(".unread");
		$("#message_count").text("(" + howMany.size() + " unread messages)");
		});
	// When Mark As Read button is pressed, change the look to As Read.
	$(".second .mark_as_read").click(function () {
		$(".second").removeClass("unread");
		$(".second").addClass("read");
		var howMany = $(".unread");
		$("#message_count").text("(" + howMany.size() + " unread messages)");
		});
	$(".second .mark_as_unread").click(function () {
		$(".second").removeClass("read");
		$(".second").addClass("unread");
		var howMany = $(".unread");
		$("#message_count").text("(" + howMany.size() + " unread messages)");
		});
	// When Mark As Read button is pressed, change the look to As Read.
	$(".third .mark_as_read").click(function () {
		$(".third").removeClass("unread");
		$(".third").addClass("read");
		var howMany = $(".unread");
		$("#message_count").text("(" + howMany.size() + " unread messages)");
		});
	$(".third .mark_as_unread").click(function () {
		$(".third").removeClass("read");
		$(".third").addClass("unread");
		var howMany = $(".unread");
		$("#message_count").text("(" + howMany.size() + " unread messages)");
		});
	// When Mark As Read button is pressed, change the look to As Read.
	$(".fourth .mark_as_read").click(function () {
		$(".fourth").removeClass("unread");
		$(".fourth").addClass("read");
		var howMany = $(".unread");
		$("#message_count").text("(" + howMany.size() + " unread messages)");
		});
	$(".fourth .mark_as_unread").click(function () {
		$(".fourth").removeClass("read");
		$(".fourth").addClass("unread");
		var howMany = $(".unread");
		$("#message_count").text("(" + howMany.size() + " unread messages)");
		});
	// When Mark As Read button is pressed, change the look to As Read.
	$(".fifth .mark_as_read").click(function () {
		$(".fifth").removeClass("unread");
		$(".fifth").addClass("read");
		var howMany = $(".unread");
		$("#message_count").text("(" + howMany.size() + " unread messages)");
		});
	$(".fifth .mark_as_unread").click(function () {
		$(".fifth").removeClass("read");
		$(".fifth").addClass("unread");
		var howMany = $(".unread");
		$("#message_count").text("(" + howMany.size() + " unread messages)");
		});
		
	// When Mark All Read button is pressed, make all messages look read.
	$("#mark_all_read").click(function () {
		$(".first").removeClass("unread");
		$(".first").addClass("read");
		$(".second").removeClass("unread");
		$(".second").addClass("read");
		$(".third").removeClass("unread");
		$(".third").addClass("read");
		$(".fourth").removeClass("unread");
		$(".fourth").addClass("read");
		$(".fifth").removeClass("unread");
		$(".fifth").addClass("read");
		$("#message_count").text("(0 unread messages)");
		});
	
	// Collapse all messages when Collapse All button is pressed
	$("#collapse_all").click(function () {
		$(".message_container").slideUp();
    	});

	// Expand all messages when Expand All button is pressed
	$("#expand_all").click(function () {
		$(".message_container").slideDown();
    	});
	
});