﻿var Class = {
    create: function() {
        return function() { this.initialize.apply(this, arguments); }
    }
}
var ScrollPanel = Class.create();
ScrollPanel.prototype = {
    initialize: function(boxid, contentID, copyboxid, leftOrUpID, rightOrDownID, pageLength) {
        this.moveSpeed = 10; //移动时间间隔
        this.moveSpace = 20; //移动距离
        this.distance = 0; //当前滚动的剩余距离
        this.lock = false; //是否锁定正在滚动。正在滚动的层必须处于真状态
        this.boxID = boxid; //滚动层编号
        this.contentID = contentID; //内容层编号，该层样式必须设为浮动（限于水平滚动）
        this.copyBoxID = copyboxid; //复制层编号，如存在该层，其样式必须设为浮动（限于水平滚动）
        this.pageLength = pageLength; //滚动一次的距离
        this.leftOrUpID = leftOrUpID; //向上或者向右方向控件或者控件编号
        this.rightOrDownID = rightOrDownID; //向下或者向右方向控件或控件编号
        this.isVertical = false; //滚动方向是否为垂直方向
        this.isRepeat = true; //是否循环滚动
        this.autoScrollSec = 0; //自动重复滚动时间间隔，小于1则表示不自动滚动
        this.isPositiveDirection = true; //滚动方向，为真时向坐标轴正方向移动。坐标轴采用页面坐标相似
        this._object = null; //自动重复滚动对象
        this.cancel = false;

        if (this.$(contentID) == null) {
            alert("无效的原始层ID");
            return;
        }

        if (this.$(copyboxid) != null)
            this.$(copyboxid).innerHTML = this.$(contentID).innerHTML;
        else
            this.isRepeat = false; //取消循环滚动
        var _this = this;

        var cs = function() { _this.cancel = true; _this.clearAutoScroll(); }
        var as = function() { _this.cancel = false; _this.setAutoScroll(); }

        if (!this.isVertical) {//水平滚动
            var ls = function() { _this.leftScroll(); }
            var rs = function() { _this.rightScroll(); }
            if (window.addEventListener) {//FF
                this.$(leftOrUpID).addEventListener("click", ls, false);
                this.$(rightOrDownID).addEventListener("click", rs, false);
                this.$(boxid).addEventListener("mouseover", cs, false);
                this.$(boxid).addEventListener("mouseout", as, false);
            }
            else {//IE.
                this.$(leftOrUpID).attachEvent("onclick", ls);
                this.$(rightOrDownID).attachEvent("onclick", rs);
                this.$(boxid).attachEvent("onmouseover", cs);
                this.$(boxid).attachEvent("onmouseout", as);
            }
        }
        else {//垂直滚动
            var us = function() { _this.upScroll(); }
            var ds = function() { _this.downScroll(); }
            if (window.addEventListener) {//FF
                this.$(leftOrUpID).addEventListener("click", us, false);
                this.$(rightOrDownID).addEventListener("click", ds, false);
                this.$(boxid).addEventListener("mouseover", cs, false);
                this.$(boxid).addEventListener("mouseout", as, false);
            }
            else {//IE
                this.$(leftOrUpID).attachEvent("onclick", us);
                this.$(rightOrDownID).attachEvent("onclick", ds);
                this.$(boxid).attachEvent("onmouseover", cs);
                this.$(boxid).attachEvent("onmouseout", as);
            }
        }
    },
    scrollData: function() {
        if (this.distance == 0) {
            this.lock = false;
            if (!this.cancel)
                this.setAutoScroll(); //判断是否启用自动滚动
            return;
        }
        var num, tempSpeed = this.moveSpeed, tempSpace = this.moveSpace;
        if (Math.abs(this.distance) < this.pageLength / 2) {
            tempSpace = Math.round(Math.abs(this.distance / this.moveSpace));
            if (tempSpace < 1)
                tempSpace = 1;
        }
        var scroll_panel = this.$(this.boxID);
        var oriPanel = this.$(this.contentID);
        if (this.distance > 0) {//move dowm or right.
            if (this.distance > tempSpace) {
                this.distance -= tempSpace;
                num = tempSpace;
            }
            else {
                num = this.distance;
                this.distance = 0;
            }
            if (this.isVertical) {//move down
                if (this.pageLength >= oriPanel.offsetHeight)
                    return;
                var temp = scroll_panel.scrollTop;
                temp += num;
                if (this.isRepeat) {
                    if (temp >= oriPanel.offsetHeight)
                        temp = temp - oriPanel.offsetHeight;
                }
                scroll_panel.scrollTop = temp;
            }
            else {//move right
                if (this.pageLength >= oriPanel.offsetWidth)
                    return;
                var temp = scroll_panel.scrollLeft;
                temp += num;
                if (this.isRepeat) {
                    if (temp >= oriPanel.offsetWidth)
                        temp = temp - oriPanel.offsetWidth;
                }
                scroll_panel.scrollLeft = temp;
            }
            var _this = this;
            var tempScroll = function() { _this.scrollData(); }
            window.setTimeout(tempScroll, tempSpeed);
        }
        else {//move up or left
            if (this.distance < -tempSpace) {
                this.distance += tempSpace;
                num = tempSpace;
            }
            else {
                num = -this.distance;
                this.distance = 0;
            }
            if (this.isVertical) {//move up
                if (this.pageLength >= oriPanel.offsetHeight)
                    return;
                var temp = scroll_panel.scrollTop;
                temp -= num;
                if (this.isRepeat) {
                    if (temp < 0)
                        temp = temp + oriPanel.offsetHeight;
                }
                else {
                    if (temp <= 0)
                        temp = 0;
                }
                scroll_panel.scrollTop = temp;
            }
            else {//move left
                if (this.pageLength >= oriPanel.offsetWidth)
                    return;
                var temp = scroll_panel.scrollLeft;
                temp -= num;
                if (this.isRepeat) {
                    if (temp < 0)
                        temp = temp + oriPanel.offsetWidth;
                }
                else {
                    if (temp <= 0)
                        temp = 0;
                }
                scroll_panel.scrollLeft = temp;
            }
            var _this = this;
            var tempScroll = function() {
                _this.scrollData();
            }
            window.setTimeout(tempScroll, tempSpeed);
        }
    },
    leftScroll: function() {
        if (this.lock)
            return;
        this.isPositiveDirection = false; //座标轴负方向
        if (!this.isRepeat) {
            var box = this.$(this.boxID);
            if (box.scrollLeft <= 0)
                return;
        }
        this.distance = -this.pageLength;
        this.isVertical = false;
        this.lock = true;
        this.clearAutoScroll();
        this.scrollData();
    },
    rightScroll: function() {
        if (this.lock)
            return;
        this.isPositiveDirection = true; //座标轴正方向
        if (!this.isRepeat) {
            var box = this.$(this.boxID);
            var cnt = this.$(this.contentID);
            if (box.scrollLeft + this.pageLength >= cnt.offsetWidth)
                return;
        }
        this.distance = this.pageLength;
        this.isVertical = false;
        this.lock = true;
        this.clearAutoScroll();
        this.scrollData();
    },
    upScroll: function() {
        if (this.lock)
            return;
        this.isPositiveDirection = false; //座标轴负方向
        if (!this.isRepeat) {
            var box = this.$(this.boxID);
            if (box.scrollTop <= 0)
                return;
        }
        this.distance = -this.pageLength;
        this.isVertical = true;
        this.lock = true;
        this.clearAutoScroll();
        this.scrollData();
    },
    downScroll: function() {
        if (this.lock)
            return;
        this.isPositiveDirection = true; //座标轴正方向
        if (!this.isRepeat) {
            var box = this.$(this.boxID);
            var cnt = this.$(this.contentID);
            if (box.scrollTop + this.pageLength >= cnt.offsetHeight)
                return;
        }
        this.distance = this.pageLength;
        this.isVertical = true;
        this.lock = true;
        this.clearAutoScroll();
        this.scrollData();
    },
    setMoveSpeed: function(moveSpeed) {
        this.moveSpeed = moveSpeed;
    },
    setMoveSpace: function(moveSpace) {
        this.moveSpace = moveSpace;
    },
    setVertical: function(flag) {
        this.isVertical = flag;
    },
    setRepeat: function(flag) {
        if (flag && this.$(this.copyBoxID) == null) {
            alert("循环滚动必须需要复制层！");
            return false;
        }
        this.isRepeat = flag;
    },
    setAutoScroll: function() {
        this.clearAutoScroll();
        if (arguments.length == 1)
            this.autoScrollSec = arguments[0];
        if (this.autoScrollSec <= 0)
            return;
        var _this = this;
        if (this.isVertical) {
            var sf = function() {
                if (_this.isPositiveDirection)
                    _this.downScroll();
                else
                    _this.upScroll();
            }
            this._object = window.setTimeout(sf, this.autoScrollSec * 1000);
        }
        else {
            var sf = function() {
                if (_this.isPositiveDirection)
                    _this.rightScroll();
                else
                    _this.leftScroll();
            }
            this._object = window.setTimeout(sf, this.autoScrollSec * 1000);
        }
    },
    clearAutoScroll: function() {
        if (this._object != null)
            window.clearTimeout(this._object);
    },
    $: function(oid) {
        if (typeof (oid) == "string")
            return document.getElementById(oid);
        return oid;
    }
}
