/**  
 * 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
     */   
	lastpanel : "",
    actions: new Hash({}),
    /**
     * An Array to store an effect instance for each panel
     */         
    effects: [],
    initialize: function(startpic,menu_array)
    {
		this.lastpanel = startpic;
		this.actions = menu_array;
        /**
         * Add an onclick event to each button. Clicking a button calls the showPanel method
         */                 
        this.actions.getKeys().each(function(buttonId) {
            $(buttonId).addEvent('mouseover', 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), { property:'opacity', duration: 'long', onComplete: function() { this.callChain();}.bind(this)});
         }, this);     
         
         /**
          * Initialize by hiding all panels, note the call to callChain to cause stuff to happen
          */                 
        //this.hideFirst();         
        //this.hideAll();
        this.callChain();                    
    },        
    hideLast: function(panelId)
    {  			
		this.chain(
			function() { $(panelId).setStyles({'display': 'none'}); this.callChain(); } 
		);
	},      
    hideFirst: function()
    {  
        this.actions.getValues().each(function(panelId) {
			if(panelId != this.lastpanel){			
				this.chain(
					function() { $(panelId).setStyles({'display': 'none'}); this.callChain(); } 
				);
			}
        },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'));
		if(this.lastpanel != panel){
			this.hideLast(this.lastpanel);	
			this.lastpanel = panel;
			 this.chain(
			 	function() { $(panel).setStyles({'display': 'block', 'opacity': '0'}); this.callChain(); },
				function() { this.effects[panel].start(1); }
			); 
			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
		
		}
    }
});

	function changepic(picname){
		var myRequest = new Request({	url: 'gallery.inc.php',
			method: 'get',
			onSuccess: function(responseText, responseXML){
		   $('gallery').set('html', responseText);

			}
		});
		myRequest.send('pic='+picname);
	}