<!----------------------------------------------------------------------------
** Program    : HanoiTower_23.html
** Description: solve problem Hanoi Tower
** Author     : David Kent Lee
** Start      : 2017.09.03
** End        : 2017.09.03
-------------------------------------------------------------------------------
** Version 23:# COMPLETE VERSION
              # inherit from version 22
              # remove the gridline
				  # set maximal number of disk to 9
** Version 22:# COMPLETE VERSION
              # inherit from version 18
              # implement 'About' & 'Tiếng Việt' buttons
** Version 21:# INCOMPLETE VERSION
              # inherit from version 20
              # user can choose another disk number on the fly
              # modify 'movVer(DY,t0)' & 'movHor(DX,t0)' 'movTo(x0,y0,key)'trying to reduce the size
                of array 'timeOuts[]' each time the disk moves via exclude its elements by their values
** Version 20:# INCOMPLETE VERSION
              # inherit from version 19
              # user can choose another disk number on the fly
              # modify 'movVer(DY,t0)' & 'movHor(DX,t0)' 'movTo(x0,y0,key)'trying to reduce the size
                of array 'timeOuts[]' each time the disk moves via exclude its elements by their indexes (keys)
** Version 19:# INCOMPLETE VERSION
              # inherit from version 18
              # user can choose another disk number on the fly
              # modify 'movVer(DY,t0)' & 'movHor(DX,t0)' trying to reduce the size
                of array 'timeOuts[]' each time the disk moves
** Version 18:# COMPLETE VERSION
              # inherit from version 17
              # user can choose another disk number on the fly
              # implement variable 'timeOuts[]' and function 'clearAllTimeOuts()'
** Version 17:# COMPLETE VERSION
              # inherit from version 15
              # Object Oriented Approach
              # implement GUI for program
              # after a play is done, user can choose another disk number
** Version 16:# PLAY-AROUND VERSION
              # inherit from version 15
              # Object Oriented Approach
** Version 15:# COMPLETE VERSION
              # inherit from version 14
              # Object Oriented Approach
              # simplify functions 'drawHorLine()' & 'drawVerLine()'
** Version 14:# COMPLETE VERSION
              # inherit from version 13
              # Object Oriented Approach
              # implement object method 'moving(height,distance,depth)' simulating
                the way the disk flies from one column to another
              # working with 'moveDisk()' & 'moving()'
** Version 13:# COMPLETE VERSION
              # inherit from version 12
              # Object Oriented Approach
              # rename 'showDisk()' -> 'show()', 'hideDisk()' -> 'hide()', 
                       'moveDisk()' -> 'movTo()', 'diskMoveHor()' -> 'movHor()', 'diskMoveVer()'-> 'movVer()'
              # implement object method 'addX()' & 'addY()'
** Version 12:# COMPLETE VERSION
              # inherit from version 11
              # Object Oriented Approach
              # convert 'showDisk()', 'hideDisk()', 'moveDisk()', 'diskMoveHor()', 'diskMoveVer()' to object methods of disks
              # implement object method 'setXY()'
** Version 11:# COMPLETE VERSION
              # inherit from version 10
              # working with 
                'showDisk()', 'hideDisk()', 'moveTo()', 'diskMoveHor()', 'diskMoveVer()', 'proceed()'
                simplify & modify them
** Version 10:# COMPLETE VERSION
              # inherit from version 9
              # working with 'movingDisk()' function
** Version 09:# DEVELOPPING VERSION
              # inherit from version 9
              # working with function 'proceed()' parameterizing it
              # try to moving 2 disks forth and back
** Version 08:# DEVELOPPING VERSION
              # inherit from version 7
              # working with function 'proceed()' parameterizing it
              # try to moving 2 disks
** Version 07:# DEVELOPPING VERSION
              # inherit from version 6
              # working with function 'proceed()' parameterizing it
** Version 06:# DEVELOPPING VERSION
              # inherit from version 3, come back to use the built-in function
                'setTimeout()'
              # implement following functions 
                'showDisk()', 'hideDisk()', 'moveTo()', 'diskMoveHor()', 'diskMoveVer()', 'proceed()'
              # successfully moving a disk from col 0 to col 1  
