{% set hide_left_bar = True %}
{% extends g.theme.master %}

{% block title %}Create an account{% endblock %}

{% block header %}Creating a new account{% endblock %}

{% block content %}
<div class="createacc">
<div class="grid-20 signform">
  {{ c.form.display() }}
</div>
</div>
{% endblock %}

{% block extra_js %}
  <script type="text/javascript">
    /*<![CDATA[*/

    function unmark(inp) {
        $(inp).parent('.fieldcontainer').removeClass('fielderror')
    }

    function mark_ok(inp) {
        $(inp).parent('.fieldcontainer').removeClass('fielderror')
    }

    function mark_fail(inp, msg) {
        $(inp).parent('.fieldcontainer').addClass('fielderror')
        $(inp).siblings('.fielderror').children('.msg').text(msg);
    }

    function validEmail(email) {
        var re = /\S+@\S+\.\S+/;
        return re.test(email);
    }

    function check_mail(inp) {
        if ( !validEmail(inp.value)) {
            mark_fail(inp, 'Please enter a valid email address');
            return false;
        }

        unmark(inp);
        return true;
    }

    function check_displayname(inp) {
       if ( inp.value.length < 1) {
            mark_fail(inp, 'Please enter a value');
       } else {
            unmark(inp);
       }
    }

    function check_username(inp) {
        if (! inp.value.match(/^[a-z][-a-z0-9]*$/)) {
            mark_fail(inp, 'Usernames must include only letters, numbers, and dashes.');
        } else if (inp.value.length < 3) {
            mark_fail(inp, 'The username must be at least 3 characters long');
        } else {
            unmark(inp);
        }
    }

    $('form .displayname').blur(function() {
        check_displayname(this);
    });

    $('form .username').blur(function() {
        check_username(this);
    });

    $('form .email').blur(function(){
        check_mail(this);
    });

  </script>
{% endblock %}