var Animator = Class.create({
	initialize:function(callback, duration, fps)
	{
		this.callback = callback;
		this.duration = duration;
		this.fps = fps;
		this.isAnimating = false;
	},
	start:function()
	{
		this.endTime = new Date();
		this.endTime.setTime( this.endTime.getTime() + this.duration );	
		this.delay = this.duration / this.fps;		
		this.isAnimating = true;
		this.tick();
	},
	stop:function()
	{
		this.isAnimating = false;		
	},
	tick:function()
	{
		if(this.isAnimating)
		{
			var now = new Date();
			var remaining = this.endTime.valueOf() - now.valueOf();
			if(remaining > 0)
			{
				var percent = (this.duration - remaining) / this.duration;
				this.callback(percent);
						
				setTimeout(this.tick.bind(this), this.delay);
			}
			else
			{
				this.isAnimating = false;
				this.callback(1);
			}			
		}
	}
});

var PositionAnimator = Class.create({
	initialize:function(element, x, y)
	{
		this.element = element;
		this.toPosition = {
			x:x,
			y:y
		};
		this.fromPosition = {
			x:parseInt(this.element.style.left),
			y:parseInt(this.element.style.top)
		};
		this.duration = 250;
		this.fps = 100;
		this.delay = this.duration / this.fps;
		this.startTime = new Date();		
		this.tick(this);
	},
	tick:function(context)
	{
		var now = new Date();
		var elapsed = now.valueOf() - context.startTime.valueOf();
		var percent = elapsed / context.duration;
		
		percent = Math.sin(percent * Math.PI / 2);
		percent *= percent * percent;
		
		//console.log(percent);
		
		var oneMinus = 1 - percent;
		
		if(elapsed < context.duration)
		{
			var x = parseInt((context.fromPosition.x * oneMinus) + (context.toPosition.x * percent));
			var y = parseInt((context.fromPosition.y * oneMinus) + (context.toPosition.y * percent));
			
			context.element.style.left = x + "px";
			context.element.style.top = y + "px";
		
			setTimeout(function(){context.tick(context)}, context.delay);
		}
		else
		{
			var x = context.toPosition.x;
			var y = context.toPosition.y;
			
			context.element.style.left = x + "px";
			context.element.style.top = y + "px";
		}
	}
});