cs.common.SliderPanel = Ext.extend(Ext.Panel, {

	startValue: 1,
	label: 'Slider',
	maxValue: 10,

	initComponent: function()
	{
		
		this.maxValue -= 1;
		this.startValue -= 1;
		
		this.slider = new Ext.Slider({
			value: this.startValue,
			maxValue: this.maxValue,
			increment: 1,
			//disabledClass: 'x-slider-no-hover',
			listeners: { 
				change: {
					fn: function() {
						this.east.getEl().dom.innerHTML = this.eastInnerHTML(this.slider.value + 1);
						this.fireEvent('sliderChanged', this, this.slider.value + 1);
					},
					scope: this
				} 
			}
		});
		
		this.west = new Ext.Panel({
			region: 'west',
			width: 60,
			html: '<p>' + this.label + '</p>'
		});
		
		this.center = new Ext.Panel({
			region: 'center',
			items: this.slider
		});
		
		this.east = new Ext.Panel({
			region: 'east',
			width: 20,
			html: this.eastInnerHTML(this.startValue + 1)
		});
		
		Ext.apply(this, {
			layout: 'border',
			height: 25,
			items:[
				this.west,
				this.center,
				this.east
			]
		});
		
		cs.common.SliderPanel.superclass.initComponent.apply(this, arguments);
		this.addEvents('sliderChanged');
	},
	
	eastInnerHTML: function(content)
	{
		return '<p style="text-align: right; color: #999">' + content + '</p>';
	},
	
	setValue: function(value)
	{
		this.slider.setValue(value -1);
	},
	
	getValue: function()
	{
		return this.slider.getValue() + 1;
	}
});