Ext.DevxSscroll = Ext.extend(Ext.Slider, {

    stepByButtons : 1,
    stepBySlide : 1,
    startTimer : 300,
    repeatTimer : 300,
    clickRange: [1,16],
    lastAction: '',
    scrollStyle: '',

    initComponent : function(){
        if(this.value === undefined){
            this.value = this.minValue;
        }
        this.lastAction = '';
        Ext.Slider.superclass.initComponent.call(this);
        this.keyIncrement = Math.max(this.increment, this.keyIncrement);
        this.addEvents(
            'beforechange',
            'change',
            'changecomplete',
            'dragstart',
            'drag',
            'dragend',
            'clicktop',
            'clickbottom'
        );
    },


    onRender : function(){
        this.autoEl = {
            cls: 'DevxSscroll_btnTop'+this.scrollStyle,
            cn:{
                cls: 'DevxSscroll_btnBottom'+this.scrollStyle,
                cn: {
                    cls: 'x-slider DevxSscroll_Slide'+this.scrollStyle,
                    cn:{
                        cls:'DevxSscroll_btnTrackTop'+this.scrollStyle,
                        cn:{
                            cls:'DevxSscroll_btnTrackCenter'+this.scrollStyle,
                            cn:[
                                {cls:'DevxSscroll_btnTrackBottom'+this.scrollStyle},
                                {tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}
                            ]
                        }
                    }
                }
            }
        };
        Ext.Slider.superclass.onRender.apply(this, arguments);
        this.buttonTopEl = this.el;
        this.buttonBottomEl = this.buttonTopEl.first();
        this.innerEl = this.buttonBottomEl.first();
        this.thumbTop = this.innerEl.first();
        this.thumbCenter = this.thumbTop.first();
        this.thumb = this.thumbCenter.first();
        this.focusEl = this.thumb.next();
        this.minSizeTraker = this.thumb.getHeight();
        this.initEvents();
    },

    initEvents : function(){
        this.thumbTop.addClassOnOver('x-slider-thumb-over'+this.scrollStyle);
        this.mon(this.innerEl, 'mousedown', this.onMouseDown, this);
        this.mon(this.innerEl, 'keydown', this.onKeyDown, this);
        this.mon(this.innerEl, 'mouseup', this.onMouseUp, this);
        this.mon(this.innerEl, 'mouseout', this.onMouseUp, this);
        this.mon(this.buttonTopEl, 'mousedown', this.onButtonTop, this);
        this.mon(this.buttonBottomEl, 'mousedown', this.onButtonBottom, this);
        this.mon(this.buttonTopEl, 'mouseup', this.onMouseUp, this);
        this.mon(this.buttonBottomEl, 'mouseup', this.onMouseUp, this);
        this.mon(this.thumbTop, 'mouseover', this.onMouseUp, this);

        this.focusEl.swallowEvent("click", true);

        this.tracker = new Ext.dd.DragTracker({
            onBeforeStart: this.onBeforeDragStart.createDelegate(this),
            onStart: this.onDragStart.createDelegate(this),
            onDrag: this.onDrag.createDelegate(this),
            onEnd: this.onDragEnd.createDelegate(this),
            tolerance: 3,
            autoStart: 300
        });
        this.tracker.initEl(this.thumb);
        this.on('beforedestroy', this.tracker.destroy, this.tracker);
    },

    resizeTraker : function(v){
        var h = this.getInnerHeight(true);
        var v = this.maxValue - this.minValue;
        var check = h - this.minSizeTraker - v  ;
        if (check > 0) {
            this.thumb.setHeight(this.minSizeTraker + check);
            this.thumbTop.setHeight(this.minSizeTraker + check);
            this.thumbCenter.setHeight(this.minSizeTraker + check - this.thumbTop.getPadding('t'));
            if (check - this.thumb.getTop(true) + this.thumbTop.getPadding('t') > 0) {
                this.thumbTop.setHeight(check - this.thumb.getTop(true) + this.thumbTop.getPadding('t'));
            }
        } else {
            this.thumb.setHeight(this.minSizeTraker);
            this.thumbTop.setHeight(this.minSizeTraker);
            this.thumbCenter.setHeight(this.minSizeTraker - this.thumbTop.getPadding('t'));
            if (this.thumb.getTop(true) + this.thumbTop.getPadding('t') > 0) {
                this.thumbTop.setHeight(this.thumb.getTop(true) + this.thumbTop.getPadding('t'));
            }
        }
    },

    translateValue : function(value){
        var ratio = this.getRatio();
        return Math.round(((value - this.minValue)) * ratio);
    },

    onResize : function(w, h){
        this.innerEl.setHeight(h - this.buttonTopEl.getPadding('b') + this.buttonBottomEl.getPadding('t'));
        this.resizeTraker();
        if (this.value > this.maxValue) this.value = this.maxValue;
        this.syncThumb();
    },

    getRatio : function(){
        var h = this.getInnerHeight(false);
        var v = this.maxValue - this.minValue;
        return h/v;
    },

    getInnerHeight: function(full){
        if (full) {
            return this.innerEl.getHeight();
        } else {
            return this.innerEl.getHeight() - this.thumb.getHeight();
        }
    },

    moveThumb: function(v, animate){
        this.thumbTop.setTop(v);
    },

    onDragStart: function(e){
        this.thumb.addClass('x-slider-thumb-drag'+this.scrollStyle);
        this.dragging = true;
        this.dragStartValue = this.value;
        this.dragStartPos = this.innerEl.translatePoints(this.tracker.getXY());
        this.fireEvent('dragstart', this, e);
    },

    onDrag: function(e){
        var pos = this.innerEl.translatePoints(this.tracker.getXY());
        var bottom = this.dragStartPos.top - pos.top;
        this.lastAction = 'drag';
        this.setValue(this.dragStartValue - Math.round(bottom/this.getRatio()), false);
        this.fireEvent('drag', this, e);
    },

    onDragEnd: function(e){
        this.thumb.removeClass('x-slider-thumb-drag'+this.scrollStyle);
        this.dragging = false;
        this.lastAction = '';
        this.fireEvent('dragend', this, e);
        if(this.dragStartValue != this.value){
            this.fireEvent('changecomplete', this, this.value);
        }
    },

    onClickChange : function(local){
        if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){
            //document.getElementById('test2').value = local.top;
            if (local.top < this.translateValue(this.value)) {
                this.setValue(this.getValue() - this.stepBySlide);
            } else {
                this.setValue(this.getValue() + this.stepBySlide);
            }
            var s = this;
            var time;
            if (this.timers) {
                time = this.repeatTimer;
            } else {
                time = this.startTimer;
            }
            this.timers = setTimeout(function () {s.onClickChange(local)}, time);
        }
    },

    onButtonTop : function(e){
        if (e.target == this.buttonTopEl.dom) {
            this.setValue(this.getValue() - this.stepByButtons);
            var s = this;
            var time;
            if (this.timers) {
                time = this.repeatTimer;
            } else {
                time = this.startTimer;
            }
            this.timers = setTimeout(function () {s.onButtonTop(e)}, time);
            this.fireEvent('clicktop', this, e);
        }
    },

    onButtonBottom : function(e){
        if (e.target == this.buttonBottomEl.dom) {
            this.setValue(this.getValue() + this.stepByButtons);
            var s = this;
            var time;
            if (this.timers) {
                time = this.repeatTimer;
            } else {
                time = this.startTimer;
            }
            this.timers = setTimeout(function () {s.onButtonBottom(e)}, time);
            this.fireEvent('clickbottom', this, e);
        }
    },

    onMouseUp : function(e){
        if (this.timers) {
            clearTimeout(this.timers);
            this.timers = null;
        }
    },

    reDraw : function(){
        this.onResize(0, this.height);
    }

});
Ext.reg('DevxSscroll', Ext.DevxSscroll);