var currentStep = 0,
    currentVal,
    firstVal,
    secondVal,
    thirdVal,
    fourthVal,
    code = "6578";
$('.rond').click(function(){
	var currentVal = $(this).children().attr('data-val');
  if(currentStep < 4){
    if(currentStep == 0){
      firstVal = currentVal;
    }else if(currentStep == 1){
      secondVal = currentVal;
    }else if(currentStep == 2){
      thirdVal = currentVal;
    }else if(currentStep == 3){
      fourthVal = currentVal;
    }
    $('.mini_rond').eq(currentStep).addClass('count');
    if(currentStep == 3){
      if((firstVal+secondVal+thirdVal+fourthVal) != code){
        setTimeout(function(){
          $('.mini_rond').removeClass('count');
        },300);
          $('#box,#iphone').addClass('shake animated');
        setTimeout(function(){
          $('#box,#iphone').removeClass('shake animated');
        },500);
        
    	}else{
        setTimeout(function(){
          $('.mini_rond').removeClass('count');
        },300);
          $('#box,#iphone').addClass('zoomOutRight animated');
  				$('#butt').fadeIn();
      }
      currentStep = -1;
    }
  	currentStep++;
  }
});


$('button').on('click',function(){
  $('#box,#iphone').removeClass('zoomOutRight animated').addClass('zoomInRight animated');
  setTimeout(function(){
          $('#box,#iphone').removeClass('zoomInRight animated');
        },900);
});