//////////////////////////////////////////////////////////////////////////////////////////
// 3x3 Slider Puzzle                                                                    //
// Author: Lincoln Cooper - Jan 2008                                                    //
//                                                                                      //
// Copy and use this code where you like, but please include this header.               //
//////////////////////////////////////////////////////////////////////////////////////////

var puzImg = '/a112/images/puzzle/puz1.jpg',
    puzImgBlank = '/a112/images/puzzle/puzImgBlank.jpg',
    puzBlank = {i:2,j:2},
    winningPos,
    allowedToCheck = false;


$(document).ready(function() {
	// Preload the images & display the completed puzzle
	var i, j;
	for (i=0; i<=2; i++) {
	  for (j=0; j<=2; j++) {
		  $('#img' + i + '_' + j).css({background:'url(' + puzImg + ') no-repeat',
		                               overflow:'hidden',
		                               'background-position':(i * -100) + 'px ' + (j * -100) + 'px'})
		                         .click(function() {
  		                                var clicked = getCoords(this.id);
  		                                squareClicked(clicked);
  		                              });
	  }
    $('#img2_2').css({background:'url(' + puzImgBlank + ') no-repeat 0px 0px'});
	}
  winningPos = getBackgroundPositions();
  
  $('#scramble').click( function() {
                          scramble();
                        });
	
});

function squareClicked(clicked) {
  if (validClick(clicked)) {
    swapImages(clicked);
    checkIfWon();
  }
}

// id = 'img2_1'
function getCoords(id) {
  var a = id.indexOf('_');
  return {i:id.substring(3, a), j:id.substr(a+1)};
}

// Check that the clicked square is adjacent to the blank one.
function validClick(clicked) {
  var x = Math.abs(parseInt(clicked.i, 10) - parseInt(puzBlank.i, 10)),
      y = Math.abs(parseInt(clicked.j, 10) - parseInt(puzBlank.j, 10));
  return ((x === 1 && y === 0) || (x === 0 && y === 1));
}

function swapImages(clicked) {
  // Get the current background position of the clicked square
  var sc = $('#img' + clicked.i + '_' + clicked.j);
  var bp = sc.css('backgroundPosition');
  $('#img' + puzBlank.i + '_' + puzBlank.j).css({ background:'url(' + puzImg + ') no-repeat',
                                                  'background-position':bp});
  sc.css({background:'url(' + puzImgBlank + ') no-repeat 0px 0px'});
  puzBlank = clicked;
  
}

function checkIfWon() {
  if (allowedToCheck) {
    if (getBackgroundPositions() === winningPos) {
      //alert('won!');
      $('#won').show().animate({width:350, height:80, fontSize:56});
    }
  }
}

function getBackgroundPositions() {
  var i, j, s = '';
	for (i=0; i<=2; i++) {
	  for (j=0; j<=2; j++) {
      s += $('#img' + i + '_' + j).css('backgroundPosition');
    }
  }
  return s;
}

function scramble() {
  var i;
	for (i=0; i<200; i++) {
  	squareClicked({i:getRnd(0,2), j:getRnd(0,2)});
	}
	$('#won').hide();
  allowedToCheck = true;
}

// Get a random number between min and max (inclusive)
function getRnd(min, max) {
	return Math.round((Math.random() * (max - min)));
}