fix timebox not being hidden on startup

* that is when option to hide it is enabled
* lookanglesbox moved up if timebox is hidden

Author: rossengeorgiev

index.html

@@ -237,15 +237,15 @@ <h2>Chase car mode</h2>
     </div>
     <div id="homebox" style="width:0px;height:0px"></div>
     <div id="mapscreen">
-        <div id="timebox" class="present slickbox" style="display: none">
+        <div id="timebox" class="present slickbox animate" style="display: none">
             <svg width="40" height="40" viewbox="0 0 200 200" version="1.1" class="lfloat">
                   <path d="M99.812,43.188c-2.77,0-5,2.032-5,4.562v40.875c-4.315,1.97-7.312,6.321-7.312,11.375,0,6.9,5.596,12.5,12.5,12.5,1.05,0,2.06-0.16,3.03-0.41l23.35,23.35c2.23,2.24,5.93,2.13,8.28-0.22s2.42-6.04,0.18-8.28l-23-23c0.42-1.24,0.66-2.56,0.66-3.94,0-5.202-3.17-9.68-7.69-11.562v-40.688c0-2.53-2.23-4.562-4.998-4.562zm-5.906-23c0.031-0.003,0.063,0.002,0.094,0v14.374c0,0.236,0.202,0.438,0.438,0.438h11.122c0.24,0,0.44-0.202,0.44-0.438v-14.343c39.4,2.921,70.86,34.381,73.78,73.781h-14.34c-0.24,0-0.44,0.171-0.44,0.406v11.154c0,0.24,0.2,0.44,0.44,0.44h14.34c-2.92,39.4-34.38,70.86-73.78,73.78v-14.37c0-0.24-0.2-0.41-0.44-0.41h-11.122c-0.236,0-0.438,0.17-0.438,0.41v14.37c-39.4-2.92-70.86-34.38-73.781-73.78h14.343c0.236,0,0.438-0.2,0.438-0.44v-11.154c0-0.235-0.202-0.406-0.438-0.406h-14.343c2.918-39.372,34.33-70.848,73.687-73.812zm6.094-10.188c-49.706,0-90,40.294-90,90,0,49.71,40.294,90,90,90,49.71,0,90-40.29,90-90,0-49.706-40.29-90-90-90zm0-10c55.23,0,100,44.772,100,100,0,55.23-44.77,100-100,100-55.228,0-100-44.77-100-100,0-55.228,44.772-100,100-100z" />
             </svg>
             <span class="current lfloat">Current: ???</span>
             <span class="local lfloat">Local: ???</span>
         </div>
 
-        <div id="lookanglesbox" class="slickbox" style="display: none">
+        <div id="lookanglesbox" class="slickbox animate" style="display: none">
             <svg width="40" height="40" viewbox="0 0 200 200" version="1.1" class="lfloat">
 <path d="M100,0c-55.228,0-100,44.772-100,100,0,55.23,44.772,100,100,100,55.23,0,100-44.77,100-100,0-55.228-44.77-100-100-100zm0,10c49.71,0,90,40.294,90,90,0,49.71-40.29,90-90,90-49.706,0-90-40.29-90-90,0-49.706,40.294-90,90-90zm-2.062,10c-43.229,1.095-77.938,36.508-77.938,80,0,44.18,35.817,80,80,80,44.18,0,80-35.82,80-80,0-44.183-35.82-80-80-80-0.69,0-1.376-0.017-2.062,0zm-14.219,9.469h7.969l16.092,27.187,0.16-0.031v-27.156h7.97v39.812h-7.97l-16.065-27.187h-0.187v27.187h-7.969v-39.812zm16.281,44.593l6.94,19,19,6.938-19,6.94-6.94,19-6.938-19-19-6.94,19-6.938,6.938-19zm-72.781,5.876h7.812l5.719,27.252,0.156,0.03,7.469-27.282h5.875l7.531,27.282h0.157l5.687-27.282h7.813l-9.313,39.812h-7.406l-7.313-26.281h-0.156l-7.312,26.281h-7.407l-9.312-39.812zm107.75,0h27.22v6.156h-19.25v10h16.5v6.156h-16.5v11.37h19.28v6.13h-27.25v-39.812zm-34.56,51.502c4.37,0,7.93,1.17,10.68,3.5,2.76,2.32,4.09,5.18,4,8.59l-0.06,0.16h-7.75c0-1.84-0.61-3.33-1.84-4.47s-2.97-1.69-5.19-1.69c-2.133,0-3.771,0.46-4.938,1.41-1.166,0.95-1.75,2.18-1.75,3.65,0,1.35,0.627,2.45,1.876,3.32,1.248,0.86,3.406,1.78,6.472,2.75,4.39,1.22,7.7,2.83,9.97,4.84,2.26,2.01,3.4,4.64,3.4,7.91,0,3.41-1.34,6.09-4.03,8.06s-6.24,2.94-10.66,2.94c-4.335,0-8.113-1.11-11.34-3.35-3.227-2.23-4.81-5.38-4.719-9.4l0.063-0.16h7.75c0,2.37,0.738,4.12,2.187,5.22s3.474,1.66,6.059,1.66c2.17,0,3.82-0.46,4.97-1.35s1.72-2.1,1.72-3.59c0-1.53-0.54-2.76-1.62-3.69-1.09-0.93-2.98-1.8-5.691-2.63-4.74-1.36-8.326-2.99-10.75-4.87-2.425-1.88-3.657-4.42-3.657-7.69,0-3.26,1.408-5.93,4.188-8s6.336-3.12,10.66-3.12z" />
             </svg>

js/app.js

@@ -567,8 +567,10 @@ $(window).ready(function() {
                 var elm = $("#timebox");
                 if(on) {
                     elm.removeClass('past').removeClass('present').hide();
+                    $('#lookanglesbox').css({top:'7px'});
                 } else {
                     elm.addClass('present').show();
+                    $('#lookanglesbox').css({top:'40px'});
                 }
                 break;
             case "opt_layers_clouds":

js/tracker.js

@@ -199,13 +199,20 @@ function load() {
         var origW = elm.width();
         var iconW = elm.find("svg").width();
 
+        if(offline.get('opt_hide_timebox')) {
+            elm.removeClass('animate').hide();
+            $("#lookanglesbox").css({top:'7px'});
+        };
+
         // prep for animation
-        $(".slickbox").css({width:iconW}).find("span").hide();
+        $(".slickbox.animate").css({width:iconW}).find("span").hide();
 
-        // animate timebox
-        elm.fadeIn(500,"easeOut").animate({width:origW},400,"easeOut", function() {
-          $("#timebox span").fadeIn(500, "easeOut");
-        });
+        if(!offline.get('opt_hide_timebox')) {
+            // animate timebox
+            elm.fadeIn(500,"easeOut").animate({width:origW},400,"easeOut", function() {
+              $("#timebox span").fadeIn(500, "easeOut");
+            });
+        }
 
         // animate lookanglesbox, delayed start by 300ms
         $("#lookanglesbox").delay(200).fadeIn(500,"easeOut").animate({width:origW},400,"easeOut", function() {