Web UI -- added fs.debug(...) function for conditional debug messages to console

 - precache loading... images.

Change-Id: Ie93262b78e72f6c740ba851d8662b8170a91ab75

@@ -23,12 +23,13 @@
     'use strict';
     'use strict';
 
 
     // injected references
     // injected references
-    var $log, $timeout, ts;
+    var $log, $timeout, ts, fs;
 
 
     // constants
     // constants
     var id = 'loading-anim',
     var id = 'loading-anim',
         dir = 'data/img/loading/',
         dir = 'data/img/loading/',
         pfx = '/load-',
         pfx = '/load-',
+        nImgs = 16,
         speed = 100,
         speed = 100,
         waitDelay = 500;
         waitDelay = 500;
 
 
@@ -38,26 +39,51 @@
         th,
         th,
         idx,
         idx,
         task,
         task,
-        wait;
+        wait,
+        images = [];
 
 
-    function fname(i) {
+    function dbg() {
+        var args = Array.prototype.slice.call(arguments);
+        args.unshift('loading');
+        fs.debug.apply(this, args);
+    }
+
+    function preloadImages() {
+        var idx;
+
+        function addImg(th) {
+            var img = new Image();
+            img.src = fname(idx, th);
+            images.push(img);
+        }
+
+        dbg('preload images start...');
+        for (idx=1; idx<=nImgs; idx++) {
+            addImg('light');
+            addImg('dark');
+        }
+        dbg('preload images DONE!', images);
+    }
+
+    function fname(i, th) {
         var z = i > 9 ? '' : '0';
         var z = i > 9 ? '' : '0';
         return dir + th + pfx + z + i + '.png';
         return dir + th + pfx + z + i + '.png';
     }
     }
 
 
     function nextFrame() {
     function nextFrame() {
         idx = idx === 16 ? 1 : idx + 1;
         idx = idx === 16 ? 1 : idx + 1;
-        img.attr('src', fname(idx));
+        img.attr('src', fname(idx, th));
         task = $timeout(nextFrame, speed);
         task = $timeout(nextFrame, speed);
     }
     }
 
 
     // start displaying 'loading...' animation (idempotent)
     // start displaying 'loading...' animation (idempotent)
     function startAnim() {
     function startAnim() {
+        dbg('start ANIMATION');
         th = ts.theme();
         th = ts.theme();
         div = d3.select('#'+id);
         div = d3.select('#'+id);
         if (div.empty()) {
         if (div.empty()) {
             div = d3.select('body').append('div').attr('id', id);
             div = d3.select('body').append('div').attr('id', id);
-            img = div.append('img').attr('src', fname(1));
+            img = div.append('img').attr('src', fname(1, th));
             idx = 1;
             idx = 1;
             task = $timeout(nextFrame, speed);
             task = $timeout(nextFrame, speed);
         }
         }
@@ -65,6 +91,7 @@
 
 
     // stop displaying 'loading...' animation (idempotent)
     // stop displaying 'loading...' animation (idempotent)
     function stopAnim() {
     function stopAnim() {
+        dbg('*stop* ANIMATION');
         if (task) {
         if (task) {
             $timeout.cancel(task);
             $timeout.cancel(task);
             task = null;
             task = null;
@@ -74,12 +101,14 @@
 
 
     // schedule function to start animation in the future
     // schedule function to start animation in the future
     function start() {
     function start() {
+        dbg('start (schedule)');
         wait = $timeout(startAnim, waitDelay);
         wait = $timeout(startAnim, waitDelay);
     }
     }
 
 
     // cancel future start, if any; stop the animation
     // cancel future start, if any; stop the animation
     function stop() {
     function stop() {
         if (wait) {
         if (wait) {
+            dbg('start CANCELED');
             $timeout.cancel(wait);
             $timeout.cancel(wait);
             wait = null;
             wait = null;
         }
         }
@@ -92,11 +121,16 @@
     }
     }
 
 
     angular.module('onosLayer')
     angular.module('onosLayer')
-        .factory('LoadingService', ['$log', '$timeout', 'ThemeService',
-        function (_$log_, _$timeout_, _ts_) {
+        .factory('LoadingService',
+        ['$log', '$timeout', 'ThemeService', 'FnService',
+
+            function (_$log_, _$timeout_, _ts_, _fs_) {
             $log = _$log_;
             $log = _$log_;
             $timeout = _$timeout_;
             $timeout = _$timeout_;
             ts = _ts_;
             ts = _ts_;
+            fs = _fs_;
+
+            preloadImages();
 
 
             return {
             return {
                 start: start,
                 start: start,

@@ -251,6 +251,17 @@
         return debugFlags[tag];
         return debugFlags[tag];
     }
     }
 
 
+    // output debug message to console, if debug tag set...
+    // e.g. fs.debug('mytag', arg1, arg2, ...)
+    function debug(tag) {
+        var args;
+        if (debugOn(tag)) {
+            args = Array.prototype.slice.call(arguments, 1);
+            args.unshift('['+tag+']');
+            $log.debug.apply(this, args);
+        }
+    }
+
     angular.module('onosUtil')
     angular.module('onosUtil')
         .factory('FnService',
         .factory('FnService',
         ['$window', '$location', '$log', function (_$window_, $loc, _$log_) {
         ['$window', '$location', '$log', function (_$window_, $loc, _$log_) {
@@ -273,6 +284,7 @@
                 isSafari: isSafari,
                 isSafari: isSafari,
                 isFirefox: isFirefox,
                 isFirefox: isFirefox,
                 debugOn: debugOn,
                 debugOn: debugOn,
+                debug: debug,
                 find: find,
                 find: find,
                 inArray: inArray,
                 inArray: inArray,
                 removeFromArray: removeFromArray,
                 removeFromArray: removeFromArray,