jQuery(document).ready(function($){
    console.log("ready");


    var timeLinesMonR = new TimelineMax({});
    var timeScreenLeft = new TimelineMax({});



    function homeAnimeRightMonitorKeys() {

        for(i=0;i<100;i++){
            element = $("#keys .cls-8:nth-child("+i+")");
            timeLinesMonR.to(element, 0.02, {fill:"#d5f3d4"}, "+=0.01");
        }

        for(i=0;i<87;i++){
            element = $("#screenLeft rect:nth-child("+i+")");
            timeScreenLeft.to(element, 0.02, { opacity: 1}, "+=0.01");
        }
    }



    var a = 0;
    $("#screenLeft rect").each(function(){
        a++;
    });
    //console.log(a);


    var i = 0;
    //  set your counter to 1


    function myLoop (ele,cls,iter,delay) {  //  create a loop function

        setTimeout(function () {    //  call a 3s setTimeout when the loop is called
            $(ele).eq(i).addClass(cls);          //  your code here
            i++;                     //  increment the counter
            if (i < iter) {            //  if the counter < 10, call the loop function
                myLoop(ele,cls,iter,delay);             //  ..  again which will trigger another
            }                        //  ..  setTimeout()
        }, delay);
        //console.log(i);
    }



    function delay(ele,cls,delay) {
        setTimeout(function(){
            $(ele).addClass(cls);
        },delay);
    }




    function homeAnimeEnvelopeBoy(){
        setTimeout(function(){
            myLoop(".cls-18","anime fadeInLeft",24,100);
            $("#envelope_right").css({"transform":"rotate(0deg)", "opacity" : "1"});
            $("#envelope_left").css({"transform":"rotate(0deg)", "opacity" : "1"});
        },500);

        var cls141 = $(".cls-13,.cls-14, .cls-15, .cls-16, .cls-17");


        delay("#boy","anime zoomIn", 1);
        delay(".cls-13,.cls-14, .cls-15, .cls-16, .cls-17","anime zoomIn", 500);
    }




    function test() {
// ANIMATE THE KEYBOARD KEYS
        $("#keys .cls-8").mouseenter(function(){
            $(this).css("fill","#e8674e");
        });

        $("#keys .cls-8").mouseleave(function(){
            $(this).css("fill","#d5f3d4");
        });

// ANIMATE THE SCREEN LEFT
        $("#screenLeft .cls-6").mouseenter(function(){
            $(this).css("fill","#f2675d");
        });

        $("#screenLeft .cls-6").mouseleave(function(){
            $(this).css("fill","#ccc");
        });


        $("#screenLeft .cls-5").mouseenter(function(){
            $(this).css("fill","#f2675d");
        });

        $("#screenLeft .cls-5").mouseleave(function(){
            $(this).css("fill","#9acae6");
        });

    }





    $(document).ajaxStop(function() {
        homeAnimeEnvelopeBoy();
        test();
        booksHover();
    });





    function homeAnimeBooks (){
        delay("#books .cls-11","anime66 zoomIn", 100);
        delay("#books .cls-10","anime66 zoomIn", 500);
        delay("#books .cls-9","anime66 zoomIn", 900);
        delay("#books .blue_book","anime66 zoomIn", 1300);
    }


    function booksHover() {
        $("#books .cls-11, #books .cls-9, #books .cls-10, #books .blue_book").mouseenter(function(){
            $(this).removeClass("anime66 zoomIn");
            $(this).css({"opacity" : "1"});
            //ele = $(this);
            //tl3.to(ele,0.1,{y:-10, opacity: 1, ease: Power4.easeOut});
        });



        $("#books .cls-11, #books .cls-9, #books .cls-10").mouseenter(function(){
            //ele = $(this);
            //tl3.to(ele,0.1,{y:0, opacity: 1, ease: Power4.easeOut});
        });

    }





    homeAnimeRightMonitorKeys();
    homeAnimeEnvelopeBoy();
    test();
    homeAnimeBooks();
    booksHover();

});