support switching among tabs

js/l10n.js

@@ -45,19 +45,19 @@ l10n.MESSAGES = {
         'zh': 'Sim-8800: Altair 8800 模拟器',
     },
 
-    'simulator': {
-        'en': 'Simulator',
+    'nav-sim': {
+        'en': 'Sim',
         'zh': '模拟器',
     },
 
-    'debug': {
+    'nav-debug': {
         'en': 'Debug',
         'zh': '调试',
     },
 
-    'code': {
-        'en': 'Code',
-        'zh': '源码',
+    'nav-ref': {
+        'en': 'Ref',
+        'zh': '参考',
     },
 
     'switchboard': {

js/panel.js

@@ -557,8 +557,15 @@ panel.init = function() {
     l10n.restoreLocale();
 
     // Initializes event listener for nav buttons.
-    var button = document.getElementById('locale');
+    var button = document.getElementById('nav-locale');
     button.addEventListener('click', l10n.nextLocale, false);
+    button = document.getElementById('nav-sim');
+    button.addEventListener('click', panel.showTabSim, false);
+    button = document.getElementById('nav-debug');
+    button.addEventListener('click', panel.showTabDebug, false);
+    button = document.getElementById('nav-ref');
+    button.addEventListener('click', panel.showTabRes, false);
+    panel.showTabSim();
 
     // Initializes event listener for debug controls.
     button = document.getElementById('debug-load-data');
@@ -875,3 +882,30 @@ panel.playToggle = function() {
 panel.playSwitch = function() {
     panel.playSound('sound-switch');
 };
+
+/**
+ * Shows the simulator tab, and hides the other two.
+ */
+panel.showTabSim = function() {
+    document.getElementById('tab-sim').style.display = 'block';
+    document.getElementById('tab-debug').style.display = 'none';
+    document.getElementById('tab-ref').style.display = 'none';
+};
+
+/**
+ * Shows the debug tab, and hides the other two.
+ */
+panel.showTabDebug = function() {
+    document.getElementById('tab-sim').style.display = 'none';
+    document.getElementById('tab-debug').style.display = 'block';
+    document.getElementById('tab-ref').style.display = 'none';
+};
+
+/**
+ * Shows the resource tab, and hides the other two.
+ */
+panel.showTabRes = function() {
+    document.getElementById('tab-sim').style.display = 'none';
+    document.getElementById('tab-debug').style.display = 'none';
+    document.getElementById('tab-ref').style.display = 'block';
+};