var chaser = {
	stepNum: 0,
	stepDirection: null,
	position: {x: 0, y: 0},
	img: null,
	width: 32,
	height: 32,
	stepSize: 16,
	steps: 2,
	postText: '_dog.png',
	preText: 'http://jonradchenko.com/dogster/',

	up: {id: 'up', steps: 2},
	upright: {id: 'upright', steps: 2},
	upleft: {id: 'upleft', steps: 2},
	downright: {id: 'dwright', steps: 2},
	downleft: {id: 'dwleft', steps: 2},
	down: {id: 'down', steps: 2},
	left: {id: 'left', steps: 2},
	right: {id: 'right', steps: 2},
	stopped: {id: 'mati', steps: 2},

	destination: {x: 0, y: 0},
	timeout: 100,
	preloadImages: function()
	{
		var dirs = [this.up, this.upright, this.upleft, this.downright, this.downleft, this.down, this.left, this.right, this.stopped];
		for (var i in dirs)
		{
			var dir = dirs[i];
			var steps = dir.steps;
			var images = new Array();
			for (var j = 0; j < steps; j++)
			{
				images[j] = new Image();
				images[j].src = this.preText + dir.id + (j + 1) + this.postText;
			}
			dir.images = images;
		}
	},
	load: function()
	{
		this.preloadImages();
		var chaser = this;
		this.stepDirection = this.stopped;
		var img = document.createElement('img');
		this.img = img;
		img.style.position = 'absolute';
		img.style.width = this.width;
		img.style.height = this.height;
		document.body.appendChild(img);
		this.img = img;
		document.onmousemove = function(e) { chaser.getCursorPosition.call(chaser, e) };
		setTimeout(function(e) { chaser.tick.call(chaser); }, this.timeout);
	},
	getCursorPosition: function(e)
	{
		if (e == null) e = event;
		if (e == null) return;
		var x = 0, y = 0;
		if (e.pageX) 
		{
			x = e.pageX;
			y = e.pageY;
		} else {
			x =  e.clientX + document.body.scrollLeft;
			y =  e.clientY + document.body.scrollTop;
		}
		this.destination = {x: x, y: y};
	},
	updateImage: function()
	{
		if (!this.stepDirection.images[this.stepNum])
		{
			alert(this.stepDirection.images);
			return;
		}
		this.img.src = this.stepDirection.images[this.stepNum].src;
		this.img.style.left = this.position.x + 'px';
		this.img.style.top = this.position.y + 'px';
	},
	start: function() { this.tick(); },
	stop: function()
	{
	    if (this.timer) clearTimeout(this.timer);
	},
	tick: function()
	{
	    destination = this.destination;
	    position = this.position;
	    var x = destination.x - position.x;
	    var y = destination.y - position.y;
	    var direction = null;
	    if (Math.abs(x) < this.stepSize && Math.abs(y) < this.stepSize)
	    {
		    direction = this.stopped;
	    } else {
		    var angle = null;
		    if (x == 0)
		    {
			    angle = (y > 0 ? -90 : 90);
		    } else {
			    angle = Math.atan(y / x) * 180 / (Math.PI);
		    }
		    angle = (angle + 90 + (x <= 0 ? 180 : 0) + 22.5) % 360;

		    if (angle < 45)
			    direction = this.up;
		    else if (angle < 90)
			    direction = this.upright;
		    else if (angle < 135)
			    direction = this.right;
		    else if (angle < 180)
			    direction = this.downright;
		    else if (angle < 225)
			    direction = this.down;
		    else if (angle < 270)
			    direction = this.downleft;
		    else if (angle < 315)
			    direction = this.left;
		    else if (angle <= 360)
			    direction = this.upleft;

		    var stepX = null, stepY = null;
		    if (x != 0)
		    {
			    var ratio = y/x;
			    stepX = Math.sqrt((this.stepSize * this.stepSize) / (1 + ratio * ratio));
			    stepY = Math.sqrt((this.stepSize * this.stepSize) - (stepX * stepX))
		    } else {
			    stepX = 0;
			    stepY = this.stepSize;
		    }
		    if (x < 0) stepX = -stepX;
		    if (y < 0) stepY = -stepY;
		    position.x += stepX;
		    position.y += stepY;
	    }

	    if (this.stepDirection != direction)
		    this.stepNum = 0;
	    else
		    this.stepNum = (this.stepNum + 1) % direction.steps;
	    this.stepDirection = direction;

	    this.updateImage();

	    this.timer = setTimeout(function(e) { chaser.tick.call(chaser); }, this.timeout);
	}
};
window.onload = function() { chaser.load(); }