(no move made yet)

<div id="puzzle">
   <img id="image_5" src="http://script.aculo.us/images/puzzle5.jpg" alt="" />
   <img id="image_1" src="http://script.aculo.us/images/puzzle1.jpg" alt="" />
   <img id="image_9" src="http://script.aculo.us/images/puzzle9.jpg" alt="" />      
   <img id="image_7" src="http://script.aculo.us/images/puzzle7.jpg" alt="" />
   <img id="image_4" src="http://script.aculo.us/images/puzzle4.jpg" alt="" />
   <img id="image_8" src="http://script.aculo.us/images/puzzle8.jpg" alt="" />
   <img id="image_3" src="http://script.aculo.us/images/puzzle3.jpg" alt="" />
   <img id="image_6" src="http://script.aculo.us/images/puzzle6.jpg" alt="" />
   <img id="image_2" src="http://script.aculo.us/images/puzzle2.jpg" alt="" />
 </div>
 <p>
    <span id="puzzleinfo">(no move made yet)</span>
 </p>

 <script type="text/javascript" language="javascript">
 // <![CDATA[
   Sortable.create("puzzle",
     {tag:'img',overlap:'horizontal',constraint: false,
      onUpdate:function(){
        p = $("puzzle");
        p.moves = p.moves || 0;
        p.moves++;
        $('puzzleinfo').innerHTML = 
          "You've made " + p.moves + " move" + 
          (p.moves>1 ? "s" : "");
        if(Sortable.serialize("puzzle")==
           "puzzle[]=1&puzzle[]=2&puzzle[]=3&" +
           "puzzle[]=4&puzzle[]=5&puzzle[]=6&" +
           "puzzle[]=7&puzzle[]=8&puzzle[]=9") {
           $('puzzleinfo').innerHTML = 
             "You've solved the puzzle in <i>" + p.moves + "</i> moves!";
           Element.Class.add('puzzleinfo','congrats');
        }
      }
    })
 // ]]>
 </script>