var currentMousePos = { x: -1, y: -1 };
var xAmount = 0;
var yAmount = 0;
var hoverSpeed = 0.1;
var currentX = 0;
var currentY = 0;

$(document).ready(function() {
    
    $("header").addClass("white");
    
    $(document).on("mousemove", function(event) { 
        currentMousePos.y = event.pageY;
        currentMousePos.x = event.pageX;
    });
    
    function smoothHover() {
        var elemY = $(".homeHeaderBlock .icon").offset().top + ($(".homeHeaderBlock .icon").height() / 2);
        var elemX = $(".homeHeaderBlock .icon").offset().left + ($(".homeHeaderBlock .icon").width() / 2);
        xAmount += ((currentMousePos.x - elemX) - xAmount) * hoverSpeed;
        yAmount += ((currentMousePos.y - elemY) - yAmount) * hoverSpeed;
        var newX = xAmount;
        var newY = yAmount;
        var fastSpeed = "translate3d(" + (xAmount / 50) + "px, " + (yAmount / 50) + "px, 0)";
        var mediumSpeed = "translate3d(" + (xAmount / 100) + "px, 0px, 0)";
        var slowSpeed = "translate3d(" + (xAmount / 100) + "px, " + (yAmount / 100) + "px, 0)";
        $(".homeHeaderBlock .icon .imageWrapper").css("transform", mediumSpeed);
        $(".homeHeaderBlock .background .imageWrapper .imageInnerWrapper").css("transform", fastSpeed);
        currentX = newX;
        currentY = newY;
        
        requestAnimationFrame(smoothHover);
    }

    smoothHover();
   
});