$(function () {
    //original field values
    var field_values = {
        //id        :  value
        'username': 'نام کاربری',
        'password': 'password',
        'cpassword': 'password',
        'firstname': 'نام و نام خانوادگی',
        'lastname': 'last name',
        'email': 'ایمیل',        
        //'nationalCode': 'کد ملی',
        'tel': 'سمت در پروژه',
        'vip' : 'شماره کارت VIP'
    };


    //inputfocus
    $('input#username').inputfocus({ value: field_values['username'] });
    $('input#password').inputfocus({ value: field_values['password'] });
    $('input#cpassword').inputfocus({ value: field_values['cpassword'] });
    $('input#lastname').inputfocus({ value: field_values['lastname'] });
    $('input#firstname').inputfocus({ value: field_values['firstname'] });
    $('input#email').inputfocus({ value: field_values['email'] });
    //$('input#nationalCode').inputfocus({ value: field_values['nationalCode'] });
    $('input#tel').inputfocus({ value: field_values['tel'] });
    $('input#vip').inputfocus({ value: field_values['vip'] });

    //reset progress bar
    $('#progress').css('width', '0');
    $('#progress_text').html('0%');

    //first_step
    $('form').submit(function () { return false; });
    $('#submit_welcome').click(function () {
        //update progress bar
        $('#progress_text').html('11%');
        $('#progress').css('width', '56px');

        //slide steps
        $('#welcome_step').slideUp();
        $('#first_step').slideDown();
    });
    $('#submit_first').click(function () {
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var fields = $('#first_step input[type=text], #first_step input[type=password]');
        var error = 0;
        fields.each(function () {
            var value = $(this).val();
            if (value.length < 3 || value == field_values[$(this).attr('id')]) {
                $(this).addClass('error');
                $(this).effect("shake", { times: 3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if (!error) {

            if ($('#password').val() != $('#cpassword').val()) {
                $('#first_step input[type=password]').each(function () {
                    $(this).removeClass('valid').addClass('error');
                    $(this).effect("shake", { times: 3 }, 50);
                });

                return false;
            } else {
                //update progress bar
                $('#progress_text').html('33%');
                $('#progress').css('width', '113px');

                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();
            }
        } else return false;
    });


    $('#submit_second').click(function () {
        //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');

        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        var fields = $('#second_step input[type=text]');
        var error = 0;
        fields.each(function () {
            var value = $(this).val();
            if ((value == field_values[$(this).attr('id')] && ($(this).attr('id') == "firstname" || $(this).attr('id') == "vip")) || ($(this).attr('id') == 'email' && !emailPattern.test(value) && value != field_values[$(this).attr('id')])) {
                $(this).addClass('error');
                $(this).effect("shake", { times: 3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if (!error) {
            //update progress bar
            $('#progress_text').html('66%');
            $('#progress').css('width', '226px');

            //slide steps
            $('#second_step').slideUp();
            $('#third_step').slideDown();
        } else return false;

    });


    $('#submit_third').click(function () {
        //$('#city').val($('#ddlCity option:selected').text());
        //update progress bar
        $('#progress_text').html('100%');
        $('#progress').css('width', '339px');

        //prepare the fourth step

        var txtbox = $('#container input[type=text]');
        txtbox.each(function () {
            if ($(this).val() == field_values[$(this).attr('id')])
                $(this).val('-');
        });
        var fields = new Array(
            $('#username').val(),
            $('#password').val(),
            $('#firstname').val(),
            $('#vip').val(),
            $('#degree').val(),
            $('#tel').val(),
            $('#city').val(), //$('#ddlCity option:selected').text(),
            $('#email').val()            
        );
        var tr = $('#fourth_step tr');
        tr.each(function () {
            //alert( fields[$(this).index()] )
            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
        });

        //slide steps
        $('#third_step').slideUp();
        $('#fourth_step').slideDown();
    });


    $('#submit_fourth').click(function () {
        //send information to server
        //alert('Data sent');
        //$('#fourth_step').slideUp();
        //$('#five_step').slideDown();
    });


});
function final() {    
    $('#fourth_step').slideUp();
    $('#five_step').slideDown();
}
function city() {
    alert('ok');
    alert($('#<%= ddlCity.ClientID %> option:selected').html());
    $('#city').val($('#<%= ddlCity.ClientID %> option:selected').text());
    alert($('#city').val());
}