//This is the basic example of how to set up some Divs to become babySteps.
function step1_validator(){  
               
    $("#s2").removeClass('hidden');
    $("#step2_to_step1_btn_container").bind('click', function() {
        $("#s2").addClass('hidden');
    });
                    
    return true;
}
            
function step2_validator(){  
                
    $("#s3").removeClass('hidden');
    $("#step3_to_step2_btn_container").bind('click', function() {
        $("#s3").addClass('hidden');
    });
    return true;
}
function step3_validator(){  
                
    $("#s4").removeClass('hidden');
    $("#step4_to_step3_btn_container").bind('click', function() {
        $("#s4").addClass('hidden');
    });
    return true;
}
            
function step4_validator(){  
               
    $("#s5").removeClass('hidden');
    $("#step5_to_step4_btn_container").bind('click', function() {
        $("#s5").addClass('hidden');
    });
    return true;
}
            
function step5_validator(){  
               
    $("#s6").removeClass('hidden');
    $("#step6_to_step5_btn_container").bind('click', function() {
        $("#s6").addClass('hidden');
    });
    return true;
}
            
function step6_validator(){  
                
    $("#s7").removeClass('hidden');
    $("#step7_to_step6_btn_container").bind('click', function() {
        $("#s7").addClass('hidden');
    });
    return true;
}
            
function step7_validator(){  
                
    $("#s8").removeClass('hidden');
    $("#step8_to_step7_btn_container").bind('click', function() {
        $("#s8").addClass('hidden');
    });
    return true;
}
            
function step8_validator(){  
                
    $("#s9").removeClass('hidden');
    $("#step9_to_step8_btn_container").bind('click', function() {
        $("#s9").addClass('hidden');
    });
    return true;
}
            
function step9_validator(){  
                
                
    return true;
}

$(function(){
    //Taking reference to all of my step jQuery Objects (optional)				
    var step1 = $('#step1');
    var step2 = $('#step2');
    var step3 = $('#step3');
    var step4 = $('#step4');
    var step5 = $('#step5');
    var step6 = $('#step6');
    var step7 = $('#step7');
    var step8 = $('#step8');
    var step9 = $('#step9');

    $('#s1').click(function() {
        $.goToStep('#step1');
        $('#s2').addClass("hidden");
        $('#s3').addClass("hidden");
        $('#s4').addClass("hidden");
        $('#s5').addClass("hidden");
        $('#s6').addClass("hidden");
        $('#s7').addClass("hidden");
        $('#s8').addClass("hidden");
        $('#s9').addClass("hidden");
    });
    $('#s2').click(function() {
        $.goToStep('#step2');
        $('#s3').addClass("hidden");
        $('#s4').addClass("hidden");
        $('#s5').addClass("hidden");
        $('#s6').addClass("hidden");
        $('#s7').addClass("hidden");
        $('#s8').addClass("hidden");
        $('#s9').addClass("hidden");
    });
    $('#s3').click(function() {
        $.goToStep('#step3');
        $('#s4').addClass("hidden");
        $('#s5').addClass("hidden");
        $('#s6').addClass("hidden");
        $('#s7').addClass("hidden");
        $('#s8').addClass("hidden");
        $('#s9').addClass("hidden");
    });
    $('#s4').click(function() {
        $.goToStep('#step4');
        $('#s5').addClass("hidden");
        $('#s6').addClass("hidden");
        $('#s7').addClass("hidden");
        $('#s8').addClass("hidden");
        $('#s9').addClass("hidden");
    });
    $('#s5').click(function() {
        $.goToStep('#step5');
        $('#s6').addClass("hidden");
        $('#s7').addClass("hidden");
        $('#s8').addClass("hidden");
        $('#s9').addClass("hidden");
    });
    $('#s6').click(function() {
        $.goToStep('#step6');
        $('#s7').addClass("hidden");
        $('#s8').addClass("hidden");
        $('#s9').addClass("hidden");
    });
    $('#s7').click(function() {
        $.goToStep('#step7');
        $('#s8').addClass("hidden");
        $('#s9').addClass("hidden");
    });
    $('#s8').click(function() {
        $.goToStep('#step8');
        $('#s9').addClass("hidden");
    });
    
    //Setting up my buttons and how I want my markup to look
    $.fn.bindStep.defaults.prevBtn = "images/previous.png";
    $.fn.bindStep.defaults.nextBtn = "images/next.png";
    $.fn.bindStep.defaults.generateMarkup = function(id1,id2,img){
        return([
            '<img ',
            'src="', img, '" ',
            'id="', id1 , '" ',
            '/>',
            ].join(''));
    }
    
    //The first step is validated
    step1.bindStep(step2,{
        nextValidator: step1_validator
    });
					
    //here it is taking a jQuery object as the next step
    step2.bindStep(step3,{
        nextValidator: step2_validator
    });
	
    // The bind step method will take a jQuery Object or a Selector
    // here it is using an ID based selector
    step3.bindStep(step4,{
        nextValidator: step3_validator
    });
                
    step4.bindStep(step5,{
        nextValidator: step4_validator
    });
    step5.bindStep(step6,{
        nextValidator: step5_validator
    });
    step6.bindStep(step7,{
        nextValidator: step6_validator
    });
    step7.bindStep(step8,{
        nextValidator: step7_validator
    });
    step8.bindStep(step9,{
        nextValidator: step8_validator
    });
	
    //There is a start over button in the page that will take you back to the first
    // step
    $('#start_over').click(function(){
        $.goToStep('#step1',function(currStep,nextStep){
            currStep.slideUp('slow',function(){
                nextStep.slideDown('slow');
            });
        });
    });
                
    $('#siteinternet').click(function(){
        $("#s2").removeClass('hidden');
        $.goToStep('#step2');
    });

    $('#sitevente').click(function(){
        $("#s2").removeClass('hidden');
        $.goToStep('#step2');
    });
                
    $("div.sitetype").click(function() {
        $("div.sitetype").removeClass('selected');
        $("div.sitetitre").css("color", "#000");
        $(this).addClass('selected');
        $("div.sitetitre", this).css("color", "#fff");
        if ($(this).attr("id") == "choix1") {
            $("#sitetypevalue").val("Site de présentation");
        } else if($(this).attr("id") == "choix2") {
            $("#sitetypevalue").val("Site de vente en ligne");
        }
    });
    
//    $("div.sitetype").hover(function() {
//        $(this).addClass('selected');
//    },
//    function() {
//        $(this).removeClass('selected');
//    });
});

