new tab styles

app/assets/javascripts/backbone/kandan.js.coffee

@@ -66,14 +66,16 @@ window.Kandan =
     })
 
     $("#kandan").tabs 'option', 'tabTemplate', '''
-      <li>
-        <span class="tab_right"></span>
-        <span class="tab_left"></span>
-        <span class="tab_content">
-          <a href="#{href}">#{label}</a>
-          <a href="#" class="close_channel">x</a>
-        </span>
-      </li>
+    <li>
+    <a href="#{href}" class="show_channel">
+      <span class="tab_right"></span>
+      <span class="tab_left"></span>
+      <span class="tab_content">
+        <cite>#{label}</cite>
+        <cite class="close_channel" title="close channel">x</cite>
+      </span>
+    </a>
+    </li>
     '''
 
   initChatArea: (channels)->

app/assets/javascripts/backbone/views/channel_tabs.js.coffee

@@ -2,11 +2,6 @@ class Kandan.Views.ChannelTabs extends Backbone.View
   template: JST['channel_tabs']
   tagName: 'ul'
 
-  events:
-    "click .close_channel" : "deleteChannel"
-    "click #create_channel": "createChannel"
-
-
   render: ()->
     $(@el).html @template({channels: @options.channels})
     @

app/assets/javascripts/backbone/views/chatarea.js.coffee

@@ -3,8 +3,10 @@ class Kandan.Views.ChatArea extends Backbone.View
   render: ->
     tabView = new Kandan.Views.ChannelTabs({channels: @options.channels})
     $('.header .logo').after(tabView.render().el)
-    console.log(tabView);
+
+    # Binding tab events here, backbone can't properly attach
     $('#create_channel').click(tabView.createChannel)
+    $('.header ul a').delegate('.close_channel', 'click', tabView.deleteChannel)
 
     for channel in @options.channels.models
       view = new Kandan.Views.ChannelPane({channel: channel})

app/assets/stylesheets/_base.sass

@@ -19,7 +19,7 @@
   +background-image(linear-gradient($header-bg-1, $header-bg-2))
   z-index: 10
   padding: 0 5px
-  +box-shadow(inset 0px -7px 6px -5px #3a4547)
+  +box-shadow(inset 0px -10px 10px -10px #000000)
   border-bottom: 1px solid #FFF
   margin-top: -2px
 
@@ -30,6 +30,9 @@
   .user_flag
     float: right
 
+cite
+  font-style: normal
+
 .user_flag
   display: block
   border-color: #a8aeb0 transparent transparent transparent

app/assets/stylesheets/_chat_area.sass

@@ -10,22 +10,54 @@
     border: none
     a
       color: $active-tab-color !important
-      &:hover
-        text-decoration: underline
 
 .close_channel
   font-size: 12px
 
 html body .ui-tabs .ui-tabs-nav li
   top: 2px !important
-  margin-right: 5px
-
+  margin-right: 0px !important
 .create_channel
   cursor: hover
 
-.ui-tabs-nav
-
 
+.ui-tabs .ui-tabs-nav
+  .ui-state-default
+    .tab_left, .tab_content, .tab_right
+      display: block
+      height: 30px
+      background: transparent
+    .tab_left, .tab_right
+      width: 30px
+    .tab_left
+      background: url(image_path('tabs/tab-inactive-left.png')) no-repeat
+      float: left
+    .tab_content
+      background: url(image_path('tabs/tab-inactive-middle.png')) repeat-x
+      float: left
+      padding-top: 7px
+      color: #585d5f !important	
+      position: relative	 
+      .close_channel
+        cursor: pointer
+        padding-left: 5px	
+    .tab_right
+      background: url(image_path('tabs/tab-inactive-right.png')) no-repeat
+      float: right
+  .ui-state-active
+    .tab_left
+      background-image: url(image_path('tabs/tab-active-left.png'))
+    .tab_content
+      background-image: url(image_path('tabs/tab-active-middle.png'))
+    .tab_right
+      background-image: url(image_path('tabs/tab-active-right.png'))
+  #create_channel
+    display: block
+    width: 70px
+    height: 30px
+    background: url(image_path('tabs/tab-new.png')) no-repeat top left
+    &:hover
+      background-position-x: -70px
 .ui-tabs
   +border-radius(0px)
   padding: 0px
@@ -39,24 +71,20 @@ html body .ui-tabs .ui-tabs-nav li
     float: left
     padding: 0px !important
     margin-left: 80px
-    margin-bottom: 1px !important
-    li a
+    li span
       font-size: 14px
     .ui-state-default
-      background: #9da7aa
       border: none
-      border-top: 1px solid #bbc2c4
-      +box-shadow(inset 0px -6px 7px -5px #3a4547)	
       color: #7f8587	
+      background: transparent !important
       a
+        padding: 0px !important
         color: $active-tab-color
+        &:hover
+          span.tab_content
+            text-decoration: underline
     .ui-state-active
-      background: $active-tab-bg !important
-      +box-shadow(none)
-      border-top: 1px solid #FFF	
       text-shadow: 0px 0px 2px #FFF
-    li a
-      padding: 3px 8px
   .ui-tabs-panel
     padding: 0px
     padding-right: 20px

app/assets/templates/channel_tabs.jst.eco

@@ -1,11 +1,13 @@
 <% for channel in @channels.models: %>
   <li>
+  <a href="#<%= "channels-#{channel.get('id')}" %>">
     <span class="tab_right"></span>
     <span class="tab_left"></span>
     <span class="tab_content">	
-      <a href="#<%= "channels-#{channel.get('id')}" %>"><%= channel.get('name') %></a>
-      <a href="#" class="close_channel" title="close channel">x</a>
+      <cite><%= channel.get('name') %></cite>
+      <cite class="close_channel" title="close channel">x</cite>
     </span>
+  </a>	
   </li>
 <% end %>
 <%- JST['create_channel']() %>

app/assets/templates/create_channel.jst.eco

@@ -1,3 +1,3 @@
 <li>
-   <a href="#" id="create_channel">+</a>
+   <a href="#" id="create_channel">&nbsp;</a>
 </li>