// START OF SCRIPT FOR PUZZLE version 1.0
// Variables you can change to customise for yourself:

// An array of all of the images the completed channel starting from the top
// left corner and going left to right, row by row; so that the bottom right
// part of the completed puzzle is the last image in this array.

const imgArray = new Array("ht0.gif", "ht1.gif", "ht2.gif", "ht3.gif", "bluey.gif", "ht5.gif", "ht6.gif", "ht7.gif", "ht8.gif", "ht9.gif", "ht10.gif", "ht11.gif", "ht12.gif", "ht13.gif", "ht14.gif", "ht15.gif", "ht16.gif", "ht17.gif", "ht18.gif", "ht19.gif", "ht20.gif", "ht21.gif", "ht22.gif", "ht23.gif", "ht24.gif");

// Base URL of the above images, must end in '/' unless it is ""
// (ie. all images in same directory as html file);

const baseURL = "";

// background colour of the table cells (useful if you are using a totally
// transparent GIF for the blank piece of the puzzle).

// removed

// number of rows and columns.
// NB: (numrows * numcols) must equal the number of images
// in the img Array above.

const numrows = 5;
const numcols = 5;

// height and width of each individual piece of the puzzle:

const imgheight = 58;
const imgwidth = 43;

// starting position of the blank piece. eg. for our game,
// the blank is in the 5th (rightmlost) column and first (top) row:

const startx = 5;
const starty = 1;

// optional: you can experiment with the following for aesthetic purposes:

// simply the cell padding and spacing. we find leaving the padding at 1
// with a cellcolour (above) different from the background colour of
// the page gives a simple embossed/raised feel.

const myspacing = 0;
const mypadding = 1;

// End of customisation section

// BEWARE: Alter the following code at your own peril

//Global variables:

var blankx = startx;
var blanky = starty;
var blankpos = ((starty - 1) * numcols) + (startx - 1);
const numimages = imgArray.length;
var temppositions = new Array(numimages);
var imagesPresent = 0;

// check that the layout can handle the number of cards correctly:

if (numimages != (numcols * numrows)) {
  alert("Someone screwed up on the layout!  You do not have the same number of cards as cells in the table that is supposed to display them!");
}

// to enable play only once all the images are loaded.

// removed

// Function to layout cards; only needs to be done once, on loading the page for first time:

function layout() {
  imagesPresent = document.images.length - 1;
  var table = document.getElementById("board");
  table.setAttribute("cellspacing", myspacing);
  table.setAttribute("cellpadding", mypadding);
  var cardId = 0;
  for (var j = 1; j <= numrows; j++) {
    var row = document.createElement("tr");
    for (var i = 1; i <= numcols; i++) {
      var cell = document.createElement("td");
      var link = document.createElement("a");
      var image = document.createElement("img");
      link.href = "javascript:movecard(" + i + "," + j + ");";
      image.setAttribute("height", imgheight);
      image.setAttribute("width", imgwidth);
      image.setAttribute("alt", "card");
      image.src = baseURL + imgArray[cardId];
      link.appendChild(image);
      cell.appendChild(link);
      row.appendChild(cell);
      cardId++;
    }
    table.appendChild(row);
  }
}

// Moving the parts of the puzzle:
// yes, it could be more efficient but this is simpler to understand:

function movecard(xpos, ypos) {
  // (xpos, ypos) = next position of the blank.
  if (ypos == blanky && xpos == blankx)
    // in case user clicked on the blank.
    return;
  if (ypos == blanky) {
    // user clicked a piece in the same row:
    blankel = ((blanky-1) * numcols) + blankx - 1;
    if (blankx < xpos) {
      // move right:
      while (blankx != xpos) {
        temppositions[blankel] = temppositions[blankel + 1];
        temppositions[blankel + 1] = imgArray[blankpos];
        document.images[imagesPresent + blankel].src = baseURL + temppositions[blankel];
        blankx++;
        blankel++;
        document.images[imagesPresent + blankel].src = baseURL + temppositions[blankel];
      }
    }
    else {
      // move left:
      while (blankx != xpos) {
        temppositions[blankel] = temppositions[blankel - 1];
        temppositions[blankel - 1] = imgArray[blankpos];
        document.images[imagesPresent + blankel].src = baseURL + temppositions[blankel];
        blankx--;
        blankel--;
        document.images[imagesPresent + blankel].src = baseURL + temppositions[blankel];
      }
    }
  }
  else {
    if (xpos == blankx) {
      // user clicked on a piece in the same column:
      blankel = ((blanky - 1) * numcols) + blankx - 1;
      if (blanky < ypos) {
        // move up:
        while (blanky != ypos) {
          temppositions[blankel] = temppositions[blankel + numcols];
          temppositions[blankel + numcols] = imgArray[blankpos];
          document.images[imagesPresent + blankel].src = baseURL + temppositions[blankel];
          blanky++;
          blankel += numcols;
          document.images[imagesPresent + blankel].src = baseURL + temppositions[blankel];
        }
      }
      else {
        // move down:
        while (blanky != ypos) {
          temppositions[blankel] = temppositions[(blankel - numcols)];
          temppositions[blankel - numcols] = imgArray[blankpos];
          document.images[imagesPresent + blankel].src = baseURL + temppositions[blankel];
          blanky--;
          blankel -= numcols;
          document.images[imagesPresent + blankel].src = baseURL + temppositions[blankel];
        }
      }
    }
  }
}

// reset the array that will hold the mixed up locations of
// the uncompleted puzzle:

function resetpuzzle() {
  for (t = 0; t < imgArray.length; t++) {
    temppositions[t] = imgArray[t];
  }
}

// Instantly solve all of the cards and reset the coordinates of
// the blank piece:

function resetcards() {
  for (var k = 0; k < (numimages); k++) {
    document.images[imagesPresent + k].src = baseURL + imgArray[k];
  }
  resetpuzzle();
  blankx = startx;
  blanky = starty;
}

// necessary to set on initial loading:

resetpuzzle();

// Shuffle / mix the pieces:
// Slide the blank piece horizontally - choosing the piece it moves to
// by random. Slide the blank piece vertically - choosing the piece it
// moves to by random. Repeat 50 times .... should be pretty mixed up and
// also definitely solvable. We were wary of simply inserting the pieces
// at random since not sure if that would create a mix that were impossible
// to solve.

function shufflemix() {
  var temp;
  for (rs = 0; rs < 50 ; rs++) {
    // move it horizontally:
    temp = blankx;
    while (temp == blankx) {
      temp = (random (numcols)) + 1;
    }
    movecard(temp, blanky);
    // move it vertically:
    temp = blanky;
    while (temp == blanky) {
      temp = (random (numrows)) + 1;
    }
    movecard (blankx, temp);
  }
}

// Random number generator from Paul Houle / Department of Physics,
// Cornell University:
// Big respect b/c this is the best pseudo random number generator that
// I have seen.

today = new Date();
jran = today.getTime();

function rnd() {
  ia = 9301;
  ic = 49297;
  im = 233280;
  jran = (jran * ia + ic) % im;
  return jran / (im * 1.0);
}

function random(number) {
  return Math.floor(rnd() * number);
}

// END OF SCRIPT FOR PUZZLE version 1.0