var active_panel = '';

Event.observe(window, 'load', function() {
	$$('.link_panel').each(function(e){
		e.observe('click', function(event) {
			// if there is an active panel, hide it
			if (active_panel != "") hide_panel(active_panel);
			
			elem_id = e.id.substr(11);
			active_panel = 'panel_'+elem_id;
		  new Effect.Parallel([
			  new Effect.Morph('panel_'+elem_id, { sync: true, style:"width:400px;" }), 
			  new Effect.Opacity('panel_'+elem_id, { sync: true, from: 0, to: 1 }) 
			], { 
			  duration: 0.8,
			  delay: 0.5
			});
			Event.stop(event);
		});
	});
	
	function hide_panel(e) {
	
		new Effect.Parallel([
		  new Effect.Morph(e, { sync: true, style:"width:0px;" }), 
		  new Effect.Opacity(e, { sync: true, from: 1, to: 0 }) 
		], { 
		  duration: 0.8,
		  delay: 0.5
		});			

	}
});