Add some tabs

public/red/ui/sidebar.js

@@ -28,8 +28,8 @@ RED.sidebar = function() {
                 var winWidth = $(window).width();
                 sidebarSeparator.start = ui.position.left;
                 sidebarSeparator.width = $("#sidebar").width();
-                sidebarSeparator.chartWidth = $("#chart").width();
-                sidebarSeparator.chartRight = winWidth-$("#chart").width()-$("#chart").offset().left-2;
+                sidebarSeparator.chartWidth = $("#workspace").width();
+                sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
                 sidebarSeparator.closing = false;
             },
             drag: function(event,ui) {
@@ -38,7 +38,7 @@ RED.sidebar = function() {
                 
                 if (newSidebarWidth > 180 && sidebarSeparator.chartWidth+d > 200) {
                     var newChartRight = sidebarSeparator.chartRight-d;
-                    $("#chart").css("right",newChartRight);
+                    $("#workspace").css("right",newChartRight);
                     $("#chart-zoom-controls").css("right",newChartRight+20);
                     $("#sidebar").width(newSidebarWidth);
                 }

public/red/ui/tabs.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright 2013 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+ 
+
+
+RED.tabs = function() {
+    
+    
+    function createTabs(options) {
+        var ul = $("#"+options.id)
+        ul.addClass("red-ui-tabs");
+        ul.children().first().addClass("active");
+        ul.children().addClass("red-ui-tab");
+        
+        if (options.onadd) {
+            var addItem = $('<li class="red-ui-add-tab"/>').appendTo(ul);
+            var addLink = $('<a href="#"><i class="icon icon-plus"></i></a>').appendTo(addItem);
+            
+            addLink.on("click", function() {
+                 options.onadd()
+            });
+        }
+        
+        function onTabClick() {
+            ul.children().removeClass("active");
+            $(this).parent().addClass("active");
+            if (options.onchange) {
+                options.onchange($(this).attr('href'));
+            }
+            return false;
+        }
+        function updateTabWidths() {
+            var tabs = ul.find("li.red-ui-tab");
+            var pct = (100/tabs.size())-2;
+            tabs.css({width:pct+"%"});
+                
+        }
+        ul.find("li.red-ui-tab a").on("click",onTabClick);
+        updateTabWidths();
+        
+        return {
+            addTab: function(tab) {
+                var li = $("<li/>",{class:"red-ui-tab"});
+                
+                if (options.onadd) {
+                    ul.find(".red-ui-add-tab").before(li);
+                } else {
+                    li.appendTo(ul);
+                }
+                var link = $("<a/>",{href:"#"+tab.id}).appendTo(li);
+                link.html(tab.label);
+                link.on("click",onTabClick);
+                updateTabWidths();
+            }
+        }
+    }
+    
+    return {
+        create: createTabs
+    }
+}();

public/red/ui/view.js

@@ -67,6 +67,22 @@ RED.view = function() {
 
     var drag_line = vis.append("svg:path").attr("class", "drag_line");
 
+    var workspace_tabs = RED.tabs.create({
+        id: "workspace-tabs",
+        onadd: function() {
+            workspace_tabs.addTab({id:"tab-5",label:"Workspace 5"});
+        },
+        onchange: function(id) {
+            console.log(id);
+            RED.view.setWorkspace(id.split("-")[1]);
+        }
+    });
+    workspace_tabs.addTab({id:"tab-1",label:"Workspace 1"});
+    workspace_tabs.addTab({id:"tab-2",label:"Workspace 2"});
+    workspace_tabs.addTab({id:"tab-3",label:"Workspace 3"});
+    workspace_tabs.addTab({id:"tab-4",label:"Workspace 4"});
+    
+    
     //d3.select(window).on("keydown", keydown);
 
     function canvasMouseDown() {