Tower of Hanoi DHTML game.html

<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Tower of Hanoi DHTML game</title>
<style type="text/css">
table {font:bold 13px Verdana}
p {font:normal 11px Tahoma,Verdana}
input,select {font:normal 12px Tahoma,Verdana}
select {width:40px}
a {font-weight:bold}
.tower {position:absolute;visibility:visible;left:77px;top:184px;font:bold 10px Tahoma}
.container {position:absolute;visibility:visible;}
.towervert {position:absolute;visibility:visible;border:1px solid black;background-color:black}
.towerhoriz {position:absolute;visibility:visible;border:1px solid black;font-size:1px;background-color:black}
.disk {position:absolute;visibility:visible;border:1px solid black}
</style>
<script type="text/javascript">

/***********************************************
* Tower of Hanoi- by Glenn G. Vergara (glenngv@REMOVETHISyahoo.com)
* This notice must stay intact for use
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
***********************************************/

    var delay = 200; //in milliseconds

    var	drag=false;
    var objDisk=null;
    var x = 0;
    var y = 0;
    var disksOnTower1 = new Array(null,null,null,null,null,null,null,null);
    var disksOnTower2 = new Array(null,null,null,null,null,null,null,null);
    var disksOnTower3 = new Array(null,null,null,null,null,null,null,null);
    var disksOnTowers = new Array(disksOnTower1,disksOnTower2,disksOnTower3);
    var offsetleft = 30;
    var offsettop = 30;
    var offsettower = 20;
    var offsethoriz = 30;
    var basetop = 0;
    var diskheight = 0;
    var midhoriztower = 0;
    var indexTo=1;
    var indexFr=1;
    var movectr=0;
    var gameOver=false;
    var prevIndex=0;
    var zindex = 0;
    var currTower=1;
    var prevTower=1;
    var demo=false;
    var arrFr = new Array(255);
    var arrTo = new Array(255);
    var idx = 0;
    var pos = 0;
    var t=null;
    var stop=false;

    
    function init(){
        if (document.getElementById){
        	var diskno = document.hanoi.diskno;

            diskno.options.selectedIndex = 0;
            drawTowers();
            drawDisks(parseInt(diskno.options[diskno.options.selectedIndex].text));		
        }
    }
    
    function initVars(){
        for (var i=0;i<disksOnTower1.length;i++){
            disksOnTower1[i]=null;
            disksOnTower2[i]=null;
            disksOnTower3[i]=null;
        }
        drag = false;
        indexTo = 1;
        indexFr = 1;
        movectr = 0;
        zindex = 0;
        idx = 0;
        pos = 0;
        t = null;
        gameOver=false;
        stop=false;
        demo=false;
        document.hanoi.btnUndo.disabled=true;
    }
    
    function drawTowers(){
    	var title=document.getElementById("title");
    	var tower1=document.getElementById("tower1");
    	var tower2=document.getElementById("tower2");
    	var tower3=document.getElementById("tower3");
    	var settings=document.getElementById("settings");
        var titlewidth = parseInt(title.style.width);
        var titleheight = parseInt(title.style.height);        
        var towerwidth = parseInt(tower1.style.width);
        var towerheight = parseInt(tower1.style.height);
        var settingswidth = parseInt(settings.style.width);
        midhoriztower = parseInt(document.getElementById("horiztower1").style.width)/2;
        diskheight = parseInt(document.getElementById("disk1").style.height);
                
        title.style.left=offsetleft+(1.5*towerwidth)+offsettower-(titlewidth/2)+"px";
        title.style.top=offsettop+"px";
        tower1.style.left=offsetleft+"px";
        tower1.style.top=offsettop+titleheight+offsethoriz+"px";
        tower2.style.left=offsetleft+towerwidth+offsettower+"px";
        tower2.style.top=offsettop+titleheight+offsethoriz+"px";
        tower3.style.left=offsetleft+(towerwidth+offsettower)*2+"px";
        tower3.style.top=offsettop+titleheight+offsethoriz+"px";
        settings.style.left=offsetleft+(1.5*towerwidth)+offsettower-(settingswidth/2)+"px";
        settings.style.top=parseInt(tower1.style.top)+towerheight+offsethoriz+"px";
    }
    
    function drawDisks(disknum){
    	var tower1=document.getElementById("tower1");
        var disktop = parseInt(tower1.style.top)+parseInt(document.getElementById("horiztower1").style.top);
        var lefttower1 = parseInt(tower1.style.left);
        var disk;
        var f=document.hanoi;
        basetop = disktop;
        for (var i=disksOnTower1.length;i>=1;i--){
        	disk = document.getElementById("disk"+i);
			disk.style.zIndex=++zindex;	
            if (i<=disknum){
                disk.style.left=lefttower1+midhoriztower-parseInt(disk.style.width)/2+"px";
                disk.style.top=disktop-diskheight-1+"px";
                disktop = parseInt(disk.style.top);
                disksOnTowers[0][i-1]=disk;
            }            
            else {
                disk.style.left="-250px";
                disk.style.top="-250px";
                disksOnTowers[0][i-1]=null;
            }
        }       
        f.minmove.value=f.diskno.options[f.diskno.options.selectedIndex].value;
        f.yourmove.value=0;
    }
    
    function newGame(obj){
        if (movectr>0 && !gameOver && !stop){
            if (confirm("Current game will be aborted, would you like to continue?")){
                initVars();
                drawDisks(parseInt(obj.options[obj.options.selectedIndex].text));
            }
            else document.hanoi.diskno.options.selectedIndex=prevIndex;
        }
        else {
            initVars();
            drawDisks(parseInt(obj.options[obj.options.selectedIndex].text));
        }
    }
    
    function initializeDrag(disk,e){
    	if (!e) e=event;
        if (stop){
            alert("You cannot continue solving the puzzle after clicking the 'Stop' button.\nClick 'Restart' button or select no. of disks to continue playing.");
            return;
        }
        indexFr = indexTo;
        if (disk.id!=disksOnTowers[indexFr-1][0].id || gameOver || demo) return;
        objDisk=disk;
        x=e.clientX;
        y=e.clientY;
        tempx=parseInt(disk.style.left);
        tempy=parseInt(disk.style.top);
        document.onmousemove=dragDisk;
    }
    
    function dragDisk(e){
        if (!e) e=event;
        zindex++;
        drag=true;
        var posX = tempx+e.clientX-x;
        var posY = tempy+e.clientY-y;
        var objTower1 = document.getElementById("tower1");
        var objTower2 = document.getElementById("tower2");
        var objTower3 = document.getElementById("tower3");
        var tower1Left = parseInt(objTower1.style.left);
        var tower2Left = parseInt(objTower2.style.left);
        var tower3Left = parseInt(objTower3.style.left);
        var tower3Width = parseInt(objTower3.style.width);
        
        objDisk.style.zIndex=zindex;
        objDisk.style.left=posX+'px';
        objDisk.style.top=posY+'px';        
        
        if (e.clientX>=document.body.clientWidth-10 || e.clientY>=document.body.clientHeight-5 || e.clientX==5 || e.clientY==5){ //outside available window
            indexTo=indexFr;
            dropDisk(objDisk);
        }
        else if ( //in the vicinity of tower 3
            (tower3Left<=posX) && 
            (tower3Left+tower3Width>=posX) && 
            (parseInt(objTower3.style.top)+parseInt(objTower3.style.height)>posY)
            ){
            indexTo=3;
        }
        else if ((tower2Left<=posX) && (tower2Left+tower3Width>=posX)){ //in the vicinity of tower 2
            indexTo=2;
        }
        else if ((tower1Left<=posX) && (tower1Left+parseInt(objTower1.style.width)>=posX)){ //in the vicinity of tower 1
            indexTo=1;
        }
        else indexTo = indexFr;
        return false;
    }

    function dropDisk(disk){
    	var f=document.hanoi;
        document.onmousemove=new Function("return false");
        if (!drag) return;
        var gameStatus=false;
        var topDisk = disksOnTowers[indexTo-1][0];
        if (indexFr==indexTo){
            getNewTop(indexFr,null);
            pushDisk(disk,indexFr);	//put disk back to original tower
            getNewTop(indexFr,disk);
        }
        else if (topDisk==null) {
            pushDisk(disk,indexTo);
            getNewTop(indexFr,null);
            getNewTop(indexTo,disk);
            movectr++;
            currTower=indexTo;
            prevTower=indexFr;
            f.btnUndo.disabled=false;
        }
        else if (parseInt(disk.style.width)<parseInt(topDisk.style.width)){
            pushDisk(disk,indexTo);
            getNewTop(indexFr,null);
            getNewTop(indexTo,disk);
            movectr++;
            currTower=indexTo;
            prevTower=indexFr;
            if (indexTo==3) gameStatus=checkStatus();
            f.btnUndo.disabled=false;
        }
        else {
            getNewTop(indexFr,null);
            pushDisk(disk,indexFr);	//put disk back to original tower
            getNewTop(indexFr,disk);
        }
      
        drag=false;
        f.yourmove.value=movectr;
        if (gameStatus) {
            f.btnUndo.disabled=true;
            minmove = parseInt(f.minmove.value);
            if (movectr==minmove) msg="\nCongratulations! You got it in "+minmove+" moves."
            else if (movectr>minmove) msg="\nYou can do better than that."
            else msg="";
            alert("Game Over !!!"+msg);
            gameOver=true;
        }
        return;
    }      
    
    function checkStatus(){
        var gameStat = false;
        var disks=0;
        for (var i=0;i<disksOnTower3.length;i++){
            if (disksOnTowers[2][i]!=null) disks++;
        }
        if (disks==parseInt(document.hanoi.diskno.options[document.hanoi.diskno.options.selectedIndex].text)) gameStat=true;
        return gameStat;
    }

    function pushDisk(disk,index){
        var diskWidth = parseInt(disk.style.width);
        var towerLeft = parseInt(document.getElementById("tower"+index).style.left);
        var topDisk = disksOnTowers[index-1][0];
        if (topDisk!=null){
            topDiskWidth = parseInt(topDisk.style.width);
            topDiskTop = parseInt(topDisk.style.top);
            disk.style.left=towerLeft+midhoriztower-diskWidth/2+"px";
            disk.style.top=topDiskTop-diskheight-1+"px";
        }
        else {
            disk.style.left=towerLeft+midhoriztower-diskWidth/2+"px";
            disk.style.top=basetop-diskheight-1+"px";
        }	
    }
   
    function getNewTop(index,disk){
        if (disk==null){		//pop
            for (var i=0;i<disksOnTower1.length-1;i++){
                disksOnTowers[index-1][i]=disksOnTowers[index-1][i+1];
            }
            disksOnTowers[index-1][disksOnTower1.length-1]=null;
        }
        else {		//push
            for (var i=disksOnTower1.length-1;i>=1;i--){
                disksOnTowers[index-1][i]=disksOnTowers[index-1][i-1];
            }
            disksOnTowers[index-1][0]=disk;
        }
    }
    
    function solve(btn){
        if (btn.value=="Solve"){
            if (movectr>0 && !gameOver && !stop)
                if (!confirm("Current game will be aborted, would you like to continue?")) return;
            btn.value="Stop";
            initVars();
            stop=false;
            demo=true;
            var f=document.hanoi;
            f.btnIns.disabled=true;
            f.btnRes.disabled=true;
            f.btnUndo.disabled=true;
            disknum = parseInt(f.diskno.options[f.diskno.options.selectedIndex].text);
            drawDisks(disknum);
            getMoves(0, 2, 1, disknum); 
            t=window.setTimeout("moveDisk()",delay);
        }
        else {
            if (t) {
                window.clearTimeout(t);
                btn.value="Solve";
                frm.btnIns.disabled=false;
                frm.btnRes.disabled=false;
                t = null;
                stop=true;
                demo=false;
            }
            
        }
    }
    
    function moveDisk(){
        frm = document.hanoi;
        disk=disksOnTowers[arrFr[pos]][0];
        pushDisk(disk,arrTo[pos]+1);
        getNewTop(arrFr[pos]+1,null);
        getNewTop(arrTo[pos]+1,disk);
        movectr++;
        frm.yourmove.value=movectr;
        pos++;
        if (movectr<parseInt(frm.minmove.value)) t=window.setTimeout("moveDisk()",delay);
        else {
            alert("Can you do that in "+movectr+" moves?");
            gameOver=true;
            stop=false;
            frm.btnSolve.value="Solve";
            frm.btnIns.disabled=false;
            frm.btnRes.disabled=false;
        }
    }

    function getMoves(from,to,empty,numDisk){
        if (numDisk > 1) {
            getMoves(from, empty, to, numDisk - 1);
            arrFr[idx] = from;
            arrTo[idx++] = to;
            getMoves(empty, to, from, numDisk - 1);
        }
        else {
            arrFr[idx] = from;
            arrTo[idx++] = to;
        }
    }

    
    function unDo(btn){
        disk=disksOnTowers[currTower-1][0];
        pushDisk(disk,prevTower);
        getNewTop(currTower,null);
        getNewTop(prevTower,disk);
        movectr--;
        document.hanoi.yourmove.value=movectr;
        btn.disabled=true;
    }
    
    function displayIns(){
        var msg="Try to move all the disks from TOWER 1 to TOWER 3.\n";
        msg+="You may only move one disk at a time.\n";
        msg+="You must never allow a bigger disk to go on top of a smaller disk.";
        alert(msg);
    } 
