var ScrollMagicInit = function(){


// init controller
var controller = new ScrollMagic.Controller();
// build scene


new ScrollMagic.Scene({
        triggerElement: "#section0",
        triggerHook: 0.1,
        duration: "300%",
    })
    .on("enter", function (e) {
    $('.eagle_ani').addClass("eagle_ani_start");
    $('.eagle_ani_img').addClass("eagle_ani_start_img");
    $('.eagle_product_img').addClass("eagle_product_img_ani_start");
    $('.eagle_product_text').addClass("eagle_product_text_ani_start");
    $('.eagle_product_img').css({
            "opacity": "1"
        });

    $('.eagle_product_text').css({
            "opacity": "1"
        });
    })

    .setPin("#section0")
    // .addIndicators()
    .addTo(controller);


new ScrollMagic.Scene({
        triggerElement: "#section1",
        triggerHook: 1,
        duration: "110%",
    })
    .setClassToggle('.text1', 'visible')
    .setPin("#section1")
    // .addIndicators()
    .addTo(controller);


new ScrollMagic.Scene({
        triggerElement: "#section2",
        triggerHook: 0.5,
        duration: "100%"
    })
    .setPin("#section2")
    .on("enter", function (e) {

         $('.vga_booom_word').css({
            "opacity": "1",
            "transition": "2s"
        });
        $('.vga_booom_01').css({
            "left": "0",
            "transition": "2s"
        });
        $('.vga_booom_02').css({
            "left": "0",
            "transition": "2s"
        });
        $('.vga_booom_03').css({
            "left": "0",
            "transition": "2s"
        });
        $('.vga_booom_04').css({
            "left": "0",
            "transition": "2s"
        });
        $('.vga_booom_05').css({
            "left": "0",
            "transition": "2s"
        });
        $('.vga_booom_06').css({
            "left": "0",
            "transition": "2s"
        });
    })
    .on("leave", function (e) {

        $('.vga_booom_word').css({
            "opacity": "0",
            "transition": "1.5s"
        });
        $('.vga_booom_01').css({
            "left": "3.5%",
            "transition": "1.5s"
        });
        $('.vga_booom_02').css({
            "left": "-22%",
            "transition": "1.5s"
        });
        $('.vga_booom_03').css({
            "left": "-10%",
            "transition": "1.5s"
        });
        $('.vga_booom_04').css({
            "left": "3.5%",
            "transition": "1.5s"
        });
        $('.vga_booom_05').css({
            "left": "12.5%",
            "transition": "1.5s"
        });
        $('.vga_booom_06').css({
            "left": "23%",
            "transition": "1.5s"
        });
    })
   
    .addTo(controller);


new ScrollMagic.Scene({
        triggerElement: "#video_slogan",
        triggerHook: 0.2,
        duration: 0
    })
.setClassToggle('.video_slogan_img', 'visible')
.setPin("#video_slogan")
// .addIndicators()
.addTo(controller);



new ScrollMagic.Scene({
        triggerElement: "#section_bu",
        triggerHook: 0,
        duration: 0
    })
.on("enter", function (e) {
        $('.vga_img_slogan_2').css({
            
            "opacity" : "1"
        });
    })

.on("leave", function (e) {
        $('.vga_img_slogan_2').css({
            
            "opacity" : "0"
        });
    })
.setPin("#section_bu")
.addTo(controller);


new ScrollMagic.Scene({
        triggerElement: "#section_bu_end",
        triggerHook: 1,
        duration: 0
    })
.on("enter", function (e) {


        $('.vga_img_slogan_2').css({
            "opacity" : "0"
        });


    })
.on("leave", function (e) {


        $('.vga_img_slogan_2').css({
            "opacity" : "1"
        });


    })
.setPin("#section_bu_end")
// .addIndicators()
.addTo(controller);





new ScrollMagic.Scene({
        triggerElement: "#section_windforce_bottom",
        triggerHook: 1,
        duration: "30%"
    })
.setPin("#section_windforce_bottom")
.addTo(controller);

new ScrollMagic.Scene({
        triggerElement: "#section_windforce_end",
        triggerHook: 1,
        duration: 0
    })
.on("enter", function (e) {
        $('.vga_img').css({
            
            "opacity" : "0",
            "z-index" : "0"
        });

        $('.vga_img_slogan_1').css({
            "opacity" : "0"
        });


        $('.section_windforce_flow').css({
            
            "opacity" : "0",
            "z-index" : "0"
        });

        $('.eagle_windforce_boom_left').css({
            "opacity" : "0",
            "transition": "0"
        });

        $('.eagle_windforce_boom_center').css({
            "opacity" : "0",
            "transition": "0"
        });


 

    })
.on("leave", function (e) {
        $('.vga_img').css({
            
            "opacity" : "1"
        });

        $('.vga_img_slogan_1').css({
            "opacity" : "1"
        });


        $('.section_windforce_flow').css({
            
            "opacity" : "0",
            "z-index" : "0"
        });


        $('.eagle_windforce_boom_01').css({
            "opacity" : "0",
            "transition": "0"
        });

        $('.eagle_windforce_boom_left').css({
            "opacity" : "0",
            "transition": "0"
        });

        $('.eagle_windforce_boom_center').css({
            "opacity" : "0",
            "transition": "0"
        });

 

    })
.setPin("#section_windforce_end")
// .addIndicators()
.addTo(controller);


new ScrollMagic.Scene({
        triggerElement: "#section_windforce_trigger",
        triggerHook: 0.8,
        duration: 0
    })
.on("enter", function (e) {
    // $('.eagle_windforce_photo').css({
    //     "display" : "block",
    //     "transition" : "1s"
    // });

        $('.vga_img').css({
            
            "opacity" : "1"
        });

        $('.vga_img_slogan_1').css({
            
            "opacity" : "1",
        
        });

        $('.scroll_bg_01').css({
            "background-position" : "center"
        });

        $('.eagle_windforce_boom_right').addClass('rotate');
        $('.eagle_windforce_boom_center').addClass('rotate');
        $('.eagle_windforce_boom_left').addClass('rotate');

    })
    .on("leave", function (e) {
        $('.vga_img').css({
            
            "opacity" : "0",
            "z-index" : "0"
        });

        $('.vga_img_slogan_1').css({
            
            "opacity" : "0",
        
        });

        $('.scroll_bg_01').css({
            "background-position" : "top"
        });

    //     $('.eagle_windforce_photo').css({
    //     "display" : "none",
    //     "transition" : "1s"
    // });

    })
.setPin("#section_windforce_img")
// .addIndicators()
.addTo(controller);

new ScrollMagic.Scene({
        triggerElement: "#section_windforce_before",
        triggerHook: 0,
        duration: "150%",
    })
    .setPin("#section_windforce_before")
    // .addIndicators()
    .addTo(controller);


new ScrollMagic.Scene({
        triggerElement: "#section_windforce_0",
        triggerHook: 0,
        duration: "200%",
    })
    
    .on("enter", function (e) {
        
    
            $('.eagle_windforce_alternate').css({
            "z-index" : "1000002",
            "opacity" : "1"
        });
    })

    .on("leave", function (e) {
        
       
            $('.eagle_windforce_alternate').css({
            "z-index" : "1000002",
            "opacity" : "0"
        });


    })
    .setPin("#section_windforce_0")
    // .addIndicators()
    .addTo(controller);


new ScrollMagic.Scene({
        triggerElement: "#section_windforce",
        triggerHook: 0,
        duration: "200%",
    })
    
    .on("progress", function (e) {
        
        var action_start = e.progress;
        if ( action_start > 0.1){
            $('.section_windforce_3d').css({
            "z-index" : "1000002",
            "opacity" : "1"
        });




        }
    })

    .on("leave", function (e) {
        
       
            $('.section_windforce_3d').css({
            "z-index" : "1000002",
            "opacity" : "0"
        });


    })
    .setPin("#section_windforce")
    // .addIndicators()
    .addTo(controller);



new ScrollMagic.Scene({
        triggerElement: "#section_windforce_1",
        triggerHook: 0,
        duration: "200%",
    })
    
    .on("progress", function (e) {
        
        var action_start = e.progress;
        if ( action_start > 0.1){
            $('.section_windforce_flow').css({
            "z-index" : "1000002",
            "opacity" : "1"
        });

            $('.vga_img_flow').css({
            "opacity" : "1"
        });


        //     $('.eagle_windforce_boom_01').css({
        //     "opacity" : "1",
        //     "transition": "1s"
        // });


        }
    })

    .on("leave", function (e) {
        
       
            $('.section_windforce_flow').css({
            "z-index" : "1000002",
            "opacity" : "0"
        });

            $('.vga_img_flow').css({
            "opacity" : "0"
        });


    })
    .setPin("#section_windforce_1")
    // .addIndicators()
    .addTo(controller);


    new ScrollMagic.Scene({
        triggerElement: "#section_windforce_move",
        triggerHook: 0,
        duration: "30%",
    })
    
    .on("progress", function (e) {
        

        $('.vga_img').css({
            "left" : "-30%",
            "transition": "2s"
        });

        $('.eagle_windforce_boom_right').removeClass('rotate');
        $('.eagle_windforce_boom_center').removeClass('rotate');
        $('.eagle_windforce_boom_left').removeClass('rotate');


        $('.eagle_windforce_boom_01').css({
            "opacity" : "0",
            "transition": "0.8s",
        });

        $('.eagle_windforce_boom_left').css({
            "opacity" : "0",
            "transition": "0.8s",
        });


        $('.eagle_windforce_boom_center').css({
            "opacity" : "0",
            "transition": "0.8s",
        });

        $('.eagle_windforce_boom_02').css({
            "transition": "0.8s",
             "transform" : "scale(1.4)",
             "transform-origin": "center"
        });


      
    })

    .setPin("#section_windforce_move")
    // .addIndicators()
    .addTo(controller);


    new ScrollMagic.Scene({
        triggerElement: "#section_windforce_move_back",
        triggerHook: 0,
        duration: "30%",
    })
    
    .on("progress", function (e) {
        

        $('.vga_img').css({
            "left" : "0",
            "transition": "2s"

        });

        $('.eagle_windforce_boom_right').addClass('rotate');
        $('.eagle_windforce_boom_center').addClass('rotate');
        $('.eagle_windforce_boom_left').addClass('rotate');


        $('.eagle_windforce_boom_01').css({
            "opacity" : "1",
            "transition": "0"
        });


$('.eagle_windforce_boom_left').css({
            "opacity" : "1",
            "transition": "0"
        });

$('.eagle_windforce_boom_center').css({
            "opacity" : "1",
            "transition": "0"
        });



$('.eagle_windforce_boom_02').css({
            "transition": "0.8s",
             "transform" : "scale(1)",
             "transform-origin": "center"
        });
      
    })

    .setPin("#section_windforce_move_back")
    // .addIndicators()
    .addTo(controller);



    new ScrollMagic.Scene({
        triggerElement: "#section_windforce_2",
        triggerHook: 0,
        duration: "200%",
    })    
    .on("progress", function (e) {
        
        $('.section_windforce_fan').css({
            "z-index" : "1000003",
            "opacity" : "1"
        });


        $('.eagle_windforce_boom_right_flow').css({
            "z-index" : "1000003",
            "opacity" : "1"
        });
            
      
    })

    .on("leave", function (e) {
        
       
            $('.section_windforce_fan').css({
            "z-index" : "1000003",
            "opacity" : "0"
        });

            $('.eagle_windforce_boom_right_flow').css({
            "z-index" : "1000003",
            "opacity" : "0"
        });



// $('.eagle_windforce_boom_01').css({
//             "opacity" : "1",
//             "transition": "0"
//         });


// $('.eagle_windforce_boom_left').css({
//             "opacity" : "1",
//             "transition": "0"
//         });

// $('.eagle_windforce_boom_center').css({
//             "opacity" : "1",
//             "transition": "0"
//         });



// $('.eagle_windforce_boom_02').css({
//             "transition": "0.8s",
//              "transform" : "scale(1)",
//              "transform-origin": "center"
//         });


    
    })
    .setPin("#section_windforce_2")
    // .addIndicators()
    .addTo(controller);




    new ScrollMagic.Scene({
        triggerElement: "#section_windforce_3",
        triggerHook: 0,
        duration: "200%",
    })

    .on("progress", function (e) {
        
        // $('.vga_img').css({
        //     "left" : "-10%",
        //     "transition": "1.5s"
        // });

        $('.section_windforce_nano').css({
            "z-index" : "1000003",
            "opacity" : "1"
        });


        $('.vga_img').css({
            "left" : "-15%",
            "transition": "2s"
        });

        $('.eagle_windforce_boom_right_life').css({
            "z-index" : "1000003",
            "opacity" : "1"
        });
        

      
    })
        .on("leave", function (e) {
        
       
            $('.section_windforce_nano').css({
            "z-index" : "1000003",
            "opacity" : "0"
        });


            $('.vga_img').css({
            "left" : "-30%",
            "transition": "2s"
        });


            $('.eagle_windforce_boom_right_life').css({
            "z-index" : "1000003",
            "opacity" : "0"
        });

        })

    .setPin("#section_windforce_3")
    // .addIndicators()
    .addTo(controller);




    $(window).on('beforeunload', function() {
  $('body').hide();
  $(window).scrollTop(0);
});

}

