update user interface

scripts/main.js

@@ -20,6 +20,7 @@ require(
 		'src/import-button',
 		'src/random-button',
 		'src/upload-imgur',
+		'src/intro',
 		'util/feature-test',
 		'lib/signals-1.0.0'
 	],
@@ -33,6 +34,7 @@ require(
 		import_button,
 		random_button,
 		imgur,
+		intro,
 		testFeatures,
 		Signal
 	)
@@ -62,6 +64,7 @@ require(
 			image.init( shared );
 			file.init( shared );
 			imgur.init( shared );
+			intro.init( shared );
 		}
 
 		function showError( required_features )

scripts/src/intro.js

@@ -0,0 +1,47 @@
+/*global define*/
+define(
+	function()
+	{
+		var signals;
+		var is_open = true;
+		var element = document.querySelectorAll( '.intro' )[0];
+		var button = document.querySelectorAll( '.intro-button' )[0];
+		var close_button = element.querySelectorAll( '.close' )[0];
+
+		function init( shared )
+		{
+			signals = shared.signals;
+			button.addEventListener( 'click', buttonClicked );
+			close_button.addEventListener( 'click', close );
+		}
+
+		function buttonClicked( event )
+		{
+			if ( is_open )
+			{
+				close();
+			}
+
+			else
+			{
+				open();
+			}
+		}
+
+		function open()
+		{
+			button.classList.add( 'is-active' );
+			element.classList.add( 'is-active' );
+			is_open = true;
+		}
+
+		function close()
+		{
+			button.classList.remove( 'is-active' );
+			element.classList.remove( 'is-active' );
+			is_open = false;
+		}
+
+		return { init: init };
+	}
+);