initial re-enabling of help buttons (source/plan/solution at least). Still need styling work etc.

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

@@ -106,10 +106,10 @@
                                         <button type="button" id="restartLessonBtn"  class="btn btn-xs"  onclick="restartLesson()">Restart Lesson</button> -->
                                     <!-- </div> -->
                                 </div>
-                                <div class="lessonHelp" id="lesson-hint-row">
+                                <div class="lesson-hint" id="lesson-hint-row">
                                     <h4>Hints</h4>
                                     <div class="panel" >
-                                        <div class="panel-body" id="lesson_hint">
+                                        <div class="panel-body" id="lesson-hint">
                                             <span class="glyphicon-class glyphicon glyphicon-circle-arrow-left" id="showPrevHintBtn" onclick="viewPrevHint()"></span>
                                             <span class="glyphicon-class glyphicon glyphicon-circle-arrow-right" id="showNextHintBtn" onclick="viewNextHint()"></span>
                                             <br/>
@@ -159,15 +159,8 @@
                             </div>
                         </div><!--col-md-4 end-->         
                     </div>
-                    <div id="lessonHelpsWrapper">
+                    <div id="lesson-helps-wrapper" class="panel">
-                        <div class="row lessonHelp" id="lesson-cookies-row">
+                        <div class="row lesson-help" id="lesson-plan-row">
-                            <div class="col-md-12">
-                                <h4>Lesson Parameters and Cookies</h4>
-                                
-                            </div>
-                        </div>   
-
-                        <div class="row lessonHelp" id="lesson-plan-row">
                             <div class="col-md-12">
                                 <h4>Lesson Plan</h4>
                                 <div class="panel" >
@@ -177,21 +170,20 @@
                                 </div>
                             </div>
                         </div> 
-                        <div class="row lessonHelp" id="lesson_solution_row">
+                        <div class="row lesson-help" id="lesson-solution-row">
                             <div class="col-md-12">
                                 <h4>Lesson Solution</h4>
                                 <div class="panel">
-                                    <div class="panel-body" id="lesson_solution">
+                                    <div class="panel-body" id="lesson-solution">
                                     </div>                                    
                                 </div>
                             </div>
                         </div> 
-                        <div class="row lessonHelp" id="lesson_source_row">
+                        <div class="row lesson-help" id="lesson-source-row">
                             <div class="col-md-12">
                                 <h4>Lesson Source Code</h4>
                                 <div class="panel">
-                                    <div class="panel-body" id="lesson_source">
+                                    <div class="panel-body" id="lesson-source">
-                                        <!-- <pre>{{source}}</pre> -->
                                     </div>                                    
                                 </div>
                             </div>

src/main/webapp/css/main.css

@@ -710,7 +710,7 @@ fieldset[disabled] .btn-warning.active {
   margin-top:3px;
 }
 
-.lessonHelp, .lessonHelpBtn {
+.lesson-help, .lesson-help-button {
   display: none;
 }
 

src/main/webapp/js/goatApp/controller/LessonController.js

@@ -7,7 +7,8 @@ define(['jquery',
 	'goatApp/view/SourceView',
 	'goatApp/view/SolutionView',
 	'goatApp/view/LessonHintView',
-	'goatApp/view/HelpControlsView'
+	'goatApp/view/HelpControlsView',
+	'goatApp/support/GoatUtils'
 	], 
 	function($,
 		_,
@@ -18,7 +19,8 @@ define(['jquery',
 		SourceView,
 		SolutionView,
 		LessonHintView,
-		HelpControlsView
+		HelpControlsView,
+		GoatUtils
 	) {
 		'use strict'
 		
@@ -59,7 +61,7 @@ define(['jquery',
 
 				//load cookies/parameters view
 
-				//load title view (initially hidden) << currently handled via menu click but need to be able to handle via routed request
+				//load title view (initially hidden) << //TODO: currently handled via menu click but need to be able to handle via routed request
 				//plan view (initially hidden)
 				this.planView = new PlanView();
 				this.listenTo(this.planView,'plan:loaded',this.areHelpsReady);
@@ -72,7 +74,6 @@ define(['jquery',
 				//load help controls view (contextul to what helps are available)
 				this.lessonHintView = new LessonHintView();
 				this.listenTo(this.lessonHintView,'hints:loaded',this.areHelpsReady);
-				
 			};
 
 			this.areHelpsReady = function (curHelp) {
@@ -87,12 +88,44 @@ define(['jquery',
 						hasHints:(this.lessonHintView.collection.length > 0),
 					});
 					this.helpControlsView.render();
+					//
+					this.listenTo(this.helpControlsView,'plan:show',this.hideShowHelps);
+					this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);	
+					this.listenTo(this.helpControlsView,'hints:show',this.showHints)
+					this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);
+					this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson);
 				}
 			};
 
 			this.addCurHelpState = function (curHelp) {
 				this.helpsLoaded[curHelp.helpElement] = curHelp.value;
 			};
+
+			this.hideShowHelps = function(showHelp) {
+				var showId = '#lesson-' + showHelp + '-row';
+				$('.lesson-help').not(showId).hide();
+				switch(showHelp) {
+					case 'plan':
+						$(showId).html(this.planView.model.get('content')).show();
+						break;
+					case 'solution':
+						$(showId).html(this.solutionView.model.get('content')).show();
+						break;
+					case 'source':
+						$(showId).html(this.sourceView.model.get('content')).show();
+						break;
+				}
+				GoatUtils.scrollToHelp()
+			};;
+
+			this.showHints = function() {
+				console.log('show Hints');
+			};
+
+			this.restartLesson = function() {
+				console.log('restart lesson');
+			};
+
 		};
 		return Controller;
 });

src/main/webapp/js/goatApp/support/GoatUtils.js

@@ -95,63 +95,31 @@ define(['jquery',
                         }
                     }
                 },
