var heartImageURL = "/wp-content/themes/iuf10/img/heart_big.png";
var heartImageSize = { w:52, h:45 };
var heartImageSizeSmall = { w:10, h:9 };

var aniScaleDest = 0.2;

var aniLoopDelay = 25;
var aniSpeed = 40;

var aniHearts = [];

function animateHeart( key ) {

  var parts = key.split( ":" );
  if( parts.length == 2 ) {
    var id = parts[0];

    var elHeart = document.getElementById( "heart_" + id );
    var elDest = document.getElementById( "para_personalb" );

    if( elHeart && elDest ) {
      
      var heartPos = getPosition( elHeart );
      var destPos = getPosition( elDest );

      startHeartAni( heartPos.x + ( heartImageSizeSmall.w - heartImageSize.w ) / 2, heartPos.y + ( heartImageSizeSmall.h - heartImageSize.h ) / 2, destPos.x + elDest.offsetWidth - elHeart.offsetWidth, destPos.y );

    }
  }

}

function startHeartAni( xStart, yStart, xDest, yDest ) {

  var img = new Image();
  img.src = heartImageURL;

  img.style.position = "absolute";
  img.style.zIndex = 1000000 + aniHearts.length;

  document.body.appendChild( img );

  var xDir = xDest - xStart;
  var yDir = yDest - yStart;

  var len = Math.sqrt( xDir*xDir + yDir*yDir );
  var steps = Math.floor( len / aniSpeed );

  var item = {
    image:img,
    steps:steps,
    currentStep:0,
    dir:{x:xDir/steps, y:yDir/steps, scale:(aniScaleDest-1)/steps},
    current:{x:xStart, y:yStart, scale:1},
    start:{x:xStart, y:yStart, scale:1},
    dest:{x:xDest, y:yDest}
  };

  aniUpdatePos( item );

  aniHearts.push( item );

  if( !aniLoopRunning ) {
    setTimeout( aniLoop, aniLoopDelay );
    aniLoopRunning = true;
  }

}

function aniUpdatePos( item ) {

  item.image.style.left = item.current.x+"px";
  item.image.style.top = item.current.y+"px";

  item.image.width = item.current.scale * heartImageSize.w;
  item.image.height = item.current.scale * heartImageSize.h;

}

var aniLoopRunning = false;
function aniLoop() {

  var newHearts = [];
  for( var i = 0; i < aniHearts.length; i++ ) {
    var item = aniHearts[i];    

    item.currentStep++;

    item.current.x = item.start.x + item.dir.x * item.currentStep;
    item.current.y = item.start.y + item.dir.y * item.currentStep;
    item.current.scale = item.start.scale + item.dir.scale * item.currentStep;

    var toStop = false;
    if( item.currentStep >= item.steps ) {
    	item.current.x = item.dest.x;
    	item.current.y = item.dest.y;
    	item.current.scale = item.dest.scale;
      toStop = true;
    }

    aniUpdatePos( item );

    if( toStop ) {
      document.body.removeChild( item.image );
    } else {
      newHearts.push( item );
    }
  }

  aniHearts = newHearts;

  if( aniHearts.length > 0 ) {
    setTimeout( aniLoop, aniLoopDelay );
  } else {
    aniLoopRunning = false;
  }
}

function getPosition( el ) {

	var left = 0;
	var top = 0;

	while( el ) {
		left += el.offsetLeft;
		top += el.offsetTop;
		el = el.offsetParent;
	}

	return { x:left, y:top };

}