vumix/commit

simplified videoframe widget

diff --git a/web/js/videoframes.js b/web/js/videoframes.js
new file mode 100644
index 0000000..2414cdb
--- /dev/null
+++ b/web/js/videoframes.js
@@ -0,0 +1,98 @@
+YUI.add('videoframes', function(Y) {
+
+	var Lang = Y.Lang,
+		Widget = Y.Widget,
+		Node = Y.Node;
+	
+	/* VideoFrames class constructor */
+	function VideoFrames(config) {
+		VideoFrames.superclass.constructor.apply(this, arguments);
+	}
+
+	/* 
+	 * Required NAME static field, to identify the Widget class and 
+	 * used as an event prefix, to generate class names etc. (set to the 
+	 * class name in camel case). 
+	 */
+	VideoFrames.NAME = "videoframes";
+
+	/*
+	 * The attribute configuration for the VideoFrames widget. Attributes can be
+	 * defined with default values, get/set functions and validator functions
+	 * as with any other class extending Base.
+	 */
+	VideoFrames.ATTRS = {
+		frameServer: {
+			value: null
+		},
+		duration: {
+			value: null
+		},
+		video: {
+			value: null
+		},
+		interval : {
+			value: 10000
+		}
+	};
+
+	/* Static constants used to define the markup templates used to create VideoFrames DOM elements */
+	VideoFrames.LIST_CLASS = 'frameslist';
+	VideoFrames.LIST_TEMPLATE = '<ul class="'+VideoFrames.LIST_CLASS+'"></ul>';
+
+	/* VideoFrames extends the base Widget class */
+	Y.extend(VideoFrames, Widget, {
+
+		initializer: function() {
+			this.listNode = null;
+		},
+
+		destructor : function() {
+		},
+
+		renderUI : function() {
+			var content = this.get("contentBox");
+			this._renderFrames(content);
+		},
+
+		bindUI : function() {
+			Y.delegate("click", this._onFrameSelect, this.listNode, "li", this);
+			//Y.delegate("mouseover", this._onFrameHover, this.get("contentBox"), "li", this);
+		},
+
+		syncUI : function() {
+		},
+						
+		_renderFrames : function(node) {
+			var list = node.appendChild(Node.create(VideoFrames.LIST_TEMPLATE)),
+				duration = this.get("duration"),
+				interval = this.get("interval"),
+				path = this.get("frameServer")+'?url='+this.get("video")+'&time=';
+			
+			var maxFrames = Math.round(duration/interval);
+			for(var i=0; i < maxFrames; i++) {
+				var time = (i*interval)/1000;
+				list.append('<li class="frame" title="'+time+'">'+this.formatFrame(path, time)+'</li>');
+			}
+			this.listNode = list;
+		},
+		
+		formatFrame : function(path, time) {
+			var html = '<div class="image">'
+				+'<img src="'+path+time+'">'
+				+'</div>';
+			return html;
+		},
+		
+		_onFrameSelect : function(e) {
+			var node = e.currentTarget,
+				time = node.get("title");
+			Y.log('clicked frame at time '+time);
+       		this.fire("frameSelect", {node:node, time:time});
+		}
+				
+	});
+	
+	Y.VideoFrames = VideoFrames;
+	  
+}, 'gallery-2010.03.02-18' ,{requires:['node','widget','io-base','json-parse']});
\ No newline at end of file