Js puzzle app with canvas

[LOAM]

Hi everyone,
I am working on a puzzle app and I am stuck at one point: when a tile is clicked it is being changed with the same tile and after many clicks, all tiles are the same. Here is my code:

(function () {
	var canvas = document.getElementById("puzzleCanvas"),
	context = canvas.getContext("2d"),
	img = document.createElement("img"),
	mouseDown = false,
	hasText = true,
	clearCanvas = function () {
		if (hasText) {
			context.clearRect(0, 0, canvas.width, canvas.height);
hasText = false;
}
};


context.fillText("Drop an image here", 240, 200);


img.addEventListener("load", drawTiles,

	false);
canvas.addEventListener("mouseup", function (evt) {
	mouseDown = false;
}, false);


canvas.addEventListener("mousedown", function (evt) {
	clearCanvas();
	mouseDown = true;
	context.beginPath();
}, false);
	

	canvas.addEventListener("dragover", function (evt) {
		evt.preventDefault();
	}, false);

		canvas.addEventListener("drop", function (evt) {
			var files = evt.dataTransfer.files;
			if (files.length > 0) {
				var file = files[0];
				if (file.type.indexOf("image") != -1&&typeof FileReader !== "undefined" ) {
					var reader = new FileReader();
					reader.onload = function (evt) {
						img.src = evt.target.result;
					};
					reader.readAsDataURL(file);
				}
			}
			evt.preventDefault();
		}, false);
			

			var boardSize=canvas.width;
			var tileCount=3;
			var tileSize=boardSize/tileCount;

			var clickLocation=new Object;
			clickLocation.x=0;
			clickLocation.y=0;
			

			var emptyLoc=new Object;
			emptyLoc.x=0;
			emptyLoc.y=0;
			
			var rezolvat=false;
			
			var boardParts;
			setBoard();

			
			canvas.onclick = function(e) {
				clickLocation.x = Math.floor((e.pageX - this.offsetLeft) / tileSize);
				clickLocation.y = Math.floor((e.pageY - this.offsetTop) / tileSize);
				if (distance(clickLocation.x, clickLocation.y, emptyLoc.x, emptyLoc.y) == 1) {
					slideTile(emptyLoc, clickLocation);
					drawTiles();
				}
				if (rezolvat) {
					setTimeout(function() {alert("You solved it!");}, 500);
				}
			};

			function setBoard(){
				boardParts=new Array(tileCount);
				for (var k=0; k<tileCount; ++k){
					boardParts[k]=new Array(tileCount);
					for(var m=0; m<tileCount; ++m){
						boardParts[k][m]=new Object;
						boardParts[k][m].x=(tileCount-1)-k;
						boardParts[k][m].y=(tileCount-1)-m;
					}
				}
				
				emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x;
				emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y;
				rezolvat=false;

			}
			function drawTiles()
			{
				context.clearRect(0,0, boardSize, boardSize);
				for(var i=0; i<tileCount; ++i)
				{
					for(j=0; j<tileCount; ++j)
					{
						var x=boardParts[i][j].x;
						var y=boardParts[i][j].y;
						if(j!=emptyLoc.y || i!=emptyLoc.x||rezolvat==true){
							context.drawImage(img, x*tileSize, y*tileSize, tileSize, tileSize, i*tileSize, j*tileSize, tileSize, tileSize);
						}
					}
				}
			}


			function distance(x1, y1, x2, y2){
				return Math.abs(x1-x2)+Math.abs(y1-y2);
			}

			function slideTile(toLocation, fromLocation)
			{
				if(!rezolvat){
					boardParts[toLocation.x][toLocation.y].x=boardParts[fromLocation.x][fromLocation.y].x;
					boardParts[toLocation.x][toLocation.y].y=boardParts[fromLocation.x][fromLocation.y].y;
					boardParts[toLocation.x][toLocation.y].x=tileCount-1;
					boardParts[toLocation.x][toLocation.y].y=tileCount-1;
					toLocation.x=fromLocation.x;
					toLocation.y=fromLocation.y;
					verificaRez();

				}
			}

			function verificaRez()
			{
				var flag=true;
				for(var i=0; i<tileCount; ++i){
					for(var j=0; j<tileCount; ++j){
						if(boardParts[i][j].x!=i||boardParts[i][j].y!=j){
							flag=false;
						}
					}
				}
				rezolvat=flag;
			}
			


			
		})();