randNum = new Array (15);

randNum[0] = "01";
randNum[1] = "02";
randNum[2] = "03";
randNum[3] = "04";
randNum[4] = "05";
randNum[5] = "06";
randNum[6] = "07";
randNum[7] = "08";
randNum[8] = "09";
randNum[9] = "10";
randNum[10] = "11";
randNum[11] = "12";
randNum[12] = "13";
randNum[13] = "14";
randNum[14] = "15";


pieces = new Array(3);

pieces[0] = new Array(5);
pieces[0][0] = "piece_01";
pieces[0][1] = "piece_02";
pieces[0][2] = "piece_03";
pieces[0][3] = "piece_04";
pieces[0][4] = "empty_piece";

pieces[1] = new Array(5);
pieces[1][0] = "piece_06";
pieces[1][1] = "piece_07";
pieces[1][2] = "piece_08";
pieces[1][3] = "piece_09";
pieces[1][4] = "piece_10";

pieces[2] = new Array(5);
pieces[2][0] = "piece_11";
pieces[2][1] = "piece_12";
pieces[2][2] = "piece_13";
pieces[2][3] = "piece_14";
pieces[2][4] = "piece_15";


function positionPieces() {
	
	for ( i = 0 ; i < 15 ; i++ ) {
		var pieceNum=Math.floor(Math.random()*16)
	}
	
	if (pieces.length == 0)
		alert("Empty Array");
	
	else {

		var col_piece = 0;
		var row_piece = 0;
			
		for ( row = 0; row < 3; row++ ) {
					
			for ( col = 0; col < 5; col++ ) {
				document.getElementById(pieces[row][col]).style.left = col_piece + "px";
				document.getElementById(pieces[row][col]).style.top = row_piece + "px";
				
				col_piece = col_piece + 200;
				
				if ( col == 4 || col == 9 ) {
					col_piece = 0;
					row_piece = row_piece + 200;
				}
			}
		}
	}
}


function movePiece(clickedPiece){
	// FIND THE COORDINATES OF THE EMPTY PIECE
	
	var empty_x = document.getElementById("empty_piece").offsetLeft;
	var empty_y = document.getElementById("empty_piece").offsetTop; 

	// DEFINE CLICKED PIECE
	
	var clicked_id = document.getElementById(clickedPiece.id);
	
	var clicked_x = clicked_id.offsetLeft;
	var clicked_y = clicked_id.offsetTop;
	
	
	
	for ( row = 0; row < 3; row++ ) {
		for ( col = 0; col < 5; col++ ) {
			
			if (pieces[row][col] == clickedPiece.id ) {
				var prevCol = pieces[row][col - 1];
				var prevRow = ((row - 1) < 0) ? false : pieces[row - 1][col];				
				var nextCol = pieces[row][col + 1];
				var nextRow = ((row + 1) > 2) ? false : pieces[row + 1][col];
			
				if (nextRow == 'empty_piece') {
					
					document.getElementById("empty_piece").id = clicked_id.id;
					prevRow = clicked_id;
					pieces[row + 1][col] = clicked_id.id;
					clicked_id.id = 'empty_piece';					
					pieces[row][col] = 'empty_piece';										
				}
				
				if (nextCol == 'empty_piece') {
					document.getElementById("empty_piece").id = clicked_id.id;
					nextCol = clicked_id;
					pieces[row][col + 1] = clicked_id.id;
					clicked_id.id = 'empty_piece';		
					pieces[row][col] = 'empty_piece';										
				}
					
				if (prevRow == 'empty_piece') {
					
					document.getElementById("empty_piece").id = clicked_id.id;
					prevRow = clicked_id;
					pieces[row - 1][col] = clicked_id.id;
					clicked_id.id = 'empty_piece';					
					pieces[row][col] = 'empty_piece';										
				}
								
				if (prevCol == 'empty_piece') {
					
					document.getElementById("empty_piece").id = clicked_id.id;
					prevCol = clicked_id;
					pieces[row][col - 1] = clicked_id.id;
					clicked_id.id = 'empty_piece';		
					pieces[row][col] = 'empty_piece';										
				}
							
			}
			
		}
	
	}
	
}