<? include 'header.php'; ?>
<? include 'assets/user_menu.php'; ?>

<script type="text/javascript">
      $(document).ready(function(){

            $("#registerForm").validate({
                rules:{
                    username:"required",
                    email:{
                            required:true,
                            email: true
                        },
                    password:{
                        required:true,
                        minlength: 6
                    },
                    repassword:{
                        required:true,
                        equalTo: "#password"
                    },

                },
                messages:{
                    username:"Enter your first and last name",
                    email:{
                        required:"Enter your email address",
                        email:"Enter valid email address"
                    },
                    password:{
                        required:"Enter your password",
                        minlength:"Password must be minimum 6 characters"
                    },
                    repassword:{
                        required:"Enter confirm password",
                        equalTo:"Password and Confirm Password must match"
                    },
                },
                errorClass: "info",
                errorElement: "span",
                highlight:function(element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('info');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('info');
                    $(element).parents('.control-group').addClass('info');
                }
            });
        });
      </script>

    <h1>Register</h1>

    <div id="message" style="display: none;">

    </div>

    <div id="waiting" style="display: none;">

    <p>Please wait, while we are registering you informations.</p>

    <div class="progress progress progress-striped active">
    <div id="bar" class="bar"></div>
    </div>

    </div>

    <form action="#" method="post" autocomplete="off" id="registerForm">

    <label for="registration">Username</label>

        <input type="text" name="username" id="username"  maxlength="30" />

    <br />

    <label for="registration">Password</label>

        <input type="password" name="password" id="password"/>

    <br />

    <label for="registration">Confirm password</label>

        <input type="password" name="repassword" id="repassword"/>

    <br />

    <label for="registration">Email</label>

        <input type="text" name="email" id='email'/>

    <br /> <br />

    <div class="control-group">
        <label class="control-label" for="registration"></label>
          <div class="controls">
           <button type="submit" class="btn btn-success btn-large" id="registerUser" rel="tooltip">Create Account</button>
          </div>
    </div>

    </form>

<? include 'footer.php'; ?>