jquery wizard

function deviceWizardAdd() {

$.ajax({
  type: "get",
  url: "./deviceWizardAdd.jsp",
  cache: false,
  success: function(jsp){
 
$("body").append(jsp);
  
    $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' });    
   
     $( "#dialog" ).dialog({
    resizable: false,
     height: 830,
     width: 870,
     modal: true
     });
    
  },
  error: function() {}
});

}


(function($) {

    $.fn.formToWizard = function(options) {
        options = $.extend({ 
            submitButton: '' 
        }, options);
       
        var element = this;

        var steps = $(element).find("fieldset");
        var count = steps.size();
        var submmitButtonName = "#" + options.submitButton;

        $(element).before("<ul id='steps'></ul>");

        steps.each(function(i) {
            $(this).wrap("<div id='step" + i + "'></div>");
            $(this).append("<p id='step" + i + "commands'></p>");

            var name = $(this).find("legend").html();
            $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");

            if (i == 0) {
                createPrevButton(i);
                createNextButton(i);
                createSubmitButton(i);
                createCloseButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
                createSubmitButton(i);
                createCloseButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
                createSubmitButton(i);
                createCloseButton(i);
            }
        });

        function createPrevButton(i) {
            var stepName = "step" + i;
            if(i==0) {
            $("#" + stepName + "commands").append("<input id='" + stepName + "Prev' type='button' value='< Back' class='prev' disabled />");
            $("#" + stepName + "Prev").addClass("ui-state-disabled");
            return ;
            }else {
                $("#" + stepName + "commands").append("<input type='button' id='" + stepName + "Prev' class='prev' value='< Back' />");
            }

            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show();
                selectStep(i - 1);
            });
        }

        function createNextButton(i) {
            var stepName = "step" + i;
            if (i == count-1) {
             $("#" + stepName + "commands").append("<input id='" + stepName + "Next' type='button' value='Next >' class='next' disabled />");
            $("#" + stepName + "Next").addClass("ui-state-disabled");
            return ;
            }else {
                $("#" + stepName + "commands").append("<input type='button' id='" + stepName + "Next' class='next' value='Next >' />");
            }

            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show();
                if (i + 2 == count) {             
                $(submmitButtonName).removeAttr("disabled");
                $(submmitButtonName).removeClass("ui-state-disabled");
                }
                selectStep(i + 1);
            });
        }
       
        function createSubmitButton(i) {
        var stepName = "step" + i;
       
        if (i == count-1) {
        $("#" + stepName + "commands").append("<input id='" + stepName + "Submit' type='button' value='   完了  ' class='submit' />");
        }else {
        $("#" + stepName + "commands").append("<input id='" + stepName + "Submit' type='button' value='   完了  ' class='submit' disabled />");
        $("#" + stepName + "Submit").addClass("ui-state-disabled");
        return;
        }
       
        }
       
        function createCloseButton(i) {
        var stepName = "step" + i;
        $("#" + stepName + "commands").append("<input id='" + stepName + "Close' type='button' value='> Close' class='close' />");
        $("#" + stepName + "Close").bind("click", function(e) {
                 $("#dialog").dialog( "close" );
     $("#dialog").remove();
        });
        }

        function selectStep(i) {
            $("#steps li").removeClass("current");
            $("#stepDesc" + i).addClass("current");
        }

    }
})(jQuery);


$(function() {

$('#jqueryButton').bind('click', function() {
deviceWizardAdd();
});

});