Move movement functions to Engine. Create scrollable Path sidebar

script/engine.js

@@ -593,14 +593,14 @@
 				switch(e.which) {
 					case 38: // Up
 					case 87:
-						if(Engine.activeModule == Outside){
+						if(Engine.activeModule == Outside || Engine.activeModule == Path)
 							Engine.activeModule.scrollSidebar('up');
-						}
+						
 						Engine.log('up');
 						break;
 					case 40: // Down
 					case 83:
-						if(Engine.activeModule == Outside){
+						if(Engine.activeModule == Outside || Engine.activeModule == Path){
 							Engine.activeModule.scrollSidebar('down');
 						}
 						Engine.log('down');
@@ -609,9 +609,10 @@
 					case 65:
 						if(Engine.activeModule == Ship && Path.tab)
 							Engine.travelTo(Path);
-						else if(Engine.activeModule == Path && Outside.tab)
+						else if(Engine.activeModule == Path && Outside.tab){
+							Engine.activeModule.scrollSidebar('left', true);
 							Engine.travelTo(Outside);
-						else if(Engine.activeModule == Outside && Room.tab){
+						}else if(Engine.activeModule == Outside && Room.tab){
 							Engine.activeModule.scrollSidebar('left', true);
 							Engine.travelTo(Room);
 						}
@@ -624,8 +625,10 @@
 						else if(Engine.activeModule == Outside && Path.tab){
 							Engine.activeModule.scrollSidebar('right', true);
 							Engine.travelTo(Path);
-						}else if(Engine.activeModule == Path && Ship.tab)
+						}else if(Engine.activeModule == Path && Ship.tab){
+							Engine.activeModule.scrollSidebar('right', true);
 							Engine.travelTo(Ship);
+						}
 						Engine.log('right');
 						break;
 				}
@@ -703,6 +706,33 @@
 
 })();
 
+function inView(dir, elem){
+
+        var scTop = $('#main').offset().top;
+        var scBot = scTop + $('#main').height();
+
+        var elTop = elem.offset().top;
+        var elBot = elTop + elem.height();
+
+        if( dir == 'up' ){
+                // STOP MOVING IF BOTTOM OF ELEMENT IS VISIBLE IN SCREEN
+                return ( elBot < scBot );
+        }else if( dir == 'down' ){
+                return ( elTop > scTop );
+        }else{
+                return ( ( elBot <= scBot ) && ( elTop >= scTop ) );
+        }
+
+}
+
+function scrollByX(elem, x){
+
+        var elTop = parseInt( elem.css('top'), 10 );
+        elem.css( 'top', ( elTop + x ) + "px" );
+
+}
+
+
 //create jQuery Callbacks() to handle object events 
 $.Dispatch = function( id ) {
 	var callbacks, topic = id && Engine.topics[ id ];

script/outside.js

@@ -631,13 +631,13 @@ var Outside = {
 
 		/* Let's stop scrolling if the top or bottom bound is in the viewport, based on direction */
 		if( direction == 'down' && inView( direction, $('#village') ) ){
-			console.log(direction);
+
-			console.log('IN VIEW');
 			return false;
+
 		}else if( direction == 'up' && inView( direction, $('#storesContainer') ) ){
-			console.log(direction);
+
-			console.log('IN VIEW');
 			return false;
+
 		}
 		
 		scrollByX( $('#village'), momentum );
@@ -646,28 +646,3 @@ var Outside = {
 
 	}
 };
-function inView(dir, elem){
-
-	var scTop = $('#main').offset().top;
-	var scBot = scTop + $('#main').height();
-	
-	var elTop = elem.offset().top;
-	var elBot = elTop + elem.height();
-
-	if( dir == 'up' ){
-		// STOP MOVING IF BOTTOM OF ELEMENT IS VISIBLE IN SCREEN
-		return ( elBot < scBot );
-	}else if( dir == 'down' ){
-		return ( elTop > scTop );
-	}else{
-		return ( ( elBot <= scBot ) && ( elTop >= scTop ) );
-	}
-
-}
-
-function scrollByX(elem, x){
-
-	var elTop = parseInt( elem.css('top'), 10 );
-	elem.css( 'top', ( elTop + x ) + "px" );
-
-}

script/path.js

@@ -1,7 +1,7 @@
 var Path = {
 		
 	DEFAULT_BAG_SPACE: 10,
-	
+	_STORES_OFFSET: 0,
 	// Everything not in this list weighs 1
 	Weight: {
 		'bone spear': 2,
@@ -116,7 +116,7 @@ var Path = {
 			}
 			
 			if(!ignoreStores && Engine.activeModule === Path) {
-				$('#storesContainer').css({top: perks.height() + 26 + 'px'});
+				$('#storesContainer').css({top: perks.height() + 26 + Path._STORES_OFFSET + 'px'});
 			}
 		}
 	},
@@ -313,5 +313,35 @@ var Path = {
 		if(e.category == 'character' && e.stateName.indexOf('character.perks') == 0 && Engine.activeModule == Path){
 			Path.updatePerks();
 		};
+	},
+
+	scrollSidebar: function(direction, reset){
+
+		if( typeof reset != "undefined" ){
+			$('#perks').css('top', '0px');
+			$('#storesContainer').css('top', '206px');
+			Path._STORES_OFFSET = 0;
+			return;
+		}
+		
+		var momentum = 10;
+
+		if( direction == 'up' )
+			momentum = momentum * -1
+
+		if( direction == 'down' && inView( direction, $('#perks') ) ){
+
+			return false;
+
+		}else if( direction == 'up' && inView( direction, $('#storesContainer') ) ){
+
+			return false;
+
+		}
+
+		scrollByX( $('#perks'), momentum );
+		scrollByX( $('#storesContainer'), momentum );
+		Path._STORES_OFFSET += momentum;
+
 	}
 };