$(document).ready(function() {

    var scrollMagicController = new ScrollMagic();

    // var tween1 = TweenMax.to('#animation-1', 0.3, {
    //     backgroundColor: 'rgb(255, 39, 46)',
    //     scale: 10,
    //     rotation: 360
    // });

    var scene1 = new ScrollScene({
            triggerElement: '#s1',
            offset: 50
        })
        .setClassToggle('#s1', 'animated fadeIn')
        .addTo(scrollMagicController);


    var containerElement = document.body;

    var containerMonitor = scrollMonitor.createContainer(containerElement);
    var myElement = document.getElementById("itemToWatch");

    var elementWatcher = scrollMonitor.create(myElement);

    elementWatcher.enterViewport(function() {
        console.log('I have entered the viewport');
        myElement.classList.add('fadeIn');
    });
    elementWatcher.exitViewport(function() {
        console.log('I have left the viewport');
    });




    $(function() {
        $("#ref").click(function() {
            animate(".demo", 'bounce');
            return false;
        });
    });

    function animate(element_ID, animation) {
        $(element_ID).addClass(animation);
        var wait = window.setTimeout(function() {
            $(element_ID).removeClass(animation)
        }, 1300);
    }



    var request = null;
    var mouse = {
        x: 0,
        y: 0
    };
    var cx = $('#container').width() / 2;
    var cy = $('#container').height() / 2;

    $('#container').mousemove(function(event) {
        mouse.x = event.pageX - this.offsetLeft;
        mouse.y = event.pageY - this.offsetTop;

        //console.log(mouse, event.pageX, this.offsetLeft);
        console.log(mouse, event.pageY, this.offsetTop);

        cancelAnimationFrame(request);
        request = requestAnimationFrame(update);
    });

    function update() {

        // dx = mouse.x - cx;
        // dy = mouse.y - cy;

        dx = cx - mouse.x;
        dy = cy - mouse.y;

        tiltx = (dy / cy);
        tilty = -(dx / cx);
        radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
        degree = (radius * 10);
        TweenLite.to("#container", 1, {
            transform: 'translate3d(' + dx / 10 + 'px,' + dy / 10 + 'px, 0px)',
            //transform: 'rotate3d(' + tiltx / 2 + ', ' + tilty / 2 + ', 0, ' + degree + 'deg)',
            ease: Power2.easeOut
        });

        //console.log('translateX(-' + dx / 4 + 'px) translateY(-' + dy / 2 + 'px)', );
    }

    $(window).resize(function() {
        cx = window.innerWidth / 2;
        cy = window.innerHeight / 2;
    });
});