/**  
* Add events to buttons. Clicking a button will hide all panels before showing the panel corresponding to that button
* From http://www.daniel-skinner.co.uk/chaining-with-mootools-12-tutorial/31/01/2008
*/
var SponsorPanel = new Class({
    Implements: [Chain],
    /**
    * Define the element ID of the button and the element ID of the corresponding panel
    */
    actions: {},
    /**
    * An Array to store an effect instance for each panel
    */
    effects: [],
    initialize: function(hash) {
        this.actions = hash;
        /**
        * Add an onclick event to each button. Clicking a button calls the showPanel method
        */
        this.actions.getKeys().each(function(buttonId) {
            if ($(buttonId)) {
                $(buttonId).addEvent('click',
                    function() {
                        this.showPanel(buttonId);
                    } .bind(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: 90, 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                  
        */
        this.actions.getValues().each(function(panelId) {
            this.chain(
                    function() { this.effects[panelId].start(0); },
                    function() { $(panelId).setStyles({ 'display': 'none' }); }
            );
            this.callChain();
            $(this.actions.keyOf(panelId)).removeClass("highlighted");

        }, this);
    },
    /**
    * Handle a button click by fading and hiding all open panels and then appearing the corresponding panel
    */
    showPanel: function(buttonId) {
        this.hideAll();
        var panel = this.actions.get(buttonId);
        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

        $(buttonId).addClass("highlighted");

    }
});

// ------------------------------------------------------------

var PerfectDayPanel = new Class({
    Implements: [Chain],
    /**
    * Define the element ID of the button and the element ID of the corresponding panel
    */
    actions: {},
    /**
    * An Array to store an effect instance for each panel
    */
    effects: [],
    initialize: function(hash) {
        this.actions = hash;
        /**
        * 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, buttonId));
        }, this);

        this.callChain();

        /* randomly set one tab to be selected*/
        var selectedIndex = $random(1, this.actions.getLength());
        $('daypanel-' + selectedIndex).setStyles({ 'display': 'block' });
        $('daybutton-' + selectedIndex).addClass('selected');

//        if (selectedIndex == 1)
//            $('daybutton-' + selectedIndex).addClass('top');

    },
    /**
    * Add the a actions required to hide all panels to the Chain call stack
    */
    hideAll: function() {

        this.actions.getValues().each(function(panelId) {
            this.chain(
                    function() { $(panelId).setStyles({ 'display': 'none' }); this.callChain(); }
            );
        }, this);

        // remove selected style
        this.actions.getKeys().each(function(buttonId) {
            this.chain(
                    function() { $(buttonId).removeClass('selected'); this.callChain(); },
                    function() { $(buttonId).removeClass('top'); this.callChain(); }
            );
        }, this);


    },
    /**
    * Handle a button click by fading and hiding all open panels and then appearing the corresponding panel
    */
    showPanel: function(event, buttonId) {
        this.hideAll();
        var panel = this.actions.get(event.target.get('id'));

        this.chain(
            function() { $(panel).setStyles({ 'display': 'block' }); this.callChain(); },
            function() { $(buttonId).addClass('selected'); this.callChain(); }
            // ,
            // function() { if (buttonId == "daybutton-1") $(buttonId).addClass('top'); this.callChain(); }
        );
        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
    }
});

// ------------------------------------------------------------