$(function(){

//значения полей
    var field_values = {
            //id        :  value
            'username'  : 'username',
            'datein'  : '',
            'dateout' : '',
            'firstname'  : '',
            'lastname'  : 'last name',
            'email'  : 'email address'


    };


 
//inputfocus

    $('input#username').inputfocus({ value: field_values['username'] });
    $('input#datein').inputfocus({ value: field_values['datein'] });
    $('input#dateout').inputfocus({ value: field_values['dateout'] }); 
    $('input#lastname').inputfocus({ value: field_values['lastname'] });
    $('input#firstname').inputfocus({ value: field_values['firstname'] });
    $('input#email').inputfocus({ value: field_values['email'] }); 
    $('input#username').inputfocus({ value: field_values['username'] }); 




//обнуление %-го индикатора этапов

    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');



//1-ый шаг в форме

    $('#submit_first').click(function(){

//удаление классов
        $('#first_step input').removeClass('error').removeClass('valid');



//Проверка корректности ввода 1-го этаа

        var fields = $('#first_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')]  ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }
        });        
        
         if(!error) {

//обновление %-го индикатора этапов

                $('#progress_text').html('33% Complete');
                $('#progress').css('width','113px');
                


//переход к следующему этапу через слайд
                $('#first_step').slideUp();
                $('#second_step').slideDown();     
        } else return false;

    });


//2-ой шаг в форме

    $('#submit_second').click(function(){

//удаление классов
        $('#second_step input').removeClass('error').removeClass('valid');



//Проверка корректности ввода 2-го этапа

        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.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }
        });

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


//переход к 3-му этапу через слайд

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

    });



//3-ий шаг в форме

    $('#submit_third').click(function(){



//Обновление %-го индикатора этапа

        $('#progress_text').html('100% Complete');
        $('#progress').css('width','339px');



// 4-ый этап - вывод заполненной информации

        var fields = new Array(
            $('#username').val(),
            $('#password').val(),
            $('#email').val(),
            $('#firstname').val() + ' ' + $('#lastname').val(),
            $('#age').val(),
            $('#gender').val(),
            $('#country').val()                       
        );
        var tr = $('#fourth_step tr');
        tr.each(function(){

            //alert( fields[$(this).index()] )
            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
        });
                


//Слайд перехода

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


    
//Кнопка назад

    $('.back').click(function(){
        var container = $(this).parent('div'),
            previous  = container.prev();

        switch(previous.attr('id')) {
            case 'first_step' : $('#progress_text').html('0% Complete');
                                 $('#progress').css('width','0px');
                                 break;
            case 'second_step': $('#progress_text').html('33% Complete');
                                 $('#progress').css('width','113px');
                                 break;
            
            case 'third_step' : $('#progress_text').html('66% Complete');
                                 $('#progress').css('width','226px');
                                 break;
            
            default: break;
        }
            
        $(container).slideUp();
        $(previous).slideDown();
    });

});