/*
 * Look for elements that are hide-able and add a toggle button.  
 * Then hide them except for the button.
 */
$(document).ready( function() {

	// $(".hideable").prepend(
		// "<a href=\"#\" class=\"toggle\">Show/Hide</a>");

		$(".hideable").wrapInner("<div class=\"collapseable\"></div>").prepend(
				"<a href=\"#\" class=\"toggle\">Show/Hide</a>");
		
		
		$(".collapseable").children(":first-child").each(function() {
			$(this).parent().parent().prepend($(this).clone());
		});
		
		$(".collapseable").children(":first-child").remove();
		
		// Toggle the hideable object
		$("a.toggle").click( function() {
			$(this).parent().find(".collapseable").toggle(400, function() {
				// Now make sure the content and sideBar are the same height
				$("#sideBanner").animate({
					height: $("#content").height() }, 400, "linear");	
			});
			
			return false;
		});

		$(".collapseable").hide();
		
	});