<PUBLIC:PROPERTY name="across"/>
<PUBLIC:PROPERTY name="down"/>
<PUBLIC:METHOD name="Play"/>
<PUBLIC:METHOD name="Solve"/>
<PUBLIC:ATTACH event=ondocumentready handler=Init />
<PUBLIC:ATTACH event=onclick handler=SwapImage />
<PUBLIC:ATTACH event=oncontextmenu handler=contextMenu />


<SCRIPT>
// The Puzzler is Copyright 1998 InsideDHTML.com, LLC (http://www.insideDHTML.com)
// This code can be reused as long as the above copyright notice 
// and the visible copyright notice is not removed
var bHide=false
var src, width, height;

function Init()
{
	var coll = element.children.tags("IMG");
	if (coll!=null)
	{
		var itag=coll[0];
		src=itag.src;
		width=parseInt(itag.width);
		height=parseInt(itag.height);
		BuildPuzzle();
		Play();
	}
}
function BuildPuzzle()
{
	
	var isWidth=Math.round(width / across);
	var isHeight=Math.round(height / down);
    
	var str="",cnt=0
	for (var y=0; y<down; y++)
		for (var x=0; x<across; x++)
		{
			str+="<SPAN CLASS=piece _IDX=\"" + cnt + "\" STYLE=\"position:absolute; width:" +isWidth + ";height:" + isHeight + ";top:" + (y*(isHeight+1)) + ";left:" + (x*(isWidth+1)) + ";overflow:hidden;"
			str+="clip: rect(0 " + (isWidth) + " " + (isHeight) + " 0)"	
				str+="\"><IMG _POS=\"" + cnt + "\" SRC=\"" + src + "\" WIDTH=\"" + width + "\" HEIGHT=\"" + height + "\""
			str+=" STYLE=\"position:absolute; top:" + (-isHeight*y) + ";left:" + (-isWidth*x) + "\">"
			str+="</SPAN>"
			cnt++
		}
			
	isHeight = height+parseInt(down) + 3;
	isWidth = width+parseInt(across)+3;

	str = "<SPAN ONDRAGSTART=\"return false\" ONSELECTSTART=\"return false\" ID=\"puzzle\" STYLE=\"position:relative; border:2px black solid; width:" + isWidth + ";height=" + isHeight + "\">" + str + "</SPAN>";
	
	//context menu
	str +="<span id="+uniqueID+"menu1 style=\"cursor:hand;position:absolute;display:none;width:100;background-Color:menu;font:10pt arial\">";
	str+="<span onclick=\""+uniqueID+".Play();"+uniqueID+"menu1.style.display='none';\">Play</span><br>";
	str+="<span onclick=\""+uniqueID+".Solve();"+uniqueID+"menu1.style.display='none';\">Solve</span><br>"; 
	str+="<span onclick=\"window.location='http://www.insideDHTML.com'\">www.InsideDHTML.com</span></span>";
	element.innerHTML= str;
}

function contextMenu()
{
	var e = eval(uniqueID+"menu1")
    	e.style.posLeft=event.clientX+element.document.body.scrollLeft;
	e.style.posTop=event.clientY+element.document.body.scrollTop;
	e.style.display="";
	window.event.returnValue=false;
}

function Solve()
{
	BuildPuzzle();
	bHide=false;	
}

function CheckGame() {
	var solve=true
	for (var i=0; i<puzzle.children.length;i++) {
		solve = solve && (puzzle.children[i].children[0]._POS==i)
	}
	if (solve) {
		puzzle.children[puzzle.children.length-1].children[0].style.visibility = ""
		bHide=false	
		alert("Well Done!")
	}
}

function Play() {
	var iSquare = puzzle.children.length
	if (!bHide) {
		puzzle.children[puzzle.children.length-1].children[0].style.visibility = "hidden"
		bHide=true
	}
	for (var i=0; i<iSquare*2; i++) {
		var iSrc=Math.ceil(Math.random()*iSquare-1)
		var iDest=Math.ceil(Math.random()*iSquare-1)
		Swap(puzzle.children[iSrc],puzzle.children[iDest])
	}
}


function Swap(src, dest) {
	var iTemp = src.innerHTML
	src.innerHTML = dest.innerHTML
	dest.innerHTML = iTemp
}

function SwapImage()
{
	var el=event.srcElement;
	if (el.tagName=="IMG")
	{ 
		var idx = parseInt(el.parentElement._IDX);
		var	iacross=parseInt(across);
		if ((idx+1<puzzle.children.length) && (puzzle.children[idx+1].children[0].style.visibility=="hidden"))
		{
			Swap(el.parentElement,puzzle.children[idx+1])
		}
		else
		{
			if ((idx-1>=0) && (puzzle.children[idx-1].children[0].style.visibility=="hidden"))
			{
				Swap(el.parentElement,puzzle.children[idx-1])
			}
			else
			{
				if ((idx+iacross<puzzle.children.length) && (puzzle.children[idx+iacross].children[0].style.visibility=="hidden"))
				{
					Swap(el.parentElement,puzzle.children[idx+iacross])
				}
				else
				{
					if ((idx-iacross>=0) && (puzzle.children[idx-iacross].children[0].style.visibility=="hidden"))
					{
						Swap(el.parentElement,puzzle.children[idx-iacross])
					}
				}
			}
		}
		CheckGame()

	}
}



</SCRIPT>

