   /*
   Name: Jinrohpuzzle.js
   Date: 6/11/08
   By: Joseph Nesbella
   Desc: A 15 Tile Sliding Puzzle Game
   */
   var puzzleMap = new Array(16); //The Puzzle Array
   var puzzlePieces = new Array(15);

   var pieceHeight = 40;
   var pieceWidth = 53;

   var gameState = 0; //Default to Setup State

   var IE = false;
   if (navigator.appName == "Microsoft Internet Explorer"){IE = true}


   // If NS -- that is, !IE -- then set up for mouse capture
   if (!IE) document.captureEvents(Event.MOUSEMOVE)

   var tempX = 0;
   var tempY = 0;

   var won = 0;

   function getMouseXY(e) 
   {
      if (IE) 
      { // grab the x-y pos.s if browser is IE
         tempX = event.clientX + document.body.scrollLeft
         tempY = event.clientY + document.body.scrollTop
      }else{  // grab the x-y pos.s if browser is NS
         tempX = e.pageX
         tempY = e.pageY
      }  
  
      // catch possible negative values in NS4
      if (tempX < 0){tempX = 0}
      if (tempY < 0){tempY = 0}  
   }

   //Add An Image Element to the Page Used For Tile Rendering
   function addImage(x, y, source, num)
   {
      var parentDiv = document.getElementById('ParentImage');
      var element;
      element = document.createElement("img");
      element.style.position = 'absolute';
      element.id = "puzzlePiece" + num;
      element.src = source;
      element.style.width = pieceWidth + "px";
      element.style.height = pieceHeight + "px";
      element.style.left = x + 'px';
      element.style.top = y + 'px';
      parentDiv.appendChild(element);
   }

   function createPuzzlePiece(x, y, num)
   {
      this.x = x;
      this.y = y;
      this.num = num;
      this.src = num + ".bmp";
      addImage(x, y, this.src, num);
   }

   function setupPuzzle()
   {
      for(i = 0; i < 16; i++)
      {
         puzzleMap[i] = -1;
      }
  
      for(i = 0; i < 15; i++)
      {
         puzzleMap[i] = i;
      }

      for(i = 0; i < 16; i++)
      {
         random1 = Math.floor(Math.random() * 16);
         random2 = Math.floor(Math.random() * 16);

         var temp = puzzleMap[random1];
         puzzleMap[random1] = puzzleMap[random2];
         puzzleMap[random2] = temp;
         
      }

      for(y = 0; y < 4; y++)
         for(x = 0; x < 4; x++)
            if(puzzleMap[y * 4 + x] != -1)
               puzzlePieces[puzzleMap[y * 4 + x]] = new createPuzzlePiece(x * pieceWidth, y * pieceHeight, puzzleMap[y * 4 + x] + 1);
   }        

   function checkMove(e)
   {
      clickX = parseInt(tempX / pieceWidth);
      clickY = parseInt(tempY / pieceHeight);
      
      if(clickX / pieceWidth > 4)
         return;

      if(clickY / pieceHeight > 4)
         return;

      //Check Above the Tile
      var tempClickY = clickY - 1;
      if(tempClickY > -1)
         if(puzzleMap[tempClickY * 4 + clickX] == -1) //Is this open?
         {
            //Slide The Tile Up
            document.getElementById("puzzlePiece" + (puzzleMap[clickY * 4 + clickX] + 1)).style.top = tempClickY * pieceHeight

            puzzleMap[tempClickY * 4 + clickX] = puzzleMap[clickY * 4 + clickX];
            puzzleMap[clickY * 4 + clickX] = -1;
         }

      //Check Below the Tile
      var tempClickY = clickY + 1;
      if(tempClickY < 4)
         if(puzzleMap[tempClickY * 4 + clickX] == -1) //Is this open?
         {
            //Slide The Tile Down
            document.getElementById("puzzlePiece" + (puzzleMap[clickY * 4 + clickX] + 1)).style.top = tempClickY * pieceHeight

            puzzleMap[tempClickY * 4 + clickX] = puzzleMap[clickY * 4 + clickX];
            puzzleMap[clickY * 4 + clickX] = -1;
         }

      //Check Right Of the Tile
      var tempClickX = clickX + 1;
      if(tempClickX < 4)
         if(puzzleMap[clickY * 4 + tempClickX] == -1) //Is this open?
         {
            //Slide The Tile Right
            document.getElementById("puzzlePiece" + (puzzleMap[clickY * 4 + clickX] + 1)).style.left = tempClickX * pieceWidth

            puzzleMap[clickY * 4 + tempClickX] = puzzleMap[clickY * 4 + clickX];
            puzzleMap[clickY * 4 + clickX] = -1;
         }

      //Check Left Of the Tile
      var tempClickX = clickX - 1;
      if(tempClickX > -1)
         if(puzzleMap[clickY * 4 + tempClickX] == -1) //Is this open?
         {
            //Slide The Tile Left
            document.getElementById("puzzlePiece" + (puzzleMap[clickY * 4 + clickX] + 1)).style.left = tempClickX * pieceWidth

            puzzleMap[clickY * 4 + tempClickX] = puzzleMap[clickY * 4 + clickX];
            puzzleMap[clickY * 4 + clickX] = -1;
         }

      checkWin();
   }

   function checkWin()
   {
      var found = 0;

      for(i = 0; i < 15; i++)
         if(puzzleMap[i] != i)
            found = 1;

      if(found == 0)
      {
         won = 1;
         alert("YOU WON!\n\nPress Refresh For a New Puzzle!");
      }
   }

   function renderFrame()
   {  
      switch(gameState)
      {
         case 0:
            setupPuzzle();
         break; 
      }

      //   setTimeout(renderFrame, 0); //Recursively Call The Render Frame Function
   }

//Render the Frame As Soon As the Window Loads
window.onload = renderFrame;
document.onmousemove = getMouseXY;
document.onclick = checkMove;