var expanded = 'url(/images/collapse.gif)';
var collapsed = 'url(/images/expand.gif)';
var collapsibles = new Array();

var setupSliders = function(){
	//list of target elements
	var list = $$('div.collapsable');
	//list elements to be clicked on
	var headings = $$('h2.collapsable-header');
	
	headings.each( function(heading, i) {
	
		//for each element create a slide effect
		var collapsible = new Fx.Slide(list[i], {
			duration: 300,
			transition: Fx.Transitions.linear,
			onComplete: function(request){
					var open = request.getStyle('margin-top').toInt();
					var button = headings[i].getElement('a');
					var fade = new Fx.Style(button, 'opacity', {duration: 400});
					if(open >= 0){
						new Fx.Scroll(window).toElement(headings[i]);
						
						fade.start(0.0);
						(function(){button.setStyle('backgroundImage', expanded)}).delay(400);
						(function(){fade.start(1);}).delay(650);
					}
					else{
						fade.start(0.0);
						(function(){button.setStyle('backgroundImage', collapsed)}).delay(400);
						(function(){fade.start(1);}).delay(650);
					}
			}
		});
		
		//and store it in the array
		collapsibles[i] = collapsible;
		
		//add event listener
		heading.onclick = function(){
			collapsible.toggle();
			return false;
		}
		
		//collapse all of the list items
		if(list[i].className.indexOf('open')<0){
			collapsible.hide();
		}
		else{			
			headings[i].getElement('a').setStyle('backgroundImage', expanded);	
		}
	
	});
	
	//collapse all
	if($('collapse-all')){
		$('collapse-all').onclick = function(){
			headings.each( function(heading, i) {
				collapsibles[i].hide();
			});
		}
		
		//expand all
		$('expand-all').onclick = function(){
			headings.each( function(heading, i) {
				collapsibles[i].show();
			});
		}
	}
}

window.addEvent('domready', function() {
	setupSliders();
});