From 2719307352c07c5bbf24ff8388c09cec3b4b471f Mon Sep 17 00:00:00 2001
From: Amanda Ghassaei <amandaghassaei@gmail.com>
Date: Mon, 26 Jan 2015 20:21:22 -0500
Subject: [PATCH] adding in menus

---
 css/main.css                        |  53 ++++-
 dependencies/flatUI/css/flat-ui.css | 340 ++++++++++++++--------------
 js/menus/LatticeMenuView.js         |  26 +++
 js/menus/MenuWrapper.js             |  12 +
 js/menus/navbar.js                  |  12 +-
 js/models/threeModel.js             |   1 +
 main.html                           |  15 +-
 7 files changed, 273 insertions(+), 186 deletions(-)
 create mode 100644 js/menus/LatticeMenuView.js
 create mode 100644 js/menus/MenuWrapper.js

diff --git a/css/main.css b/css/main.css
index 9266bd8c..2456cac3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -8,6 +8,7 @@ body {
     margin-bottom:0;
     z-index: 2;
     border-radius: 0;
+    opacity:0.8;
 }
 
 .navMenu {
@@ -33,12 +34,6 @@ body {
     padding:30px;
 }
 
-.dropdown-menu {
-    margin-top: 0!important;
-    border-top-left-radius: 0!important;
-    border-top-right-radius: 0!important;
-}
-
 nav .btn {
     margin-top: 5px;
 }
@@ -68,7 +63,22 @@ nav .btn {
     width: 100%!important;
 }
 
-/*import menu*/
+#threeContainer {
+    top: 0px;
+    position: absolute;
+}
+
+#menuWrapper {
+    min-width: 400px;
+    height: 100%;
+    z-index: 2;
+    position: absolute;
+    display: block;
+    background-color: rgba(255,255,255,0.8);
+    right: 0;
+}
+
+/*menus*/
 
 .slider-selection {
 	background: #BABABA;
@@ -76,4 +86,31 @@ nav .btn {
 
 #STLImportStats {
     display: none;
-}
\ No newline at end of file
+}
+
+.dropdown-menu {
+    margin-top: 0!important;
+    border-top-left-radius: 0!important;
+    border-top-right-radius: 0!important;
+}
+
+.nav-tabs .active a{
+    background-color: transparent !important;
+    border-width:2px !important;
+    border-bottom-color: transparent!important;
+}
+
+.nav-tabs{
+    border-width: 0 !important;
+}
+
+.nav-tabs li a{
+    border-bottom: 2px solid #DDD!important;
+}
+
+.nav-tabs li{
+    /*width:100%;*/
+    margin-bottom: -2px;
+
+}
+
diff --git a/dependencies/flatUI/css/flat-ui.css b/dependencies/flatUI/css/flat-ui.css
index 2452fab3..73b304e6 100755
--- a/dependencies/flatUI/css/flat-ui.css
+++ b/dependencies/flatUI/css/flat-ui.css
@@ -364,18 +364,18 @@ body {
   font-family: "Lato", Helvetica, Arial, sans-serif;
   font-size: 18px;
   line-height: 1.72222;
-  color: #34495e;
+  color: #444;
   background-color: #fff;
   }
 a {
-  color: #16a085;
+  color: #80b2f5;
   text-decoration: none;
   -webkit-transition: .25s;
           transition: .25s;
   }
 a:hover,
 a:focus {
-  color: #1abc9c;
+  color: #80b2f5;
   text-decoration: none;
   }
 a:focus {
@@ -500,7 +500,7 @@ small,
   color: #fff;
   }
 .text-primary {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 a.text-primary:hover {
   color: #148f77;
@@ -531,7 +531,7 @@ a.text-info:hover {
   }
 .bg-primary {
   color: #fff;
-  background-color: #34495e;
+  background-color: #444;
   }
 a.bg-primary:hover {
   background-color: #222f3d;
@@ -644,7 +644,7 @@ kbd {
   padding: 2px 6px;
   font-size: 85%;
   color: #fff;
-  background-color: #34495e;
+  background-color: #444;
   border-radius: 4px;
   box-shadow: none;
   }
@@ -684,11 +684,11 @@ pre {
 a.thumbnail:hover,
 a.thumbnail:focus,
 a.thumbnail.active {
-  border-color: #16a085;
+  border-color: #80b2f5;
   }
 .thumbnail .caption {
   padding: 9px;
-  color: #34495e;
+  color: #444;
   }
 .btn {
   padding: 10px 15px;
@@ -784,7 +784,7 @@ fieldset[disabled] .btn-default.active {
   }
 .btn-primary {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .btn-primary:hover,
 .btn-primary.hover,
@@ -799,8 +799,8 @@ fieldset[disabled] .btn-default.active {
 .btn-primary:active,
 .btn-primary.active,
 .open > .dropdown-toggle.btn-primary {
-  background: #16a085;
-  border-color: #16a085;
+  background: #80b2f5;
+  border-color: #80b2f5;
   }
 .btn-primary.disabled,
 .btn-primary[disabled],
@@ -821,10 +821,10 @@ fieldset[disabled] .btn-primary:active,
 .btn-primary[disabled].active,
 fieldset[disabled] .btn-primary.active {
   background-color: #bdc3c7;
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   }
 .btn-primary .badge {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: #fff;
   }
 .btn-info {
@@ -1009,7 +1009,7 @@ fieldset[disabled] .btn-warning.active {
   }
 .btn-inverse {
   color: #fff;
-  background-color: #34495e;
+  background-color: #444;
   }
 .btn-inverse:hover,
 .btn-inverse.hover,
@@ -1046,10 +1046,10 @@ fieldset[disabled] .btn-inverse:active,
 .btn-inverse[disabled].active,
 fieldset[disabled] .btn-inverse.active {
   background-color: #bdc3c7;
-  border-color: #34495e;
+  border-color: #444;
   }
 .btn-inverse .badge {
-  color: #34495e;
+  color: #444;
   background-color: #fff;
   }
 .btn-embossed {
@@ -1065,11 +1065,11 @@ fieldset[disabled] .btn-inverse.active {
   padding-left: 30px;
   }
 .btn-link {
-  color: #16a085;
+  color: #80b2f5;
   }
 .btn-link:hover,
 .btn-link:focus {
-  color: #1abc9c;
+  color: #80b2f5;
   text-decoration: underline;
   background-color: transparent;
   }
@@ -1306,7 +1306,7 @@ label {
   font-family: "Lato", Helvetica, Arial, sans-serif;
   font-size: 15px;
   line-height: 1.467;
-  color: #34495e;
+  color: #444;
   border: 2px solid #bdc3c7;
   border-radius: 6px;
   box-shadow: none;
@@ -1317,7 +1317,7 @@ label {
 .form-control:focus,
 .form-group.focus .select2-search input[type="text"],
 .select2-search input[type="text"]:focus {
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   outline: 0;
   box-shadow: none;
   }
@@ -1344,7 +1344,7 @@ fieldset[disabled] .select2-search input[type="text"] {
   }
 .form-control.flat:focus,
 .select2-search input[type="text"].flat:focus {
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   }
 .input-sm,
 .form-group-sm .form-control,
@@ -1765,23 +1765,23 @@ select[multiple].input-group-sm > .select2-search input[type="text"] {
   }
 .form-group.focus .input-group-addon,
 .input-group.focus .input-group-addon {
-  background-color: #1abc9c;
-  border-color: #1abc9c;
+  background-color: #80b2f5;
+  border-color: #80b2f5;
   }
 .form-group.focus .input-group-btn > .btn-default + .btn-default,
 .input-group.focus .input-group-btn > .btn-default + .btn-default {
-  border-left-color: #16a085;
+  border-left-color: #80b2f5;
   }
 .form-group.focus .input-group-btn .btn,
 .input-group.focus .input-group-btn .btn {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: #fff;
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   }
 .form-group.focus .input-group-btn .btn-default,
 .input-group.focus .input-group-btn .btn-default {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .form-group.focus .input-group-btn .btn-default:hover,
 .input-group.focus .input-group-btn .btn-default:hover,
@@ -1805,8 +1805,8 @@ select[multiple].input-group-sm > .select2-search input[type="text"] {
 .input-group.focus .input-group-btn .btn-default.active,
 .open > .dropdown-toggle.form-group.focus .input-group-btn .btn-default,
 .open > .dropdown-toggle.input-group.focus .input-group-btn .btn-default {
-  background: #16a085;
-  border-color: #16a085;
+  background: #80b2f5;
+  border-color: #80b2f5;
   }
 .form-group.focus .input-group-btn .btn-default.disabled,
 .input-group.focus .input-group-btn .btn-default.disabled,
@@ -1845,11 +1845,11 @@ fieldset[disabled] .input-group.focus .input-group-btn .btn-default:active,
 fieldset[disabled] .form-group.focus .input-group-btn .btn-default.active,
 fieldset[disabled] .input-group.focus .input-group-btn .btn-default.active {
   background-color: #bdc3c7;
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   }
 .form-group.focus .input-group-btn .btn-default .badge,
 .input-group.focus .input-group-btn .btn-default .badge {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: #fff;
   }
 .input-group-btn .btn {
@@ -2073,7 +2073,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .radio input[type="checkbox"].custom-checkbox:checked + .icons,
 .checkbox input[type="radio"].custom-radio:checked + .icons,
 .radio input[type="radio"].custom-radio:checked + .icons {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 .checkbox input[type="checkbox"].custom-checkbox:checked + .icons .icon-unchecked,
 .radio input[type="checkbox"].custom-checkbox:checked + .icons .icon-unchecked,
@@ -2086,7 +2086,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .radio input[type="checkbox"].custom-checkbox:checked + .icons .icon-checked,
 .checkbox input[type="radio"].custom-radio:checked + .icons .icon-checked,
 .radio input[type="radio"].custom-radio:checked + .icons .icon-checked {
-  color: #1abc9c;
+  color: #80b2f5;
           filter: none;
   opacity: 1;
 
@@ -2179,13 +2179,13 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .radio.primary input[type="checkbox"].custom-checkbox + .icons,
 .checkbox.primary input[type="radio"].custom-radio + .icons,
 .radio.primary input[type="radio"].custom-radio + .icons {
-  color: #34495e;
+  color: #444;
   }
 .checkbox.primary input[type="checkbox"].custom-checkbox:checked + .icons,
 .radio.primary input[type="checkbox"].custom-checkbox:checked + .icons,
 .checkbox.primary input[type="radio"].custom-radio:checked + .icons,
 .radio.primary input[type="radio"].custom-radio:checked + .icons {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 .checkbox.primary input[type="checkbox"].custom-checkbox:disabled + .icons,
 .radio.primary input[type="checkbox"].custom-checkbox:disabled + .icons,
@@ -2204,7 +2204,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .radio.primary input[type="checkbox"].custom-checkbox:indeterminate + .icons,
 .checkbox.primary input[type="radio"].custom-radio:indeterminate + .icons,
 .radio.primary input[type="radio"].custom-radio:indeterminate + .icons {
-  color: #34495e;
+  color: #444;
   }
 .input-group-addon .radio,
 .input-group-addon .checkbox {
@@ -2309,7 +2309,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   padding-right: 28px;
   padding-left: 14px;
   color: #fff;
-  background-color: #16a085;
+  background-color: #80b2f5;
   }
 .bootstrap-tagsinput .tag:hover > span {
           filter: none;
@@ -2325,7 +2325,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   padding: 0;
   margin: 0;
   font-size: 14px;
-  color: #34495e;
+  color: #444;
   vertical-align: top;
   background-color: transparent;
   border: none;
@@ -2351,15 +2351,15 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   }
 .tagsinput-primary .bootstrap-tagsinput {
   margin-bottom: 0;
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   }
 .tagsinput-primary .tag {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .tagsinput-primary .tag:hover {
   color: #fff;
-  background-color: #16a085;
+  background-color: #80b2f5;
   }
 .bootstrap-tagsinput .twitter-typeahead {
   width: auto;
@@ -2381,7 +2381,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   padding: 5px 0;
   margin-top: 5px;
   background-color: #fff;
-  border: 2px solid #1abc9c;
+  border: 2px solid #80b2f5;
   border-radius: 6px;
   }
 .twitter-typeahead .tt-suggestion p {
@@ -2398,7 +2398,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .twitter-typeahead .tt-suggestion.tt-cursor {
   color: #fff;
   cursor: pointer;
-  background-color: #16a085;
+  background-color: #80b2f5;
   }
 .progress {
   height: 12px;
@@ -2408,7 +2408,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   }
 .progress-bar {
   line-height: 12px;
-  background: #1abc9c;
+  background: #80b2f5;
   box-shadow: none;
   }
 .progress-bar-success {
@@ -2438,7 +2438,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   /*width: 18px;*/
   /*height: 18px;*/
   /*cursor: pointer;*/
-  /*background-color: #16a085;*/
+  /*background-color: #80b2f5;*/
   /*border-radius: 50%;*/
   /*-webkit-transition: background .25s;*/
           /*transition: background .25s;*/
@@ -2449,14 +2449,14 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   /*outline: none;*/
   /*}*/
 /*.ui-slider-handle:active {*/
-  /*background-color: #16a085;*/
+  /*background-color: #80b2f5;*/
   /*}*/
 /*.ui-slider-range {*/
   /*position: absolute;*/
   /*z-index: 1;*/
   /*display: block;*/
   /*height: 100%;*/
-  /*background-color: #1abc9c;*/
+  /*background-color: #80b2f5;*/
   /*}*/
 /*.ui-slider-segment {*/
   /*width: 6px;*/
@@ -2509,7 +2509,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   font-size: 16px;
   font-weight: 700;
   color: #fff;
-  background-color: #34495e;
+  background-color: #444;
   border-radius: 6px;
   }
 .pager li:first-child > a,
@@ -2583,7 +2583,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .pagination li.active > a,
 .pagination li.active > span {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   border-color: #dfe2e5;
   }
 .pagination li.active.previous > a,
@@ -2605,7 +2605,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .pagination li.active.previous > span:focus,
 .pagination li.active.next > span:focus {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .pagination li:first-child > a,
 .pagination li:first-child > span {
@@ -2695,12 +2695,12 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .pagination li > a:focus,
 .pagination li > span:focus {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .pagination li > a:active,
 .pagination li > span:active {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .pagination > .btn.previous,
 .pagination > .btn.next {
@@ -2892,7 +2892,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   background-color: #2c81ba;
   }
 .pagination-inverse ul {
-  background-color: #34495e;
+  background-color: #444;
   }
 .pagination-inverse ul li.previous > a {
   border-right-color: #798795;
@@ -3011,15 +3011,15 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .pagination-minimal > ul > li > a:focus,
 .pagination-minimal > ul > li > span:focus {
   color: #fff;
-  background-color: #1abc9c;
-  border-color: #1abc9c;
+  background-color: #80b2f5;
+  border-color: #80b2f5;
   -webkit-transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
           transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
   }
 .pagination-minimal > ul > li > a:active,
 .pagination-minimal > ul > li > span:active {
-  background-color: #16a085;
-  border-color: #16a085;
+  background-color: #80b2f5;
+  border-color: #80b2f5;
   }
 .pagination-plain {
   height: 57px;
@@ -3127,28 +3127,28 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   /*padding: 12px 12px;*/
   /*line-height: 1.286;*/
   /*color: #fff;*/
-  /*background-color: #34495e;*/
+  /*background-color: #444;*/
   /*border-radius: 6px;*/
   /*}*/
 /*.tooltip.top .tooltip-arrow {*/
   /*margin-left: -9px;*/
   /*border-width: 9px 9px 0;*/
-  /*border-top-color: #34495e;*/
+  /*border-top-color: #444;*/
   /*}*/
 /*.tooltip.right .tooltip-arrow {*/
   /*margin-top: -9px;*/
   /*border-width: 9px 9px 9px 0;*/
-  /*border-right-color: #34495e;*/
+  /*border-right-color: #444;*/
   /*}*/
 /*.tooltip.left .tooltip-arrow {*/
   /*margin-top: -9px;*/
   /*border-width: 9px 0 9px 9px;*/
-  /*border-left-color: #34495e;*/
+  /*border-left-color: #444;*/
   /*}*/
 /*.tooltip.bottom .tooltip-arrow {*/
   /*margin-left: -9px;*/
   /*border-width: 0 9px 9px;*/
-  /*border-bottom-color: #34495e;*/
+  /*border-bottom-color: #444;*/
   /*}*/
 .caret {
   display: inline-block;
@@ -3199,7 +3199,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   padding: 5px 0;
   margin-top: 5px;
   background-color: #fff;
-  border: 2px solid #1abc9c;
+  border: 2px solid #80b2f5;
   border-radius: 6px;
   }
 .dropdown-menu.typeahead li a {
@@ -3219,7 +3219,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
@@ -3260,7 +3260,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   margin-bottom: 9px;
   }
 .dropdown-menu-inverse {
-  background-color: #34495e;
+  background-color: #444;
   }
 .dropdown-menu-inverse .divider {
   height: 2px;
@@ -3280,7 +3280,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .dropdown-menu-inverse > .active > a:hover,
 .dropdown-menu-inverse > .active > a:focus {
   color: rgba(255, 255, 255, .85);
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .dropdown-menu-inverse > .disabled > a,
 .dropdown-menu-inverse > .disabled > a:hover,
@@ -3357,7 +3357,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   top: 42%;
   right: 16px;
   display: inline-block;
-  border-color: #34495e transparent;
+  border-color: #444 transparent;
   border-style: solid;
   border-width: 8px 6px;
   border-bottom-style: none;
@@ -3401,7 +3401,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   }
 .select-primary .select2-choice {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .select-primary .select2-choice:hover,
 .select-primary .select2-choice.hover,
@@ -3412,15 +3412,15 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   border-color: #48c9b0;
   }
 .select-primary .select2-choice:active {
-  background: #16a085;
-  border-color: #16a085;
+  background: #80b2f5;
+  border-color: #80b2f5;
   }
 .select2-container-disabled.select-primary .select2-choice,
 .select2-container-disabled.select-primary .select2-choice:hover,
 .select2-container-disabled.select-primary .select2-choice:focus,
 .select2-container-disabled.select-primary .select2-choice:active {
   background-color: #bdc3c7;
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   }
 .select-primary .select2-choice .select2-arrow {
   border-top-color: #fff;
@@ -3531,7 +3531,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   }
 .select-inverse .select2-choice {
   color: #fff;
-  background-color: #34495e;
+  background-color: #444;
   }
 .select-inverse .select2-choice:hover,
 .select-inverse .select2-choice.hover,
@@ -3550,7 +3550,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
 .select2-container-disabled.select-inverse .select2-choice:focus,
 .select2-container-disabled.select-inverse .select2-choice:active {
   background-color: #bdc3c7;
-  border-color: #34495e;
+  border-color: #444;
   }
 .select-inverse .select2-choice .select2-arrow {
   border-top-color: #fff;
@@ -3699,7 +3699,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   padding: 0;
   margin: 0;
   font-size: 14px;
-  color: #34495e;
+  color: #444;
   vertical-align: top;
   background-color: transparent;
   border: none;
@@ -3720,10 +3720,10 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   background-color: #cacfd2;
   }
 .select2-container-multi.multiselect-primary {
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   }
 .select2-container-multi.multiselect-primary .select2-search-choice {
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .select2-container-multi.multiselect-primary .select2-search-choice:hover {
   background-color: #48c9b0;
@@ -3765,10 +3765,10 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   background-color: #f4d313;
   }
 .select2-container-multi.multiselect-inverse {
-  border-color: #34495e;
+  border-color: #444;
   }
 .select2-container-multi.multiselect-inverse .select2-search-choice {
-  background-color: #34495e;
+  background-color: #444;
   }
 .select2-container-multi.multiselect-inverse .select2-search-choice:hover {
   background-color: #415b76;
@@ -3860,7 +3860,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   }
 .select2-drop .select2-highlighted > .select2-result-label {
   color: #fff;
-  background: #1abc9c;
+  background: #80b2f5;
   }
 .select2-drop .select2-result-with-children > .select2-result-label {
   margin-top: 5px;
@@ -3890,7 +3890,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   }
 .select-inverse-dropdown {
   color: rgba(255, 255, 255, .75);
-  background-color: #34495e;
+  background-color: #444;
   }
 .select-inverse-dropdown .select2-results .select2-result-label {
   color: #fff;
@@ -4129,7 +4129,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   padding: 0 21px;
   margin: 0 0 0 21px;
   line-height: 53px;
-  color: #34495e;
+  color: #444;
   border: none;
   }
 .navbar-toggle:before {
@@ -4137,7 +4137,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   font-size: 22px;
   font-style: normal;
   font-weight: normal;
-  color: #16a085;
+  color: #80b2f5;
   content: "\e61a";
   -webkit-transition: color .25s linear;
           transition: color .25s linear;
@@ -4151,7 +4151,7 @@ fieldset[disabled] .input-group-btn .btn-default.active {
   }
 .navbar-toggle:hover:before,
 .navbar-toggle:focus:before {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 .navbar-toggle .icon-bar {
   display: none;
@@ -4335,7 +4335,7 @@ select[multiple].navbar-form .select2-search input[type="text"] {
   margin-bottom: 0;
   font-size: 16px;
   line-height: 1.438;
-  color: #34495e;
+  color: #444;
   }
 @media (min-width: 768px) {
   .navbar-text {
@@ -4372,7 +4372,7 @@ select[multiple].navbar-form .select2-search input[type="text"] {
   line-height: 1;
   color: #fff;
   text-align: center;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   border-radius: 50%;
   }
 @media (max-width: 768px) {
@@ -4404,15 +4404,15 @@ select[multiple].navbar-form .select2-search input[type="text"] {
   background-color: #ecf0f1;
   }
 .navbar-default .navbar-brand {
-  color: #34495e;
+  color: #444;
   }
 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: transparent;
   }
 .navbar-default .navbar-toggle:before {
-  color: #34495e;
+  color: #444;
   }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
@@ -4420,7 +4420,7 @@ select[multiple].navbar-form .select2-search input[type="text"] {
   }
 .navbar-default .navbar-toggle:hover:before,
 .navbar-default .navbar-toggle:focus:before {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
@@ -4428,17 +4428,17 @@ select[multiple].navbar-form .select2-search input[type="text"] {
   border-width: 2px;
   }
 .navbar-default .navbar-nav > li > a {
-  color: #34495e;
+  color: #444;
   }
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: transparent;
   }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: transparent;
   }
 .navbar-default .navbar-nav > .disabled > a,
@@ -4448,43 +4448,43 @@ select[multiple].navbar-form .select2-search input[type="text"] {
   background-color: transparent;
   }
 .navbar-default .navbar-nav > .dropdown > a .caret {
-  border-top-color: #34495e;
-  border-bottom-color: #34495e;
+  border-top-color: #444;
+  border-bottom-color: #444;
   }
 .navbar-default .navbar-nav > .active > a .caret {
-  border-top-color: #1abc9c;
-  border-bottom-color: #1abc9c;
+  border-top-color: #80b2f5;
+  border-bottom-color: #80b2f5;
   }
 .navbar-default .navbar-nav > .dropdown > a:hover .caret,
 .navbar-default .navbar-nav > .dropdown > a:focus .caret {
-  border-top-color: #1abc9c;
-  border-bottom-color: #1abc9c;
+  border-top-color: #80b2f5;
+  border-bottom-color: #80b2f5;
   }
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: transparent;
   }
 .navbar-default .navbar-nav > .open > a .caret,
 .navbar-default .navbar-nav > .open > a:hover .caret,
 .navbar-default .navbar-nav > .open > a:focus .caret {
-  border-top-color: #1abc9c;
-  border-bottom-color: #1abc9c;
+  border-top-color: #80b2f5;
+  border-bottom-color: #80b2f5;
   }
 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-    color: #34495e;
+    color: #444;
     }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #1abc9c;
+    color: #80b2f5;
     background-color: transparent;
     }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
-    color: #1abc9c;
+    color: #80b2f5;
     background-color: transparent;
     }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
@@ -4513,8 +4513,8 @@ select[multiple].navbar-form .select2-search input[type="text"] {
   }
 .navbar-default .navbar-form .form-control:focus,
 .navbar-default .navbar-form .select2-search input[type="text"]:focus {
-  color: #1abc9c;
-  border-color: #1abc9c;
+  color: #80b2f5;
+  border-color: #80b2f5;
   }
 .navbar-default .navbar-form .input-group-btn .btn {
   color: #919ba4;
@@ -4523,24 +4523,24 @@ select[multiple].navbar-form .select2-search input[type="text"] {
 .navbar-default .navbar-form .input-group.focus .form-control,
 .navbar-default .navbar-form .input-group.focus .input-group-btn .btn,
 .navbar-default .navbar-form .input-group.focus .select2-search input[type="text"] {
-  color: #1abc9c;
-  border-color: #1abc9c;
+  color: #80b2f5;
+  border-color: #80b2f5;
   }
 .navbar-default .navbar-text {
-  color: #34495e;
+  color: #444;
   }
 .navbar-default .navbar-link {
-  color: #34495e;
+  color: #444;
   }
 .navbar-default .navbar-link:hover {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 .navbar-default .btn-link {
-  color: #34495e;
+  color: #444;
   }
 .navbar-default .btn-link:hover,
 .navbar-default .btn-link:focus {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 .navbar-default .btn-link[disabled]:hover,
 fieldset[disabled] .navbar-default .btn-link:hover,
@@ -4549,14 +4549,14 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   color: #ccc;
   }
 .navbar-inverse {
-  background-color: #34495e;
+  background-color: #444;
   }
 .navbar-inverse .navbar-brand {
   color: #fff;
   }
 .navbar-inverse .navbar-brand:hover,
 .navbar-inverse .navbar-brand:focus {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: transparent;
   }
 .navbar-inverse .navbar-toggle:before {
@@ -4568,7 +4568,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   }
 .navbar-inverse .navbar-toggle:hover:before,
 .navbar-inverse .navbar-toggle:focus:before {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 .navbar-inverse .navbar-collapse {
   border-color: #2f4154;
@@ -4579,14 +4579,14 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   }
 .navbar-inverse .navbar-nav > li > a:hover,
 .navbar-inverse .navbar-nav > li > a:focus {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: transparent;
   }
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > a:hover,
 .navbar-inverse .navbar-nav > .active > a:focus {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .navbar-inverse .navbar-nav > .disabled > a,
 .navbar-inverse .navbar-nav > .disabled > a:hover,
@@ -4596,14 +4596,14 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   }
 .navbar-inverse .navbar-nav > .dropdown > a:hover .caret,
 .navbar-inverse .navbar-nav > .dropdown > a:focus .caret {
-  border-top-color: #1abc9c;
-  border-bottom-color: #1abc9c;
+  border-top-color: #80b2f5;
+  border-bottom-color: #80b2f5;
   }
 .navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .open > a:hover,
 .navbar-inverse .navbar-nav > .open > a:focus {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   border-left-color: transparent;
   }
 .navbar-inverse .navbar-nav > .open > a .caret,
@@ -4618,7 +4618,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   }
 .navbar-inverse .navbar-nav > .open > .dropdown-menu {
   padding: 3px 4px;
-  background-color: #34495e;
+  background-color: #444;
   }
 .navbar-inverse .navbar-nav > .open > .dropdown-menu > li > a {
   padding: 6px 9px;
@@ -4628,7 +4628,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 .navbar-inverse .navbar-nav > .open > .dropdown-menu > li > a:hover,
 .navbar-inverse .navbar-nav > .open > .dropdown-menu > li > a:focus {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .navbar-inverse .navbar-nav > .open > .dropdown-menu > .divider {
   height: 2px;
@@ -4645,14 +4645,14 @@ fieldset[disabled] .navbar-default .btn-link:focus {
     }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #1abc9c;
+    color: #80b2f5;
     background-color: transparent;
     }
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #fff;
-    background-color: #1abc9c;
+    background-color: #80b2f5;
     }
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -4685,12 +4685,12 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   }
 .navbar-inverse .navbar-form .form-control:focus,
 .navbar-inverse .navbar-form .select2-search input[type="text"]:focus {
-  color: #1abc9c;
-  border-color: #1abc9c;
+  color: #80b2f5;
+  border-color: #80b2f5;
   }
 .navbar-inverse .navbar-form .btn {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .navbar-inverse .navbar-form .btn:hover,
 .navbar-inverse .navbar-form .btn.hover,
@@ -4705,8 +4705,8 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 .navbar-inverse .navbar-form .btn:active,
 .navbar-inverse .navbar-form .btn.active,
 .open > .dropdown-toggle.navbar-inverse .navbar-form .btn {
-  background: #16a085;
-  border-color: #16a085;
+  background: #80b2f5;
+  border-color: #80b2f5;
   }
 .navbar-inverse .navbar-form .btn.disabled,
 .navbar-inverse .navbar-form .btn[disabled],
@@ -4727,10 +4727,10 @@ fieldset[disabled] .navbar-inverse .navbar-form .btn:active,
 .navbar-inverse .navbar-form .btn[disabled].active,
 fieldset[disabled] .navbar-inverse .navbar-form .btn.active {
   background-color: #bdc3c7;
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   }
 .navbar-inverse .navbar-form .btn .badge {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: #fff;
   }
 .navbar-inverse .navbar-form .input-group-btn .btn {
@@ -4741,8 +4741,8 @@ fieldset[disabled] .navbar-inverse .navbar-form .btn.active {
 .navbar-inverse .navbar-form .input-group.focus .form-control,
 .navbar-inverse .navbar-form .input-group.focus .input-group-btn .btn,
 .navbar-inverse .navbar-form .input-group.focus .select2-search input[type="text"] {
-  color: #1abc9c;
-  border-color: #1abc9c;
+  color: #80b2f5;
+  border-color: #80b2f5;
   }
 @media (max-width: 767px) {
   .navbar-inverse .navbar-form {
@@ -4758,11 +4758,11 @@ fieldset[disabled] .navbar-inverse .navbar-form .btn.active {
   }
 .navbar-inverse .navbar-text a:hover,
 .navbar-inverse .navbar-text a:focus {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 .navbar-inverse .navbar-btn {
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .navbar-inverse .navbar-btn:hover,
 .navbar-inverse .navbar-btn.hover,
@@ -4777,8 +4777,8 @@ fieldset[disabled] .navbar-inverse .navbar-form .btn.active {
 .navbar-inverse .navbar-btn:active,
 .navbar-inverse .navbar-btn.active,
 .open > .dropdown-toggle.navbar-inverse .navbar-btn {
-  background: #16a085;
-  border-color: #16a085;
+  background: #80b2f5;
+  border-color: #80b2f5;
   }
 .navbar-inverse .navbar-btn.disabled,
 .navbar-inverse .navbar-btn[disabled],
@@ -4799,10 +4799,10 @@ fieldset[disabled] .navbar-inverse .navbar-btn:active,
 .navbar-inverse .navbar-btn[disabled].active,
 fieldset[disabled] .navbar-inverse .navbar-btn.active {
   background-color: #bdc3c7;
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   }
 .navbar-inverse .navbar-btn .badge {
-  color: #1abc9c;
+  color: #80b2f5;
   background-color: #fff;
   }
 @media (min-width: 768px) {
@@ -4942,11 +4942,11 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   border-color: #bdc3c7;
   }
 .bootstrap-switch-off .bootstrap-switch-handle-on ~ .bootstrap-switch-handle-off.bootstrap-switch-primary {
-  box-shadow: inset 0 0 transparent, -16px 0 0 #34495e;
+  box-shadow: inset 0 0 transparent, -16px 0 0 #444;
   }
 .bootstrap-switch-off .bootstrap-switch-handle-on ~ .bootstrap-switch-handle-off.bootstrap-switch-primary:before {
-  background-color: #1abc9c;
-  border-color: #34495e;
+  background-color: #80b2f5;
+  border-color: #444;
   }
 .bootstrap-switch-off .bootstrap-switch-handle-on ~ .bootstrap-switch-handle-off.bootstrap-switch-success {
   box-shadow: inset 0 0 transparent, -16px 0 0 #2ecc71;
@@ -5035,15 +5035,15 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   box-shadow: inset 16px 0 0 #bdc3c7;
   }
 .bootstrap-switch-primary {
-  color: #1abc9c;
-  background-color: #34495e;
+  color: #80b2f5;
+  background-color: #444;
   }
 .bootstrap-switch-primary ~ .bootstrap-switch-handle-off:before {
-  background-color: #1abc9c;
-  border-color: #34495e;
+  background-color: #80b2f5;
+  border-color: #444;
   }
 .bootstrap-switch-on .bootstrap-switch-primary ~ .bootstrap-switch-handle-off {
-  box-shadow: inset 16px 0 0 #34495e;
+  box-shadow: inset 16px 0 0 #444;
   }
 .bootstrap-switch-info {
   color: #fff;
@@ -5316,7 +5316,7 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   margin: -.5em 0 0 -.5em;
   font-family: "Flat-UI-Icons";
   font-size: 16px;
-  color: #1abc9c;
+  color: #80b2f5;
   -webkit-transition: color .25s, opacity .25s;
           transition: color .25s, opacity .25s;
 
@@ -5329,7 +5329,7 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   content: "\e616";
   }
 .vjs-paused .vjs-play-control:hover > div:before {
-  color: #16a085;
+  color: #80b2f5;
   }
 .vjs-paused .vjs-play-control > div:after {
   filter: alpha(opacity=0);
@@ -5342,7 +5342,7 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   -webkit-filter: none;
   }
 .vjs-playing .vjs-play-control:hover > div:after {
-  color: #16a085;
+  color: #80b2f5;
   }
 .vjs-playing .vjs-play-control > div:after {
           filter: none;
@@ -5444,7 +5444,7 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   position: absolute;
   top: 0;
   left: -1px;
-  background: #1abc9c;
+  background: #80b2f5;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   }
@@ -5461,7 +5461,7 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   width: 18px;
   height: 18px;
   margin: -3px 0 0 -3px;
-  background-color: #16a085;
+  background-color: #80b2f5;
   border-radius: 50%;
   -webkit-transition: background-color .25s;
           transition: background-color .25s;
@@ -5609,7 +5609,7 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   font-size: 14px;
   line-height: 1.214;
   cursor: pointer;
-  background: #34495e;
+  background: #444;
   background-size: 20px 20px;
   -webkit-transition: .25s;
           transition: .25s;
@@ -5622,11 +5622,11 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   border-radius: 0 0 6px 6px;
   }
 .todo li.todo-done {
-  color: #1abc9c;
+  color: #80b2f5;
   background: transparent;
   }
 .todo li.todo-done .todo-name {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 .todo li:after {
   position: absolute;
@@ -5651,7 +5651,7 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   text-align: center;
   text-transform: none;
   content: "\e60a";
-  background: #1abc9c;
+  background: #80b2f5;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -5659,8 +5659,8 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
 .todo-search {
   position: relative;
   padding: 19px 25px 20px;
-  color: #34495e;
-  background: #1abc9c;
+  color: #444;
+  background: #80b2f5;
   background-size: 16px 16px;
   border-radius: 6px 6px 0 0;
   }
@@ -5681,7 +5681,7 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   font-size: 19px;
   font-weight: 700;
   line-height: 23px;
-  color: #34495e;
+  color: #444;
   text-indent: 0;
   background: none;
   border: none;
@@ -5689,14 +5689,14 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   box-shadow: none;
   }
 .todo-search-field::-moz-placeholder {
-  color: #34495e;
+  color: #444;
   opacity: 1;
   }
 .todo-search-field:-ms-input-placeholder {
-  color: #34495e;
+  color: #444;
   }
 .todo-search-field::-webkit-input-placeholder {
-  color: #34495e;
+  color: #444;
   }
 .todo-icon {
   float: left;
@@ -5742,10 +5742,10 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   -webkit-font-smoothing: subpixel-antialiased;
   }
 .palette-turquoise {
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .palette-green-sea {
-  background-color: #16a085;
+  background-color: #80b2f5;
   }
 .palette-emerald {
   background-color: #2ecc71;
@@ -5766,7 +5766,7 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   background-color: #8e44ad;
   }
 .palette-wet-asphalt {
-  background-color: #34495e;
+  background-color: #444;
   }
 .palette-midnight-blue {
   background-color: #2c3e50;
@@ -5829,7 +5829,7 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
 .login-screen {
   min-height: 473px;
   padding: 123px 199px 33px 306px;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .login-icon {
   position: absolute;
@@ -5870,10 +5870,10 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
   border-color: transparent;
   }
 .login-form .login-field:focus {
-  border-color: #1abc9c;
+  border-color: #80b2f5;
   }
 .login-form .login-field:focus + .login-field-icon {
-  color: #1abc9c;
+  color: #80b2f5;
   }
 .login-form .login-field-icon {
   position: absolute;
@@ -5930,7 +5930,7 @@ footer p {
   padding: 0 30px 30px;
   margin-left: 42px;
   color: #d1f2eb;
-  background-color: #1abc9c;
+  background-color: #80b2f5;
   }
 .footer-banner .footer-title {
   color: #fff;
diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js
new file mode 100644
index 00000000..aeb84d27
--- /dev/null
+++ b/js/menus/LatticeMenuView.js
@@ -0,0 +1,26 @@
+/**
+ * Created by aghassaei on 1/26/15.
+ */
+
+
+LatticeMenuView = Backbone.View.extend({
+
+    el: "",
+
+    events: {
+    },
+
+    initialize: function(){
+
+        _.bindAll(this, "render");
+
+        this.render();
+    },
+
+    render: function(){
+
+    },
+
+    template: null;
+
+});
\ No newline at end of file
diff --git a/js/menus/MenuWrapper.js b/js/menus/MenuWrapper.js
new file mode 100644
index 00000000..08edce1f
--- /dev/null
+++ b/js/menus/MenuWrapper.js
@@ -0,0 +1,12 @@
+
+
+
+
+function MenuWrapper(){
+
+    var cellMenu =
+
+
+
+
+}
\ No newline at end of file
diff --git a/js/menus/navbar.js b/js/menus/navbar.js
index a97bc86a..fcf60d63 100644
--- a/js/menus/navbar.js
+++ b/js/menus/navbar.js
@@ -10,12 +10,12 @@ function setupNavBar(three){
     var allNavDropdownMenus = $(".navDropdown");
     var allNavTitles = $(".navbar-nav li a");
 
-    allNavMenuLinks.mouseover(function(){
-        hideAllMenus();
-        $(this).parent().addClass("open");//highlight
-        var menuId = "#" + $(this).data("menuId");
-        $(menuId).show();
-    });
+//    allNavMenuLinks.mouseover(function(){
+//        hideAllMenus();
+//        $(this).parent().addClass("open");//highlight
+//        var menuId = "#" + $(this).data("menuId");
+//        $(menuId).show();
+//    });
 
     var clearButton = $("#clearAll");
     clearButton.mouseout(function(){
diff --git a/js/models/threeModel.js b/js/models/threeModel.js
index 9b91ba5d..ff5a5e8d 100644
--- a/js/models/threeModel.js
+++ b/js/models/threeModel.js
@@ -5,6 +5,7 @@
 
 function ThreeModel(){
 
+    var $el = $("#threeContainer");
     var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 4000);
     var scene = new THREE.Scene();
     var renderer = new THREE.WebGLRenderer({antialias:false});
diff --git a/main.html b/main.html
index 2abde636..49d3c45e 100644
--- a/main.html
+++ b/main.html
@@ -52,6 +52,8 @@
     <script src="js/models/extrudeVisualizer.js"></script>
 
     <!--views-->
+    <script src="js/menus/MenuWrapper.js"></script>
+    <script src="js/menus/LatticeMenuView.js"></script>
     <script src="js/threeViews/meshHandle.js"></script>
     <script src="js/threeViews/threeView.js"></script>
     <script src="js/threeViews/pushPullMeshView.js"></script>
@@ -105,7 +107,16 @@
         </ul>
        <!--<a href="#fakelink" id="clearAll" class=" btn btn-lg btn-primary">Clear All</a>-->
     </div><!-- /.navbar-collapse -->
-  </nav>
+</nav>
+
+<div id="menuWrapper">
+    <ul class="nav nav-tabs nav-justified">
+      <li role="presentation" class="active"><a href="#">Cell</a></li>
+      <li role="presentation"><a href="#">Part</a></li>
+      <li role="presentation"><a href="#">Script</a></li>
+    </ul>
+</div>
+
 <div id="importGeometry" class="row navMenu">
 </div>
 <div id="element" class="row navMenu">
@@ -122,8 +133,8 @@
         </div>
     </div>
 </div>
-
 <div id="threeContainer"></div>
 
+
 </body>
 </html>
\ No newline at end of file
-- 
GitLab