// JavaScript Document
// Code by Tim Swalling (Sibelius Software Australia) and David Matthewman (Sibelius Software UK)

var section_head_template = new Template(
		'<table width=\"100%\">'
	+ '<tr>'
	+ '<td width=\"20px\" align=\"right\" valign=\"top\">'
	+ '<a href=\"\#">'
	+ '<img src=\"http://www.sibelius.com/images/helpcenter/arrow_closed.gif\" alt=\"&lt;\" vspace=\"2\" border=\"0\" height=\"11px\" width=\"11px\" />'
	+ '<img src=\"http://www.sibelius.com/images/helpcenter/arrow_open.gif\" alt=\"\\/\" vspace=\"2\" border=\"0\" height=\"11px\" width=\"11px\" style=\"display: none\" />'
	+ '</a>'
	+ '</td>'
	+ '<td align=\"left\" valign=\"top\">'
	+ '<a href=\"#">#{text}</a></td></tr></table>');

function toggleSection(event) {
	event.stop();
	var header = event.findElement('div.section_head');
	if (header && header.next('div.section_body')) {
	  header.next('div.section_body').toggle();
	}
	header.select('img').invoke('toggle');
}

function wrapWithTags(element) {
	var innerText = element.down('p').innerHTML;
	element.update(section_head_template.evaluate({ text: innerText}));
}

document.observe('dom:loaded', function() {
	var body_elements = $$('div.section_body');
	body_elements.invoke('hide');
	var head_elements = $$('div.section_head');
  head_elements.invoke('observe', 'click', toggleSection);
	head_elements.each(wrapWithTags);

});