$(function(){$("#log").click(function(){$(this).hide()})});$(window).load(function(){window.slideO=new SlideO("canvas")});SlideO=function(c){this.canvasId=c;this.ctx=$("#"+c).get(0).getContext("2d");this.tilePadding=3;this.grid=new Array(this.gridSize);this.goalGrid=new Array(this.gridSize);this.goalGridXOffset=320;this.goalGridYOffset=40;this.debug=false;this.gridXOffset=20;this.gridYOffset=40;this.dragDirection="none";this.dragAmount=0;this.mouseDown=false;this.currentLevel=1;this.maxLevels=10;this.loadLevels();this.loadLevel(this.currentLevel);var a=$("#"+c).get(0);var b=this.gridSize*(this.tileSize+this.tilePadding);this.gridLeft=a.offsetLeft+this.gridXOffset;this.gridRight=(a.offsetLeft+this.gridXOffset+b);this.gridTop=a.offsetTop+this.gridYOffset;this.gridBottom=(a.offsetTop+this.gridYOffset+b);$(document.body).bind("mousedown",this,this.mousedown);if(this.debug){log("bound mousedown to body")}$(document.body).bind("mouseup",this,this.mouseup);if(this.debug){log("bound mouseup to body")}$("#restartLevel").bind("click",this,this.restartLevel);$("#nextLevel").bind("click",this,this.nextLevel);$("#previousLevel").bind("click",this,this.previousLevel)};SlideO.prototype.restartLevel=function(a){a.stopPropagation();a.data.loadLevel(a.data.currentLevel)};SlideO.prototype.nextLevel=function(a){a.stopPropagation();a.data.currentLevel++;if(a.data.currentLevel>a.data.maxLevels){a.data.currentLevel=1}a.data.loadLevel(a.data.currentLevel)};SlideO.prototype.previousLevel=function(a){a.stopPropagation();a.data.currentLevel--;if(a.data.currentLevel<1){a.data.currentLevel=a.data.maxLevels}a.data.loadLevel(a.data.currentLevel)};SlideO.prototype.loadLevel=function(d){this.moves=0;if(this.debug){log("loadLevel("+d+")")}var c=this.levels[this.currentLevel];this.tileSize=c.tileSize;this.gridSize=c.size;this.goalGrid=new Array(this.gridSize);this.grid=new Array(this.gridSize);for(var b=0;b<this.gridSize;b++){this.goalGrid[b]=new Array(this.gridSize);this.grid[b]=new Array(this.gridSize);for(var a=0;a<this.gridSize;a++){this.grid[b][a]=new SlideO.Node(c.tiles[b][a]);this.goalGrid[b][a]=new SlideO.Node(c.tiles[b][a])}}this.scrambleLevel();this.drawBoard();this.drawGoalBoard();$("#level").html("Level: "+this.currentLevel+" / "+this.maxLevels);$("#moves").html(this.moves)};SlideO.prototype.rand=function(b){return Math.floor(Math.random()*b)};SlideO.prototype.scrambleLevel=function(c){if(this.levels[this.currentLevel].scramble){var a=this.levels[this.currentLevel].scramble;for(var b=0;b<a.length;b++){if(a[b][0]=="R"){this.shiftHorizontal(a[b][1],a[b][1],false)}else{this.shiftVertical(a[b][1],a[b][1],false)}}}else{for(var b=0;b<10;b++){if(Math.random()>0.5){this.shiftHorizontal(this.rand(this.gridSize),this.rand(this.gridSize),false)}else{this.shiftVertical(this.rand(this.gridSize),this.rand(this.gridSize),false)}}}};SlideO.prototype.mousedown=function(a){if(this.debug){log("mousedown")}if(a.pageX>=a.data.gridLeft&&a.pageX<=a.data.gridRight&&a.pageY>=a.data.gridTop&&a.pageY<=a.data.gridBottom){a.preventDefault();a.data.initialX=a.pageX;a.data.initialY=a.pageY;a.data.mouseDown=true;a.data.tileX=Math.floor((a.pageX-a.data.gridLeft)/(a.data.tileSize+a.data.tilePadding));a.data.tileY=Math.floor((a.pageY-a.data.gridTop)/(a.data.tileSize+a.data.tilePadding));if(a.data.debug){log("mousedown in grid on tile ("+a.data.tileX+", "+a.data.tileY+")")}$(document.body).bind("mousemove",a.data,a.data.mousemove);if(a.data.debug){log("bound mousemove to body ")}}};SlideO.prototype.mouseup=function(b){$(document.body).unbind("mousemove",b.data.mousemove);if(b.data.debug){log("unbound mousemove from body")}if(b.data.debug){log("mouseup")}b.data.endX=b.pageX;b.data.endY=b.pageY;if(b.data.debug){log("e.data.dragDirection "+b.data.dragDirection)}if(b.data.dragDirection=="vertical"){var c=b.data.endY-b.data.initialY;var a=Math.round(c/b.data.tileSize);b.data.shiftVertical(b.data.tileX,a,true);if(b.data.debug){log("shiftVertical("+b.data.tileX+", "+a+")")}}else{if(b.data.dragDirection=="horizontal"){var c=b.data.endX-b.data.initialX;var a=Math.round(c/b.data.tileSize);b.data.shiftHorizontal(b.data.tileY,a,true);if(b.data.debug){log("shiftHorizontal("+b.data.tileY+", "+a+")")}}}b.data.mouseDown=false;b.data.dragDirection="none";b.data.drawBoard()};SlideO.prototype.checkForWin=function(){var c=true;for(var b=0;b<this.gridSize;b++){for(var a=0;a<this.gridSize;a++){if(this.grid[b][a].number!=this.goalGrid[b][a].number){c=false}}}if(c){if($.sound&&$.sound.play){$.sound.play("sounds/LevelUp.AIFF")}alert("Congratulations!\n\nYou completed this level!")}};SlideO.prototype.mousemove=function(c){if(c.data.dragDirection=="none"){if(Math.abs(c.data.initialY-c.pageY)>7){c.data.dragDirection="vertical"}else{if(Math.abs(c.data.initialX-c.pageX)>7){c.data.dragDirection="horizontal"}}}else{var b=c.pageX-c.data.initialX;var a=c.pageY-c.data.initialY;if(c.data.dragDirection!="none"){c.data.handleDrag(c)}}};SlideO.prototype.handleDrag=function(j){var n=this.ctx;if(this.dragDirection=="vertical"){n.save();n.beginPath();var b=this.gridXOffset+(this.tileSize+this.tilePadding)*(this.tileX);var k=this.gridYOffset;var a=(this.tileSize+this.tilePadding);var l=(this.tileSize+this.tilePadding)*this.gridSize;n.beginPath();n.moveTo(b,k);n.lineTo(b+a,k);n.lineTo(b+a,k+l);n.lineTo(b,k+l);n.lineTo(b,k);n.closePath();n.clip();n.clearRect(b,k,a,l);var f=j.pageY-this.initialY;var c=Math.abs(f)>=l?Math.abs(f)%l:Math.abs(f);if(f<0){c=-c}for(var m=0;m<3;m++){for(var h=0;h<this.gridSize;h++){var g=this.grid[this.tileX][h].img;var k=this.gridYOffset+h*(this.tileSize+this.tilePadding)+c-l+l*m;try{n.drawImage(g,b,k,this.tileSize,this.tileSize)}catch(d){}}}n.restore()}else{if(this.dragDirection=="horizontal"){n.save();n.beginPath();var b=this.gridXOffset;var k=this.gridYOffset+this.tileY*(this.tileSize+this.tilePadding);var a=(this.tileSize+this.tilePadding)*this.gridSize;var l=(this.tileSize+this.tilePadding);n.beginPath();n.moveTo(b,k);n.lineTo(b+a,k);n.lineTo(b+a,k+l);n.lineTo(b,k+l);n.lineTo(b,k);n.closePath();n.clip();n.clearRect(b,k,a,l);var f=j.pageX-this.initialX;var c=Math.abs(f)>=a?Math.abs(f)%a:Math.abs(f);if(f<0){c=-c}for(var m=0;m<3;m++){for(var h=0;h<this.gridSize;h++){var g=this.grid[h][this.tileY].img;var b=this.gridXOffset+h*(this.tileSize+this.tilePadding)+c-a+a*m;try{n.drawImage(g,b,k,this.tileSize,this.tileSize)}catch(d){}}}n.restore()}}};SlideO.prototype.shiftHorizontal=function(f,a,b){if(a<0){a=Math.abs(a);for(var e=0;e<a;e++){var d=this.grid[0][f];for(var g=0;g<this.gridSize-1;g++){this.grid[g][f]=this.grid[g+1][f]}this.grid[this.gridSize-1][f]=d}}else{if(a>0){for(var e=0;e<a;e++){var d=this.grid[this.gridSize-1][f];for(var g=this.gridSize-1;g>0;g--){this.grid[g][f]=this.grid[g-1][f]}this.grid[0][f]=d}}}if(Math.abs(a)>0&&b){if($.sound&&$.sound.play){$.sound.play("sounds/LittleBones.AIFF")}this.checkForWin();this.moves++;$("#moves").html(this.moves)}};SlideO.prototype.shiftVertical=function(f,a,b){if(a<0){a=Math.abs(a);for(var e=0;e<a;e++){var d=this.grid[f][0];for(var g=0;g<this.gridSize-1;g++){this.grid[f][g]=this.grid[f][g+1]}this.grid[f][this.gridSize-1]=d}}else{if(a>0){for(var e=0;e<a;e++){var d=this.grid[f][this.gridSize-1];for(var g=this.gridSize-1;g>0;g--){this.grid[f][g]=this.grid[f][g-1]}this.grid[f][0]=d}}}if(Math.abs(a)>0&&b){if($.sound&&$.sound.play){$.sound.play("sounds/LittleBones.AIFF")}this.checkForWin();this.moves++;$("#moves").html(this.moves)}};SlideO.prototype.drawBoard=function(){this.ctx.clearRect(this.gridXOffset,this.gridYOffset,this.gridXOffset+this.gridSize*(this.tileSize+this.tilePadding),this.gridYOffset+this.gridSize*(this.tileSize+this.tilePadding));for(var c=0;c<this.gridSize;c++){for(var b=0;b<this.gridSize;b++){var a=this.grid[c][b].img;var f=this.gridXOffset+c*(this.tileSize+this.tilePadding);var e=this.gridYOffset+b*(this.tileSize+this.tilePadding);try{this.ctx.drawImage(a,f,e,this.tileSize,this.tileSize)}catch(d){if(this.debug){log(d)}}}}};SlideO.prototype.drawGoalBoard=function(){this.ctx.clearRect(this.goalGridXOffset,this.goalGridYOffset,this.goalGridXOffset+this.gridSize*(this.tileSize+this.tilePadding),this.goalGridYOffset+this.gridSize*(this.tileSize+this.tilePadding));for(var c=0;c<this.gridSize;c++){for(var b=0;b<this.gridSize;b++){var a=this.goalGrid[c][b].img;var f=this.goalGridXOffset+c*(this.tileSize+this.tilePadding);var e=this.goalGridYOffset+b*(this.tileSize+this.tilePadding);try{this.ctx.drawImage(a,f,e,this.tileSize,this.tileSize)}catch(d){if(this.debug){log(d)}}}}};SlideO.Node=function(b){this.number=b;var a;switch(b){case 1:a=$("#bluebox").get(0);break;case 2:a=$("#greenbox").get(0);break;case 3:a=$("#redbox").get(0);break;case 4:a=$("#yellowbox").get(0);break;default:a=$("#bluebox").get(0);this.number=1}this.img=a};SlideO.prototype.loadLevels=function(){this.levels={1:{size:4,tileSize:50,tiles:[[2,3,2,3],[3,2,3,2],[2,3,2,3],[3,2,3,2]],scramble:[["R",2,3],["D",1,2],["R",1,3],["D",3,2],["R",2,3],["D",3,2],["R",0,3],["D",1,2],["R",0,3],["D",1,2],["R",0,3],["D",3,2]]},2:{size:5,tileSize:40,tiles:[[1,1,1,2,1],[2,1,1,1,2],[1,1,2,1,2],[2,1,1,1,2],[1,1,1,2,1]],scramble:[["R",2,3],["D",1,2],["R",1,3],["D",3,2],["R",2,3],["D",4,2],["R",0,3],["D",1,2],["R",0,3],["D",1,2],["R",0,3],["D",4,2],["R",2,3],["D",1,2],["R",1,3],["D",4,2],["R",2,3],["D",3,2],["R",0,3],["D",4,2],["R",0,3],["D",1,2],["R",0,3],["D",3,2]]},3:{size:4,tileSize:50,tiles:[[1,1,3,3],[1,1,3,3],[2,2,4,4],[2,2,4,4]],scramble:[["R",2,3],["R",0,3],["R",0,3],["R",1,3],["D",1,2],["D",3,2],["D",1,2],["D",1,2],["R",0,3],["D",3,2],["R",2,3],["D",3,2]]},4:{size:4,tileSize:50,tiles:[[1,2,3,4],[2,3,4,1],[3,4,1,2],[4,1,2,3]],scramble:[["R",2,3],["D",1,2],["R",1,3],["D",1,2],["R",2,3],["D",3,2],["R",0,3],["D",3,2],["D",1,2],["R",0,3],["R",0,3],["D",3,2]]},5:{size:5,tileSize:40,tiles:[[1,1,1,1,1],[2,2,2,2,2],[3,3,3,3,3],[4,4,4,4,4],[1,2,3,4,1]],scramble:[["D",1,2],["R",0,3],["D",4,2],["R",1,3],["R",0,3],["D",3,2],["R",0,3],["R",0,3],["R",1,3],["D",4,2],["R",0,3],["D",1,2],["R",2,3],["R",2,3],["D",1,2],["D",4,2],["D",1,2],["D",4,2],["R",2,3],["D",1,2],["R",0,3],["R",2,3],["D",3,2],["D",3,2]]},6:{size:5,tileSize:40,tiles:[[1,2,2,2,4],[3,1,2,4,2],[3,3,1,2,2],[3,4,3,1,2],[4,3,3,3,1]],scramble:[["R",0,3],["R",5,3],["R",2,3],["R",0,3],["R",4,3],["R",2,3],["R",2,3],["R",5,3],["D",3,2],["R",1,3],["R",4,3],["D",3,2],["D",3,2],["R",0,3],["D",3,2],["R",0,3],["D",1,2],["R",5,3],["D",1,2],["D",1,2],["D",1,2],["R",0,3],["D",1,2],["D",3,2]]},7:{size:6,tileSize:35,tiles:[[1,1,1,3,3,3],[1,3,1,3,1,3],[1,1,1,3,3,3],[2,2,2,4,4,4],[2,4,2,4,2,4],[2,2,2,4,4,4]],scramble:[["R",0,3],["R",5,3],["R",2,3],["R",0,3],["R",4,3],["R",2,3],["R",2,3],["R",5,3],["D",3,2],["R",1,3],["R",4,3],["D",3,2],["D",3,2],["R",0,3],["D",3,2],["R",0,3],["D",1,2],["R",5,3],["D",1,2],["D",1,2],["D",1,2],["R",0,3],["D",1,2],["D",3,2]]},8:{size:6,tileSize:35,tiles:[[1,1,1,2,2,2],[2,2,2,3,3,3],[3,3,3,4,4,4],[4,4,4,1,1,1],[1,1,1,2,2,2],[2,2,2,3,3,3]],scramble:[["R",2,3],["D",3,2],["R",5,3],["D",1,2],["R",2,3],["R",0,3],["R",0,3],["R",4,3],["D",1,2],["R",1,3],["R",2,3],["R",0,3],["R",4,3],["D",3,2],["R",5,3],["D",1,2],["R",0,3],["D",1,2],["R",5,3],["D",3,2],["R",0,3],["D",3,2],["D",1,2],["D",3,2]]},9:{size:6,tileSize:35,tiles:[[1,2,3,4,1,2],[3,4,1,2,3,4],[1,2,3,4,1,2],[3,4,1,2,3,4],[1,2,3,4,1,2],[3,4,1,2,3,4]],scramble:[["D",1,2],["D",1,2],["D",1,2],["D",1,2],["D",1,2],["D",3,2],["D",3,2],["D",3,2],["D",3,2],["R",0,3],["R",0,3],["R",0,3],["R",0,3],["R",0,3],["R",1,3],["R",2,3],["R",2,3],["R",2,3],["R",4,3],["R",4,3],["R",5,3],["R",5,3],["R",5,3],["D",3,2]]},10:{size:6,tileSize:35,tiles:[[1,1,2,2,3,3],[4,4,1,1,2,2],[3,3,4,4,1,1],[2,2,3,3,4,4],[1,1,2,2,3,3],[4,4,1,1,2,2]],scramble:[["D",1,2],["D",1,2],["D",1,2],["D",1,2],["D",1,2],["D",3,2],["D",3,2],["D",3,2],["D",3,2],["R",0,3],["R",0,3],["R",0,3],["R",0,3],["R",0,3],["R",1,3],["R",2,3],["R",2,3],["R",2,3],["R",4,3],["R",4,3],["R",5,3],["R",5,3],["R",5,3],["D",3,2]]}}};window.log=function(a){$("#log").show();$("#log").prepend("<div><em>"+new Date()+"</em> "+a+"</div>");$("#log div").removeClass("odd");$("#log div:odd").addClass("odd")};