/* 
    Copyright (c) 2008 Justin Holton

    Permission is hereby granted, free of charge, to any person
    obtaining a copy of this software and associated documentation
    files (the "Software"), to deal in the Software without
    restriction, including without limitation the rights to use,
    copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the
    Software is furnished to do so, subject to the following
    conditions:

    The above copyright notice and this permission notice shall be
    included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
    OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
    HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
    WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
    OTHER DEALINGS IN THE SOFTWARE.
*/
var WizardFadeEffect = new Class({
    options: {
        // Options the user may easily configure.
        baseElementID: 'theForm',                                   // The element that contains the steps to give the fade effect.
        navigationCssClass: 'nav',                                  // The CSS class you want to specify for the navigation links.
        stepCssClass: 'question',                                   // The CSS class for the element that contains each step/question.
        previousStepText: '<< Previous Question',             // Custom text for the "Previous" button.
        nextStepText: 'Next Question >>',                     // Custom text for the "Next" button.
        finishStepText: 'Finish Survey!',                           // Custom text for the "Finished" button. (Empty string disables.)
        finishStepUrl: 'javascript:document.forms[0].submit()',     // Custom link after steps are complete.
        fadeDurationInMilliSeconds: 1000                            // The amount of time between fade effects.
    },
    initialize: function(options) {
        this.setOptions(options);

        // Get all the steps in the wizard.
        this.steps = $(this.options.baseElementID).getElements('.' + this.options.stepCssClass);
        this.currentStep = 0;
		
        // Set up each step.
        for(var i = 0; i < this.steps.length; i++)
        {
            var step = this.steps[i];

            // create an empty navigation row and insert into bottom of the step.
            var navigation = new Element('div', { 'class' : this.options.navigationCssClass}).inject(step, 'inside');

            // create navigation link to move backward.
            var previousStepLink = new Element('a').addEvent('click', this.fadeToStep.pass(false, this));
            previousStepLink.innerHTML = this.options.previousStepText;

            // create navigation link to move forward.
            var nextStepLink = new Element('a').addEvent('click', this.fadeToStep.pass(true, this));
            nextStepLink.innerHTML = this.options.nextStepText;

            // create separator to separate navigation pieces.
            var separator = new Element('span');
            separator.innerHTML = '&nbsp;|&nbsp;';

            // set up navigation links depends on the step we're on.
            if (i == 0)
                nextStepLink.inject(navigation, 'inside'); // if the first step.
            else if (i == this.steps.length - 1) // if last step.
            {
                // create navigation link to move forward.
                var finishedStepLink = new Element('a', { 'href' : this.options.finishStepUrl});
                finishedStepLink.innerHTML = this.options.finishStepText;

                // backward or "finished" movement.
                previousStepLink.inject(navigation, 'inside');
                separator.inject(navigation, 'inside');
                finishedStepLink.inject(navigation, 'inside');
            }
            else
            {
                // allow forward and backward movement.
                previousStepLink.inject(navigation, 'inside');
                separator.inject(navigation, 'inside');
                nextStepLink.inject(navigation, 'inside');
            }

            // hide all steps but the first.
            if (i > 0)
            {
                // hide the step.
                step.style.display = 'none';
                step.set('opacity',0);
            }
            else
                step.set('opacity',1);
        }
    },
    fadeToStep: function(isMovementForward)
    {
        // hide the current step.
        new Fx.Morph(this.steps[this.currentStep], {duration: this.options.fadeDurationInMilliSeconds}).start({'opacity': [1,0]});
        this.steps[this.currentStep].style.display = 'none';
        
        // Determine the next step to show.
        var nextStep = isMovementForward ? this.currentStep + 1 : this.currentStep - 1;
        
        // Fade to that step.
        this.steps[nextStep].style.display = 'block';
        new Fx.Morph(this.steps[nextStep], {duration: this.options.fadeDurationInMilliSeconds}).start({'opacity': [0,1]});
        
        // Update our location.
        this.currentStep = nextStep;
    }
});
WizardFadeEffect.implement(new Options, new Events);

window.addEvent('domready', function() {
    new WizardFadeEffect();
    
    // Since we're submitting the form via JavaScript we don't need a real submit button.
    $('submit').style.display = 'none';
});