///copyright by Pavlenkov E.O.
var cy=145;
var cx=0;
var obj1;
var dir;

function draw()
{
  if(window.innerWidth){ width = window.innerWidth; }
  if(document.documentElement && document.documentElement.clientWidth){ width = document.documentElement.clientWidth; }
  if(document.body && document.body.clientWidth){ width = document.body.clientWidth; }

  width>800 ? cx=parseInt((width-800)/2) : cx=0;

out="";
for(y=0; y<bny; y++) for(x=0; x<bnx; x++)
{
		id=aa[(x+y*bnx)];
		bgleft=(parseInt(id%bnx)*bw);
		bgtop=(parseInt(id/bnx)*bh);
		if(id!=-1) out=out+"<div id="+id+" class=i1 onmouseup=\"move(this);\" style=\"background-position: -"+bgleft+"px -"+bgtop+"px; top:"+(cy+y*bh)+"px; left:"+(cx+x*bw)+"px; width:"+(bw-1)+"px; height:"+(bh-1)+"px;\"></div> ";

}

document.getElementById('img1').innerHTML=out;

}

function game(x, y, h)
{
window.onresize=draw;

iw=550; ih=h; bnx=x; bny=y;
bw=parseInt(iw/bnx);
bh=parseInt(ih/bny);

aa=new Array(bnx*bny);

for(x=0; x<bnx; x++)
	for(y=0; y<bny; y++)
		aa[(x+y*bnx)]=(x+y*bnx);
aa[(bny*bnx-1)]=-1;
winstr=aa.toString();

//shuffle
for(i=0; i<(bnx*bny); i++)
{
  t1=Math.floor(Math.random( ) * (bnx*bny-2));
  t2=t1+1;
  t3=aa[t1]; aa[t1]=aa[t2]; aa[t2]=t3;
}


draw();
return false;
}

function move( obj )
{

   obj1=obj;
   hole=aa.pos(-1);
   pos=aa.pos(parseInt(obj.id));

   dir=0;
   if( (hole-pos)==1 && hole%bnx!=0) dir=1;
   if( (hole-pos)==-1 && (hole+1)%bnx!=0) dir=2;
   if( (hole-pos)==bnx) dir=3;
   if( (hole-pos)==-bnx) dir=4;
   if(dir!=0){ aa[hole]=parseInt(obj.id); aa[pos]=-1; }

	switch(dir)
	{
		case 1: //2rigth
		   m=parseInt(obj.style.left)+bw;
		   setTimeout("slide("+m+")",5);
		break;
		case 2: //2left
		   m=parseInt(obj.style.left)-bw;
		   setTimeout("slide("+m+")",5);
		break;
		case 3: //2bottom
		   m=parseInt(obj.style.top)+bh;
		   setTimeout("slide("+m+")",5);
		break;
		case 4: //2top
		   m=parseInt(obj.style.top)-bh;
		   setTimeout("slide("+m+")",5);
		break;
	}
    if(aa.toString()==winstr)
    { document.getElementById('img1').innerHTML=retimg;
	  window.onresize="";
       alert("Поздравляю! Вы собрали!");

    }
    return true;
}

function slide(m)
{
    s=0;
	switch(dir)
	{
		case 1: //2rigth
    		pos=(parseInt(obj1.style.left)+parseInt(bw/12));
    		if(pos>m) pos=m;
    		else s=1;
    		obj1.style.left=pos+"px";
		break;
		case 2: //2left
    		pos=(parseInt(obj1.style.left)-parseInt(bw/12));
    		if(pos<m) pos=m;
    		else s=1;
    		obj1.style.left=pos+"px";
		break;
		case 3: //2bottom
    		pos=(parseInt(obj1.style.top)+parseInt(bh/12));
    		if(pos>m) pos=m;
    		else s=1;
    		obj1.style.top=pos+"px";
		break;
		case 4: //2top
    		pos=(parseInt(obj1.style.top)-parseInt(bh/12));
    		if(pos<m) pos=m;
    		else s=1;
    		obj1.style.top=pos+"px";
		break;
    }
    if(s==1) setTimeout("slide("+m+")",1);

}

Array.prototype.pos = function(str)
{
  pos = false;
  for (i=0; i<this.length; i++) if (this[i]==str) pos=i;
  return pos;
}