function sprite(filename) {
	this.x = 0;
	this.y = 0;
	this.field_x = 0;
	this.field_y = 0;
	this.targetx = 0;
	this.targety = 0;
	this.step = 4;
	this.board;
	this.width = this.height = 0;
	
	this.set_pos = function(x, y, dont_goto) {
		if (!dont_goto) {
			dont_goto = false;
		}
		this.x = x;
		this.y = y;
		if (this.board.mirror_x) {
			$(this.id).style.left = (this.board.width - x) + this.board.x - Math.floor(this.width/2) + "px";
		} else {
			$(this.id).style.left = x + this.board.x - Math.floor(this.width/2) + "px";
		}
		if (this.board.mirror_y) {
			$(this.id).style.top = y + this.board.y - Math.floor(this.height/2) + "px";
		} else {
			$(this.id).style.top = (this.board.height - y) + this.board.y - Math.floor(this.height/2) + "px";
		}
		if (!dont_goto) {
			this.goto(x, y);
		}
	}

	this.set_pos_field = function(field_x, field_y, dont_goto) {
		if (!dont_goto) {
			dont_goto = false;
		}
		this.field_x = field_x;
		this.field_y = field_y;
		var x = this.board.field2x(field_x);
		var y = this.board.field2y(field_y);
		this.set_pos(x, y, true);
		if (!dont_goto) {
			this.goto_field(field_x, field_y);
		}
	}

	this.goto = function(x, y) {
		this.targetx = x;
		this.targety = y;
	}

	this.goto_field = function(field_x, field_y) {
		this.field_x = field_x;
		this.field_y = field_y;
		var x = this.board.field2x(field_x);
		var y = this.board.field2y(field_y);
		this.goto(x, y);
	}

	this.do_step = function() {
		var new_x = this.x;
		var new_y = this.y;
		if ((this.x - this.targetx) < (- this.step)) {
			new_x += this.step;
		} else if ((this.x - this.targetx) > this.step) {
			new_x -= this.step;
		} else if (this.x != this.targetx) {
			new_x = this.targetx;
		}
		if ((this.y - this.targety) < (- this.step)) {
			new_y += this.step;
		} else if ((this.y - this.targety) > this.step) {
			new_y -= this.step;
		} else if (this.y != this.targety) {
			new_y = this.targety;
		}
		this.set_pos(new_x, new_y, true);
	}

	this.do_tick = function() {
		this.do_step();
	}
	
	this.delete_ = function() {
		$(this.id).style.display='none';
		this.field_x = this.field_y = false;
	}

	this.still = function() {
		return(
			(this.targetx == this.x) &&
			(this.targety == this.y)
		);
	}

	var img = document.createElement('img');
	this.id = img.id = 'sprite' + Math.random();
	img.src = filename;
	this.width = img.width;
	this.height = img.height;
	img.style.position = 'absolute';
	document.body.appendChild(img);
}

function board(filename) {
	this.sprites = new Array();
	this.x = 0;
	this.y = 0;
	this.field_width = this.field_height = 50;
	this.field_offset_x = this.field_offset_y = 1;
	this.mirror_x = false;
	this.mirror_y = false;

	this.set_pos = function(x, y) {
		$(this.id).style.left = x + "px";
		$(this.id).style.top = y + "px";
		this.x = x;
		this.y = y;
		this.position_fields();
	}

	this.add_sprite = function(sprite) {
		this.sprites.push(sprite);
		sprite.board = this;
	}
	
	this.field2x = function(field_x) {
		var x = (field_x + 0.5) * this.field_width;
		return x;
	}

	this.field2y = function(field_y) {
		var y = (field_y + 0.5) * this.field_height;
		return y;
	}

	this.do_tick = function() {
		for(i=0; i < this.sprites.length; i++) {
			this.sprites[i].do_tick();
		}
	}

	this.mouseoverfield = function(e) {
		if (e.target.highlighted != 'blue') e.target.highlight('green');
	}

	this.mouseoutfield = function(e) {
		if (e.target.highlighted != 'blue') e.target.highlight('none');
	}

	this.clickfield = function(e) {
		e.target.highlight('blue');
	}

	this.position_fields = function () {
		for (var i=0; i<this.fields.length; ++i) {
			img = this.fields[i];
			if (this.mirror_x) {
				img.pos_x = (this.width - (((img.pos_x_field + 1) * this.field_width) + this.field_offset_x)) + this.x;
			} else {
				img.pos_x = ((img.pos_x_field * this.field_width) + this.x + this.field_offset_x);
			}
			img.style.left = img.pos_x + 'px';
			if (this.mirror_y) {
				img.pos_y = ((img.pos_y_field * this.field_height) + this.y + this.field_offset_y);
			} else {
				img.pos_y = (this.height - (((img.pos_y_field + 1) * this.field_height) + this.field_offset_y)) + this.y;
			}
			img.style.top = img.pos_y + 'px';			
		}
	}

	this.get_sprite_by_field = function(field_x, field_y) {
		var sprite = false;
		for (var i=0; i<this.sprites.length; i++) {
			if (
				this.sprites[i].field_x === field_x &&
				this.sprites[i].field_y === field_y 
			) sprite = this.sprites[i];
		}
		return sprite;
	}

	var img = document.createElement('img');
	this.id = img.id = 'board' + Math.random();
	img.src = filename;
	this.width = img.width;
	this.height = img.height;
	img.style.position = 'absolute';
	img.style.left = this.x + 'px';
	img.style.top = this.y + 'px';
	document.body.appendChild(img);
	this.fields = new Array();
	for (var x=0; x<(Math.floor(this.width/this.field_width)); x++) {
		for (var y=0; y<(Math.floor(this.height/this.field_height)); y++) {
			var img = document.createElement('img');
			img.pos_x_field = x;
			img.pos_y_field = y;
			img.style.width = this.field_width + 'px';
			img.style.height = this.field_height + 'px';
			img.highlights = {
				green: 'libs/img/highlight_green.png',
				blue: 'libs/img/highlight_blue.png',
				red: 'libs/img/highlight_red.png',
				none: 'libs/img/highlight_none.png',
			};
			img.highlight = function (color) {
				this.src = this.highlights[color];
				this.highlighted = color;
			}
			img.highlighted = 'none';
			img.style.zIndex = '10';
			img.style.position = 'absolute';
			var id = this.id+ '_field_' + x + '_' + y;
			img.board = this;
			img.onmouseover = function (e) { this.board.mouseoverfield(e); };
			img.onmouseout = function (e) { this.board.mouseoutfield(e); };
			img.onclick = function (e) { this.board.clickfield(e); };
			img.id = id;
			document.body.appendChild(img);
			this.fields.push(img);
		}
	}
	this.position_fields();
}