//$(function(){
//    $('#babyStepsForm').submit(function(){
//        destepify();
//        alert('Yay you did it!  This is what your full-length form would look like!');
//        return false;
//    });
//});
       			    
//this is just a function to help the demo ;)
function destepify(){
    $('div').show();
    $('#destepify_btn').hide();        
    $('#stepify_btn').show();
}
			
//this is just a function to help the demo ;)			
function stepify(){
    $('div').hide();
    $("#step1").show();
    $('#stepify_btn').hide();
    $('#destepify_btn').show();        
}

$(document).ready(function() {
    $("div.nbpages").click(function() {
        $("div.nbpages").removeClass("selected");
        $(this).addClass("selected");
        $("#nbpages").val($(this).html());
    }); 
});

$(document).ready(function() {
    $("div.nbproduits").click(function() {
        $("div.nbproduits").removeClass("selected");
        $(this).addClass("selected");
        $("#nbproduits").val($(this).html());
    }); 
    
    $("#souhait").click(function() {
        $("#nonsouhait").removeClass("nonsouhaitselected");
        $(this).addClass("souhaitselcted");
        $("#souhaitvalue").val("Je souhaite gérer le contenu de mon site");
    }); 
    
    $("#nonsouhait").click(function() {
        $("#souhait").removeClass("souhaitselcted");
        $(this).addClass("nonsouhaitselected");
        $("#souhaitvalue").val("Je souhaite déléguer  la gestion de mon site");
    });
    
    $(".design").click(function() {
        $("li.design").removeClass("wb1");
        $("li.design").removeClass("wb2");
        $("li.design").removeClass("wb3");
        $("li.design").removeClass("wb4");
    });
    
    $("#wb1").click(function() {
        $(this).addClass("wb1");
        $("#wbvalue").val($(this).html());
    });
    $("#wb2").click(function() {
        $(this).addClass("wb2");
        $("#wbvalue").val($(this).html());
    });
    $("#wb3").click(function() {
        $(this).addClass("wb3");
        $("#wbvalue").val($(this).html());
    });
    $("#wb4").click(function() {
        $(this).addClass("wb4");
        $("#wbvalue").val($(this).html());
    });
    
    $(".ergonomie").click(function() {
        $("li.ergonomie").removeClass("erg1");
        $("li.ergonomie").removeClass("erg2");
        $("li.ergonomie").removeClass("erg3");
        $("li.ergonomie").removeClass("erg4");
    });
    
    $("#erg1").click(function() {
        $(this).addClass("erg1");
        $("#ergvalue").val($(this).html());
    });
    $("#erg2").click(function() {
        $(this).addClass("erg2");
        $("#ergvalue").val($(this).html());
    });
    $("#erg3").click(function() {
        $(this).addClass("erg3");
        $("#ergvalue").val($(this).html());
    });
    $("#erg4").click(function() {
        $(this).addClass("erg4");
        $("#ergvalue").val($(this).html());
    });
    /**/
    $(".fonct").click(function() {
        //        $("li.fonct").removeClass("fn1");
        //        $("li.fonct").removeClass("fn2");
        //        $("li.fonct").removeClass("fn3");
        //        $("li.fonct").removeClass("fn4");
        //        $("li.fonct").removeClass("fn5");
        //        $("li.fonct").removeClass("fn6");
        //        $("li.fonct").removeClass("fn7");
        //        $("li.fonct").removeClass("fn8");
        //        $("li.fonct").removeClass("fn9");
        });
    
    $("#fn1").click(function() {
        if ($(this).hasClass("fn1")) {
            $(this).removeClass("fn1");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("fn1");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#fn2").click(function() {
        if ($(this).hasClass("fn2")) {
            $(this).removeClass("fn2");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("fn2");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#fn3").click(function() {
        if ($(this).hasClass("fn3")) {
            $(this).removeClass("fn3");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("fn3");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#fn4").click(function() {
        if ($(this).hasClass("fn4")) {
            $(this).removeClass("fn4");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("fn4");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#fn5").click(function() {
        if ($(this).hasClass("fn5")) {
            $(this).removeClass("fn5");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("fn5");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#fn6").click(function() {
        if ($(this).hasClass("fn6")) {
            $(this).removeClass("fn6");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("fn6");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#fn7").click(function() {
        if ($(this).hasClass("fn7")) {
            $(this).removeClass("fn7");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("fn7");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#fn8").click(function() {
        if ($(this).hasClass("fn8")) {
            $(this).removeClass("fn8");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("fn8");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#fn9").click(function() {
        if ($(this).hasClass("fn9")) {
            $(this).removeClass("fn9");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("fn9");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    
    /**/
    $(".prestation").click(function() {
        //        $("li.prestation").removeClass("pr1");
        //        $("li.prestation").removeClass("pr2");
        //        $("li.prestation").removeClass("pr3");
        //        $("li.prestation").removeClass("pr4");
        //        $("li.prestation").removeClass("pr5");
        //        $("li.prestation").removeClass("pr6");
        //        $("li.prestation").removeClass("pr7");
        //        $("li.prestation").removeClass("pr8");
        //        $("li.prestation").removeClass("pr9");
        });
    
    $("#pr1").click(function() {
        if ($(this).hasClass("pr1")) {
            $(this).removeClass("pr1");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("pr1");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#pr2").click(function() {
        if ($(this).hasClass("pr2")) {
            $(this).removeClass("pr2");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("pr2");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#pr3").click(function() {
        if ($(this).hasClass("pr3")) {
            $(this).removeClass("pr3");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("pr3");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#pr4").click(function() {
        if ($(this).hasClass("pr4")) {
            $(this).removeClass("pr4");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("pr4");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#pr5").click(function() {
        if ($(this).hasClass("pr5")) {
            $(this).removeClass("pr5");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("pr5");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#pr6").click(function() {
        if ($(this).hasClass("pr6")) {
            $(this).removeClass("pr6");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("pr6");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#pr7").click(function() {
        if ($(this).hasClass("pr7")) {
            $(this).removeClass("pr7");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("pr7");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#pr8").click(function() {
        if ($(this).hasClass("pr8")) {
            $(this).removeClass("pr8");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("pr8");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });
    $("#pr9").click(function() {
        if ($(this).hasClass("pr9")) {
            $(this).removeClass("pr9");
            $("input[name="+$(this).attr('id')+"]").val("");
        } else {
            $(this).addClass("pr9");
            $("input[name="+$(this).attr('id')+"]").val($(this).html());
        }
    });

    /**/
    $(".hebergement").click(function() {
        $("li.hebergement").removeClass("heb1");
        $("li.hebergement").removeClass("heb2");
    });
    
    $("#heb1").click(function() {
        $(this).addClass("heb1");
        $("#hebergementvalue").val("Je souhaite faire louer un hébergement et un nom de domaine");
    });
    $("#heb2").click(function() {
        $(this).addClass("heb2");
        $("#hebergementvalue").val("J ai déjà un hébergement et un nom de domaine");
    });
    $("div.delai").click(function() {
        $("div.delai").removeClass("selected");
        $(this).addClass("selected");
        $("#delaivalue").val($(this).html());
    });
    $("input.item").blur(function(){
        if ($(this).val() != "") {
            $(this).parent().addClass("divselected");
        } else {
            $(this).parent().removeClass("divselected");
        }
    });
    

   
    $("#babyStepsForm").submit(function() {
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                
        var flag = true;
        if($("#nomprenom").val() == "") {
            $("#nomprenom").parent().addClass("divselected");
            flag = false;
        } else {
            $("#nomprenom").parent().removeClass("divselected");
        }
        if($("#societe").val() == "") {
            $("#societe").parent().addClass("divselected");
            flag = false;
        } else {
            $("#societe").parent().removeClass("divselected");
        }
        if($("#telephone").val() == "") {
            $("#telephone").parent().addClass("divselected");
            flag = false;
        } else {
            $("#telephone").parent().removeClass("divselected");
        }
        if($("#email").val() == "") {
            $("#email").parent().addClass("divselected");
            flag = false;
        } else if(reg.test($("#email").val()) == false) {
            $("#email").parent().addClass("divselected");
            flag = false;
        } else {
            $("#email").parent().removeClass("divselected");
        }
        return flag; 
    });
});