// Skin Specific JS goes here. Watch out for possible jQuery no conflict setup (like $j instead of $)

$j(document).ready(function(){
	$j(".collapsable-container-1").each(function(i, collapsableContainer) {
		var title = $j('h1, h2, h3', collapsableContainer).get(0);
		if (!title) return;
		
		// go up from the title element to the top level element wrapping this title
		var topLevelTitle = title;
		var i=0;
		while($j(topLevelTitle).parent().get(0) != collapsableContainer) {
			topLevelTitle = $j(topLevelTitle).parent().get(0);
			if (i>50) break; // Should not happen
			i++;
		}

		// now, take all following siblings of TopLevelTitle, and add them to a newly created DIV
		$j("~ *", topLevelTitle).wrapAll("<div class='collapsableContent'></div>");
		var elementToBeCollapsed = $j(".collapsableContent", collapsableContainer).get(0);
		$j(elementToBeCollapsed).hide();
		
		// now, wire up the functionality
		$j(title).append('<a class="collapseLink">Expand</a>');
		var collapseLink = $j('a', title).get(0);
		
		$j(title).bind('click', elementToBeCollapsed, function(event) {
			// Toggle elementToBeCollapsed
			$j(event.data).toggle(50);
			// Change label
			if ($j('a.collapseLink', this).html() == 'Expand') {
				$j('a.collapseLink', this).html('Collapse');
			} else {
				$j('a.collapseLink', this).html('Expand');
			}
		});
	});
});