ribbon started

css/main.css

@@ -262,4 +262,30 @@ input.numberInput{
 
 .btn-halfWidth {
     width: 47%;
+}
+
+#navRibbon{
+    height: 30px;
+    width: 300px;
+    z-index: 1;
+    display: block;
+    position: absolute;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    bottom: 35px;
+    opacity: 0.75;
+}
+#navRibbon .btn-toolbar{
+    margin: 0 50px;
+    left: 0;
+    right: 0;
+}
+
+#navRibbon .btn-ribbon{
+    background-color: #444;
+}
+
+#navRibbon .btn-ribbon:hover{
+    background-color: #000;
 }
\ No newline at end of file

js/main.js

@@ -23,6 +23,7 @@ $(function(){
 
     //ui
     new NavBar({model:dmaGlobals.appState});
+    new Ribbon({model:dmaGlobals.appState});
 
     //threeJS View
     new ThreeView({model:dmaGlobals.three, appState:dmaGlobals.appState});

js/menus/Ribbon.js

+/**
+ * Created by fab on 3/18/15.
+ */
+
+
+Ribbon = Backbone.View.extend({
+
+    el: "#navRibbon",
+
+    events: {
+        "click #cellModeToggle":                                    "_toggleCellMode"
+    },
+
+    initialize: function(){
+
+        _.bindAll(this, "render");
+
+        this.listenTo(this.model, "change:cellMode", this.render);
+        this.render();
+    },
+
+    _toggleCellMode: function(e){
+        e.preventDefault();
+        var currentState = dmaGlobals.appState.get("cellMode");
+        var nextState = "cell";
+        if (currentState == "cell"){
+            nextState = "part";
+        }
+        dmaGlobals.appState.set("cellMode", nextState);
+    },
+
+    render: function(){
+        this.$el.html(this.template(this.model.toJSON()));
+    },
+
+    template: _.template('\
+        <div class="btn-toolbar">\
+            <div class="btn-group">\
+              <a id="cellModeToggle" class="btn btn-primary btn-ribbon" href="#fakelink">toggle cell/part view</a>\
+            </div>\
+        </div>\
+        ')
+
+});
\ No newline at end of file

main.html

@@ -71,6 +71,7 @@
     <!--views-->
     <script src="js/menus/MenuWrapperView.js"></script>
     <script src="js/menus/Navbar.js"></script>
+    <script src="js/menus/Ribbon.js"></script>
     <script src="js/menus/LatticeMenuView.js"></script>
     <script src="js/menus/ImportMenuView.js"></script>
     <script src="js/menus/PartMenuView.js"></script>
@@ -171,14 +172,7 @@
 </div>
 
 <div id="menuWrapper"><div id="menuHeader"></div><div id="menuContent"></div></div>
-
-<div id="about" class="row navMenu">
-    <div class="row demo-row">
-        <div class="col-xs-3">
-           Latest code available on github
-        </div>
-    </div>
-</div>
+<div id="navRibbon"></div>
 
 <div id="threeContainer"></div>