/**
 * Добавляем события к кнопкам. Нажатие кнопки приведет
 * к закрытию всех панелей до того, как будет показана 
 * панель, соответствующая нажатой кнопке.
 */
var ChainExample = new Class({
	Implements : Chain,
 
	// Определяем ID кнопок и соответствующих им панелей.	
	actions : new Hash({
		'button-one'   : 'panel-one',
		'button-two'   : 'panel-two',
		'button-three' : 'panel-three'
	}),
 

	// Массив, в котором будут храниться объекты эффектов к каждой панели.
	effects : [],
 
	initialize: function() {
		// Добавляем событие onclick на каждую кнопку. 
		// Нажатие на кнопку приведет к вызову метода showPanel()
		this.actions.getKeys().each(function(buttonId) {
			$(buttonId).addEvent('click', this.showPanel.bindWithEvent(this));
		}, this);
 
		// Создаем объект Fx (эффект) для каждой панели.
		this.actions.getValues().each(function(panelId) {
			this.effects[panelId] = new Fx.Tween($(panelId), 'opacity', {
				duration   : 'short',
				// При завершении эффекта ...
				onComplete : function() {
					// ... вызываем следующую функцию из цепочки
					this.callChain()
				}.bind(this)
			});
		}, this);
 
		this.hideAll();   // Прячем все панели при инициализации
		this.callChain(); // Запускаем вызов цепочки функций
	},
 
	// Скрываем все панели
	hideAll: function() {
 		// Пробегаемся по каждой панели и последовательно:
 		//	1. плавно скрываем панель
 		//	2. устанавливаем css свойство display в none
 		// Заметим, что эта функция не вызывает ничего на самом деле,
 		// он просто добавляет действия в цепочку (Chain)
 		
		this.actions.getValues().each(function(panelId) {
			this.chain(
				function() { this.effects[panelId].start(0); },
				function() {
					$(panelId).setStyles({ 'display' : 'none' });
					
					// Вызываем следующую функцию из цепочки
					this.callChain();
				}
			);
		},this);
	},
 
	// При нажатии кнопки происходит плавное исчезание всех
	// открытых панелей, а затем появляется панель, соответствующая нажатой кнопке.
	showPanel: function(event) {
		this.hideAll();
		var panel = this.actions.get(event.target.get('id'));
 
		this.chain(
			function() {
				$(panel).setStyles({'display': 'block', 'opacity': '0'});
				
				// Вызываем следующую функцию из цепочки
				this.callChain();
			},
			// Запускаем эффект (появление панели)
			function() { this.effects[panel].start(1); }
		);
 
		// Запускаем вызов цепочки функций
 		this.callChain(); 
	}
});
 
window.addEvent('domready', function() {
	var myChain = new ChainExample();
});