// Here, we are going to define the jQuery puzzle
// plugin that will create the interface for each
// DIV that contains an image.
jQuery.fn.puzzle = function( intUserSize ){
			
	// Make sure that each of the parent elements
	// has a nested IMG tag. We don't want elements
	// that lack the image. Once we get those, then
	// loop over them to initialize functionality.
	return this.filter( ":has( img )" ).each(
		
		function( intI ){
			
			// This is the functionality that will initialize 
			// the container and img for puzzle. This will only
			// be called ONCE the image has been loaded, and once
			// per each instance of the target puzzle.
			function InitPuzzle(){
				var jPiece = null;
				var intRowIndex, intColIndex, intI = 0;
				
				// Get the number of columns and rows.
				intColumns = Math.floor( jImg.width() / intSize );
				intRows = Math.floor( jImg.height() / intSize );
				
				// Get the puzzle width and height based on 
				// the number of pieces (this may require some 
				// cropping of the image).
				intPuzzleWidth = (intColumns * intSize);
				intPuzzleHeight = (intRows * intSize);
				
				// Empty the container element. We don't actually
				// want the image inside of it (or any of the 
				// other elements that might be there).
				jContainer.empty();
			
				// Set the container CSS and dimensions.
				jContainer 
					.css(
						{
							overflow: "hidden",
							display: "block"
						}
						)
					.width( intPuzzleWidth )
					.height( intPuzzleHeight )
				;
				
				// Check to see how the container is positioned.
				// If is relative or absolute, we can keep it, 
				// but if it is not those, then we need to set 
				// is to relative explicitly.
				if (
					(jContainer.css( "position" ) != "relative") &&
					(jContainer.css( "position" ) != "absolute")
					){
					
					// The container element is not explicitly 
					// positioned, so position it to be relative.
					jContainer.css( "position", "relative" );
					
				}
				
				
				// Loop over the columns and row to create each 
				// of the pieces. At this point, we are not going to worry
				// about the dimensions of the board - that will happen next.
				for (var intRowIndex = 0 ; intRowIndex < intRows ; intRowIndex++){
				
					// For this row, add a new array.
					arr2DBoard[ intRowIndex ] = [];
				
					for (var intColIndex = 0 ; intColIndex < intColumns ; intColIndex++){
					
						// Create a new Div tag. We are using a DIV tag as
						// opposed to an anchor tag to get around the IE
						// bug that has flickering background images on links
						// when the browser is not caching images.
						jPiece = $( "<div><br /></div>" );
						
						// Set the css properties. Since all of the 
						// pieces have the same background image, they
						// all have to have different offset positions.
						jPiece
							.css( 
								{
									display: "block",
									float: "left",
									backgroundImage: "url( '" + jImg.attr( "src" ) + "' )",
									backgroundRepeat: "no-repeat",
									backgroundPosition: (
										(intColIndex * -intSize) + "px " + 
										(intRowIndex * -intSize) + "px"
										),
									position: "absolute",
									top: ((intSize * intRowIndex) + "px"),
									left: ((intSize * intColIndex) + "px")
								}
								)
							.width( intSize )
							.height( intSize )
						;
						
						// Add the piece to the 2-D representation of the board.
						arr2DBoard[ intRowIndex ][ intColIndex ] = jPiece;
						
						// Add to DOM.
						jPiece.hide().appendTo( jContainer );
																					
					}
				}
					jPiece.ajaxComplete((function hidenext(jq){
    jq.eq(0).fadeIn(167, function(){
        (jq=jq.slice(1)).length && hidenext(jq);
    });
})($('div.puzzle div')));
			}
			
			
			// ASSERT: At this point, we have defined all the class
			// methods for this plugin instance. Now, we can act on
			// the instance properties and call methods.				
		
			// Get a jQUery reference to the container.
			var jContainer = $( this );
			
			// Get a jQuery reference to the first image 
			// - this is the one that we will use to make 
			// the image puzzle.
			var jImg = jContainer.find( "img:first" );
		
			// This is the array that will hold the 2-dimentional 
			// representation of the board.
			var arr2DBoard = [];
		
			// The height and width of the puzzle.
			var intPuzzleWidth = 0;
			var intPuzzleHeight = 0;
		
			// The width / height of each piece. This can be overriden
			// by the user when the initialize the puzzle plug-in.
			var intSize = intUserSize || 100;
			
			// The number of columns that are in the board.
			var intColumns = 0;
			
			// The number of rows that in the board.
			var intRows = 0;
			
			// Flag for wether or not to show animation.
			var blnShowAnimation = false;
			
			// Flag for wether or not an animation is in the midst. We
			// are going to need this to prevent further clicking during
			// and anmiation sequence.
			var blnInAnimation = false;
				
			
			// Check check to make sure that the size value is valid.
			// Since this can be overridden by the user, we want to 
			// make sure that it is not crazy.
			intSize = Math.floor( intSize );
			
			if ((intSize < 40) || (intSize > 200)){
				intSize = 100;
			}
						
			// Check to see if the image has complietely 
			// loaded (for some reason, this does NOT 
			// work with the attr() function). If the 
			// image is complete, call Init right away. 
			// If it has not loaded, then set an onload 
			// handler for initialization.
			if ( jImg[ 0 ].complete ){
				
				// The image has loaded so call Init.
				InitPuzzle();
			
			} else {
			
				// The image has not loaded so set an
				// onload event handler to call Init.
				jImg.load(
					function(){
						InitPuzzle();
					}
					);
			
			}
		}							
		
	);
}