awesomeify the header

assets/css/browser-solidity.css

@@ -103,19 +103,53 @@ body {
 
 #header {
     font-size: 14px;
-    padding: 1em;
     font-size: 12px;
 }
 
-#header h1 {
-    margin-top: 0;
-}
-
 #header #solIcon {
     float: left;
     height: 5em;
 }
 
+#header #menu {
+    overflow: auto;
+    background-color: #efefef;
+}
+
+
+#header #options {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+#header #options li {
+    color: #333;
+    float: left;
+    padding: 1.2em;
+    font-size: 1.5em;
+    cursor: pointer;
+}
+
+#header #options li.active {
+    background-color: yellow;
+    color: black;
+}
+
+#header #optionViews {
+    clear: both;
+    overflow: auto;
+    padding: 1em;
+}
+#header #optionViews > div {
+    margin-top: 1em;
+    display: none;
+}
+#header #optionViews.txView #txView { display: block; }
+#header #optionViews.settingsView #settingsView { display: block; }
+#header #optionViews.publishView #publishView { display: block; }
+#header #optionViews.envView #envView { display: block; }
+
 #header .info {
     font-family: monospace;
     min-height: 6em;
@@ -138,8 +172,6 @@ body {
 
 #header .origin,
 #header #executionContext {
-    padding: 0.4em 1em;
-    background-color: #efefef;
     display: block;
     margin-top: 0.5em;
     word-wrap: break-word;
@@ -154,6 +186,16 @@ body {
     background-color: transparent;
 }
 
+
+
+
+
+
+
+
+
+
+
 .col1 {
     width: 30%;
     float: left;

index.html

@@ -63,15 +63,35 @@ THE SOFTWARE.
 
 	<div id="righthand-panel">
 		<div id="header">
+			<div id="menu">
 				<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/sol.gif">
-			<div class="info">
-				<div class="version">Solidity version: <span id="version">(loading)</span> <br/>Change to: <select id="versionSelector"></select></div>
+				<ul id="options">
+					<li class="txView active"><i class="fa fa-send"></i></li>
+					<li class="envView"><i class="fa fa-tachometer"></i></li>
+					<li class="publishView"><i class="fa fa-cloud-upload"></i></li>
+					<li class="settingsView"><i class="fa fa-gear"></i></li>
+				</ul>
+			</div>
+			<div id="optionViews" class="txView">
+				<div id="txView">
+					<code class="origin">tx.origin: <span id="txorigin"/></code>
+					<select name="" id="">
+						<option value="">Acc</option>
+					</select>
+					<input type="text" class="gas">
+					<input type="text" class="value">
 				</div>
-			<div id="optimizeBox">
-				<button id="gist" title="Publish all files as public gist on github.com"><i class="fa fa-github"></i> Publish gist</button>
+				<div id="settingsView">
+					<div class="version">Solidity version: <span id="version">(loading)</span> <br/>Change to: <select id="versionSelector"></select></div>
 					<label for="editorWrap"><input id="editorWrap" type="checkbox">Text Wrap</label>
 					<label for="optimize"><input id="optimize" type="checkbox">Enable Optimization</label>
-				<code class="origin">tx.origin: <span id="txorigin"/></code>
+				</div>
+				<div id="publishView">
+					<p><button id="gist" title="Publish all files as public gist on github.com"><i class="fa fa-github"></i> Publish gist</button> Publish all open files to an anonymous github gist.</p>
+
+					<p>Publish to ipfs ...</p>
+				</div>
+				<div id="envView">
 					<span id="executionContext">
 						<label for="vm" title="Execution environment does not connect to any node, everything is local and in memory only.">
 							<input id="vm" type="radio" value="vm" checked name="executionContext">
@@ -83,6 +103,8 @@ THE SOFTWARE.
 						</label>
 					</span>
 				</div>
+				
+			</div>
 		</div>
 		<div id="output"></div>
 	</div>
@@ -164,6 +186,19 @@ THE SOFTWARE.
 	session.setTabSize(4);
 	session.setUseSoftTabs(true);
 
+
+
+	// ----------------- tabbed menu -------------------
+
+	$('#options li').click(function(){
+		var $el = $(this);
+		var cls = /[a-z]+View/.exec( $el.get(0).className )[0];
+		$el.parent().find('li').removeClass('active');
+		$el.addClass('active');
+		$('#optionViews').attr('class', '').addClass(cls);
+		console.log(cls)
+	});
+
 	// ----------------- execution context -------------
 
 	var $vmToggle = $('#vm');