update ui;

add open and close button to ui;
close intro when new image is uploaded;

index.html

@@ -55,7 +55,8 @@
 			<canvas id="canvas"></canvas>
 			<article class="content intro is-active">
 				<div class="center">
-					<p>drag an image into the browser window to modify it. this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corrupted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p>
+					<p>drag an image into the browser window to modify it.</p>
+					<p>this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corrupted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p>
 					<p>if you like this one, you can check out some of his other <a href="http://snorpey.github.io/experiments/">javascript experiments</a>.</p>
 					<button class="close">✕</button>
 				</div>

scripts/main.js

@@ -51,6 +51,7 @@ require(
 					'set-new-src'              : new Signal(),
 					'control-set'              : new Signal(),
 					'control-updated'          : new Signal(),
+					'close-intro'              : new Signal(),
 					'image-data-url-requested' : new Signal()
 				}
 			};

scripts/src/dragdrop.js

@@ -34,6 +34,7 @@ define(
 			)
 			{
 				signals['load-file'].dispatch( event.dataTransfer.files[0] );
+				signals['close-intro'].dispatch();
 			}
 		}
 

scripts/src/import-button.js

@@ -50,6 +50,7 @@ define(
 			)
 			{
 				signals['load-file'].dispatch( event.target.files[0] );
+				signals['close-intro'].dispatch();
 			}
 		}
 

scripts/src/intro.js

@@ -13,6 +13,7 @@ define(
 			signals = shared.signals;
 			button.addEventListener( 'click', buttonClicked );
 			close_button.addEventListener( 'click', close );
+			signals['close-intro'].add( close );
 		}
 
 		function buttonClicked( event )

styles/main.css

@@ -129,6 +129,7 @@ a:hover {
 	background-color: transparent;
 	border: none;
 	color: #06f;
+	cursor: pointer;
 }
 
 .intro-button {
@@ -300,7 +301,6 @@ a:hover {
 
 .canvas-wrapper {
 	width: 100%;
-	margin-top: 30px;
 	position: relative;
 	background-color: rgba(255, 255, 255, 0.9);
 	line-height: 1.7;