From fda26796ed252eb8062ec72ab56d4742f6306769 Mon Sep 17 00:00:00 2001
From: "Mr.doob" <info@mrdoob.com>
Date: Sun, 13 Nov 2011 13:01:57 +0100
Subject: [PATCH] Added fullscreen button.

---
 build/index.html | 42 ++++++++++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/build/index.html b/build/index.html
index 5891052..ff30cfc 100644
--- a/build/index.html
+++ b/build/index.html
@@ -39,14 +39,6 @@
 
 			}
 
-			#tools {
-
-				position: absolute;
-				top: 25px;
-				left: 25px;
-
-			}
-
 			button, select {
 
 				padding: 8px 12px 8px 12px;
@@ -117,8 +109,9 @@
 			// Greetings to Iq/RGBA! ;)
 
 			var quality = 2, quality_levels = [ 0.5, 1, 2, 4, 8 ];
-			var code, canvas, gl, buffer, currentProgram, compileButton,
-			vertex_position, parameters = { start_time: Date.now(), time: 0, mouseX: 0, mouseY: 0, screenWidth: 0, screenHeight: 0 };
+			var toolbar, compileButton, fullscreenButton;
+			var code, canvas, gl, buffer, currentProgram, vertex_position,
+			parameters = { start_time: Date.now(), time: 0, mouseX: 0, mouseY: 0, screenWidth: 0, screenHeight: 0 };
 
 			init();
 			animate();
@@ -197,9 +190,22 @@
 
 				//
 
-				var tools = document.createElement( 'div' );
-				tools.id = 'tools';
-				document.body.appendChild( tools );
+				toolbar = document.createElement( 'div' );
+				toolbar.style.position = 'absolute';
+				toolbar.style.top = '25px';
+				toolbar.style.left = '25px';
+				document.body.appendChild( toolbar );
+
+				fullscreenButton = document.createElement( 'button' );
+				fullscreenButton.style.position = 'absolute';
+				fullscreenButton.style.right = '0px';
+				fullscreenButton.textContent = 'fullscreen';
+				fullscreenButton.addEventListener( 'click', function ( event ) {
+
+					document.body.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );
+
+				}, false );
+				toolbar.appendChild( fullscreenButton );
 
 				var button = document.createElement( 'button' );
 				button.textContent = 'hide code';
@@ -211,6 +217,7 @@
 						code.style.visibility = 'hidden';
 						select.style.visibility = 'hidden';
 						compileButton.style.visibility = 'hidden';
+						fullscreenButton.style.visibility = 'hidden';
 
 					} else {
 
@@ -218,11 +225,12 @@
 						code.style.visibility = 'visible';
 						select.style.visibility = 'visible';
 						compileButton.style.visibility = 'visible';
+						fullscreenButton.style.visibility = 'visible';
 
 					}
 
 				}, false );
-				tools.appendChild( button );
+				toolbar.appendChild( button );
 
 				var select = document.createElement( 'select' );
 
@@ -242,7 +250,7 @@
 
 				}, false );
 
-				tools.appendChild( select );
+				toolbar.appendChild( select );
 
 				compileButton = document.createElement( 'button' );
 				compileButton.textContent = 'compile';
@@ -251,7 +259,7 @@
 					compile();
 
 				}, false );
-				tools.appendChild( compileButton );
+				toolbar.appendChild( compileButton );
 
 				// Initialise WebGL
 
@@ -432,6 +440,8 @@
 
 			function onWindowResize( event ) {
 
+				toolbar.style.width = window.innerWidth - 47 + 'px';
+
 				code.style.top = '75px';
 				code.style.left = '25px';
 				code.style.width = ( window.innerWidth - 75 ) + 'px';