/**
    @name Edo.controls.ScrollBar
    @class
    @typeName ScrollBar
    @description 横向滚动条
    @extend Edo.controls.Slider
*/
Edo.controls.ScrollBar = function(){
    Edo.controls.ScrollBar.superclass.constructor.call(this);    
    /**
        @name Edo.controls.ScrollBar#scrollstart
        @event
        @description 滚动条拖拽开始
        @property {String} direction 滚动方向(vertical/horizontal)
        @property {Number} value 滚动条当前值
    */
    /**
        @name Edo.controls.ScrollBar#scroll
        @event
        @description 滚动条拖拽中
        @property {String} direction 滚动方向(vertical/horizontal)
        @property {Number} value 滚动条当前值
    */
    /**
        @name Edo.controls.ScrollBar#scrollcomplete
        @event
        @description 滚动条拖拽完成
        @property {String} direction 滚动方向(vertical/horizontal)
        @property {Number} value 滚动条当前值
    */
};
Edo.controls.ScrollBar.extend(Edo.controls.Control,{
    /**
        @name Edo.controls.ScrollBar#valueField
        @property
        @default value
    */
    valueField: 'value',
    /**
        @name Edo.controls.ScrollBar#defaultValue
        @property
        @type Number
        @default 0
    */
    defaultValue: 0,
    /**
        @name Edo.controls.ScrollBar#minWidth
        @property
        @default 17
    */
    minWidth: 17,
    /**
        @name Edo.controls.ScrollBar#minHeight
        @property
        @default 17
    */
    minHeight: 17,
    /**
        @name Edo.controls.ScrollBar#defaultWidth
        @property
        @default 100
    */
    defaultWidth: 100,
    /**
        @name Edo.controls.ScrollBar#defaultHeight
        @property
        @default 17
    */
    defaultHeight: 17,
    
    upWidth: 17,
    upHeight: 17,
    downWidth: 17,
    downHeight: 17,
    /**
        @name Edo.controls.ScrollBar#maxValue
        @property
        @type Number
        @default 0
        @description 最大值
    */
    maxValue: 0,
    /**
        @name Edo.controls.ScrollBar#value
        @property
        @type Number
        @default 0
        @description 值
    */
    value: 0,
    
    minHandleSize: 7,
    
    //up/down的增量
    /**
        @name Edo.controls.ScrollBar#incrementValue
        @property
        @type Number
        @default 10
        @description 箭头点击的增量值
    */
    incrementValue: 10,    
    /**
        @name Edo.controls.ScrollBar#alternateIncrementValue
        @property
        @type Number
        @default 10
        @description 点击滚动条的增量值
    */
    alternateIncrementValue: 30,
    
    spinTime: 20,        
    
    scrollTime: 70,
    
    /**
        @name Edo.controls.ScrollBar#direction
        @property
        @type horizontal, vertical
        @default horizontal
        @description 横竖方位
    */
    direction: 'horizontal',    //horizontal
    
    elCls: 'e-div e-scrollbar',
    
    upPressedCls: 'e-scrollbar-up-pressed',
    downPressedCls: 'e-scrollbar-down-pressed',
    handlePressedCls: 'e-scrollbar-handle-pressed',
    
    set: function(o, value){
        if(!o) return;
        if(typeof o == 'string') {
            var _ = o;
            o = {};
            o[_] = value;
        }
        
        if(o.maxValue){
            this._setMaxValue(o.maxValue);
            delete o.maxValue;
        }
        if(o.maxValue){
            this._setMaxValue(o.maxValue);
            delete o.maxValue;
        }
        
        Edo.controls.ScrollBar.superclass.set.c(this, o);
    },        
    
    getInnerHtml: function(sb){
        if(this.direction == 'horizontal'){
            this.elCls += ' e-hscrollbar';
        }
        sb[sb.length] = '<div class="e-scrollbar-handle"><div class="e-scrollbar-handle-outer"></div><div class="e-scrollbar-handle-center"></div><div class="e-scrollbar-handle-inner"></div></div><div class="e-scrollbar-up"></div><div class="e-scrollbar-down"></div>';
    },
    createChildren: function(el){
        Edo.controls.ScrollBar.superclass.createChildren.call(this, el);        
        
        this.handle = this.el.firstChild;
        this.upBtn = this.el.childNodes[1];
        this.downBtn = this.el.lastChild;       
    },
    initEvents: function(){
        if(!this.design){            
            this.on('mousedown', this._onMousedown, this);       
            Edo.util.Dom.addClassOnClick(this.upBtn, this.upPressedCls);     
            Edo.util.Dom.addClassOnClick(this.downBtn, this.downPressedCls);
            Edo.util.Dom.addClassOnClick(this.handle, this.handlePressedCls);
            
            
            Edo.util.Dom.addClassOnClick(this.el, '', this._stopSpin.bind(this));
        }
        
        Edo.controls.ScrollBar.superclass.initEvents.call(this);
    },
    syncSize: function(){        
        Edo.controls.ScrollBar.superclass.syncSize.call(this);
        
        var handleSize = this.getHandleSize();
        if(this.direction == 'vertical'){
			Edo.util.Dom.setHeight(this.handle, handleSize);
		}else{
			Edo.util.Dom.setWidth(this.handle, handleSize);
		}
        
        this.syncScroll();
        
    },
    //获得handle的尺寸
    getHandleSize: function(){
        var size = 0;
        
        var btnSize,            //滚动条按钮尺寸
            size,               //滚动条尺寸
            max,                //滚动条最大尺寸
            handleSize;         //handle尺寸
            
        if(this.direction == 'vertical'){
            btnSize = this.upHeight + this.downHeight;
            size = this.realHeight;
            max = this.maxValue;
        }else{
            btnSize = this.upWidth + this.downWidth;
            size = this.realWidth;
            max = this.maxValue;
        }
        
        if(size == max + size){
			handleSize = 0;
		}else{
			handleSize = Math.max(this.minHandleSize, Math.round( (size - btnSize) * size / (max+size)) )
		}
		
		return handleSize;
    },
    //获得handle的偏移定位
    getHandleOffset: function(handleSize){    
        var btnSize,            //滚动条按钮尺寸
            size,               //滚动条尺寸
            max,                //滚动条最大尺寸
            realOffset
            
        if(this.direction == 'vertical'){
            btnSize = this.upHeight + this.downHeight;
            size = this.realHeight;
            max = this.maxValue;
            
            realOffset = this.value;
        }else{
            btnSize = this.upWidth + this.downWidth;
            size = this.realWidth;
            max = this.maxValue;
            
            realOffset = this.value;
        }
        
        //获得 size - btnSize - handleSize的尺寸
        var moveSize = size - btnSize - handleSize;     //这个就是可移动的范围
        
        offset = realOffset/max*moveSize;
        return offset;        
    },
    createvalue: function(offset, moveSize){
        var value = offset * this.maxValue / moveSize
        return Math.floor(value);
    },
    createvalue: function(offset, moveSize){
        var value = offset * this.maxValue / moveSize
        return Math.floor(value);
    },
    //获得可移动的区域
    getMoveReginBox: function(){
        var box = this.getBox();
        var size = this.getHandleSize();
        if(this.direction == 'vertical'){
            box.y += this.upHeight;
            box.height -= (this.upHeight + this.downHeight + size);
        }else{        
            box.x += this.upWidth;
            box.width -= (this.upWidth + this.downWidth + size);
        }
        box.right = box.x + box.width;
        box.bottom = box.y + box.height;
        return box;
    },
    _onMousedown: function(e){
        if(e.button != 0) return false;
                
        var t = e.target;
        
        var isVertical = this.direction == 'vertical';
        this._stopSpin();
        if(Edo.util.Dom.contains(this.handle, t)){
            Edo.managers.DragManager.startDrag({
                event: e,
                capture: true,
                dragObject: this.handle,
                delay: 30,
                alpha: 1,
                enableDrop: false,
                ondragstart: this._onHandleDragStart.bind(this),
                ondragmove: this._onHandleDragMove.bind(this),
                ondragcomplete: this._onHandleDragComplete.bind(this)
            });
        }else if(Edo.util.Dom.contains(this.upBtn, t)){     //up
            this._startSpin('up', this.incrementValue, this.spinTime);
            this.canFireComplete = true;
            
        }else if(Edo.util.Dom.contains(this.downBtn, t)){   //down
            this._startSpin('down', this.incrementValue, this.spinTime);
            this.canFireComplete = true;
        }else{
            
            var moveBox = this.getMoveReginBox();
            var handleSie = this.getHandleSize();
            if(isVertical) moveBox.height += this.downHeight + handleSie;
            else moveBox.width += this.downWidth + handleSie;
            
            var moveBox2 = this.getMoveReginBox();
            
            var handleXY = Edo.util.Dom.getXY(this.handle);
            
            if(Edo.util.Dom.isInRegin(e.xy, moveBox)){
                
                if(isVertical){
                    
                    this.stopOffset = this.createvalue(Math.abs(moveBox2.y - e.xy[1]), moveBox2.height);
                    if(e.xy[1] < handleXY[1]){
                        this._startSpin('up', this.alternateIncrementValue, this.spinTime);
                    }else{
                        this._startSpin('down', this.alternateIncrementValue, this.spinTime);
                    }
                }else{                                    
                    this.stopOffset = this.createvalue(Math.abs(moveBox2.x - e.xy[0]), moveBox2.width);
                    
                    if(e.xy[0] < handleXY[0]){
                        this._startSpin('up', this.alternateIncrementValue, this.spinTime);
                    }else{
                        this._startSpin('down', this.alternateIncrementValue, this.spinTime);
                    }
                }
            }
            //alert(this.stopOffset);
            this.canFireComplete = true;
        }
        
    },
    doSpin: function(spinDirection, increment){
        var isVertical = this.direction == 'vertical';
        if(spinDirection == 'up'){
            if(isVertical){
                var v = this.value - increment;
                if(Edo.isValue(this.stopOffset) && v < this.stopOffset){
                    return;
                }
                this._setValue(v);
            }else{
                var v = this.value - increment;
                if(Edo.isValue(this.stopOffset) && v < this.stopOffset){
                    return;
                }
                this._setValue(v);
            }
        }else{
            if(isVertical){
                var v = this.value + increment;
                
                if(Edo.isValue(this.stopOffset) && v > this.stopOffset){                
                    return;
                }
                this._setValue(v);
            }else{
                var v = this.value + increment;                
                if(Edo.isValue(this.stopOffset) && v > this.stopOffset){
                    return;
                }
                this._setValue(v);
            }
        }
    },
    _startSpin: function(spinDirection, increment, spinTime){
        this.spinDirection = spinDirection;
        this.spinTimer = this.doSpin.time(spinTime, this, [spinDirection, increment], true);
    },
    _stopSpin: function(){      
        clearInterval(this.spinTimer);
        this.spinTimer = null;
        this.stopOffset = null;
        //这里也应该激发scrollComplete事件
        
        if(this.canFireComplete){
            this.completeScroll();
            this.canFireComplete = false;
        }
    },
    
    _onHandleDragStart: function(e){
        //得到可拖拽的box区域, 将拖拽范围限定        
        this.moveBox = this.getMoveReginBox();
        
        this.enableSyncScroll = false;
                
        if(!isIE8){
            var sf = this;
            this.scrollTimer = setInterval(function(){
                if(sf.direction == 'vertical'){
                    sf._setValue(sf._value);
                }else{
                    sf._setValue(sf._value);
                }            
            }, this.scrollTime);
        }
        
        this.fireEvent('scrollstart', {
            type: 'scrollstart',
            source: this,
            direction: this.direction,
            value: this.value,
            maxValue: this.maxValue
        }); 
    },
    _onHandleDragMove: function(e){
    
        var dm = e.source;
        var moveBox = this.moveBox;
        
        var isVertical = this.direction == 'vertical';
        
        if(isVertical){            
            e.xy[0] =moveBox.x;
            
            if(e.xy[1] < moveBox.y) e.xy[1] = moveBox.y;
            if(e.xy[1] > moveBox.bottom) e.xy[1] = moveBox.bottom;
            
            //先设置一个_value属性, 用来后续的设置
            this._value = this.createvalue(e.xy[1] - moveBox.y, moveBox.height);                        
        }else{
            e.xy[1] =moveBox.y;
            
            if(e.xy[0] < moveBox.x) e.xy[0] = moveBox.x;
            if(e.xy[0] > moveBox.right) e.xy[0] = moveBox.right;
            
            this._value = this.createvalue(e.xy[0] - moveBox.x, moveBox.width);            
        }
        if(isIE8){
            if(this.dragTimer){
                var d = new Date();
                if(d - this.dragTimer >= this.scrollTime){
                    this.dragTimer = d;
                    this._setValue(this._value);
                }
            } 
        }
        
    },
    _onHandleDragComplete: function(e){        
    
        this.enableSyncScroll = true;
        
        clearInterval(this.scrollTimer);                
                        
        if(Edo.isValue(this._value)){
            this._setValue(this._value);
        }
        
        this._value = null;
        
        this.completeScroll();
                
    },
    completeScroll: function(){        
        this.fireEvent('scrollcomplete', {
            type: 'scrollcomplete',            
            source: this,
            direction: this.direction,
            value: this.value
        }); 
    },
    _setValue: function(value){
        if(!Edo.isValue(value)) return;
        if(value < 0) value = 0;
        if(value > this.maxValue) value = this.maxValue;
        if(this.value != value){
            this.value = value;
            this.syncScroll();
            
            this.fireEvent('scroll', {
                type: 'scroll',
                source: this,
                direction: this.direction,
                value: this.value
            });        
        }
    },
    _setMaxValue: function(value){
        if(value < 0 ) value = 0;
        if(this.maxValue != value){
            this.maxValue = value;
            this.relayout('maxValue');
        }
    },
    //根据maxValue,maxValue, value, value,将handle定位
    syncScroll: function(){
        if(!this.el || this.enableSyncScroll == false) return;
        //根据当前的value/value,进行定位
        var handleSize = this.getHandleSize();
        if(handleSize != 0){
            var handleOffset = this.getHandleOffset(handleSize);
            
            var offset = handleOffset + (this.direction == 'vertical' ? this.upHeight : this.upWidth);
            if(this.direction == 'vertical'){
                this.handle.style.top = offset + 'px';
            }else{
                this.handle.style.left = offset + 'px';
            }
        }
    }
    
});
Edo.controls.ScrollBar.regType('scrollbar');