omg new tab

HTML/css/tabs.css

@@ -16,10 +16,34 @@ iframe { border: 0; }
     padding: 3px 0 0 0;
 }
 
+#tabs .add a {
+    width: 12px;
+    height: 12px;
+
+    margin-top: 2px;
+    margin-left: 10px;
+    padding: 2px;
+
+    font-size: 15px;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: #000 1px 1px 0;
+    background: #d8d7d8;
+    border: 1px solid #a0a0a0;
+    border-bottom: none;
+
+    -webkit-border-top-right-radius: 10px 5px;
+    -webkit-border-top-left-radius: 10px 5px;
+    -webkit-box-shadow: inset 0 1px 0 white;
+}
+#tabs .add span {
+    display: block;
+    margin-top: -4px;
+}
+
 #tabs ul {
     list-style: none;
     border-bottom: 1px solid #a0a0a0;
-
 }
 #tabs ul li { display: inline; }
 
@@ -48,7 +72,6 @@ iframe { border: 0; }
 
     -webkit-border-top-right-radius: 10px 20px;
     -webkit-border-top-left-radius: 10px 20px;
-
     -webkit-box-shadow: inset 1px 1px 0 white;
 
     border: 1px solid #a0a0a0;

HTML/lib/atomicity.coffee

@@ -1,3 +1,5 @@
+# nice!
+
 Chrome.init()
 
 editor = ace.edit "editor"

HTML/lib/tabs.coffee

@@ -16,11 +16,22 @@ if false
     $(this).removeAttr 'style'
 
 # events
-$('#tabs ul a').click ->
+$('#tabs ul li:not(.add) a').live 'click', ->
   $('#tabs ul .active').removeClass()
   $(this).parents('li').addClass 'active'
 
   idx = $('#tabs ul a').index this
   $('.content iframe').hide().eq(idx).show().focus()
 
+  false
+
+$('#tabs .add a').click ->
+  $('#tabs ul .active').removeClass()
+  $('#tabs ul .add').before '<li><a href="#">untitled</a></li>'
+
+  $('.content iframe').hide()
+  $('.content').append '<iframe src="editor.html" width="100%" height="100%"></iframe>'
+
+  $('#tabs ul .add').prev().addClass 'active'
+
   false

HTML/tabs.html

@@ -7,17 +7,12 @@
   <div id="tabs">
     <ul class="clearfix">
       <li class="active"><a href="#">untitled</a></li>
-      <li><a href="#">untitled 2</a></li>
-      <li><a href="#">untitled 3</a></li>
-      <li><a href="#">untitled 4</a></li>
+      <li class="add"><a href="#"><span>+</span></a></li>
     </ul>
   </div>
 
   <div class="content">
     <iframe src="editor.html" width="100%" height="100%"></iframe>
-    <iframe src="editor.html" width="100%" height="100%" style="display:none"></iframe>
-    <iframe src="editor.html" width="100%" height="100%" style="display:none"></iframe>
-    <iframe src="editor.html" width="100%" height="100%" style="display:none"></iframe>
   </div>
 
 <script src="vendor/jquery.js"></script>