I'm creating a 4x4 jigsaw puzzle as an assignment for class. I'm completely new to Javascript and I've spent the better part of the last 3 days getting to where I am now (which I'm pretty proud of, given how many times I've wanted to pull all my hair out).

I now have the 4x4 image up and everything works - except the bottom row. I can slide the pieces to the left, to the right, but it won't slide them up. In every row but the bottom pieces can slide all willy in any direction, but for some reason the code doesn't work on the bottom row. I can't think of any particular reason why it shouldn't work, but I am very aware of my noobness and there obviously IS a particular reason it isn't working. I am completely stumped.


My Javascript:
Code:
var jigArray = new Array(4)
//First Row
jigArray[0] = new Array (4)
jigArray [0][0] = "C01.jpg"
jigArray [0][1] = "C02.jpg"
jigArray [0][2] = "C03.jpg"
jigArray [0][3] = "C04.jpg"
//Second Row
jigArray [1] = new Array(4)
jigArray[1][0] = "C05.jpg"
jigArray[1][1] = "C06.jpg"
jigArray[1][2] = "C07.jpg"
jigArray[1][3] = "C08.jpg"
//Third Row
jigArray[2] = new Array(4)
jigArray[2][0] = "C09.jpg"
jigArray[2][1] = "C10.jpg"
jigArray[2][2] = "C11.jpg"
jigArray[2][3] = "C12.jpg"
//Fourth Row
jigArray[3] = new Array(4)
jigArray[3][0] = "C13.jpg"
jigArray[3][1] = "C14.jpg"
jigArray[3][2] = "C15.jpg"
jigArray[3][3] = "C16.jpg"


			  
function slide(X){
//Split ID string into two seperate numbers E.G convert String to Array
alert(X.id)
jigString = X.id
n = jigString.split(",")
jigRow = n[0]
jigCol = n[1]
jigRow = parseInt(jigRow)
jigCol = parseInt(jigCol)
clickedJig = jigArray[jigRow][jigCol]


	//Check to see that the square is not blank
	//MOVE LOGIC
	if (jigArray[jigRow][jigCol] !== 'C16.jpg'){
	alert("Check 2")
	//LEFT MOVE
		if (jigArray[jigRow][jigCol - 1] == 'C16.jpg'){
		movepaintLeft()
		}
	//RIGHT MOVE
		if (jigArray[jigRow][jigCol + 1] == 'C16.jpg'){
		movepaintRight()
		}
	//DOWN MOVE
		if (jigArray[jigRow + 1][jigCol] == 'C16.jpg'){
		movepaintDown()
		}
	//UP MOVE
		if (jigArray[jigRow - 1][jigCol] == 'C16.jpg'){
		movepaintUp()

		}

		
		//This function is how the jigsaw slides
	function movepaintDown(){
	//Get new Row Number
	downRow = parseInt(n[0]) 
	downRow = downRow + 1
	numberID = ("" + downRow + "," + n[1])

	//Switch the pictures on the board
	document.getElementById(n).innerHTML ='<img src="images/C16.jpg"  class="block" alt="C13" />'
	document.getElementById(numberID).innerHTML = '<img src="images/' + clickedJig +'"' +  'class="block" alt="C13" />'

	
	
	//Switch value of ARRAYS
	jigArray[downRow][jigCol] = clickedJig
	jigArray[jigRow][jigCol] = "C16.jpg"

	clickedJig = jigArray[jigRow][jigCol]
	
	
	}
	
	
	function movepaintUp(){
	//Get new Row Number
	upRow = parseInt(n[0]) 
	upRow = upRow - 1
	numberID = ("" + upRow + "," + n[1])

	//Switch the pictures on the board
	document.getElementById(n).innerHTML ='<img src="images/C16.jpg"  class="block" alt="C13" />'
	document.getElementById(numberID).innerHTML = '<img src="images/' + clickedJig +'"' +  'class="block" alt="C13" />'

	
	
	//Switch value of ARRAYS
	jigArray[upRow][jigCol] = clickedJig
	jigArray[jigRow][jigCol] = "C16.jpg"
	clickedJig = jigArray[jigRow][jigCol]
	
	
	}
	
	function movepaintLeft(){
	//Get new Col Number
	leftCol = parseInt(n[1]) 
	leftCol = leftCol - 1
	numberID = ("" + n[0] + "," + leftCol)

	//Switch the pictures on the board
	document.getElementById(n).innerHTML ='<img src="images/C16.jpg"  class="block" alt="C13" />'
	document.getElementById(numberID).innerHTML = '<img src="images/' + clickedJig +'"' +  'class="block" alt="C13" />'

	
	
	//Switch value of ARRAYS
	jigArray[jigRow][leftCol] = clickedJig
	jigArray[jigRow][jigCol] = "C16.jpg"
	clickedJig = jigArray[jigRow][jigCol]
	}
	
	function movepaintRight(){
	//Get new Col Number
	rightCol = parseInt(n[1]) 
	rightCol = rightCol + 1
	numberID = ("" + n[0] + "," + rightCol)


	//Switch the pictures on the board
	document.getElementById(n).innerHTML ='<img src="images/C16.jpg"  class="block" alt="C13" />'
	document.getElementById(numberID).innerHTML = '<img src="images/' + clickedJig +'"' +  'class="block" alt="C13" />'

	
	
	//Switch value of ARRAYS
	jigArray[jigRow][rightCol] = clickedJig
	jigArray[jigRow][jigCol] = "C16.jpg"
	clickedJig = jigArray[jigRow][jigCol]
	
	
	}
	}
	
	
	
}