</script>
<style class="firebugResetStyles" type="text/css" charset="utf-8">/* See license.txt for terms of usage */
/** reset styling **/
.firebugResetStyles {
    z-index: 2147483646 !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    border: 0 none !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    position: fixed !important;
    transform: rotate(0deg) !important;
    transform-origin: 50% 50% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent none !important;
    pointer-events: none !important;
    white-space: normal !important;
}
style.firebugResetStyles {
    display: none !important;
}

.firebugBlockBackgroundColor {
    background-color: transparent !important;
}

.firebugResetStyles:before, .firebugResetStyles:after {
    content: "" !important;
}
/**actual styling to be modified by firebug theme**/
.firebugCanvas {
    display: none !important;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBox {
    width: auto !important;
    position: static !important;
}

.firebugLayoutBoxOffset {
    opacity: 0.8 !important;
    position: fixed !important;
}

.firebugLayoutLine {
    opacity: 0.4 !important;
    background-color: #000000 !important;
}

.firebugLayoutLineLeft, .firebugLayoutLineRight {
    width: 1px !important;
    height: 100% !important;
}

.firebugLayoutLineTop, .firebugLayoutLineBottom {
    width: 100% !important;
    height: 1px !important;
}

.firebugLayoutLineTop {
    margin-top: -1px !important;
    border-top: 1px solid #999999 !important;
}

.firebugLayoutLineRight {
    border-right: 1px solid #999999 !important;
}

.firebugLayoutLineBottom {
    border-bottom: 1px solid #999999 !important;
}

.firebugLayoutLineLeft {
    margin-left: -1px !important;
    border-left: 1px solid #999999 !important;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBoxParent {
    border-top: 0 none !important;
    border-right: 1px dashed #E00 !important;
    border-bottom: 1px dashed #E00 !important;
    border-left: 0 none !important;
    position: fixed !important;
    width: auto !important;
}

.firebugRuler{
    position: absolute !important;
}

.firebugRulerH {
    top: -15px !important;
    left: 0 !important;
    width: 100% !important;
    height: 14px !important;
    background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%13%88%00%00%00%0E%08%02%00%00%00L%25a%0A%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04%F8IDATx%DA%EC%DD%D1n%E2%3A%00E%D1%80%F8%FF%EF%E2%AF2%95%D0D4%0E%C1%14%B0%8Fa-%E9%3E%CC%9C%87n%B9%81%A6W0%1C%A6i%9A%E7y%0As8%1CT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AATE9%FE%FCw%3E%9F%AF%2B%2F%BA%97%FDT%1D~K(%5C%9D%D5%EA%1B%5C%86%B5%A9%BDU%B5y%80%ED%AB*%03%FAV9%AB%E1%CEj%E7%82%EF%FB%18%BC%AEJ8%AB%FA'%D2%BEU9%D7U%ECc0%E1%A2r%5DynwVi%CFW%7F%BB%17%7Dy%EACU%CD%0E%F0%FA%3BX%FEbV%FEM%9B%2B%AD%BE%AA%E5%95v%AB%AA%E3E5%DCu%15rV9%07%B5%7F%B5w%FCm%BA%BE%AA%FBY%3D%14%F0%EE%C7%60%0EU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5JU%88%D3%F5%1F%AE%DF%3B%1B%F2%3E%DAUCNa%F92%D02%AC%7Dm%F9%3A%D4%F2%8B6%AE*%BF%5C%C2Ym~9g5%D0Y%95%17%7C%C8c%B0%7C%18%26%9CU%CD%13i%F7%AA%90%B3Z%7D%95%B4%C7%60%E6E%B5%BC%05%B4%FBY%95U%9E%DB%FD%1C%FC%E0%9F%83%7F%BE%17%7DkjMU%E3%03%AC%7CWj%DF%83%9An%BCG%AE%F1%95%96yQ%0Dq%5Dy%00%3Et%B5'%FC6%5DS%95pV%95%01%81%FF'%07%00%00%00%00%00%00%00%00%00%F8x%C7%F0%BE%9COp%5D%C9%7C%AD%E7%E6%EBV%FB%1E%E0(%07%E5%AC%C6%3A%ABi%9C%8F%C6%0E9%AB%C0'%D2%8E%9F%F99%D0E%B5%99%14%F5%0D%CD%7F%24%C6%DEH%B8%E9rV%DFs%DB%D0%F7%00k%FE%1D%84%84%83J%B8%E3%BA%FB%EF%20%84%1C%D7%AD%B0%8E%D7U%C8Y%05%1E%D4t%EF%AD%95Q%BF8w%BF%E9%0A%BF%EB%03%00%00%00%00%00%00%00%00%00%B8vJ%8E%BB%F5%B1u%8Cx%80%E1o%5E%CA9%AB%CB%CB%8E%03%DF%1D%B7T%25%9C%D5(%EFJM8%AB%CC'%D2%B2*%A4s%E7c6%FB%3E%FA%A2%1E%80~%0E%3E%DA%10x%5D%95Uig%15u%15%ED%7C%14%B6%87%A1%3B%FCo8%A8%D8o%D3%ADO%01%EDx%83%1A~%1B%9FpP%A3%DC%C6'%9C%95gK%00%00%00%00%00%00%00%00%00%20%D9%C9%11%D0%C0%40%AF%3F%EE%EE%92%94%D6%16X%B5%BCMH%15%2F%BF%D4%A7%C87%F1%8E%F2%81%AE%AAvzr%DA2%ABV%17%7C%E63%83%E7I%DC%C6%0Bs%1B%EF6%1E%00%00%00%00%00%00%00%00%00%80cr%9CW%FF%7F%C6%01%0E%F1%CE%A5%84%B3%CA%BC%E0%CB%AA%84%CE%F9%BF)%EC%13%08WU%AE%AB%B1%AE%2BO%EC%8E%CBYe%FE%8CN%ABr%5Dy%60~%CFA%0D%F4%AE%D4%BE%C75%CA%EDVB%EA(%B7%F1%09g%E5%D9%12%00%00%00%00%00%00%00%00%00H%F6%EB%13S%E7y%5E%5E%FB%98%F0%22%D1%B2'%A7%F0%92%B1%BC%24z3%AC%7Dm%60%D5%92%B4%7CEUO%5E%F0%AA*%3BU%B9%AE%3E%A0j%94%07%A0%C7%A0%AB%FD%B5%3F%A0%F7%03T%3Dy%D7%F7%D6%D4%C0%AAU%D2%E6%DFt%3F%A8%CC%AA%F2%86%B9%D7%F5%1F%18%E6%01%F8%CC%D5%9E%F0%F3z%88%AA%90%EF%20%00%00%00%00%00%00%00%00%00%C0%A6%D3%EA%CFi%AFb%2C%7BB%0A%2B%C3%1A%D7%06V%D5%07%A8r%5D%3D%D9%A6%CAu%F5%25%CF%A2%99%97zNX%60%95%AB%5DUZ%D5%FBR%03%AB%1C%D4k%9F%3F%BB%5C%FF%81a%AE%AB'%7F%F3%EA%FE%F3z%94%AA%D8%DF%5B%01%00%00%00%00%00%00%00%00%00%8E%FB%F3%F2%B1%1B%8DWU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*UiU%C7%BBe%E7%F3%B9%CB%AAJ%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5*%AAj%FD%C6%D4%5Eo%90%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5%86%AF%1B%9F%98%DA%EBm%BBV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%AD%D6%E4%F58%01%00%00%00%00%00%00%00%00%00%00%00%00%00%40%85%7F%02%0C%008%C2%D0H%16j%8FX%00%00%00%00IEND%AEB%60%82") repeat-x !important;
    border-top: 1px solid #BBBBBB !important;
    border-right: 1px dashed #BBBBBB !important;
    border-bottom: 1px solid #000000 !important;
}

.firebugRulerV {
    top: 0 !important;
    left: -15px !important;
    width: 14px !important;
    height: 100% !important;
    background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0E%00%00%13%88%08%02%00%00%00%0E%F5%CB%10%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%06~IDATx%DA%EC%DD%D1v%A20%14%40Qt%F1%FF%FF%E4%97%D9%07%3BT%19%92%DC%40(%90%EEy%9A5%CB%B6%E8%F6%9Ac%A4%CC0%84%FF%DC%9E%CF%E7%E3%F1%88%DE4%F8%5D%C7%9F%2F%BA%DD%5E%7FI%7D%F18%DDn%BA%C5%FB%DF%97%BFk%F2%10%FF%FD%B4%F2M%A7%FB%FD%FD%B3%22%07p%8F%3F%AE%E3%F4S%8A%8F%40%EEq%9D%BE8D%F0%0EY%A1Uq%B7%EA%1F%81%88V%E8X%3F%B4%CEy%B7h%D1%A2E%EBohU%FC%D9%AF2fO%8BBeD%BE%F7X%0C%97%A4%D6b7%2Ck%A5%12%E3%9B%60v%B7r%C7%1AI%8C%BD%2B%23r%00c0%B2v%9B%AD%CA%26%0C%1Ek%05A%FD%93%D0%2B%A1u%8B%16-%95q%5Ce%DCSO%8E%E4M%23%8B%F7%C2%FE%40%BB%BD%8C%FC%8A%B5V%EBu%40%F9%3B%A72%FA%AE%8C%D4%01%CC%B5%DA%13%9CB%AB%E2I%18%24%B0n%A9%0CZ*Ce%9C%A22%8E%D8NJ%1E%EB%FF%8F%AE%CAP%19*%C3%BAEKe%AC%D1%AAX%8C*%DEH%8F%C5W%A1e%AD%D4%B7%5C%5B%19%C5%DB%0D%EF%9F%19%1D%7B%5E%86%BD%0C%95%A12%AC%5B*%83%96%CAP%19%F62T%86%CAP%19*%83%96%CA%B8Xe%BC%FE)T%19%A1%17xg%7F%DA%CBP%19*%C3%BA%A52T%86%CAP%19%F62T%86%CA%B0n%A9%0CZ%1DV%C6%3D%F3%FCH%DE%B4%B8~%7F%5CZc%F1%D6%1F%AF%84%F9%0F6%E6%EBVt9%0E~%BEr%AF%23%B0%97%A12T%86%CAP%19%B4T%86%CA%B8Re%D8%CBP%19*%C3%BA%A52huX%19%AE%CA%E5%BC%0C%7B%19*CeX%B7h%A9%0C%95%E1%BC%0C%7B%19*CeX%B7T%06%AD%CB%5E%95%2B%BF.%8F%C5%97%D5%E4%7B%EE%82%D6%FB%CF-%9C%FD%B9%CF%3By%7B%19%F62T%86%CA%B0n%D1R%19*%A3%D3%CA%B0%97%A12T%86uKe%D0%EA%B02*%3F1%99%5DB%2B%A4%B5%F8%3A%7C%BA%2B%8Co%7D%5C%EDe%A8%0C%95a%DDR%19%B4T%C66%82fA%B2%ED%DA%9FC%FC%17GZ%06%C9%E1%B3%E5%2C%1A%9FoiB%EB%96%CA%A0%D5qe4%7B%7D%FD%85%F7%5B%ED_%E0s%07%F0k%951%ECr%0D%B5C%D7-g%D1%A8%0C%EB%96%CA%A0%A52T%C6)*%C3%5E%86%CAP%19%D6-%95A%EB*%95q%F8%BB%E3%F9%AB%F6%E21%ACZ%B7%22%B7%9B%3F%02%85%CB%A2%5B%B7%BA%5E%B7%9C%97%E1%BC%0C%EB%16-%95%A12z%AC%0C%BFc%A22T%86uKe%D0%EA%B02V%DD%AD%8A%2B%8CWhe%5E%AF%CF%F5%3B%26%CE%CBh%5C%19%CE%CB%B0%F3%A4%095%A1%CAP%19*Ce%A8%0C%3BO*Ce%A8%0C%95%A12%3A%AD%8C%0A%82%7B%F0v%1F%2FD%A9%5B%9F%EE%EA%26%AF%03%CA%DF9%7B%19*Ce%A8%0C%95%A12T%86%CA%B8Ze%D8%CBP%19*Ce%A8%0C%95%D1ae%EC%F7%89I%E1%B4%D7M%D7P%8BjU%5C%BB%3E%F2%20%D8%CBP%19*Ce%A8%0C%95%A12T%C6%D5*%C3%5E%86%CAP%19*Ce%B4O%07%7B%F0W%7Bw%1C%7C%1A%8C%B3%3B%D1%EE%AA%5C%D6-%EBV%83%80%5E%D0%CA%10%5CU%2BD%E07YU%86%CAP%19*%E3%9A%95%91%D9%A0%C8%AD%5B%EDv%9E%82%FFKOee%E4%8FUe%A8%0C%95%A12T%C6%1F%A9%8C%C8%3D%5B%A5%15%FD%14%22r%E7B%9F%17l%F8%BF%ED%EAf%2B%7F%CF%ECe%D8%CBP%19*Ce%A8%0C%95%E1%93~%7B%19%F62T%86%CAP%19*Ce%A8%0C%E7%13%DA%CBP%19*Ce%A8%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4%AE%A4%F5%25%C0%00%DE%BF%5C'%0F%DA%B8q%00%00%00%00IEND%AEB%60%82") repeat-y !important;
    border-left: 1px solid #BBBBBB !important;
    border-right: 1px solid #000000 !important;
    border-bottom: 1px dashed #BBBBBB !important;
}

.overflowRulerX > .firebugRulerV {
    left: 0 !important;
}

.overflowRulerY > .firebugRulerH {
    top: 0 !important;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.fbProxyElement {
    position: fixed !important;
    pointer-events: auto !important;
}
</style></head>
<body onload="init();" onselectstart="return false" oncontextmenu="return false">
<form name="hanoi">

<div id="title" style="position: absolute; visibility: visible; left: 270px; top: 30px; width: 160px; height: 20px; font: bold 20px Tahoma; text-align: center;">Tower of Hanoi</div>

<div id="tower1" class="container" style="left: 30px; top: 80px; width: 200px; height: 200px;" onmousemove="indexTo=1">
<div id="verttower1" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>

<div id="horiztower1" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
<div class="tower">TOWER 1</div>
</div>

<div id="tower2" class="container" style="left: 250px; top: 80px; width: 200px; height: 200px;" onmousemove="indexTo=2">
<div id="verttower2" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
<div id="horiztower2" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
<div class="tower">TOWER 2</div>
</div>

<div id="tower3" class="container" style="left: 470px; top: 80px; width: 200px; height: 200px;" onmousemove="indexTo=3">
<div id="verttower3" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
<div id="horiztower3" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
<div class="tower">TOWER 3</div>

</div>

<div id="disk1" class="disk" style="left: 325px; top: 240px; width: 50px; height: 19px; background-color: pink; z-index: 45;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 1"></div>
<div id="disk2" class="disk" style="left: 95px; top: 140px; width: 70px; height: 19px; background-color: violet; z-index: 7;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 2"></div>
<div id="disk3" class="disk" style="left: 85px; top: 160px; width: 90px; height: 19px; background-color: indigo; z-index: 6;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 3"></div>
<div id="disk4" class="disk" style="left: 75px; top: 180px; width: 110px; height: 19px; background-color: blue; z-index: 5;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 4"></div>
<div id="disk5" class="disk" style="left: 65px; top: 200px; width: 130px; height: 19px; background-color: green; z-index: 4;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 5"></div>
<div id="disk6" class="disk" style="left: 55px; top: 220px; width: 150px; height: 19px; background-color: yellow; z-index: 3;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 6"></div>
<div id="disk7" class="disk" style="left: 45px; top: 240px; width: 170px; height: 19px; background-color: orange; z-index: 2;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 7"></div>
<div id="disk8" class="disk" style="left: -250px; top: -250px; width: 190px; height: 19px; background-color: red; z-index: 1;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 8"></div>

<div id="settings" class="container" style="left: 220px; top: 310px; width: 260px;">
<table>
<tbody><tr><td>No. of disks</td>
<td>
<select name="diskno" onchange="newGame(this)" onclick="prevIndex=this.options.selectedIndex">

<option value="7">3</option>
<option value="15">4</option>
<option value="31">5</option>
<option value="63">6</option>
<option selected="selected" value="127">7</option>
<option value="255">8</option>
</select>
</td></tr>
<tr><td>Minimum no. of moves&nbsp;&nbsp;</td>
<td><input name="minmove" style="border:none" size="3" value="127" readonly="readonly"></td></tr>

<tr><td>Your no. of moves</td>
<td><input name="yourmove" style="border:none" size="3" value="0" readonly="readonly"></td></tr>
<tr><td colspan="2" align="center">
<input name="btnIns" value="Instructions" onclick="displayIns()" type="button">
<input name="btnRes" value="Restart" onclick="newGame(document.hanoi.diskno)" type="button">
<input name="btnUndo" value="Undo" onclick="unDo(this)" disabled="disabled" type="button">
<input name="btnSolve" value="Solve" onclick="solve(this)" type="button">
</td></tr>
</tbody></table>
<p>&nbsp;</p>
<p>
This DHTML script is featured on <a href="http://www.dynamicdrive.com/dynamicindex12/hanoi.htm" target="_blank">Dynamic Drive</a>.
</p>
</div>

</form>


</body></html>