(function(){

'use strict';
    
    var field1 = ('.field-1'),
        field2 = ('.field-2'),
        field3 = ('.field-3'),
        circle1 = ('.circle-1'),
        circle2 = ('.circle-2'),
        circle3 = ('.circle-3');


//var tween = new TimelineMax();    
var tween = new TimelineLite();    
    

//Screen One
function screenOne(){
    var next = document.querySelector('.next-1');
    
  
  
    next.addEventListener('click', function(e) {
      e.preventDefault();
      
         //circles rotate backwards and previous number is highlighted with .active class and removed from next circle (currCircle, nextCircle)
         nextCircle(circle1, circle2);
        
        //When NEXT button is clicked the next fieldset shows and the previous hides (prevField, nextField)
        nextFieldSet(field1, field2);
         

    });

  
}screenOne();
    

    
//Screen Two
function screenTwo(){
    var next = document.querySelector('.next-2'),
        prev = document.querySelector('.prev-1');
        

    next.addEventListener('click', function(e) {
    
      e.preventDefault();
    
         //circles rotate backwards and previous number is highlighted with .active class and removed from next circle (currCircle, nextCircle)
        nextCircle( circle2, circle3);
        
        
        //When NEXT button is clicked the next fieldset shows and the previous hides (prevField, nextField)
        nextFieldSet(field2, field3);
        
    });
    
    /**How could I or should I combine these into the same tween--this is exhibiting some strange behavior. I      **assume this because each function`previousCircle` && `previouosFieldSet` have seperate tweens 
     **Also could I just reverse the above functions `nextCircle` && `nextFieldset` instead of creating the        **below functions?
     **Thanks to anyone for help on this!!!!:) 
     */ 
    prev.addEventListener('click', function(e) {
        
        e.preventDefault();
        
        //.active class and removed prom next circle (prevCircle, currCircle)
        previousCircle(circle1, circle2);
        
        //next fieldset shows and the previous hides (prevField, currField)
        previousFieldSet(field1, field2);
    });
    
    
}screenTwo();
    
  
//Screen Six
function screenThree(){
    var prev = document.querySelector('.prev-2');
        

    prev.addEventListener('click', function(e) {
        
        e.preventDefault();
        
        //.active class and removed prom next circle (prevCircle, currCircle)
        previousCircle(circle2, circle3);
        
        //Prev fieldset shows and the previous hides (prevField, currField)
        previousFieldSet(field2, field3);
    });
    
    
}screenThree();
    
//When NEXT button is clicked the next fieldset shows and the previous hides
function nextFieldSet(currField, nextField){
    var each = ('.anim-each');
    var btnFAde = ('.btn-fade');
    
  //this seems off to me to have display: 'none' and opacity: 0 but it was the only waht to get a smooth fade
    tween
      .to(currField, .1, {opacity:0, display: 'none', y:-100})
         .to(nextField, .1, {display: 'block', opacity: 1})
         .staggerFrom(each, .25, {opacity: 0, y:100}, .1)
         .from(btnFAde, .1, {opacity: 0}, '-=.5');
}
    
//When NEXT button is clicked the next fieldset shows and the previous hides
function previousFieldSet(prevField, currField){
    var btnFAde = ('.btn-fade');
    tween.to(currField, .25, {opacity:0, display: 'none', y: 0})
         .to(prevField, .25, {display: 'block', opacity: 1, y:0})
         .to(btnFAde, .1, {opacity: 1});

}  
    
/*When PREV button is clicked circles in the progress section rotate backwards and **previous number is highlighted with .active class and removed prom next circle
*/
function previousCircle(prevCircle, currCircle) {
    
        tween.to(prevCircle, .15, {rotationY: -360, className: '+=active'})
        .to(currCircle, .15, {rotationY: -360, className: '-=active'});
}


/*When NEXT button is clicked circles in the progress section rotate forwards and the **next number is highlighted with .active class and removoed from previous circle
*/
function nextCircle(currCircle, nextCircle) {

        tween
          .to(currCircle, .15, {rotationY: 360, className: '-=active'})
        .to(nextCircle, .15, {rotationY: 360, className: '+=active'});

}

    
}()); //wrapper