///copyright by Pavlenkov E.O.
//var obj1;
var obj2;
var x1,y1,x2,y2;
var s2=0;
var bw,bh,bny;

function draw2()
{
  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=\"move2(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 game2(x, y, h)
{
window.onresize=draw2;

obj1='';
obj2='';

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);
winstr=aa.toString();

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


draw2();
return false;
}

function move2( obj )
{

   if(s2!=0) return;
   if(obj1=='')
   {  obj1=obj;
      obj1.style.border="3px solid #FFFFFF";
      obj1.style.zIndex=100;
   }
   else if(obj1==obj)
   {  obj1.style.border="0px";
      obj1.style.zIndex=0;
      obj1='';
   }
   else
   {
      obj2=obj;
      obj1.style.border="0px";

      pos1=aa.pos(parseInt(obj1.id));
      pos2=aa.pos(parseInt(obj2.id));
      aa[pos1]=obj2.id;
      aa[pos2]=obj1.id;

      x1=parseInt(obj1.style.left);
      y1=parseInt(obj1.style.top);
      x2=parseInt(obj2.style.left);
      y2=parseInt(obj2.style.top);

      obj2.style.zIndex=100;

      setTimeout("xcng2()",3);
   }

   if(aa.toString()==winstr)
    { document.getElementById('img1').innerHTML=retimg;
	  window.onresize="";
       alert("Поздравляю! Вы собрали!");

    }
    return true;
}

function xcng2()
{
    if(++s2<=21)
    {
    	if(s2<=10)
    	{
    	    opacity=10/s2*10;
    		obj1.style.opacity = (opacity / 100);
            obj1.style.KhtmlOpacity = (opacity / 100);
            obj1.style.filter = "alpha(opacity=" + opacity + ")";
    		obj2.style.opacity = (opacity / 100);
            obj2.style.KhtmlOpacity = (opacity / 100);
            obj2.style.filter = "alpha(opacity=" + opacity + ")";

            obj1.style.left=x1+(bw-bw/100*opacity)/2+"px";
            obj1.style.width=((bw/100*opacity))+"px";
            obj1.style.top=y1+(bh-bh/100*opacity)/2+"px";
            obj1.style.height=((bh/100*opacity))+"px";
            obj2.style.left=x2+(bw-bw/100*opacity)/2+"px";
            obj2.style.width=((bw/100*opacity))+"px";
            obj2.style.top=y2+(bh-bh/100*opacity)/2+"px";
            obj2.style.height=((bh/100*opacity))+"px";

    	}else
   	    if(s2<21)
    	{
    	    opacity=(s2-10)*10;
    		obj1.style.opacity = (opacity / 100);
            obj1.style.KhtmlOpacity = (opacity / 100);
            obj1.style.filter = "alpha(opacity=" + opacity + ")";
    		obj2.style.opacity = (opacity / 100);
            obj2.style.KhtmlOpacity = (opacity / 100);
            obj2.style.filter = "alpha(opacity=" + opacity + ")";

            obj1.style.left=x2+(bw-bw/100*opacity)/2+"px";
            obj1.style.width=((bw/100*opacity))-1+"px";
            obj1.style.top=y2+(bh-bh/100*opacity)/2+"px";
            obj1.style.height=((bh/100*opacity))-1+"px";
            obj2.style.left=x1+(bw-bw/100*opacity)/2+"px";
            obj2.style.width=((bw/100*opacity))-1+"px";
            obj2.style.top=y1+(bh-bh/100*opacity)/2+"px";
            obj2.style.height=((bh/100*opacity))-1+"px";
    	}
    	setTimeout("xcng2()",4);
    }
    else
    {
		obj1.style.zIndex=0;
		obj2.style.zIndex=0;
		obj1=''; s2=0;
		obj2='';
    }
}


/*
function slide2()
{
    offsetx = ((x2-x1)/10);
    offsety = ((y2-y1)/10);

    if(x2>x1)
    {
		pos=(parseInt(obj1.style.left)+offsetx);
		if(pos>x2) pos=x2;
		obj1.style.left=pos+"px";

		pos=(parseInt(obj2.style.left)-offsetx);
		if(pos<x1) pos=x1;
		obj2.style.left=pos+"px";
    }
    else
    {
		pos=(parseInt(obj1.style.left)+offsetx);
		if(pos<x2) pos=x2;
		obj1.style.left=pos+"px";

		pos=(parseInt(obj2.style.left)-offsetx);
		if(pos>x1) pos=x1;
		obj2.style.left=pos+"px";
    }

    if(y2>y1)
    {
		pos=(parseInt(obj1.style.top)+offsety);
		if(pos>y2) pos=y2;
		obj1.style.top=pos+"px";

		pos=(parseInt(obj2.style.top)-offsety);
		if(pos<y1) pos=y1;
		obj2.style.top=pos+"px";
    }
    else
    {
		pos=(parseInt(obj1.style.top)+offsety);
		if(pos<y2) pos=y2;
		obj1.style.top=pos+"px";

		pos=(parseInt(obj2.style.top)-offsety);
		if(pos>y1) pos=y1;
		obj2.style.top=pos+"px";
    }

    if(++s2<=14) setTimeout("slide2()",7);
    else
    {
		obj1.style.zIndex=0;
		obj2.style.zIndex=0;
		obj1=''; s2=0;
		obj2='';

    }

}
*/