eventually will render scene textures

css/main.css

@@ -130,8 +130,9 @@ nav .btn {
 
 #menuContent{
     padding: 30px;
+    height:100%;
     /*min-height:100%;*/
-    overflow-y: auto;
+    /*overflow-y: auto;*/
 }
 
 hr {

js/menus/AnimationMenuView.js

+/**
+ * Created by aghassaei on 2/1/15.
+ */
+
+
+AnimationMenuView = Backbone.View.extend({
+
+    el: "#menuContent",
+
+    events: {
+        "click .sceneType":                         "_changeScene"
+    },
+
+    initialize: function(options){
+
+        this.appState = options.appState;
+
+        //bind events
+        this.listenTo(this.model, "change:currentScene", this.render);
+    },
+
+    _changeScene: function(e){
+        e.preventDefault();
+        this.model.set("currentScene", $(e.target).data("type"));
+    },
+
+    render: function(){
+        if (this.appState.get("currentTab") != "animate") return;
+//        this.$el.html(this.template(this.model.attributes));
+    },
+
+    template: _.template('\
+        Scene:   \
+        <div class="btn-group">\
+            <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allScenes[currentScene] %><span class="caret"></span></button>\
+            <ul role="menu" class="dropdown-menu">\
+                <% _.each(_.keys(allScenes), function(key){ %>\
+                    <li><a class="sceneType" data-type="<%= key %>" href="#"><%= allScenes[key] %></a></li>\
+                <% }); %>\
+            </ul>\
+        </div><br/><br/>\
+        ')
+
+});
\ No newline at end of file

js/menus/MenuWrapperView.js

@@ -21,6 +21,7 @@ MenuWrapper = Backbone.View.extend({
         this.sketchMenu = new SketchMenuView({model:options.lattice, appState:this.model});
         this.partMenu = new PartMenuView({model:options.lattice, appState:this.model});
         this.scriptMenu = new ScriptMenuView({appState:this.model});
+        this.animationMenu = new AnimationMenuView({model:options.lattice.get("basePlane"), appState:this.model});
 
         this.lattice = options.lattice;
 
@@ -65,6 +66,8 @@ MenuWrapper = Backbone.View.extend({
             this.partMenu.render();
         } else if (tabName == "script"){
             this.scriptMenu.render();
+        } else if (tabName == "animate"){
+            this.animationMenu.render();
         } else {
             console.warn("no tab initialized!");
             $("#menuContent").html('Something goes here eventually.');//clear out content from menu

js/models/BasePlane.js

@@ -11,10 +11,15 @@ BasePlane = Backbone.Model.extend({
         dimX: 100,
         dimY: 100,
         material: new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.2, wireframe:true, side:THREE.DoubleSide}),
+        currentScene: "default",
+        allScenes: {default:"Default", "mars":"Mars"}
     },
 
     initialize: function(options){
 
+        //bind events
+        this.listenTo(this, "change:currentScene", this._renderForCurrentScene);
+
         //draw mesh
         this.set("mesh", this._makeBasePlaneMesh(options.cellType, options.connectionType));
         this.updateScale(options.scale);
@@ -22,6 +27,10 @@ BasePlane = Backbone.Model.extend({
 
     },
 
+    _renderForCurrentScene: function(){
+        console.log("amanda");
+    },
+
     updateGeometry: function(cellType, connectionType, scale){
         this._removeMesh();
         this.set("mesh", this._makeBasePlaneMesh(cellType, connectionType));

main.html

@@ -66,6 +66,7 @@
     <script src="js/menus/PartMenuView.js"></script>
     <script src="js/menus/SketchMenuView.js"></script>
     <script src="js/menus/ScriptMenuView.js"></script>
+    <script src="js/menus/AnimationMenuView.js"></script>
     <script src="js/menus/exportMenu.js"></script>
 
     <script src="js/threeViews/Highlighter.js"></script>