//Shuffle Button
Ignore the random alerts injected in, I was just trying to figure out what was firing and what wasn't. My array corresponds to an ID I gave each table data element in my HTML. It looks like this:

MY HTML:
Code:
        	<tr> 
        	<td id="0,0" onclick="slide(this)">  <img src="images/C01.jpg"  class="block" alt="C01" /></td>
            <td id="0,1" onclick="slide(this)" > <img src="images/C02.jpg" class="block" alt="C02" /></td>
            <td id="0,2" onclick="slide(this)"> <img src="images/C03.jpg"  class="block" alt="C03" /></a></td>
            <td id="0,3" onclick="slide(this)"> <img src="images/C04.jpg"  class="block" alt="C04" /></a></td>
            </tr>
        <tr>
            <td id="1,0" onclick="slide(this)"> <img src="images/C05.jpg"  class="block" alt="C05" /></a></td>
            <td id="1,1" onclick="slide(this)"> <img src="images/C06.jpg" class="block" alt="C06" /></a></td>
            <td id="1,2" onclick="slide(this)"> <img src="images/C07.jpg" class="block" alt="C07" /></a></td>
            <td id="1,3" onclick="slide(this)"> <img src="images/C08.jpg"  class="block" alt="C08" /></a></td>
        </tr> 
        <tr>
            <td id="2,0" onclick="slide(this)"> <img src="images/C09.jpg"  class="block" alt="C09" /></a></td>
            <td id="2,1" onclick="slide(this)"> <img src="images/C10.jpg"  class="block" alt="C10" /></a></td>
            <td id="2,2" onclick="slide(this)"> <img src="images/C11.jpg"  class="block" alt="C11" /></a></td>
            <td id="2,3" onclick="slide(this)"> <img src="images/C12.jpg"  class="block" alt="C12" /></a></td>
        </tr> 
        <tr>
            <td id="3,0" onclick="slide(this)"> <img src="images/C13.jpg"  class="block" alt="C13" /></a></td>
            <td id="3,1" onclick="slide(this)"> <img src="images/C14.jpg"  class="block" alt="C14" /></a></td>
            <td id="3,2" onclick="slide(this)"> <img src="images/C15.jpg"  class="block" alt="C15" /></a></td>
            <td id="3,3" onclick="slide(this)"> <img src="images/C16.jpg"  class="block" alt="C16" /></a></td>
        </tr>

I'm not sure if my HTML code is really that relevant, so I just copied the table in case it is. Everything looks like it should work fine to me, and I can't seem to figure out the issue.

Thanks for any help!