Should resolve issues #25 and #2 using a backbone view to control those nav buttons

webgoat-container/src/main/webapp/WEB-INF/pages/main_new.jsp

@@ -37,8 +37,8 @@
 
         <!-- Require.js used to load js asynchronously -->
         <script src="js/libs/require.min.js" data-main="js/main.js"></script>
-        <script src="js/jquery/jquery-1.10.2.min.js"></script>
+        <!--<script src="js/jquery/jquery-1.10.2.min.js"></script>
-        <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
+        <script src="plugins/bootstrap/js/bootstrap.min.js"></script>-->
         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
         <title>WebGoat</title>
     </head>
@@ -58,9 +58,9 @@
                 <div id="lesson-title-wrapper" >
                     
                 </div><!--lesson title end-->
-                <div class="user-nav pull-right" style="margin-right: 75px;">
+                <div class="user-nav pull-right" id="user-and-info-nav" style="margin-right: 75px;">
                     <div class="dropdown" style="display:inline">
-                        <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" id="dropdownMenu1" >
+                        <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" id="user-menu" >
                             <i class="fa fa-user"></i> <span class="caret"></span>
                         </button>                   
                         <ul class="dropdown-menu dropdown-menu-left">
@@ -74,7 +74,7 @@
 
                         </ul>
                     </div>
-                    <button type="button" data-toggle="modal" data-target="#aboutModal" class="btn btn-default right_nav_button" title="About WebGoat">
+                    <button type="button" id="about-button"  class="btn btn-default right_nav_button" title="About WebGoat" data-toggle="modal" data-target="#about-modal"> 
                         <i class="fa fa-info"></i>
                     </button>
                     <a href="mailto:${contactEmail}?Subject=Webgoat%20feedback" target="_top">
@@ -176,7 +176,7 @@
 
 
         <!-- About WebGoat Modal -->
-        <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+        <div class="modal" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-lg">
                 <div class="modal-content">
                     <jsp:include page="../pages/about.jsp"/> 

webgoat-container/src/main/webapp/css/main.css

@@ -659,6 +659,10 @@ fieldset[disabled] .btn-warning.active {
   max-height: 375px;
   overflow-y: auto;
 }
+
+#about-modal {
+  opacity: 95%;
+}
 /* ==========================================================================
    Media Queries
    ========================================================================== */

webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js

@@ -11,7 +11,8 @@ define(['jquery',
 	'goatApp/view/CookieView',
 	'goatApp/view/ParamView',
 	'goatApp/model/ParamModel',
-	'goatApp/support/GoatUtils'
+	'goatApp/support/GoatUtils',
+	'goatApp/view/UserAndInfoView'
 	], 
 	function($,
 		_,
@@ -26,7 +27,8 @@ define(['jquery',
 		CookieView,
 		ParamView,
 		ParamModel,
-		GoatUtils
+		GoatUtils,
+		UserAndInfoView
 	) {
 		'use strict'
 		
@@ -36,8 +38,11 @@ define(['jquery',
 			this.lessonView = options.lessonView;
 
 			_.extend(Controller.prototype,Backbone.Events);
+
 			this.start = function() {
 				this.listenTo(this.lessonContent,'contentLoaded',this.onContentLoaded);
+				//'static' elements of page/app
+				this.userAndInfoView = new UserAndInfoView();
 			};
 			//load View, which can pull data
 			this.loadLesson = function(scr,menu,stage) {

webgoat-container/src/main/webapp/js/goatApp/view/UserAndInfoView.js

@@ -0,0 +1,45 @@
+//UserAndInfoView
+define(['jquery',
+	'underscore',
+	'backbone'],
+function($,
+	_,
+	Backbone) {
+	return Backbone.View.extend({
+		el:'#user-and-info-nav', //Check this,
+
+		events: {
+			'click #about-button': 'showAboutModal',
+			'click #user-menu': 'showUserMenu'
+		},
+
+		initialize: function() {
+
+		},
+		
+		render:function(title) {
+		},
+
+		showUserMenu: function() {
+			var menu = this.$el.find('.dropdown-menu');
+			if (menu.is(':visible')) {
+				menu.hide(200);
+			} else {
+				menu.show(400);
+				/*menu.on('mouseout', function() {
+					$('#user-and-info-nav .dropdown-menu').hide(200);
+				});*/
+			}
+		
+		},
+
+		showAboutModal: function() {
+			$('#about-modal').show(400);
+			$('#about-modal div.modal-header button.close').unbind('click').on('click', function() {
+				$('#about-modal').hide(200);
+			});
+		}
+
+
+	});
+});