/**  
 * Add events to buttons. Clicking a button will hide all panels before showing the panel corresponding to that button
 */  
var ChainExample = new Class({      
    Implements: [Chain],
    /**
     * Define the element ID of the button and the element ID of the corresponding panel
     */         
    actions: new Hash({
        'button-1': '1', 
        'button-2': '2'
//        'button-3': '3'
    }),
		buttons: new Hash({
        '2': 'button-2',
        '3': 'button-3'
    }),
    /**
     * An Array to store an effect instance for each panel
     */         
    effects: [],
    initialize: function()
    {
        /**
         * Add an onclick event to each button. Clicking a button calls the showPanel method
         */    

					this.actions.getKeys().each(function(buttonId) {
							$(buttonId).addEvent('click', this.showPanel.bindWithEvent(this));
					},this);

        /**
         * Create an Fx object for each panel
         
         this.actions.getValues().each(function(panelId) {
            this.effects[panelId] = new Fx.Tween($(panelId), 'opacity', { duration: 'short', onComplete: function() { this.callChain();}.bind(this)});
         }, this);     
         */
         this.actions.getValues().each(function(panelId) {
            this.effects[panelId] = new Fx.Morph($(panelId), { duration: 'short', transition: Fx.Transitions.linear, onComplete: function() { this.callChain();}.bind(this)});
         }, this); 
				 
				 this.buttons.getValues().each(function(buttonID) {
            this.effects[buttonID] = new Fx.Morph($(buttonID), { duration: 100, transition: Fx.Transitions.linear, onComplete: function() { this.callChain();}.bind(this)});
         }, this);  
         /**
          * Initialize by hiding all panels, note the call to callChain to cause stuff to happen
          */                   
        this.callChain();                    
    },
    /**
     * Add the a actions required to hide all panels to the Chain call stack
     */         
    hideAll: function()
    {  
        /**
         * loop each panel and Chain: 1. fade the panel, 2. set the display property to "none" after the effect has finished.
         * 
         * Note that this function does not actually cause anything to happen, it simply adds actions to the Chain                  
         */
			  var myarray = this.actions.getValues();		
				myarray.reverse();
				myarray.each(function(panelId) {
            if(panelId!='1')
						{
							var button = this.buttons[panelId];
							//alert(button);
							this.chain( 
									function() { this.effects[panelId].start({'height': [65, 0],'opacity':[1,0]});},	
									function() { $(panelId).setStyles({'display': 'none'}); this.callChain(); }
							);
						}
        },this);
				
				
				myarray.sort();
				myarray.each(function(panelId) {
            if(panelId!='1')
						{
						var button = this.buttons[panelId];
						//alert(button);
						this.chain( 
							function() { this.effects[button].start({'opacity':[0,1]});
							$(document.getElementById('1')).setStyles({'background-image': 'url(images/step_1_blue.gif)'}); 
					        document.getElementById('formula-1').value= document.getElementById('hidden_initial').value;
									document.getElementById('formula-2').value='';
									document.getElementById('formula-3').value='';
									document.getElementById('formula-4').value='';
									document.getElementById('formula-5').value='';
							}
            );
						}						
        },this);
		},
    /**
     * Handle a button click by fading and hiding all open panels and then appearing the corresponding panel
     */         
    showPanel: function(event)
    {
        var panel = this.actions.get(event.target.get('id'));
				var button = event.target.get('id');
				if(panel=='1')
				{
					this.hideAll();
					this.callChain();  
				}
				else
				{
					var last_panel = parseInt(panel)-1;
					var last_panel_div = document.getElementById(last_panel);
					if(panel==3)
					{
						this.chain( 
								function() { $(panel).setStyles({'display': 'block',opacity:0}); this.callChain(); },
								function() { $(last_panel_div).setStyles({'background-image': 'url(images/step_'+last_panel+'.gif)'}); this.callChain(); },
								function() { this.effects[panel].start({'height': [0, 65],'opacity':[0,1]}); },
								function() { this.effects[button].start({'opacity':[1,0]});}
						);
					}
					else
					{
						this.chain( 
								function() { $(panel).setStyles({'display': 'block',opacity:0, 'background-image': 'url(images/step_'+panel+'_blue.gif)'}); this.callChain(); },
								function() { $(last_panel_div).setStyles({'background-image': 'url(images/step_'+last_panel+'.gif)'}); this.callChain(); },
								function() { this.effects[panel].start({'height': [0, 65],'opacity':[0,1]}); },
								function() { this.effects[button].start({'opacity':[1,0]});}
						);
					}
					this.callChain(); //this call starts the chain. Since each function in the call also makes a call to callChain the entire stack will be executed
				}
    }
});

window.addEvent('domready',
    function()
    {
        var myChain = new ChainExample();
    }
);