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']});