Fetion.Web.Chat.defined("Fetion.Web.Chat.ScrollBar");
Fetion.Web.Chat.ScrollBar.create = function(o) {
    var html = "";
    html += "<table onselectstart='return false' style='position:absolute;top:10px;right:0;width:9px'>";
    html += "<tr><td onselectstart='return false' style='width:9px;height:10px;'></td></tr>";
    html += "<tr><td onselectstart='return false' style='height:1px;font-size:1px'></td></tr>";
    html += "<tr><td onselectstart='return false' class='sbar_b_t_nor' style='height:3px;'></td></tr>";
    html += "<tr><td onselectstart='return false' class='sbar_b_m_nor' style='height:100px;'></td></tr>";
    html += "<tr><td onselectstart='return false' class='sbar_b_b_nor' style='height:3px;'></td></tr>";
    html += "<tr><td onselectstart='return false' style='height:1px;font-size:1px'></td></tr>";
    html += "<tr><td onselectstart='return false' style='width:9px;height:10px;'></td></tr>";
    html += "</table>";

    var frm = document.createElement("SPAN");
    frm.innerHTML = html;
    frm = frm.childNodes[0];
    frm.tbtn = frm.rows[0].cells[0];
    frm.bbtn = frm.rows[6].cells[0];
    frm.tBar = frm.rows[1].cells[0];
    frm.mtBar = frm.rows[2].cells[0];
    frm.mBar = frm.rows[3].cells[0];
    frm.mbBar = frm.rows[4].cells[0];
    frm.bBar = frm.rows[5].cells[0];
    frm.tbtn.parent = frm.bbtn.parent = frm.tBar.parent = frm.mBar.parent = frm.bBar.parent = frm;
    frm.isTop = frm.isBottom = true;
    frm.hasTop = 0;
    frm.data = o;
    frm.mtBar.onmouseover = frm.mBar.onmouseover = frm.mbBar.onmouseover = function(e) {
        frm.mtBar.className = "sbar_b_t_hov";
        frm.mBar.className = "sbar_b_m_hov";
        frm.mbBar.className = "sbar_b_b_hov";
    };
    frm.mtBar.onmouseout = frm.mBar.onmouseout = frm.mbBar.onmouseout = function(e) {
        frm.mtBar.className = "sbar_b_t_nor";
        frm.mBar.className = "sbar_b_m_nor";
        frm.mbBar.className = "sbar_b_b_nor";
    };
    frm.onmouseover = function(e) {
        frm.tbtn.className = "scroll_bar_t";
        frm.className = "scroll_bar_bg";
        frm.bbtn.className = "scroll_bar_b";
    };
    frm.onmouseout = function(e) {
        frm.tbtn.className = "";
        frm.className = "";
        frm.bbtn.className = "";
    };
    frm.tbtn.onmouseover = function(e) {
        frm.tbtn.className = "scroll_bar_btn_t";
        frm.className = "scroll_bar_bg";
        frm.bbtn.className = "scroll_bar_b";
    };
    frm.tbtn.onmouseout = function(e) {
        frm.tbtn.className = "";
        frm.className = "";
        frm.bbtn.className = "";
    };
    frm.bbtn.onmouseover = function(e) {
        frm.tbtn.className = "scroll_bar_t";
        frm.className = "scroll_bar_bg";
        frm.bbtn.className = "scroll_bar_btn_b";
    };
    frm.bbtn.onmouseout = function(e) {
        frm.tbtn.className = "";
        frm.className = "";
        frm.bbtn.className = "";
    };
    frm.tbtn.onmousedown = function(e) {
        var scrollBar = this.parent;
        var resizeObj = scrollBar.resizeObj;
        scrollBar.scrollInterval = setInterval(function() { resizeObj.onmousewheel(e, resizeObj.scrollStep); }, 100);
    };
    frm.tbtn.onmouseup = frm.tBar.onmouseleave = function(e) {
        var scrollBar = this.parent;
        var resizeObj = scrollBar.resizeObj;
        clearInterval(scrollBar.scrollInterval);
        scrollBar.scrollInterval = null;
    };
    frm.tBar.onmousedown = function(e) {
        var scrollBar = this.parent;
        var resizeObj = scrollBar.resizeObj;
        scrollBar.scrollInterval = setInterval(function() { resizeObj.onmousewheel(e, resizeObj.scrollStep); }, 100);
    };
    frm.tBar.onmouseup = frm.tBar.onmouseleave = function(e) {
        var scrollBar = this.parent;
        var resizeObj = scrollBar.resizeObj;
        clearInterval(scrollBar.scrollInterval);
        scrollBar.scrollInterval = null;
    };
    frm.mBar.onmousedown = function(e) {
        var event = e || window.event;
        var scrollBar = this.parent;
        scrollBar.drag = true;
        if (!this.dragDIV) {
            var dragDIV = document.createElement("DIV");
            document.body.appendChild(dragDIV);
            dragDIV.scrollBar = scrollBar;
            this.dragDIV = dragDIV;
            dragDIV.style.position = "absolute";
            dragDIV.style.width = dragDIV.style.height = "41px";
            //dragDIV.style.backgroundColor = "red";
            //dragDIV.style.border = "1px solid red";
            dragDIV.onmouseleave = function(e) {
                if (this.style.display == "none")
                    return;
                if (this.setCapture)
                    this.setCapture();
                var event = e || window.event;
                this.style.left = event.clientX - 20;
                this.style.top = event.clientY - 20;
                //msgDIV.innerHTML = event.clientX + "X" + event.clientY;
            };
            dragDIV.onmousemove = function(e) {
                var event = e || window.event;
                var scrollBar = this.scrollBar;
                if (event.button != 1 || !scrollBar.drag) {
                    this.onmouseup();
                    return;
                }

                Fetion.Web.Chat.scrollHeight = null;

                this.onmouseleave(event);

                var pRect = {};
                var resizeObj = scrollBar.resizeObj;
                var rect = resizeObj.getBoundingClientRect();
                pRect.top = rect.top;
                pRect.left = rect.left;
                pRect.width = rect.right - rect.left;
                pRect.height = height = rect.bottom - rect.top;

                var scrollBar = resizeObj.scrollBar;
                scrollBar.isTop = scrollBar.isBottom = false;

                var scrollHeight = resizeObj.scrollHeight;
                var scrollTop = resizeObj.scrollTop;
                var scrollMiddle = pRect.height;
                var scrollBottom = scrollHeight - scrollTop - scrollMiddle;

                var mBarHeight = scrollBar.mBar.style.height.replace("px", "") - -26;
                var rate = (pRect.height - mBarHeight) / (scrollHeight - scrollMiddle);

                var tBarHeight = event.clientY - this.dragOffset - 10;
                var scrollTop = tBarHeight / rate;

                scrollBar.setScrollBar(scrollTop);

                if (scrollBar.isTop)
                    scrollBar.hasTop++;

                //scrollBar.preScrollTop = scrollBar.isBottom ? null : resizeObj.scrollTop;
            };
            dragDIV.onmouseup = function(e) {
                if (this.releaseCapture)
                    this.releaseCapture();
                frm.mBar.fireEvent("onmouseout");
                var scrollBar = this.scrollBar;
                scrollBar.drag = false;
                this.style.display = "none";
                this.style.left = 0;
                this.style.top = 0;
            };
        }
        this.dragDIV.dragOffset = event.offsetY;
        this.dragDIV.style.display = "block";
        this.dragDIV.onmouseleave(e);
    };
    frm.bBar.onmousedown = function(e) {
        var scrollBar = this.parent;
        var resizeObj = scrollBar.resizeObj;
        scrollBar.scrollInterval = setInterval(function() { resizeObj.onmousewheel(e, -resizeObj.scrollStep) }, 100);
    };
    frm.bBar.onmouseup = frm.bBar.onmouseleave = function(e) {
        var scrollBar = this.parent;
        var resizeObj = scrollBar.resizeObj;
        clearInterval(scrollBar.scrollInterval);
        scrollBar.scrollInterval = null;
    };
    frm.bbtn.onmousedown = function(e) {
        var scrollBar = this.parent;
        var resizeObj = scrollBar.resizeObj;
        scrollBar.scrollInterval = setInterval(function() { resizeObj.onmousewheel(e, -resizeObj.scrollStep) }, 100);
    };
    frm.bbtn.onmouseup = frm.bBar.onmouseleave = function(e) {
        var scrollBar = this.parent;
        var resizeObj = scrollBar.resizeObj;
        clearInterval(scrollBar.scrollInterval);
        scrollBar.scrollInterval = null;
    };
    frm.bind = function() {
        var isBind = false;
        document.body.appendChild(this);
        document.body.style.overflowX = "scroll";
        document.body.style.overflowY = "hidden";
        Fetion.Web.Chat.body.style.overflowX = "hidden";
        Fetion.Web.Chat.body.style.overflowY = "scroll";
        Fetion.Web.Chat.body.scrollBar = this;
        var resizeObj = this.resizeObj = Fetion.Web.Chat.body;
        resizeObj.scrollBar = this;
        resizeObj.onscroll = function(e) {
            var scrollBar = resizeObj.scrollBar;
			if(isScrollUp){
				isScrollUp=false;
				scrollBar.isBottom = false;
			}
            scrollBar.setScrollBar();
        };
        window.onresize = resizeObj.onresize = function(e) {
            var resizeObj = this;
            if (resizeObj == window)
                resizeObj = Fetion.Web.Chat.body;
            bodyHead.style.width = document.documentElement.clientWidth - 13;
            resizeObj.style.width = document.documentElement.clientWidth + 17;
            Fetion.Web.Chat.background.style.height = Fetion.Web.Chat.body.style.height = document.documentElement.clientHeight;
            document.body.style.height = document.documentElement.clientHeight + 17;

            var scrollBar = resizeObj.scrollBar;
            scrollBar.style.top = "0px";
            scrollBar.style.right = 0;
            //scrollBar.style.border = "1px solid red";
            scrollBar.setScrollBar();

            fxBrowser.setBgOffset(bgposOffsetX, window.bgposOffsetY);
        };
        resizeObj.onmousewheel = function(e, step) {
            var resizeObj = this;
            if (resizeObj == window)
                resizeObj = Fetion.Web.Chat.body;

            var scrollBar = resizeObj.scrollBar;
            scrollBar.isTop = scrollBar.isBottom = false;
            Fetion.Web.Chat.scrollHeight = null;

            var event = e || window.event;
            step = step || event.wheelDelta;

            scrollBar.setScrollBar(resizeObj.scrollTop + -step);

            if (scrollBar.isTop)
                scrollBar.hasTop++;

            //scrollBar.preScrollTop = scrollBar.isBottom ? null : resizeObj.scrollTop;

            //msgDIV.innerHTML = "onmousewheel-height:" + height + ",scrollTop:" + scrollTop + ",scrollHeight:" + scrollHeight;
        };
        this.setScrollBar = function(scrollTop) {
            var resizeObj = this.resizeObj;
            var pRect = {};
            var rect = resizeObj.getBoundingClientRect();
            pRect.top = rect.top;
            pRect.left = rect.left;
            pRect.width = rect.right - rect.left;
            var scrollHeight = resizeObj.scrollHeight;
            //msgDIV.innerHTML = "pRect.top:" + pRect.top + ",pRect.left:" + pRect.left + ",pRect.width:" +pRect.width+",rect.bottom :"+rect.bottom;

            if (window.location.href.indexOf('relay.html') != -1) {
                pRect.height = rect.bottom - rect.top;
            } else {

                pRect.height = rect.bottom - rect.top - 20;

            }

            if (scrollTop != undefined)
                resizeObj.scrollTop = scrollTop;
            var scrollTop = resizeObj.scrollTop;
            var scrollMiddle = pRect.height + 20;

            if ((scrollHeight - scrollTop - pRect.height - 20) < 0) {
                scrollMiddle = pRect.height;
            }
            var scrollBottom = scrollHeight - scrollTop - scrollMiddle;
            resizeObj.scrollStep = scrollMiddle;

            //msgDIV.innerHTML = "scrollHeight:" + scrollHeight + ",scrollTop:" + scrollTop + ",scrollMiddle:" + pRect.height + ",scrollBottom:" + (scrollHeight - scrollTop - pRect.height);

            if (scrollHeight <= pRect.height) {
                this.style.display = "none";
                return;
            }

            if (this.style.display == "none")
                this.isBottom = true;

            if (this.isBottom) {
                scrollTop = resizeObj.scrollTop = scrollHeight - scrollMiddle;
                scrollBottom = 0;
                //msgDIV.innerHTML = "isBottom:" + this.isBottom + ",scrollTop:" + scrollTop + ",scrollHeight:" + scrollHeight;
            }

            this.isTop = scrollTop == 0;
            this.isBottom = scrollBottom == 0;

            var mBarHeight = Math.round(Math.max(40, scrollMiddle * pRect.height / scrollHeight));
            var rate = (pRect.height - mBarHeight) / (scrollHeight - scrollMiddle);
            var tBarHeight = Math.round(scrollTop * rate);
            var bBarHeight = pRect.height - tBarHeight - mBarHeight;

            //msgDIV.innerHTML = "barHeight:" + pRect.height + ",tBarHeight:" + tBarHeight + ",mBarHeight:" + mBarHeight + ",bBarHeight:" + bBarHeight + ",scrollTop:" + scrollTop + ",scrollHeight:" + scrollHeight;

            this.tBar.innerHTML = this.mBar.innerHTML = this.bBar.innerHTML = "&nbsp;";
            this.tBar.style.height = tBarHeight > 0 ? (bBarHeight <= 0 ? tBarHeight - 1 : tBarHeight) : 1;
            this.mBar.style.height = mBarHeight - 6;
            this.bBar.style.height = bBarHeight > 0 ? (tBarHeight <= 0 ? bBarHeight - 1 : bBarHeight) : 1;
            this.tBar.innerHTML = this.mBar.innerHTML = this.bBar.innerHTML = "";
            // msgDIV.innerHTML = "this.bBar.style.height:" + this.bBar.style.height+",this.mBar.style.height:"+this.mBar.style.height+", this.tBar.style.height:"+ this.tBar.style.height;
            // msgDIV.innerHTML = "Height:" + pRect.height + ",tBarHeight:" + tBarHeight + ",mBarHeight:" + mBarHeight + ",bBarHeight:" + bBarHeight;

            //msgDIV.innerHTML = "isBottom:" + this.isBottom + ",scrollTop:" + resizeObj.scrollTop + ",scrollHeight:" + resizeObj.scrollHeight;

            this.style.display = "block";

            //msgDIV.innerHTML = "setScrollBar-height:" + pRect.height + ",scrollTop:" + scrollTop + ",scrollHeight:" + scrollHeight;


            if (this.isTop && this.hasTop > 5) {
                this.hasTop = 0;
                Fetion.Web.Chat.scrollHeight = Fetion.Web.Chat.body.scrollHeight;
                try {
                    window.external.GetLastMsgRecord(3);
                }
                catch (e) {
                }
            }
        };
        this.getScrollTop = function() {
            return this.resizeObj.scrollTop;
        };
        parent.onkeydown_ = parent.onkeydown;
        parent.onkeydown = function(e) {
            if (this.onkeydown_)
                this.onkeydown_(e);

            var event = e || window.event;
            if (event.keyCode != 38 && event.keyCode != 40)
                return;

            this.onmousewheel(e, event.keyCode == 38 ? 100 : -100);
        }
        window.onresize();
    }
    frm.bind();
    return frm;
};