Ext.Slider = function (id, config) { 
	this.init (id, config || {}); 
} 
      
Ext.Slider.prototype = { 
	width: 300, 
	initialValue: 0, 
	zone: null, 
	slider: null, 
	ddEl: null, 
	startDrag: null, 
	endDrag: null, 
	onDrag: null, 
	bgImage: '/images/icons/slider_bg.gif', 
	sliderImage: '/images/icons/slider_horiz.gif', 
	  
	init: function (id, config) { 
		Ext.apply (this, config); 
		this.zone = Ext.DomHelper.append (Ext.get (id),  { tag: 'div', id: Ext.id (), style: 'position:relative;width: '+this.width+'px;height: 22px;background-image:url('+this.bgImage+');z-index:1;' }, true); 
		this.slider = Ext.DomHelper.append (this.zone,  { tag: 'div', id: Ext.id (), style: 'position:absolute;left:'+this.initialValue+'px;width:13px;height:20px;background-image:url('+this.sliderImage+'); overflow: hidden;z-index:2' }, true); 
		var instance = this; 
		this.ddEl = new Ext.dd.DD (this.slider); 
		this.ddEl.setYConstraint (0, 0); 
		this.ddEl.setXConstraint (this.slider.getX ()-this.zone.getX (), this.zone.getRight () -this.slider.getRight ()); 
		this.slider.on ('mouseover', function () {  
			if (!instance.ddEl.isDragged)  
				this.setStyle ('top', '0px');  
				this.setStyle ('cursor', 'w-resize'); 
		}); 
		this.slider.on ('mouseout', function () { 
			if (!instance.ddEl.isDragged)  
				this.setStyle ('top', '0px');
				this.setStyle ('cursor', 'default'); 
		}); 
		this.ddEl.onMouseDown = function (x, y) { 
			instance.ddEl.isDragged = true; 
			if (typeof instance.onDragStart == 'function') 
				instance.onDragStart ((instance.slider.getX () - instance.zone.getX ()) /  (instance.width-13) * 100);  
				instance.slider.setStyle ('top', '0px');
		}; 
		this.ddEl.onMouseUp = function (x, y) { 
			instance.ddEl.isDragged = false; 
			if (typeof instance.onDragEnd == 'function') 
				instance.onDragEnd ((instance.slider.getX () - instance.zone.getX ()) /  (instance.width-13) * 100);  
				instance.slider.setStyle ('top', '0px');
		}; 
		this.ddEl.onDrag = function (e) { 
			if (typeof instance.onDrag == 'function') 
				instance.onDrag ((instance.slider.getX () - instance.zone.getX ()) /  (instance.width-13) * 100);  
				instance.slider.setStyle ('top', '0px');
		}; 
	} 
};  

Ext.onReady (function () {
   new Ext.Slider ('playerVolume', {  
        width: 50, 
        initialValue: 25,  
        bgImage: 'images/slider_bg.gif', 
        sliderImage: 'images/slider_horiz.gif', 
        onDrag: function (percent) {
         	playerControls('setVolume',percent);
        } 
    });  
});