div.requirements
  form#req-form
    fieldset
      h2 Personal Information
      input(type="text" placeholder="Name")
      input(type="email" placeholder="Email")
    fieldset
      h2 Account Information
      input(type="text" placeholder="Name")
      input(type="email" placeholder="Email")
    fieldset
      h2 Submit
      input(type="text" placeholder="Name")
      <input id="SaveAccount" class="button" type="button" value="Submit form" />
    

@import "bourbon"
@import "neat"
.requirements 
  @include outer-container(90%)
input[type="text"],
input[type="email"]
  padding: 10px 20px
  border: 1px solid #999
  border-radius: 3px
  display: block
  width: 100%
  margin-bottom: 20px
  box-sizing: border-box
  outline: none
  
  &:focus
    border-color: #FF6F00
.step 
  $base-spacing: 1.5em !default
  $dark-gray: #333 !default
  $base-font-color: $dark-gray !default
  $action-color: #477dca !default
  $stats-color: lighten($action-color, 10%)

  padding: $base-spacing / 2
  
    
  ul 
    padding: 0
  li 
    border-right: 1px solid transparentize($base-font-color, 0.8)
    color: $stats-color
    display: inline-block
    font-size: 1.2em
    line-height: 1.1em
    padding: 0 0.7em

    &:first-child 
      padding-left: 0

    &:last-child 
      border-right: 0
    
  span 
    color: $base-font-color
    display: block
    font-size: 0.7em
    font-weight: normal
  
#steps li.current
  color: #000
.prev 
  float: left
.next
  float: right
.prev,.next 
  @include button
.button
  @include button(shiny, #ff0000)

/* Created by jankoatwarpspeed.com */

$(document).ready(function(){
            $("#req-form").formToWizard({ submitButton: 'SaveAccount' })
        });


(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;
        $(submmitButtonName).hide();

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

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

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

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

        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");

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

        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");

            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show();
                if (i + 2 == count)
                    $(submmitButtonName).show();
                selectStep(i + 1);
            });
        }

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

    }
})(jQuery);