<!--
//---------------------------------------------

//  THIS CODE IS NOT APPROVED FOR USE IN/ON ANY OTHER UI ELEMENT OR PRODUCT COMPONENT.  

//  Copyright (c) 2006 Microsoft Corporation.  All rights reserved.

// ----------------------------------------------
-->
<html xmlns:t="urn:schemas-microsoft-com:time" xmlns:v="urn:schemas-microsoft-com:vml">
	<head>
		<title>Number Puzzle</title>
		<meta http-equiv="MSThemeCompatible" CONTENT="yes">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style> body{margin:0;border:none;width:130;height:144;cursor:default;font:8pt tahoma;zoom:1}
	v\:*{behavior:url(#default#vml)}
	#pad,t\:*{behavior:url(#default#time2)}
	#bar{width:130;height:13;background:url(Images/toolbar.png);padding:1 0 0 3}
	#bar v\:image{width:11;height:11;cursor:hand;margin:0 1;vertical-align:middle}
	#pad{filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=16,duration=1,enabled=false)}
	#pad *{position:absolute}
	#pad { BORDER-RIGHT:#192522 1px solid; BORDER-TOP:#192522 1px solid; BACKGROUND:#999999; BORDER-LEFT:#192522 1px solid; WIDTH:130px; BORDER-BOTTOM:#192522 1px solid; POSITION:absolute; HEIGHT:130px; }
	#overlay { BORDER-RIGHT:#192522 1px solid; BORDER-TOP:#192522 1px solid; BACKGROUND:#999999; BORDER-LEFT:#192522 1px solid; WIDTH:5px; BORDER-BOTTOM:#192522 1px solid; POSITION:absolute; HEIGHT:130px; }
	#puzzleSolved { position:absolute; height: 130px; width: 130px; visibility: hidden; font-family: verdana; font-size: 10px; font-weight: bold; color: #FFFFFF; background: #333333; padding-left: 5px; padding-top: 5px; z-index:100; border: 2px solid #000000; filter:alpha(opacity=70); }
	TD.solvedTable { font-family: verdana; font-size: 10px; font-weight: bold; color: #FFFFFF; filter:alpha(opacity=70); }
	</style>
	</head>
	<body dir="ltr" onload="loadGadget();" scroll="no">
		<div dir="ltr" id="bar"></div>
		<v:rect dir="ltr" id="pad" timecontainer="par" dur="indefinite">
			<v:image id="glow" src="Images/glow.png" onmousedown="delegateClick();" style="Z-INDEX:9;LEFT:0px;WIDTH:128px;TOP:0px;HEIGHT:128px"
				coordsize="21600,21600" />
		</v:rect>
		<div dir="ltr" id="keyMask" style="Z-INDEX:200;LEFT:0px;WIDTH:128px;POSITION:absolute;TOP:0px;HEIGHT:128px">
		</div>
		<div id="puzzleSolved">
			<table id="puzzleSolved_Table">
				<tr>
					<td colspan="2" class="solvedTable" id="L_YOUR_RESET_THE_PUZZLE">
						You reset the puzzle!
						<br>
						<br>
					</td>
				</tr>
				<tr>
					<td><img src="Images/Button_Shuffle.png" border="0" onClick="on_shuffle();"></td>
					<td onClick="on_shuffle()" id="L_NUMBERPUZZSLE_PLAYAGAIN" class="solvedTable"><u>Play 
							again</u></td>
				</tr>
			</table>
		</div>
		<script language="javascript">
var L_SHUFFLE_text = "Shuffle";
var L_RESET_text = "Reset";

var tile=new Array(),x,y,d,i;
var solvedTiles = new Array();

var ET = null;
var GRID_SIZE = 4;
var resetGame = false;
var g_shuffle_count = 1000;

var BIDI = (window.document.dir=="" ? "ltr" : window.document.dir);

var puzzleDirection = new Array(4);

puzzleDirection[0] = "U";
puzzleDirection[1] = "D";
puzzleDirection[2] = "L";
puzzleDirection[3] = "R";

var puzzleObject = new clsPuzzleObject();


function clsPuzzleObject()
{
	this.invalidDirection = "";
	this.currentIndex = 0;
	this.newIndex = 0;
	this.tileArray = new Array();
	

	
	this.resetPuzzle = function()
	{
		this.currentIndex = (GRID_SIZE * GRID_SIZE);
		
		if (this.tileArray.length > 0)
		{
			this.tileArray.splice(0);
		}
		for (var i=0; i < (GRID_SIZE * GRID_SIZE); i++)
		{
			this.tileArray[i]=i;
		}
		this.reOrderPuzzle();
	}
	this.reOrderPuzzle = function()
	{
		var tempArray = new Array();
		
		for (var i=0; i < solvedTiles.length; i++)
		{
			tempArray[i] = solvedTiles[i];
		}
		tile.splice(0,tile.length);
		
		this.shuffle();
		for (var i=0; i < this.tileArray.length; i++)
		{
			tile[i] = tempArray[ this.tileArray[i] ];
		}
	}
	this.shuffle = function(tempArray)
	{	
		var hold = 0;

		for (var i=0; i < g_shuffle_count; i++)
		{		
			puzzleDirection.sort(function()
			{
				return Math.random()-0.5;
			});
			
			for (var ii=0; ii < puzzleDirection.length; ii++)
			{
				if ( this.isDirectionValid( puzzleDirection[ii] ) )
				{
					this.newIndex = this.getNextMove(puzzleDirection[ii]);
					if (this.newIndex != 0)
					{
						if ( this.isNextMoveValid() )
						{
							hold = this.tileArray[this.currentIndex-1];
							this.tileArray[this.currentIndex-1] = this.tileArray[this.newIndex - 1];
							this.tileArray[this.newIndex - 1] = hold;
							this.setInvalidDirection(puzzleDirection[ii]);
							this.currentIndex = this.newIndex;
							break;
						}
					}
				}	
			}
		}
	}
	
	this.setInvalidDirection = function(direction)
	{
		switch (direction)
		{
			case "U": this.invalidDirection="D"; break;

			case "L": this.invalidDirection="R"; break;

			case "R": this.invalidDirection="L"; break;

			case "D": this.invalidDirection="U"; break;			
		}	
	}
	this.isNextMoveValid = function()
	{
		var bRetVal = false;

		var index = this.newIndex * 1;

		var iRowPick = 0;
		var iRow=0;

		iRowPick = Math.floor(index / GRID_SIZE)  + ((index    % GRID_SIZE) > 0 ? 1 : 0);
		iRow =  Math.floor(this.currentIndex / GRID_SIZE)  + ((this.currentIndex % GRID_SIZE) > 0 ? 1 : 0);

		switch (index)
		{
			case (this.currentIndex-GRID_SIZE) : bRetVal=true;break;

			case (this.currentIndex-1) :
					bRetVal = (iRow != iRowPick ? false : true );
					break;

			case (this.currentIndex+1) :
					bRetVal = ( iRowPick != iRow ? false : true);
					break;

			case (this.currentIndex+GRID_SIZE) : bRetVal=true;break;
		}

		return bRetVal;
	}
	
	this.getNextMove = function( direction )
	{
		var index = 0;
		
		switch (direction)
		{
			case "U": index = (this.currentIndex -GRID_SIZE);  break;

			case "L": index = (this.currentIndex-1);  break;

			case "R": index = (this.currentIndex+1);  break;

			case "D": index = (this.currentIndex+GRID_SIZE);  break;			
		}
		if ( index <= 0 | index > 16)
		{
			index = 0;
		}
		return index;
	}
	this.isDirectionValid = function ( direction )
	{
		return ( this.invalidDirection != direction );
	}
}

document.onselectstart=document.ondragstart=function shutup()
{
    return false;
}

function loadGadget()
{
    with (puzzleSolved_Table.style)
       direction=BIDI;
       
    bar.innerText = "shuffle:L_SHUFFLE_text solve:L_RESET_text";
	daBar(bar);
	displayGame()
}

function displayGame()
{
	var counter = 0;

	for(y=0; y<GRID_SIZE; y++)
	{
		for(x=0; x<GRID_SIZE; x++){
			pad.insertAdjacentHTML("beforeEnd",
				"<v:rect dir=ltr id='t"+y+x+"' onclick='choose(this);' originalPosition='"+ ++counter + "' " +
				"style='width:23.5pt;height:23pt;left:-32;top:0'>"+
				"<t:animatemotion origin=parent fill=hold dur=1 begin=indefinite onend='with(parentElement)runtimeStyle.left=x,runtimeStyle.top=y,runtimeStyle.zIndex=0'/>"+
				"<t:animate attributeName=rotation from=-90 to=0 dur=0.5 onend='onEndRotation(this)' fill=hold begin=indefinite />"+
				"<v:stroke on=f /><v:fill on=t type=frame src='Images/tile"+((i=y*4+x+1)<10?"0":"")+i+".png' alt='" + counter + "' />"+
				"</v:rect>"
			);
			tile.push(pad.lastChild)
			solvedTiles.push(pad.lastChild);
		}
	}
	ET=tile[15];
	ET.style.display="none";
	wait = true;
	setTimeout(on_shuffle_no_animation,500);
}

function onEndRotation(o)
{
    o.parentElement.rotation=0;
}

function on_shuffle_no_animation()
{
    keyMask.style.zIndex=100;
    pad.filters(0).apply();
    pad.endElement();

	puzzleObject.resetPuzzle();

    for(y=0,i=0,d=0.02; y<GRID_SIZE; y++)
        for(x=0; x<GRID_SIZE; x++,i++)
		{
			tile[i].setAttribute("index",i+1);
            move_no_animation(tile[i],x*32,y*32);
        }
    pad.beginElement();
    pad.filters(0).play();
    
    ET.style.display="none";
    setTimeout(allowClicks,1500);
    resetGame = false;
    document.getElementById("puzzleSolved").style.visibility = "hidden";
}

function on_shuffle()
{
    keyMask.style.zIndex=100;

    pad.endElement();
    
    puzzleObject.resetPuzzle();
    
    for(y=0,i=0,d=0.02; y<GRID_SIZE; y++)
        for(x=0; x<GRID_SIZE; x++,i++)
		{
			tile[i].setAttribute("index",i+1);
            move(tile[i],x*32,y*32,i*d);
        }
    pad.beginElement();
    ET.style.display="none";
    setTimeout(allowClicks,1500);
    resetGame = false;
    document.getElementById("puzzleSolved").style.visibility = "hidden";
}

function allowClicks()
{
    keyMask.style.zIndex=-100;    
}

function disableClicks()
{
    keyMask.style.zIndex=100;
    setTimeout(allowClicks,250); 
}

function hidePlaceHolder()
{
    with (ET.style)
     display="none";
}

function move_no_animation(e,x,y)
{
    e.x=x; 
    e.y=y;
    e.runtimeStyle.left=x;
    e.runtimeStyle.top=y;
    e.runtimeStyle.zIndex=0    
}

function move(e,x,y,delay,curve,len)
{
    e.x=x; e.y=y;
    e.runtimeStyle.zIndex=2;
    with(e.firstChild)
    {
        endElement();
        begin=nextSibling.begin=delay;
        dur=len?len:1;
        path=(curve?curve:"m0 0 C96 0 96 64 64 96 C32 64 "+x/2+" "+y/2)+" "+x+" "+y;
        beginElement();
    }
   
}

function on_solve()
{
    keyMask.style.zIndex=100; 
    
    pad.filters(0).apply();

    for(var y=0,d=0; y<GRID_SIZE; y++)
        for(var x=0; x<GRID_SIZE; x++)
            with(window["t"+y+x].runtimeStyle)
                posLeft=x*32,posTop=y*32;
    pad.filters(0).play();

    event.cancelBubble=true;
    
    setTimeout(allowClicks,1500);
    setTimeout("showSolved()", 1020);
    resetGame = true;
}

function showSolved()
{
	document.getElementById("puzzleSolved").style.visibility = "visible";
}

function delegateClick()
{
    if (resetGame) 
    {
        return null;
    }

    var t,i=0,x=event.offsetX,y=event.offsetY;

    while(e=tile[i++])
    {
        with(e.runtimeStyle)
            if(posLeft<x && posLeft+32>x && posTop<y && posTop+32>y)
			{
				if (isValidChoice(e.index))
				{
					return e.click();
				}
            }
   }
}

function isValidChoice(index)
{
	var bRetVal = false;

	index *= 1;

    var iRowPick = 0;
    var iRow=0;

    iRowPick = Math.floor(index / GRID_SIZE)  + ((index    % GRID_SIZE) > 0 ? 1 : 0);
    iRow =  Math.floor(ET.index / GRID_SIZE)  + ((ET.index % GRID_SIZE) > 0 ? 1 : 0);

	switch (index)
	{
		case (ET.index-GRID_SIZE) : bRetVal=true;break;

		case (ET.index-1) :
		        bRetVal = (iRow != iRowPick ? false : true );
		        break;

		case (ET.index+1) :
		        bRetVal = ( iRowPick != iRow ? false : true);
		        break;

		case (ET.index+GRID_SIZE) : bRetVal=true;break;
	}

	return bRetVal;
}


function choose(e)
{
	var index = "";
    
    disableClicks();
    
    with(ET.runtimeStyle)
        move(e,posLeft,posTop,0,"M"+e.runtimeStyle.posLeft+" "+e.runtimeStyle.posTop+" c-2 -1 2 -2 2 1 C"+posLeft+" "+posTop+" "+(posLeft-3)+" "+(posTop-3)+" "+posLeft+" "+posTop+" L",.2),
       posLeft=e.runtimeStyle.posLeft,posTop=e.runtimeStyle.posTop;

	index    = e.index;
    e.index  = ET.index;
    ET.index = index;
    event.cancelBubble=true;
    isGameOver(); 
}

function isGameOver()
{
	var bRetVal = true;
	var s = "";

	for (var i=0;i<tile.length;i++)
	{
		if (tile[i].index != tile[i].originalPosition)
		{
			bRetVal = false;
			break;
		}
	}

	return bRetVal;
}

function daBar(o)
{
    var a=o.innerText.split(" ");
    var i=0;
    var s;
    var h="";

    while(s=a[i++]){
        var sa=s.split(":");
        h+="<v:image dir=ltr id='bar_"+s[0]+"' src='Images/button_"+sa[0]+".png' "+
        "onmouseover=blacklevel=.1 onmouseout=blacklevel=0 "+
        "onmousedown='on_"+sa[0]+"()' alt='" + eval(sa[1]) + "' title='" + eval(sa[1]) + "'/>";
    }
    o.innerHTML=h;    

}



		</script>
	</body>
</html>