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

source/Ox.UI/js/Video/Ox.VideoElement.js

@@ -0,0 +1,159 @@
+// vim: et:ts=4:sw=4:sts=4:ft=js
+Ox.VideoElement = function(options, self) {
+
+    var self = self || {},
+        that = new Ox.Element('video', self)
+            .defaults({
+                fps: 25,
+                height: 0,
+                loop: false,
+                muted: false,
+                paused: false,
+                playInToOut: false,
+                points: [0, 0],
+                position: 0,
+                poster: '',
+                url: '',
+                width: 0
+            })
+            .options(options || {})
+            .attr({
+                poster: self.options.poster,
+                preload: 'auto',
+                src: self.options.url
+            })
+            .css({
+                height: self.options.height + 'px',
+                width: self.options.width + 'px'
+            })
+            .bind({
+                ended: ended,
+                loadedmetadata: function() {
+                    self.video.currentTime = self.options.position;
+                }
+            });
+
+    $.extend(self, {
+        millisecondsPerFrame: 1000 / self.options.fps,
+        video: that.$element[0]
+    });
+
+    function ended() {
+        that.pause()
+            .triggerEvent('paused', {
+                position: self.options.position
+            });
+    }
+
+    function playing() {
+        var event = 'playing';
+        self.options.position = Math.round(self.video.currentTime * self.options.fps) / self.options.fps;
+        if (self.options.playInToOut && self.options.position >= self.options.points[1])  {
+            event = 'paused';
+            that.position(self.options.points[1]).pause();
+        }
+        that.triggerEvent(event, {
+            position: self.options.position
+        });
+    }
+
+    self.onChange = function(key, value) {
+        if (key == 'height') {
+            that.size(self.options.width, value);
+        } else if (key == 'muted') {
+            that[value ? 'mute' : 'unmute']();
+        } else if (key == 'paused') {
+            that[value ? 'pause' : 'play']();
+        } else if (key == 'points') {
+            that.points(value);
+        } else if (key == 'width') {
+            that.size(value, self.options.height);
+        }
+    };
+
+    that.mute = function() {
+        self.options.muted = true;
+        self.video.muted = true;
+        return that;
+    };
+
+    that.muted = function() {
+        return self.options.muted;
+    }
+
+    that.pause = function() {
+        self.options.paused = true;
+        self.options.playInToOut = false;
+        self.video.pause();
+        clearInterval(self.playInterval);
+        return that;
+    };
+
+    that.paused = function() {
+        return self.options.paused;
+    }
+
+    that.play = function() {
+        self.options.paused = false;
+        self.video.play();
+        self.playInterval = setInterval(playing, self.millisecondsPerFrame);
+        return that;
+    };
+
+    that.playInToOut = function() {
+        self.options.playInToOut = true;
+        that.position(self.options.points[0]);
+        self.options.paused && that.play();
+        return that;
+    };
+
+    that.points = function(points) {
+        self.options.points = points;
+    }
+
+    that.position = function(pos) {
+        if (arguments.length == 0) {
+            return self.video.currentTime;
+        } else {
+            self.options.position = pos;
+            self.video.currentTime = self.options.position;
+            return that;
+        }
+    };
+
+    that.size = function(width, height) {
+        // fixme: why options? use css!
+        if (arguments.length == 0) {
+            return {
+                width: self.options.width,
+                height: self.options.height
+            };
+        } else {
+            self.options.width = width;
+            self.options.height = height;
+            that.css({
+                width: width + 'px',
+                height: height + 'px'
+            });
+            return that;
+        }
+    };
+
+    that.toggleMute = function() {
+        self.video.muted = !self.video.muted;
+        return that;
+    }
+
+    that.togglePlay = function() {
+        self.options.paused = !self.options.paused;
+        that[self.options.paused ? 'pause' : 'play']();
+    }
+
+    that.unmute = function() {
+        self.video.muted = false;
+        return that;
+    };
+
+    return that;
+
+};