var Reach = {
	
	start: function(){
		var phases = $$('div.phase');
		phases.each(function(phase, i){Reach.vertical(phase);});
	},
	
	vertical: function(phase){
		
		var list = phase.getElements('li div.collapse');
		var headings = phase.getElements('li h4');
		var collapsibles = new Array();
	
		headings.each( function(heading, i) {
			var collapsible = new Fx.Slide(list[i], { 
				duration: 500, 
				transition: Fx.Transitions.linear,
				onComplete: function(request){ 
					var open = request.getStyle('margin-top').toInt();
					if(open >= 0) new Fx.Scroll(window).toElement(headings[i]);
				}
			});
			
			collapsibles[i] = collapsible;
			
			heading.onclick = function(){
				var span = $E('span', heading);

				if(span){
					var newHTML = span.innerHTML == '+' ? '-' : '+';
					span.setHTML(newHTML);
				}
				
				collapsible.toggle();
				return false;
			}
			
			collapsible.hide();
			
		});
		
		var collapse_all = phase.getElement('a.collapse-all');
		if(collapse_all){
			collapse_all.onclick = function(){
				headings.each( function(heading, i) {
					collapsibles[i].hide();
					var span = $E('span', heading);
					if(span) span.setHTML('+');
				});
				return false;
			}
		}
		
		var expand_all = phase.getElement('a.expand-all');
		if(expand_all){
			expand_all.onclick = function(){
				headings.each( function(heading, i) {
					collapsibles[i].show();
					var span = $E('span', heading);
					if(span) span.setHTML('-');
				});
				return false;
			}
		}
		
	}
};
window.addEvent('domready', Reach.start);