+ 
                 showLessonCookiesAndParams: function() {
                     $.get(goatConstants.cookieService, {}, function(reply) {
                         $("#lesson_cookies").html(reply);
                     }, "html");
                 },
-                showLessonHints: function() {
+ 
-                    $('.lessonHelp').hide();
-                    $('#lesson_hint').html();
-                    $('#lesson_hint_row').show();
-                },
-                showLessonSource: function(source) {
-                    $('.lessonHelp').hide();
-                    //$('#lesson_source').html("<pre>"+goat.lesson.lessonInfo.source+"</pre>");
-                    $('#lesson_source_row').show();
-                    GoatUtils.scrollToHelp();
-                },
-                showLessonSolution: function() {
-                    $('.lessonHelp').hide();
-                    $('#lesson_solution').html(goat.lesson.lessonInfo.solution);
-                    $('#lesson_solution_row').show();
-                    GoatUtils.scrollToHelp();
-                },
-                showLessonPlan: function(plan) {
-                    $('.lessonHelp').hide();
-                    $("#lesson_plan").html(goat.lesson.lessonInfo.plan);
-                    $('#lesson_plan_row').show();
-                    GoatUtils.scrollToHelp();
-                },
                 scrollToHelp: function() {
                     $('#leftside-navigation').height($('#main-content').height() + 15)
-                    var target = $('#lessonHelpsWrapper');
+                    var target = $('#lesson-helps-wrapper');
-                    GoatUtils.scrollEasy(target);
+                    this.scrollEasy(target);
                 },
+ 
                 scrollToTop: function() {
                     $('.lessonHelp').hide();
                     var target = $('#container');
-                    GoatUtils.scrollEasy(target);
+                    this.scrollEasy(target);
                 },
+ 
                 scrollEasy: function(target) {
                     $('html,body').animate({
                         scrollTop: target.offset().top
                     }, 1000);
                 },
-                scrapeParams: function(url) {
+
-                    if (!url) {
-                        return;
-                    }
-                    var params = url.split('?')[1].split('&');
-                    var paramsArr = [];
-                    for (var i = 0; i < params.length; i++) {
-                        var paramObj = {};
-                        paramObj.name = params[i].split('=')[0];
-                        paramObj.value = params[i].split('=')[1];
-                        paramsArr.push(paramObj);
-                    }
-                    return paramsArr;
-                },
                 highlightCurrentLessonMenu: function(id) {
                     //TODO: move selectors in first two lines into goatConstants
                     $('ul li.selected').removeClass(goatConstants.selectedMenuClass)
@@ -159,6 +127,7 @@ define(['jquery',
                     $('#' + id).addClass(goatConstants.selectedMenuClass);
                     $('#' + id).parent().addClass(goatConstants.selectedMenuClass);
                 },
+                
                 ajaxifyAttackHref: function() {  // rewrite any links with hrefs point to relative attack URLs             
                  $.each($('a[href^="attack?"]'),
         			function(i,el) {

src/main/webapp/js/goatApp/view/HelpControlsView.js

@@ -6,11 +6,11 @@ function($,_,Backbone) {
 		el:'#help-controls', //Check this
 		helpButtons: {
 			//TODO: move this into a template
-			showSource:$('<button>',{id:'showSourceBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Java [Source]'}),
+			showSource:$('<button>',{id:'show-source-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Java [Source]'}),
-			showSolution:$('<button>',{id:'showSolutionBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Solution'}),
+			showSolution:$('<button>',{id:'show-solution-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Solution'}),
-			showPlan:$('<button>',{id:'showPlanBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Lesson Plan]'}),
+			showPlan:$('<button>',{id:'show-plan-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Lesson Plan]'}),
-			showHints:$('<button>',{id:'showHintsBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Hints'}),
+			showHints:$('<button>',{id:'show-hints-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Hints'}),
-			restartLesson:$('<button>',{id:'restartLessonBtn','class':'btn btn-xs help-button',type:'button',text:'Restart Lesson'})
+			restartLesson:$('<button>',{id:'restart-lesson-button','class':'btn btn-xs help-button',type:'button',text:'Restart Lesson'})
 		},
 		initialize: function (options) {
 			if (!options) {
@@ -23,19 +23,39 @@ function($,_,Backbone) {
 		},
 		render:function(title) {
 			if (this.hasSource) {
+				this.helpButtons.showSource.unbind().on('click',_.bind(this.showSource,this));
 				this.$el.append(this.helpButtons.showSource);
 			}
 			if (this.hasSolution) {
+				this.helpButtons.showSolution.unbind().on('click',_.bind(this.showSolution,this));
 				this.$el.append(this.helpButtons.showSolution);
 			}
 			if (this.hasPlan) {
+				this.helpButtons.showPlan.unbind().on('click',_.bind(this.showPlan,this));
 				this.$el.append(this.helpButtons.showPlan);
 			}
 			if (this.hasHints) {
+				this.helpButtons.showHints.unbind().on('click',_.bind(this.showHints,this));
 				this.$el.append(this.helpButtons.showHints);
 			}
 			//
 			this.$el.append(this.helpButtons.restartLesson);
+		},
+
+		showSource: function() {
+			this.trigger('source:show','source');
+		},
+
+		showSolution: function() {
+			this.trigger('solution:show','solution');
+		},
+
+		showPlan: function() {
+			this.trigger('plan:show','plan');
+		},
+
+		showHints: function() {
+			this.trigger('hints:show','hints');
 		}
 	});
 });