$(document).ready(function() {
	
	// When message Arrow image is clicked, it toggles the message.
	$(".first .toggle_message")
		.attr( "href", "javascript:void( 0 )" )
		.click(function () {
			$(".second .message_container").slideUp();
			$(".third .message_container").slideUp();
			$(".fourth .message_container").slideUp();
			$(".fifth .message_container").slideUp();
	    	$(".first .message_container").slideToggle();
		});
		
	// When message Arrow image is clicked, it toggles the message.
	$(".second .toggle_message")
		.attr( "href", "javascript:void( 0 )" )
		.click(function () {
			$(".first .message_container").slideUp();
			$(".third .message_container").slideUp();
			$(".fourth .message_container").slideUp();
			$(".fifth .message_container").slideUp();
	    	$(".second .message_container").slideToggle();
	    });
	
	// When message Arrow image is clicked, it toggles the message.
	$(".third .toggle_message")
		.attr( "href", "javascript:void( 0 )" )
		.click(function () {
			$(".first .message_container").slideUp();
			$(".second .message_container").slideUp();
			$(".fourth .message_container").slideUp();
			$(".fifth .message_container").slideUp();
		    $(".third .message_container").slideToggle();
    	});

	// When message Arrow image is clicked, it toggles the message.
	$(".fourth .toggle_message")
		.attr( "href", "javascript:void( 0 )" )
		.click(function () {
			$(".first .message_container").slideUp();
			$(".second .message_container").slideUp();
			$(".third .message_container").slideUp();
			$(".fifth .message_container").slideUp();
	    	$(".fourth .message_container").slideToggle();
	    });
	
	// When message Arrow image is clicked, it toggles the message.
	$(".fifth .toggle_message")
		.attr( "href", "javascript:void( 0 )" )
		.click(function () {
			$(".first .message_container").slideUp();
			$(".second .message_container").slideUp();
			$(".third .message_container").slideUp();
			$(".fourth .message_container").slideUp();
	    	$(".fifth .message_container").slideToggle();
    	});

	// 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();
    	});
	
});