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();
});

});