Demo updated.

lib/index.html

@@ -39,7 +39,27 @@
     		position: fixed;
     		bottom: 0;
     		left: 0;
+            height: 25px;
+            width: 100%;
     	}
+
+        #controls .m {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        #controls .bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: white;
+            opacity: 0.5;
+        }
     	
     	</style>
 	</head>
@@ -96,7 +116,14 @@
 main();</textarea>
 		<textarea id="translation"></textarea>
 		<textarea id="result"></textarea>
-		<div id="controls"><button id="exec" onclick="exec()">Execute</button><input type="checkbox" id="is_js" onclick="compile()"><label for="is_js">js parser</label></div>
+		<div id="controls">  
+            <div class="bg">&nbsp;</div>
+            <div class="m">
+                <button id="exec" onclick="exec()">Execute</button>
+                <input type="checkbox" id="is_js" onclick="compile()">
+                <label for="is_js">js parser</label>
+                <span id="lenstat"></span>
+            </div>
 	</body>
 	<script>
 		var sourceArea = document.getElementById("source"), 
@@ -140,6 +167,8 @@ main();</textarea>
 				translationArea.value = '';
 				resultArea.value = '';
 			}
+
+            document.querySelector('#lenstat').innerHTML = sourceArea.value.length+" : "+translationArea.value.length+" : "+resultArea.value.length;
 		}
 
 		function exec(){