YUI.add('value-slider', function(Y) {

	var Lang = Y.Lang,
		Widget = Y.Widget,
		Node = Y.Node;

	var NS = Y.namespace('mazzle');	
	NS.ValueSlider = ValueSlider;
	
	function ValueSlider(config) {
		ValueSlider.superclass.constructor.apply(this, arguments);
	}
	
	ValueSlider.ATTRS = {
		label: {
			value: '',
        },
		name: {
			value: ''
		},
		node: {
			value: null
		},
		min: {
			value: 0
		},
		max: {
			value: 100
		},
		value: {
			value: 0
		} 
	};
	
	Y.extend(ValueSlider, Y.Base, {
		initializer : function() {
			var node = this.get("node"),
				name = this.get("name"),
				label = this.get("label"),
				min = this.get("min"),
				max = this.get("max"),
				value = this.get("value");
			node.append('<label for='+name+'_value>'+label+'</label>');
			var sliderNode = node.appendChild(Node.create('<span></span>'));
			var input = node.appendChild(Node.create('<input id="'+name+'_value">'));
			input.set("value", value);
			var slider = new Y.Slider({min:min,max:max,value:value});
			input.setData( { slider: slider } );
			slider.after("valueChange", function(e) { 
				input.set("value", e.newVal);
			});
			input.on( "keyup", function(e) { 
				var data   = input.getData(),
        		slider = data.slider,
        		value  = parseInt( input.get( "value" ), 10 );
				if ( data.wait ) {
        			data.wait.cancel();
    			}
		    	// Update the Slider on a delay to allow time for typing
				data.wait = Y.later( 200, this, function () {
					data.wait = null;
					if(Y.Lang.isNumber(value)) {
						slider.set( "value", value );
						this.fire("valueUpdate", {name:name,value:value});
					}
		    	});
			}, this);
			slider.render(sliderNode);
			slider.on("slideEnd", function(e) {
				this.fire("valueUpdate", {name:name,value:slider.get("value")});
			}, this);
		}	
	});
	  
}, 'gallery-2010.03.02-18' ,{requires:['node','base','slider']});