reworked page switching logic

Author: rossengeorgiev

css/main.css

@@ -28,7 +28,7 @@ body {
 }
 
 .scrollStyleV {
-    z-index: 100;
+    z-index: 49;
     width: 5px;
     bottom: 6px;
     top: 6px;
@@ -43,7 +43,7 @@ body {
     border-radius: 3px 3px 3px 3px;
     position: absolute;
     width: 100%;
-    z-index: 100;
+    z-index: 49;
 }
 
 #mapscreen {
@@ -188,7 +188,7 @@ header > div {
     padding-left: 5px;
     border-bottom: 1px solid #33b5e5;
     position: relative;
-    z-index: 4;
+    z-index: 51;
     cursor: pointer;
     background-color: #fff;
     border-left: 5px solid #fff;
@@ -336,7 +336,7 @@ header > div {
     overflow: auto;
     position: absolute;
     width: 100%;
-    z-index: 4;
+    z-index: 50;
     background: #fff;
 }
 
@@ -414,7 +414,7 @@ header > div {
     height: 26px;
     position: relative;
     top: 0;
-    z-index: 3;
+    z-index: 51;
     border: solid 1px #919191;
     border-radius: 28px;
     box-shadow: inset 0 2px 1px white, inset 0 -2px 1px white;

index.html

@@ -206,14 +206,15 @@ <h2>Chase car mode</h2>
             </div>
         </div>
     </div>
+    <div id="homebox" style="width:0px;height:0px"></div>
     <div id="mapscreen">
-        <div id="map" style="dispaly: none" class="main_screen"></div>
+        <div id="map"></div>
         <div id="telemetry_graph" style="display: none">
             <div class="graph_label">Telemetry Graph</div>
             <div class="holder" style="height: 200px;width: 50px"></div>
         </div>
     </div>
-    <div id="main" style="dispaly: none" class="main_screen">
+    <div id="main" style="dispaly: none">
         <div class="scrollwrapper">
             <div class="portrait">
                 <div class="row vehicle0"><div class="header empty"><span>No vehicles :(</span></div></div>

js/app.js

@@ -66,15 +66,15 @@ function trackerInit() {
     if(map) return;
 
     $('#loading,#settingsbox,#aboutbox,#chasebox').hide(); // welcome screen
-    $('header,#main,#map').show(); // interface elements
+    $('header,#main').show(); // interface elements
 
     if(is_mobile || embed.enabled) $(".nav .embed").hide();
 
     if(!is_mobile) {
         if(!embed.enabled) $.getScript("js/ssdv.js");
 
         $.getScript("js/init_plot.js", function() { checkSize(); if(!map) load(); });
-        if(embed.graph) $('#telemetry_graph').addClass("main_screen").attr('style','');
+        if(embed.graph) $('#telemetry_graph').attr('style','');
         return;
     }
     checkSize();
@@ -354,65 +354,27 @@ $(window).ready(function() {
 
     // menu interface options
     $('.nav')
-    .on('click', '.home', function() {
+    .on('click', 'li', function() {
         var e = $(this);
-        var box = $('.main_screen');
-        if(box.is(':hidden')) {
-            $('#chasecarbox,#aboutbox,#settingsbox,#embedbox').hide();
-            box.show();
+        var name = e.attr('class').replace(" last","");
+        var box = $("#"+name+"box");
 
-            // analytics
-            if(typeof _gaq == 'object') _gaq.push(['_trackEvent', 'UI Menubar', 'Open Page', 'Map']);
-        }
-        checkSize();
-    })
-    .on('click', '.chasecar', function() {
-        var e = $(this);
-        var box = $('#chasecarbox');
         if(box.is(':hidden')) {
-            $('.main_screen,#aboutbox,#settingsbox,#embedbox').hide();
+            $('.flatpage').hide();
             box.show().scrollTop(0);
 
             // analytics
-            if(typeof _gaq == 'object') _gaq.push(['_trackEvent', 'UI Menubar', 'Open Page', 'Chase Car']);
-        }
-        checkSize();
-    })
-    .on('click', '.about', function() {
-        var e = $(this);
-        var box = $('#aboutbox');
-        if(box.is(':hidden')) {
-            $('.main_screen,#chasecarbox,#settingsbox,#embedbox').hide();
-            box.show().scrollTop(0);
+            var pretty_name;
+            switch(name) {
+                case "home": pretty_name = "Map"; break;
+                case "chasecar": pretty_name = "Chase Car"; break;
+                default: pretty_name = name[0].toUpperCase() + name.slice(1);
+            }
 
-            // analytics
-            if(typeof _gaq == 'object') _gaq.push(['_trackEvent', 'UI Menubar', 'Open Page', 'About']);
+            if(typeof _gaq == 'object') _gaq.push(['_trackEvent', 'UI Menubar', 'Open Page', pretty_name]);
         }
         checkSize();
     })
-    .on('click', '.settings', function() {
-        var e = $(this);
-        var box = $('#settingsbox');
-        if(box.is(':hidden')) {
-            $('.main_screen,#chasecarbox,#aboutbox,#embedbox').hide();
-            box.show().scrollTop(0);
-
-            // analytics
-            if(typeof _gaq == 'object') _gaq.push(['_trackEvent', 'UI Menubar', 'Open Page', 'Settings']);
-        }
-    })
-    .on('click', '.embed', function() {
-        var e = $(this);
-        var box = $('#embedbox');
-        if(box.is(':hidden')) {
-            $('.main_screen,#chasecarbox,#aboutbox,#settingsbox').hide();
-            box.show().scrollTop(0);
-
-            // analytics
-            if(typeof _gaq == 'object') _gaq.push(['_trackEvent', 'UI Menubar', 'Open Page', 'Embed']);
-        }
-        checkSize();
-    });
 
     // toggle functionality for switch button
     $("#sw_chasecar").click(function() {