better filesystem structure for modules and themes; 'minified' ui if debug option not set; dynamially generated map markers

source/Ox.UI/js/Video/Ox.Flipbook.js

@@ -0,0 +1,101 @@
+// vim: et:ts=4:sw=4:sts=4:ft=js
+// fixme: rename!
+
+Ox.Flipbook = function(options, self) {
+
+    var self = self || {},
+        frame = $('<img>').css({
+                            'position': 'absolute',
+                            'width': '100%',
+                            'height': 'auto'
+                           })
+                          .hide(),
+        icon = $('<img>').css({
+                            'position': 'absolute',
+                            'width': '100%',
+                            'height': 'auto'
+                         }),
+        frames = {},
+        timestamp = $('<div>').css({
+                                'position': 'absolute',
+                                'text-align': 'center',
+                                'width': '100%'
+                            })
+                            .hide(),
+        that = new Ox.Element('div', self)
+            .defaults({
+                frames: {},
+                duration: 0,
+                icon: ''
+            })
+            .options(options || {})
+            .append(icon)
+            .append(frame)
+            .append(timestamp)
+            .mouseover(function() {
+                frame.show();
+                timestamp.show();
+                icon.hide();
+            })
+            .mousemove(function(event) {
+                var position = getPosition(event),
+                    image = getFrame(position),
+                    frameHeight = image?image.height:that.height();
+                frame.attr('src', image.src);
+                timestamp.html(Ox.formatDuration(position, 'short'));
+                
+                var height = (that.height() - frameHeight)/2;
+                frame.css({'top': height + 'px'});
+                timestamp.css({'top': (frameHeight + height) + 'px'});
+            })
+            .mouseout(function() {
+                frame.hide();
+                timestamp.hide();
+                icon.show();
+            })
+            .mousedown(function(event) {
+                that.triggerEvent('click', {
+                    'position': getPosition(event)
+                });
+            });
+    
+    function getPosition(event) {
+        var position = Math.floor(event.clientX - that.offset().left);
+        position = (position / that.width()) * self.options.duration;
+        return position;
+    }
+
+    function getFrame(position) {
+        var frame;
+        Ox.forEach(frames, function(img, i) {
+            if (!frame || i <= position) {
+                frame = img;
+            }
+        });
+        return frame;
+    }
+
+    function cacheFrames() {
+        Ox.forEach(self.options.frames, function(src, i) {
+            frames[i] = new Image();
+            frames[i].onload = function() {
+                frameHeight = frames[i].height / frames[i].width * that.width();
+            };
+            frames[i].src = src;
+        });
+    }
+    
+    self.onChange = function(key, value) {
+        if (key == 'frames') {
+            cacheFrames();
+        } else if (key == 'icon') {
+            icon.attr('src', value);
+        }
+    };
+
+    if(options.icon) {
+       icon.attr('src', options.icon);
+    }
+    cacheFrames();
+    return that;
+};