var ProgressBar = Class.create(
{
    initialize :function(steps,opt) {
        this.steps = steps;
        this.anchorId = opt.anchor;
        this.curStep = 0;
        this.autoRedraw = ( (opt.autoRedraw === undefined) ? true : opt.autoRedraw);
    },

    getStep : function(idx) {
        return this.steps[idx];
    },

    delStep : function(idx) {
        this.steps.splice(idx,1);
    },

    activateStep : function(idx) {
        this.steps[idx].activate();
    },

    deactivateStep : function(idx) {
        this.steps[idx].deactivate();
    },

    getStepIndex : function(name) {
        var i;
        var idx = null;
        for (i=0; i<this.steps.length; i++) {
            if (this.steps[i].name === name) {
                idx = i;
                break;
            }
        }
        return idx;
    },

    activateStepByName : function(name) {
        var idx = this.getStepIndex(name);
        if ( idx !== null) {
            this.activateStep(idx);
        }
    },

    deactivateStepByName : function(name) {
        var idx = this.getStepIndex(name);
        if ( idx !== null) {
            this.deactivateStep(idx);
        }
    },

    delStepByName : function(name) {
        var idx = this.getStepIndex(name);
        if ( idx !== null) {
            this.delStep(idx);
        }
    },

    addStep : function(step,idx) {
        var pre;
        var post;
        if ( idx < 0 ) {
            return false;
        } else {
            if ( idx >= this.steps.length) {
                this.steps.push(step);
            } else {
                pre = this.steps.slice(0,idx);
                post = this.steps.slice(idx);
                this.steps = pre.concat(step,post);
            }
        }
    },

    currentStep : function() {
        return this.steps[this.curStep];
    },

    next : function() {

        var nextStep= this.curStep+1;

        while ( this.steps[nextStep] && !this.steps[nextStep].isActive() ) {
            nextStep = nextStep+1;
        }

        // Check if a nextStep exists
        if ( nextStep < this.steps.length ) {
            // Execute onForward
            if ( this.currentStep().onNext !== undefined ) {
                if ( this.currentStep().onNext() === false ) {
                    return false;
                }
            }

            // Hide current page
            this.currentStep().hide();

            // switch current to next and execute onEnter event.
            this.curStep = nextStep;
            this.currentStep().show();

            if ( this.steps[this.curStep].onEnter ) {
                this.steps[this.curStep].onEnter();
            }

            if ( this.autoRedraw ) {
                this.draw();
            }
        }
    },

    prev : function() {
        var nextStep = this.curStep-1;
        while ( !this.steps[nextStep].isActive() ) {
            nextStep = nextStep-1;
        }

        if ( nextStep >= 0 ) {
            if ( this.steps[this.curStep].onPrev ) {
                if ( this.steps[this.curStep].onPrev() === false ) {
                    return false;
                }
            }

            // Hide current page
            this.currentStep().hide();

            // switch current to next and show;
            this.curStep = nextStep;
            this.currentStep().show();

//            if ( this.steps[this.curStep].onEnter ) {
//                this.steps[this.curStep].onEnter();
//            }
            if ( this.autoRedraw ) {
                this.draw();
            }
        }
    },

    draw : function() {
        var clazz; // used to hold td class-name
        var i; // used for loops
        var c; // used for temp storage of content.
        c = '<div id="progressbar-fieldid" class="progressbar"><table><thead></thead><tbody><tr>';
        for (i=0; i < this.steps.length; i++) {
            if ( this.steps[i].isActive() ) {
                if ( i < this.curStep ) {
                    clazz='old_step';
                } else if ( i === this.curStep ) {
                    clazz='current_step';
                } else {
                    clazz='new_step';
                }
                c += '<td class="'+clazz+'">'+this.steps[i].text+'</td>';
            }
        }
        c += '</tr></tbody></table></div>';

        $(this.anchorId).innerHTML = c;
    },

    hide : function() {
        $(this.anchorId).hide();
    }

}

        );

var ProgressStep = Class.create(
{
    initialize :function(name,opts) {
        this.name = name;
        this.onNext = opts.onNext;
        this.onPrev = opts.onPrev;
        this.onEnter = opts.onEnter;
        this.text = opts.text;
        this.inActive = (opts.inactive === undefined) ? false : opts.inactive;
    },

    activate: function() {
        this.inActive=false;
    },

    deactivate: function() {
        this.inActive=true;
    },

    isActive: function() {
        return !this.inActive;
    },

    show: function() {
        if ( this.name !== undefined ) {
            $(this.name).show();
        }

    },

    hide: function() {
        if ( this.name !== undefined ) {
            $(this.name).hide();
        }
    }
}
    );