(function($) {

	$.widget("ui.tagbar", {
		options: {
			max: 400,
			label: "",
			start: 0,
			end: 0
		},
	
		_create: function() {
			var o = this.options;
			this.element
				.addClass("ui-tagbar ui-widget");
			
			var inputHTML = '<input class="ui-corner-all" type="text" id="start" size="3">';
			var startNode = $(inputHTML).attr('value', o.start);
			var endNode   = $(inputHTML).attr('value', o.end);
		    var sliderNode = $('<div style="width:450px; float:left" class="tag-slider"></div>')
                .slider({
    			    range: true,
        			min: 0,
        			max: o.max,
        			values: [o.start, o.end],
        			slide: function(event, ui) {
        			    //$('#video').videoplayer('setTime', ui.value);
        				startNode.val(ui.values[0]);
        				endNode.val(ui.values[1]);
        			}
        		});
		
			this.element
			.append('<div class="tag-label">'+o.label+'</div>')
			.append($('<div class="tag-play"></div>')
            	.click(function() {}))
        	.append(sliderNode)
			.append($('<div class="tag-times"></div>')
		    	.append(startNode)
            	.append(endNode))
		},

		destroy : function() {
		}

	});

	$.extend($.ui.tagbar, {});

})(jQuery);