** Version 05:# INCOMPLETE VERSION
              # try to output graphically
              # what's done:
                 * try to define a 'delay()' function replacing 
                   the built-in 'setTimeout()'
                 * correct error t1 = date.getTime() & t2 = date.getTime() via
                                 t1 = new Date.getTime() & t2 = new Date.getTime()
                 * however it's not working
** Version 04:# INCOMPLETE VERSION
              # try to output graphically
              # what's done:
                 * try to define a 'delay()' function replacing 
                   the built-in 'setTimeout()'
                 * error t1 = date.getTime() & t2 = date.getTime()
** Version 03:# INCOMPLETE VERSION
              # try to output graphically
              # what's done:
                 * try to move the disk (so so)
** Version 02:# INCOMPLETE VERSION
              # try to output graphically
              # what's done:
                 * set up a plane
                 * draw the columns
                 * show & hide disk (not moving yet)
** Version 01:# first coding
              # output via texting
------------------------------------------------------------------------------>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hanoi Tower 23</title>
    <style>
	   body{
		   background-image:url(bgr/yellow.jpg);
		   background-color:#FFFFEF;
		   color:#00F;
		   font-size:24px;
			text-align:center;
	   }
	   p{
		   color:#00F;
		   font-size:36px;
	   }
	   h1{
		   color:#630;
	   }
	   table{
   	    border-collapse:collapse;
		 }
		 td{
			 /*border:thin inset #EEE;*/
			 border-width:0;
			 border-style:inset;
			 border-color:#DDD;
		 }
	</style>
    <script>
	   cellWid = 15; // px
		cellHei = 12; // px
		occupied = 500; // px
		base = 0;
		xMax = Math.floor( ( screen.availWidth - 1 ) / ( cellWid + 1 ) ) - 1;
		yMax = Math.round( ( screen.availHeight - occupied - 1 ) / (cellHei + 1 ) )- 1;
		y_floor = yMax - base;
		
		colNum = 3;
		colThickness = 1 // in cells
   	space = 5; // in cells
		maxDiskRadiusInCell = Math.round( ( xMax - ( colNum + 1 ) * space  - colNum * colThickness ) / colNum / 2 );
		cenDis = space + 2 * maxDiskRadiusInCell + colThickness;
		column = new Array();
	    for(i = 0; i < colNum; i++){
		   column[i] = new Object();
		   column[i].disk = new Array();
		   column[i].x = space + maxDiskRadiusInCell + colThickness + i * cenDis - 1; // in cells			
	    }
		 
		dt = 20;
		delayTime = 0;
		more = 500;
		timeOuts = [];
		
		lang = 0 // English
		msg();

	   function move(n,A,B,C){
		   if (n==0) return;
		   move(n-1,A,C,B);
		   moveDisk(A,C);
		   move(n-1,B,A,C);   
	   }
	   
	   function moveDisk(fromCol,toCol){ 
		  var HIGHEST = y_floor;
   		var fromLen = column[fromCol].disk.length;
			var toLen = column[toCol].disk.length;
			var fromLast = fromLen - 1;
			var hei = HIGHEST - fromLen * diskThickness;
			var dist = ( toCol - fromCol ) * cenDis;
			var depth = HIGHEST - ( toLen + 1 ) * diskThickness;
	      var lastDisk = column[fromCol].disk[fromLast];
			lastDisk.moving(hei,dist,depth);
			column[toCol].disk.push(lastDisk);
			column[fromCol].disk.length--;
	   }
		
		function moving(hei,dis,dep){
		   delayTime += more;
			this.movVer(-hei,delayTime);
   		delayTime += hei*dt;
			this.addY(-hei);
		
			this.movHor(dis,delayTime);
			delayTime += Math.abs(dis)*dt;
			this.addX(dis);
				
			this.movVer(dep,delayTime);
			delayTime += dep*dt;
			this.addY(dep);
	   }
		
		function clearAllTimeOuts(){
			for(var i = 0; i < timeOuts.length; i++ ){
				clearTimeout(timeOuts[i]);
			}
		}
		
		function proceed(diskNum){
			 column[0].disk.length = column[1].disk.length = column[2].disk.length = 0;
			 if ( typeof disk != "undefined" ) disk.length = 0;
			 delayTime = 0;
			 clearAllTimeOuts();
			 timeOuts.length = 0;
			 
			 drawPlane(xMax,yMax,cellWid,cellHei);
			 creaDisk(diskNum);
			 init(diskNum);
			 
			 var fromCol = 0;
			 var toCol   = 2;
			 var viaCol  = 1;
			 move(diskNum,fromCol,viaCol,toCol);
		}
		
		function creaDisk(diskNum){
	      disk = new Array();
		   for(var i = 0; i < diskNum; i++){
		      disk[i] = new Object();
	       }
		   
		   var COLOR = ["red","green","gray","blue","black"];
		   for(i = 0; i < diskNum; i++){
			  disk[i].color = COLOR[ i % COLOR.length ];
		   }
		
		   dec = 1;
		   disk[0].radius = maxDiskRadiusInCell;
		   for(i = 1; i < diskNum; i++){
		      disk[i].radius = disk[i-1].radius - dec;
	       }
		
		   for(i = 0; i < diskNum; i++){
				disk[i].setXY = setXY;
				disk[i].addX = addX;
				disk[i].addY = addY;
				disk[i].show = show;
				disk[i].hide = hide;
				disk[i].movTo = movTo;
				disk[i].movVer = movVer;
				disk[i].movHor = movHor;
				disk[i].moving = moving;
	       }
		
		   diskThickness = 2; // cell
		}
		
		function init(diskNum){
		   for( var k = 0; k < diskNum; k++ ){
				x0 = column[0].x - disk[k].radius;
				y0 = y_floor - k * diskThickness;
				disk[k].setXY(x0,y0);
				column[0].disk.push(disk[k]);
				disk[k].show();
			}
		}
		
		function setXY(x,y){
			this.x = x;
			this.y = y;
		}
		
		function addX(dx){
			this.x += dx;
		}

		function addY(dy){
			this.y += dy;
		}
		
		function movVer(DY,t0){
			if ( DY == 0 ) return;
			var dy = DY > 0 ? 1 : -1;
			for( var Dy = 0; Dy != DY + dy; Dy += dy ){
				var d = Math.abs(Dy);
				timeOuts[timeOuts.length] = setTimeout(this.movTo.bind(this),t0+d*dt,this.x,this.y+Dy);
			}
		}
		
		function movHor(DX,t0){
			if ( DX == 0 ) return;
			var dx = DX > 0 ? 1 : -1;
			for( var Dx = 0; Dx != DX + dx; Dx += dx ){
				var d = Math.abs(Dx);
				timeOuts[timeOuts.length] = setTimeout(this.movTo.bind(this),t0+d*dt,this.x+Dx,this.y);
			}
		}
		
		function movTo(x0,y0){
			this.hide();
			this.setXY(x0,y0);
			this.show();
		}
		
		function hide(){
			var diameter = this.radius * 2 + colThickness;
			for( var y = this.y; y > this.y - diskThickness; y-- ){
				drawHorLine(this.x,this.x+diameter-1,y,'transparent');
			}
		}
			
		function show(){
			var diameter = this.radius * 2 + colThickness;
			for( var y = this.y; y > this.y - diskThickness; y-- ){
				drawHorLine(this.x,this.x+diameter-1,y,this.color);
			}
		}

		function drawPlaneTxt(xMax,yMax,cellWid,cellHei){ 
		   var tableWid = cellWid * xMax + ( xMax + 1 );
			var txt = "";
		   txt += "<table style='width:" + tableWid + "px' align='center'>";
		   for(var y = 0; y <= yMax; y++){
			   txt += "<tr >";
			   for(var x = 0; x <= xMax; x++){
				   txt += "<td id='" + x + "-" + y + "' style='height:" + cellHei + "px" + ";" + "width:" + cellWid + "px" + ";'>";
					txt += "</td>";
			   }
			   txt += "</tr>";			   
		   }
		   txt += "</table>";
		   return txt;
	   }
	   
	   function drawPlane(xMax,yMax,cellWid,cellHei){ 
		  document.getElementById("show-result").innerHTML = drawPlaneTxt(xMax,yMax,cellWid,cellHei);
	   }
	   
	   
	   
	   function drawPlaneTxt(xMax,yMax,cellWid,cellHei){ 
		   var tableWid = cellWid * xMax + ( xMax + 1 );
			var txt = "";
		   txt += "<table style='width:" + tableWid + "px' align='center'>";
		   for(var y = 0; y <= yMax; y++){
			   txt += "<tr >";
			   for(var x = 0; x <= xMax; x++){
				   txt += "<td id='" + x + "-" + y + "' style='height:" + cellHei + "px" + ";" + "width:" + cellWid + "px" + ";'>";
					txt += "</td>";
			   }
			   txt += "</tr>";			   
		   }
		   txt += "</table>";
		   return txt;
	   }
	   
	   
		
		function drawHorLine(x1,x2,y,color){
			var mini = Math.min(x1,x2);
			var maxi = Math.max(x1,x2);
			for( var x = mini; x <= maxi; x++ ){
				if ( safe(x,y) ){
					document.getElementById(x + "-" + y).style.backgroundColor = color;
				}
			}
	   }
		
		function drawVerLine(y1,y2,x,color){
			var mini = Math.min(y1,y2);
			var maxi = Math.max(y1,y2);			
			for( var y = mini; y <= maxi; y++ ){
				if ( safe(x,y) ){
					document.getElementById(x + "-" + y).style.backgroundColor = color;
				}
			}
	   }
		
      function safe(x,y){
		   return x >= 0 && x <= xMax && y >= 0 && y <= yMax;
	   }
		
		function safeX(x){
		   return x >= 0 && x <= xMax;
	   }
		
		function safeY(y){
		   return y >= 0 && y <= yMax;
	   }
		
		function msg(){
			txtIntro = ["Tower of Hanoi","Tháp Hà Nội"];
			txtDesc  = ["This program solve problem Tower of Hanoi by moving disks from one rod to another rod using the third rod as intermediary such that smaller disks is always on top of the bigger ones.",
							"Chương trình này giải bài toán Tháp Hà Nội bằng cách chuyển đĩa từ cột này sang cột khác dùng cột thứ ba làm trung gian sao cho đĩa nhỏ luôn luôn nằm trên đĩa lớn."];
			txtEnter  = ["Enter the number of disks:",
							"Nhập vào số đĩa:"]
			btnLang = ["Tiếng Việt", "English"];
			btnAbout = ["About", "Tác giả"];
			msgAbout = ["This program was written by David Kent Lee, July 7, 2016\n\u00A9 David Lee, 2016. All rights reserved.","Tác giả Nguyễn Vũ Duy Linh\nNgày hoàn tất 07-07-2016\n\u00A9 Tác giả giữ bản quyền."];
		}
		
	   function language(){
		   lang = 1 - lang;
		   
		   document.getElementById("btn-lang").value = btnLang[lang];
		   document.getElementById("btn-about").value = btnAbout[lang];
		   document.getElementById("txt-intro").innerHTML = txtIntro[lang];
			document.getElementById("txt-enter").innerHTML = txtEnter[lang];
		   document.getElementById("txt-desc").innerHTML = txtDesc[lang];

		   var txt = document.getElementById("show-result").innerHTML;
		   txt = txt.replace( new RegExp( wordSolution[1-lang],"g" ),wordSolution[lang] );
		   txt = txt.replace( new RegExp( wordNoSolution[1-lang],"g" ),wordNoSolution[lang] );
		   document.getElementById("show-result").innerHTML = txt;
	   }
	   
	   function about(){
		   alert(msgAbout[lang]);
	   }
    </script>
</head>

<body>
<p style="text-align:right; font-size:12px"><input type="button" id="btn-lang" value="Tiếng Việt" onClick="language()">
       <input type="button" id="btn-about" value="About" onClick="about()"></p>
    <p id="txt-intro" style="text-align:center">Tower of Hanoi</p>
    <p id="txt-desc" style="text-align:center; font-size:24px; color:#630; font-style:italic; ">This program solves problem Tower of Hanoi by moving disks from one rod to another rod using the third rod as intermediary such that smaller disks is always on top of the bigger ones.</p>
    <span id="txt-enter">Enter the number of disks:</span>
   <select id="fruit" onChange="proceed( parseInt(this.value) )">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3" selected>3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
   </select>
   <h1 id="show-result" ></h1>
   <script>proceed(3);</script>
</body></html>