slidingpuzzle

HTML

<body onload="loadFunc();">
    <div id="slidingpuzzleContainer"></div>
    <div id="formatContainer">select format:
        <br />
        <select name="format" id="format" size="1" onChange="this.options[this.selectedIndex].onclick()">
            <option onclick="loadFunc();"></option>
            <option onclick="changeFormat(3,3);">Format 3 x 3</option>
            <option onclick="changeFormat(3,4);">Format 3 x 4</option>
            <option onclick="changeFormat(4,3);">Format 4 x 3</option>
            <option onclick="changeFormat(4,4);">Format 4 x 4</option>
        </select>
    </div>
</body>

CSS

body {
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #000;
}
img {
    padding: 0;
    ;
    margin: 0;
}
#slidingpuzzleContainer3x3, #slidingpuzzleContainer3x4, #slidingpuzzleContainer4x3, #slidingpuzzleContainer4x4 {
    position: absolute;
    top: 50px;
    left: 50px;
    border: 10px solid black;
}
#slidingpuzzleContainer3x3 {
    width: 300px;
    height: 300px;
}
#slidingpuzzleContainer3x4 {
    width: 300px;
    height: 400px;
}
#slidingpuzzleContainer4x3 {
    width: 400px;
    height: 300px;
}
#slidingpuzzleContainer4x4 {
    width: 400px;
    height: 400px;
}
.puzzlepiece {
    float: left;
}
#formatContainer {
    position: absolute;
    top: 50px;
    left: 500px;
}
#format {
    margin-top: 10px;
}

JavaScript

var cols;

function loadFunc() {
    var puzzle = '<div id="slidingpuzzleContainer4x4">';
    cols=4;
    for (var i = 0; i <= 15; ++i) {
        puzzle = puzzle + '<img src="images/blank.jpg" alt="blank" width="100" height="100" />';
    }
    puzzle = puzzle + '</div>';
    showSlidingpuzzle(puzzle);
}


function changeFormat(x, y) {
    var puzzlepieces = [];
    var finalValue = x * y - 2;

    for (var i = 0; i <= finalValue; ++i) {
        puzzlepieces.push(i);
    }

    puzzlepieces.push('blank')
    createSlidingpuzzle(puzzlepieces, x, y);
}


function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;

 
  while (0 !== currentIndex) {

    
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
function createSlidingpuzzle(puzzlepieces, x, y) {

    var puzzle = '<div id="slidingpuzzleContainer' + x + 'x' + y + '">';
    cols=x;
    puzzlepieces=shuffle(puzzlepieces);
    for (var puzzleNr = 0; puzzleNr < puzzlepieces.length; ++puzzleNr) {
        puzzle += '<img src="images/' + x + 'x' + y + '/' +[puzzleNr] + '.jpg" class="puzzlepiece" id="position' + puzzlepieces[puzzleNr] + '" alt="' + puzzlepieces[puzzleNr] + '" onclick="shiftPuzzlepieces(this);" width="100" height="100" />';
    }
    puzzle += '</div>';

    showSlidingpuzzle(puzzle);
}


function showSlidingpuzzle(puzzle) {
    document.getElementById('slidingpuzzleContainer').innerHTML = puzzle;
}


function shiftPuzzlepieces(el) {
    var elIndex=0;
    var child=el;
    while((child=child.previousSibling)!=null) elIndex++;
    
    
    var blankIndex=0;
    var blank = document.getElementById("positionblank");
    child=blank;
    while((child=child.previousSibling)!=null) blankIndex++;
  
    if((((elIndex==blankIndex-1) || (elIndex==blankIndex+1) )
       &&...