var picname="p09.jpg";
var piccolor="";
var picwidth=500;
var picheight=500;
//*************DO NOT EDIT BEYOND THIS POINT*************\\
if(picwidth%5!=0 || picheight%5!=0 ){
picheight=Math.round(picheight/5)*5;
picwidth=Math.round(picwidth/5)*5;
}
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var choices=[null, [6,2] , [1,3,7] , [2,8,4] , [3,5,9] , [4,10] , [1,7,11] , [2,6,8,12] , [3,7,9,13] , [4,8,10,14] , [5,9,15] , [6,12,16] , [7,11,13,17] , [8,12,14,18] , [9,13,15,19] , [10,14,20] , [11,17,21] , [12,16,18,22] , [13,17,19,23] , [14,18,20,24] , [15,19,25] , [16,22] , [21,17,23] , [22,18,24] , [23,19,25] , [24,20]];
var grid=[null,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];
var blockw=Math.floor(picwidth/5);
var blockh=Math.floor(picheight/5);
var txt='', ctr=0, rc, IDs=new Array(), empty=new Object();
var imgclipsX=new Array();
var imgclipsY=new Array();
for(i=0;i<5;i++){
imgclipsX[i]=new Array(); imgclipsY[i]=new Array();
imgclipsX[i][0]=blockw*i; imgclipsX[i][1]=blockw*(i+1);
imgclipsY[i][0]=blockh*i; imgclipsY[i][1]=blockh*(i+1);
}
txt+=(ns4)? '<table cellpadding=0 cellspacing=0 border=0 bgcolor="'+piccolor+'" width="'+picwidth+'" height="'+picheight+'"><tr><td nowrap><ilayer name="cont" width="'+picwidth+'" height="'+picheight+'" bgcolor="'+piccolor+'">' : '<div style="position:relative; width:'+picwidth+'px; height:'+picheight+'px; background-color:'+piccolor+';">';
for(r=5;r>=1;r--){
for(c=5;c>=1;c--){
if( !(r==5&&c==5)){
rc=(5*r)+c-5;
txt+=(ns4)? '<layer name="l'+rc+'" width="'+blockw+'" height="'+blockh+'" top="0" left="0" clip="'+imgclipsX[c-1][0]+' , '+imgclipsY[r-1][0]+', '+imgclipsX[c-1][1]+' , '+imgclipsY[r-1][1]+'" z-index="0">' : '<div id="l'+rc+'" style="position:absolute; top:0px; left:0px; width:'+blockw+'px; height:'+blockh+'px; clip:rect('+imgclipsY[r-1][0]+' '+imgclipsX[c-1][1]+' '+imgclipsY[r-1][1]+' '+imgclipsX[c-1][0]+'); z-index:'+(rc)+';">';
txt+='<img src="'+picname+'" border="0" height="'+picheight+'" width="'+picwidth+'">';
txt+=(ns4)? '</layer>' : '</div>';
txt+=(ns4)? '<layer name="d'+rc+'" width="'+blockw+'" height="'+blockh+'" top="'+imgclipsY[r-1][0]+'" left="'+imgclipsX[c-1][0]+'"  z-index="'+(rc+600)+'" onmouseover="status=\'Tile: '+rc+'\'; return true" onmouseout="status=defaultStatus"></layer>' : '<div id="d'+rc+'" style="position:absolute; top:'+imgclipsY[r-1][0]+'px; left:'+imgclipsX[c-1][0]+'px; width:'+blockw+'px; height:'+blockh+'px; z-index:'+(rc+600)+'" onmouseover="status=\'Tile: '+rc+'\'; return true" onclick="movetile('+rc+')"><table width="'+blockw+'" height="'+blockh+'" cellpadding="0" cellspacing="0" border="0"><tr><td> </td></tr></table></div>';
}}}
txt+=(ns4)? '</ilayer></td></tr></table>' : '</div>';
txt+='<br><form><input type="button" value="Start" onclick="ctr=0; autoshuffle()" class="klik"></form>';
document.write(txt);
function getid(id){
if(ns4) return document.cont.document.layers[id];
else if(ie4) return document.all[id];
else return document.getElementById(id);
}
function moveby(i,dx,dy){
grid[0]=IDs[i].cellnum;
IDs[i].cellnum=empty.cellnum;
empty.cellnum=grid[0];
grid[0]=grid[empty.cellnum];
grid[empty.cellnum]=grid[IDs[i].cellnum];
grid[IDs[i].cellnum]=grid[0];
IDs[i].xeff+=dx;
IDs[i].yeff+=dy;
if(ns4){
IDs[i].tile.moveBy(dx, dy);
IDs[i].dummy.moveBy(dx, dy);
}else{
IDs[i].tile.style.left=(getleft(IDs[i].tile)+dx)+'px';
IDs[i].tile.style.top=(gettop(IDs[i].tile)+dy)+'px';
IDs[i].dummy.style.left=IDs[i].xeff+'px';
IDs[i].dummy.style.top=IDs[i].yeff+'px';
}}
function getleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}
function gettop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}
function tile(r,c){
var i=(5*r)+c-5;
this.tile=getid('l'+i);
this.dummy=getid('d'+i);
this.xeff=imgclipsX[c-1][0];
this.yeff=imgclipsY[r-1][0];
this.xstart=this.xeff;
this.ystart=this.xeff;
this.choices=choices[i];
this.cellnum=i;
if(ns4){
this.dummy.captureEvents(Event.CLICK);
this.dummy.onclick=function(){ movetile(i); }
}}
function movetile(i){
if(IDs[i].xeff+blockw==empty.xeff && IDs[i].yeff==empty.yeff){ empty.xeff=IDs[i].xeff ; moveby(i, blockw, 0) }
else if(IDs[i].xeff-blockw==empty.xeff && IDs[i].yeff==empty.yeff){ empty.xeff=IDs[i].xeff ; moveby(i, -blockw, 0) }
else if(IDs[i].yeff+blockh==empty.yeff && IDs[i].xeff==empty.xeff){ empty.yeff=IDs[i].yeff ; moveby(i, 0, blockh) }
else if(IDs[i].yeff-blockh==empty.yeff && IDs[i].xeff==empty.xeff){ empty.yeff=IDs[i].yeff ; moveby(i, 0, -blockh) }
}
function findwhich(num){
for(var j=1;j<25;j++)if(IDs[j].cellnum==num) break;
return j;
}
function autoshuffle(){
ctr++;
movetile(grid[choices[empty.cellnum][Math.floor(Math.random()*choices[empty.cellnum].length)]]);
if(ctr<30)setTimeout('autoshuffle()' ,110);
}
window.onload=function(){
for(r=5;r>=1;r--){
for(c=5;c>=1;c--)if( !(r==5&&c==5))IDs[(5*r)+c-5]=new tile( r,c );
}
empty.xeff=imgclipsX[4][0];
empty.yeff=imgclipsY[4][0];
empty.choices=choices[25];
empty.cellnum=25;
}
window.onresize=function(){
if(ns4)setTimeout('history.go(0)',400);
}