// A $( document ).ready() block.
$( document ).ready(function() {
    ScrollMagicInit();
});


// new ScrollMagic.Scene({
//         triggerElement: "#section3",
//         triggerHook: 0.06,
//         duration: "500%"
//     })
//     // .addIndicators()
//     .setPin("#section3")
//     .on("progress", function (e) {
//         mySwiper1.slideTo(Math.floor(e.progress * mySwiper1.slides.length));
//         console.log(Math.floor(e.progress * mySwiper1.slides.length));
//         var slide_nuber = Math.floor(e.progress * mySwiper1.slides.length);
//         if ( slide_nuber === 0){
//             $('#clip3text').addClass("visible");
//             $('#clip3img').addClass("visible");

//         }

//         if ( slide_nuber === 1){
//             $('#clip4img_1').addClass("visible");
//             $('#clip4img').addClass("visible");
//             $('#clip3img').removeClass("visible");
//             $('#clip3text').removeClass("visible");
//         }

//         if ( slide_nuber === 2){
//             $('#clip4img').removeClass("visible");
//             $('#clip4text').removeClass("visible");
            
//         }
//     })
//     .on("leave", function (e) {
//         $('#clip3text').removeClass("visible");
//         $('#clip3img').removeClass("visible");

//     })
//     .addTo(controller);



    // new ScrollMagic.Scene({
    //     triggerElement: "#section8",
    //     triggerHook: 0.06,
    //     duration: "500%"
    // })
 
    // .setPin("#section8")
    // .on("progress", function (e) {
    //     mySwiper2.slideTo(Math.floor(e.progress * mySwiper2.slides.length));
    //     console.log(Math.floor(e.progress * mySwiper2.slides.length));
    //     var slide_nuber = Math.floor(e.progress * mySwiper2.slides.length);
    //     if ( slide_nuber === 0){
    //         $('#clip8text').addClass("visible");
    //         $('#clip8img').addClass("visible");

    //     }

    //     if ( slide_nuber === 1){
    //         $('#clip11text').addClass("visible");
    //         $('#clip11img').addClass("visible");

    //         $('#clip8text').removeClass("visible");
    //         $('#clip8img').removeClass("visible");
          
    //     }

    //     if ( slide_nuber === 2){
    //        $('#clip12text').addClass("visible");
    //         $('#clip12img').addClass("visible");

    //         $('#clip11text').removeClass("visible");
    //         $('#clip11img').removeClass("visible");
            
    //     }
    // })
    // .on("leave", function (e) {
    //         $('#clip8text').removeClass("visible");
    //         $('#clip8img').removeClass("visible");

    // })
    // .addTo(controller);