From 305dd4cec1673b903b3291ce4a58633e836d18e8 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Sat, 13 Jul 2013 13:58:52 +0000
Subject: [PATCH] allow for asynchronous large video timeline

---
 source/Ox.UI/js/Video/LargeVideoTimeline.js | 30 ++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/source/Ox.UI/js/Video/LargeVideoTimeline.js b/source/Ox.UI/js/Video/LargeVideoTimeline.js
index a55aba88..b2aa1723 100644
--- a/source/Ox.UI/js/Video/LargeVideoTimeline.js
+++ b/source/Ox.UI/js/Video/LargeVideoTimeline.js
@@ -60,6 +60,7 @@ Ox.LargeVideoTimeline = function(options, self) {
     self.center = Math.floor(self.options.width / 2);
     self.fps = 25;
     self.height = 64;
+    self.isAsync = self.options.getImageURL.length == 3;
     self.tileWidth = 1500;
     self.tiles = self.options.duration * self.fps / self.tileWidth;
 
@@ -139,6 +140,14 @@ Ox.LargeVideoTimeline = function(options, self) {
         triggerPositionEvent();
     }
 
+    function getImageURL(i, callback) {
+        if (!self.isAsync) {
+            callback(self.options.getImageURL(self.options.type, i));
+        } else {
+            self.options.getImageURL(self.options.type, i, callback);
+        }
+    }
+
     function getPosition(e) {
         return self.options.position + (
             e.clientX - that.offset().left - self.center - 1
@@ -177,14 +186,15 @@ Ox.LargeVideoTimeline = function(options, self) {
             Math.min(self.tile + 2, self.tiles),
             function(i) {
                 if (!self.$tiles[i]) {
-                    self.$tiles[i] = $('<img>')
-                        .attr({
-                            src: self.options.getImageURL(self.options.type, i)
-                        })
-                        .css({
-                            left: (i * self.tileWidth) + 'px'
-                        })
-                        .appendTo(self.$timeline);
+                    if (self.isAsync) {
+                        self.$tiles[i] = true;
+                    }
+                    getImageURL(i, function(url) {
+                        self.$tiles[i] = $('<img>')
+                            .attr({src: url})
+                            .css({left: (i * self.tileWidth) + 'px'})
+                            .appendTo(self.$timeline);
+                    });
                 }
             }
         );
@@ -214,7 +224,9 @@ Ox.LargeVideoTimeline = function(options, self) {
 
     function setType() {
         Ox.forEach(self.$tiles, function($tile, i) {
-            $tile.attr({src: self.options.getImageURL(self.options.type, i)});
+            getImageURL(i, function(url) {
+                $tile.attr({src: url});
+            });
         });
     }