Before this plugin can be run, it is initialized with parameters passed to the $.gShuffle.initialize function. Any number of parameters can be passed, or none. In latter case the plugin will use default values. The parameters are: the background image, number of columns, number of rows, dimensions of the animated squares and animation delay.
The Shuffling Algorithm
The plugin animation is triggered every time the Shuffle button is clicked. Each time, the code will choose two squares to switch positions with one another. One of the squares is chosen at random. However, the second square is one of the previously shuffled squares. Note that in every case, the script will choose a new square, that will become the square with the highest z-index, which means it will be on top of every other square.
Position-based jQuery animation is used. Currently there is no choice of allowing the user to choose the style of animation, but it could be implemented.
Please note this is the first jQuery plugin I have written, and I understand that the way the plugin itself is encapsulated within the js file may not be ideal. However, I have learned quite a few things about writing jQuery plugins over the past few hours I spent working on this. I'd also like to add, I had to invent my own parameter overriding (alas, by just using an array) method. This introduced the excessive usage of references to the options array $.options.params.data[ i ]
into the script and could be avoided.
The script doesn't know whether the squares are currently shuffling when they are. So, quickly pressing the "Shuffle" button will eventually destroy the integrity of the position of some of the squares on the grid... This is one of the things that could have been avoided by adding a shuffle on/off state.