var animating = false;

/**
 * Animate HTML object, such as for moving a div from one position to another.
 * 
 * @param elm - Dom object to animate
 * @param props - Array of properies to animate 
 * @param duration - Time in milliseconds that the animation should last
 * @param fps - Number of Frames Per Second for the animation
 * @param easing - Type of animation to use
 * @return void
 */
function animate(elm,props,duration,fps,easing) {
  duration = (duration) ? parseFloat(duration) : 1000;
  fps      = (fps)      ? parseFloat(fps)      : 20;
  easing   = (easing)   ? easing               : easeLinear;

  var interval    = Math.ceil(1000/fps);
  var totalframes = Math.ceil(duration/interval);

  for (var i=1;i <= totalframes;i++) {
    (function() {
      var frame=i;
      interpolate=function() {
        for (var prop in props) {
          var begin = props[prop].start*100;
          var end   = props[prop].end*100;
          elm.style[prop] = easing(frame, begin, end-begin, totalframes)/100 + 'px';
          animating = (frame == totalframes)?false:true;
        }
      };
      timer = setTimeout(interpolate,interval*frame);
    })();
  }
}

// Linear animation from one parameter value to another
function easeLinear(frame,begin,change,totalframes) {
  return change*(frame/totalframes)+begin;
}
// Slow start animation finishes fast
function easeInQuart (frame,begin,change,totalframes) {
  return change*(frame/=totalframes)*frame*frame*frame + begin;
};
// Fast start animation finishes slow
function easeOutQuart (frame,begin,change,totalframes) {
  return -change * ((frame=frame/totalframes-1)*frame*frame*frame - 1) + begin;
};
// Fast animation, then slows in middle and finishes fast.
function easeInOutQuart (frame,begin,change,totalframes) {
  if ((frame/=totalframes/2) < 1) return change/2*frame*frame*frame*frame + begin;
  return -change/2 * ((frame-=2)*frame*frame*frame - 2) + begin;
};