From fbffadd4e5585bc17d109ed39cb39c3d21f0ae3d Mon Sep 17 00:00:00 2001
From: j <0x006A@0x2620.org>
Date: Mon, 3 Feb 2014 07:27:00 +0000
Subject: [PATCH] load SmallVideoTimelineImage overlay async and update in
 BlockVideoTimeline once loaded

---
 source/Ox.UI/js/Video/BlockVideoTimeline.js   |  2 +
 .../Ox.UI/js/Video/SmallVideoTimelineImage.js | 76 ++++++++++---------
 2 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/source/Ox.UI/js/Video/BlockVideoTimeline.js b/source/Ox.UI/js/Video/BlockVideoTimeline.js
index 8ccd4947..4376af7f 100644
--- a/source/Ox.UI/js/Video/BlockVideoTimeline.js
+++ b/source/Ox.UI/js/Video/BlockVideoTimeline.js
@@ -160,6 +160,8 @@ Ox.BlockVideoTimeline = function(options, self) {
             subtitles: Ox.clone(self.options.subtitles, true),
             type: self.options.type,
             width: Math.round(self.options.duration)
+        }).bindEvent({
+            loaded: updateTimelines
         });
     }
 
diff --git a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js
index 1105beb3..6e303b64 100644
--- a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js
+++ b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js
@@ -5,6 +5,7 @@ Ox.SmallVideoTimelineImage <f> Small Video Timeline Image
     options <o> Options
     self <o> Shared private variable
     ([options[, self]]) -> <o:Ox.Element> Small Video Timeline Image
+        loaded <!> subtitle, result and selection overlays are loaded
 @*/
 Ox.SmallVideoTimelineImage = function(options, self) {
 
@@ -137,42 +138,49 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         });
     }
 
-    self.$subtitles = $('<img>')
-        .attr({
-            src: getImageURL('subtitles')
-        })
-        .css({
-            position: 'absolute',
-            top: self.imageTop + 'px',
-            width: self.options.width + 'px',
-            height: self.imageHeight + 'px'
-        })
-        .appendTo(that);
+    self.$subtitles = $('<img>');
+    self.$results = $('<img>');
+    self.$selection = $('<img>');
 
-    self.$results = $('<img>')
-        .attr({
-            src: getImageURL('results')
-        })
-        .css({
-            position: 'absolute',
-            top: self.imageTop + 'px',
-            width: self.options.width + 'px',
-            height: self.imageHeight + 'px'
-        })
-        .appendTo(that);
+    setTimeout(function() {
+        self.$subtitles
+            .attr({
+                src: getImageURL('subtitles')
+            })
+            .css({
+                position: 'absolute',
+                top: self.imageTop + 'px',
+                width: self.options.width + 'px',
+                height: self.imageHeight + 'px'
+            })
+            .appendTo(that);
+
+        self.$results
+            .attr({
+                src: getImageURL('results')
+            })
+            .css({
+                position: 'absolute',
+                top: self.imageTop + 'px',
+                width: self.options.width + 'px',
+                height: self.imageHeight + 'px'
+            })
+            .appendTo(that);
+
+        self.$selection
+            .attr({
+                src: getImageURL('selection')
+            })
+            .css({
+                position: 'absolute',
+                top: self.imageTop + 'px',
+                width: self.options.width + 'px',
+                height: self.imageHeight + 'px'
+            })
+            .appendTo(that);
+        that.triggerEvent('loaded');
+    });
 
-    self.$selection = $('<img>')
-        .attr({
-            src: getImageURL('selection')
-        })
-        .css({
-            position: 'absolute',
-            top: self.imageTop + 'px',
-            width: self.options.width + 'px',
-            height: self.imageHeight + 'px'
-        })
-        .appendTo(that);
-    
     function getClipTimeline() {
         var $canvas, context, image,
             firstTile, lastTile, tileHeight, tileOffset, tileWidth;