$(document).ready(function ()
{
	$("#container_accordions_teaser img").bind("mouseover mouseout", function() {hoverAcc(this);});
	$("#container_accordions_teaser img").click(function() {showAcc(this);});
	
	//on page load display first panel.
	$("#accordion_read_container").css("visibility", "visible");
	$("#accordion_read_container").css("display", "block");
});
	
function hoverAcc (el)
{
	// Remove hover (turn off) all images [removes "_on" from src filename].
	$("#container_accordions_teaser img").attr("src", function ()
	{
		// Set hover for this img by forcing "_on" into src filename
		// Retains hover on for selected accordion panel determined by visibility of sibling div.
		var newSrc = $(this).attr("src").replace(/_on/g, "");
		if ($(this).next().next().css("visibility") == "visible" || $(this).attr("id") == el.id)
			newSrc = newSrc.replace(".gif", "_on.gif");
		return newSrc;
	});
}	// hoverAcc

function showAcc (el)
{
	// Collapse all accordion panels first
	$("#accordion_read_container").css("visibility", "hidden");
	$("#accordion_read_container").css("display", "none");
	
	$("#accordion_watch_container").css("visibility", "hidden");
	$("#accordion_watch_container").css("display", "none");
	
	$("#accordion_listen_container").css("visibility", "hidden");
	$("#accordion_listen_container").css("display", "none");	
	
	$("#accordion_discuss_container").css("visibility", "hidden");
	$("#accordion_discuss_container").css("display", "none");
	
	// Handle hover on/off graphics
	hoverAcc(el);
	
	// Now just expand the selected panel
	$("#"+el.id).next().next().css("visibility", "visible");
	$("#"+el.id).next().next().css("display", "block");
}	// showAcc