$(function(){
    //original field values
    var field_values = {
            //id        :  value
            'fullname'  : 'full name',
            'email'     : 'email',
            'telephone'  : 'telephone',
    };


    //inputfocus
    $('input#fullname').inputfocus({ value: field_values['fullname'] });
    $('input#email').inputfocus({ value: field_values['email'] }); 
    $('input#telephone').inputfocus({ value: field_values['telephone'] });




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

    //first_step
    $('form').submit(function(){ return false; });

    $('#submit_first').click(function(){
        //remove classes
        $('#first_step select').removeClass('error').removeClass('valid');

        $(this).addClass('valid');
        //update progress bar
        $('#progress_text').html('25% Complete');
        $('#progress').css('width','85px');

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

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

        $(this).addClass('valid');
        //update progress bar
        $('#progress_text').html('50% Complete');
        $('#progress').css('width','170px');

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

    // third_step
    $('#submit_third').click(function(){
        //remove classes
        $('#third_step select').removeClass('error').removeClass('valid');

        $(this).addClass('valid');
        //update progress bar
        $('#progress_text').html('75% Complete');
        $('#progress').css('width','255px');

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

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

        //ckeck if inputs aren't empty
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        var fields = $('#fourth_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<8 || value==field_values[$(this).attr('id')]) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else 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 if ( value.length<10 || value==field_values[$(this).attr('id')]) {
                $('#telephone').addClass('error');
                $('#telephone').effect("shake", { times:2 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }
        });
        
        if(!error) {
            //update progress bar
            $('#progress_text').html('100% Complete');
            $('#progress').css('width','339px');

            //prepare the last (fifth) step
            var fields = new Array(
                $('#fullname').val(),
                $('#email').val(),
                $('#telephone').val()
            );
            var tr = $('#fifth_step tr');
            tr.each(function(){
                //alert( fields[$(this).index()] )
                $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
                
            //slide steps
            $('#fourth_step').slideUp();
            $('#fifth_step').slideDown();
            });
            
            $('#submit_fifth').click(function(){
                //send information to server
                $('form').unbind('submit').submit();
            });
        } else return false;
    });
});