// Trace the mouse
// Some vars to start with
var mouse     = $('.mouse'),
    currentX  = 0, 
    currentY  = 0,
    newX      = 0, 
    newY      = 0;

// Get X and Y positions
$(window).mousemove(function(e){
   currentX = e.pageX; // Get the mouse X position
   currentY = e.pageY; // Get the mouse Y position
});
// Make the trace a little bit smooth
var fps = setInterval(function(){
      newX += (currentX - newX) / 5; // Create new X position
      newY += (currentY - newY) / 5; // Create new Y position
      mouse.css({
        'transform': 'translate3d('+(newX - 30)+'px, '+(newY - 30)+'px, 0)' // ALWAYS use transform property to get the best performance
      });
      // console.log('My current Y location is (' +newY+ ') and in X is ('+newX+')' )
  }, 16);// Refresh the positions each 16ms to get ~60fps




// Moving the elements randomly functions
// NOTE : THIS HAVE BAD PREFORMANCE DELETE IF YOU NEED 60fps

// Trigger the movement
$('.random.not-clicked, .trigger.not-clicked').click(function(){
  movingElements();
  $('.not-clicked').removeClass('not-clicked');
});
function makeNewPosition(){
    // All this vars to generate different values for each element
    var windowHeight  = ( $(window).height() - ( $(window).height() / 2 ) ),
        windowWidth   = ( $(window).width() - ( $(window).width() / 2 ) ),
        randomHeight1 = Math.floor(Math.random() * windowHeight),
        randomHeight2 = Math.floor(Math.random() * windowHeight),
        randomHeight3 = Math.floor(Math.random() * windowHeight),
        randomHeight4 = Math.floor(Math.random() * windowHeight),
        randomWidth1  = Math.floor(Math.random() * windowWidth),
        randomWidth2  = Math.floor(Math.random() * windowWidth),
        randomWidth3  = Math.floor(Math.random() * windowWidth),
        randomWidth4  = Math.floor(Math.random() * windowWidth);

  return [randomHeight1, randomHeight2, randomHeight3, randomHeight4, randomWidth1, randomWidth2, randomWidth3, randomWidth4];    
}

function movingElements(){
  var newq = makeNewPosition();
  $('.random.one').css({'transform': 'translate3d('+newq[4]+'px,-'+newq[0]+'px, 0)'});
  $('.random.two').css({'transform': 'translate3d(-'+newq[1]+'px,'+newq[5]+'px, 0)'});
  $('.random.three').css({'transform': 'translate3d('+newq[6]+'px,-'+newq[2]+'px, 0)'});
  $('.random.four').css({'transform': 'translate3d(-'+newq[3]+'px,'+newq[7]+'px, 0)'});
  setTimeout( function() {
    movingElements();
  }, 3000);
};