///////////////////////////////////////////////////////////////////////////////////
// 文件名 ：    xscrollbar.js
//
// 功  能 ：
//          创建一个滚动条控件
//
// 版  本 ：    1.0
//
// 编写者 ：    
//
// 日  期 ：    2002/9/11
//
// 运行环境：   IE5.5 以上
//
// 备  注 ：
//      相关文件：
//          common.js
//
///////////////////////////////////////////////////////////////////////////////////





///////////////////////////////////////////////////////////////////////////////////
// 创建一个滚动条控件
// （只能是垂直摆放，用于标签页控件中）
//
// x : Integer          滚动条的水平位置
// y: Integer           滚动条的垂直位置
// length: Integer      滚动条的长度
// el : String          滚动条控制的元素
//
function tch_xScrollBar(x, y, length, el)
{
    //if (!hasSupport()) return;

    this.x = x;
    this.y = y;
    this.length = length;
    this.element = el ? el : null;

    this.init();
}

tch_xScrollBar.prototype = {

    //+------------------------------------
    // Public 属性和方法
    //-------------------------------------

    // 设置滚动条控制的对象
    setObj: function (obj) {
        if (!obj) {
            this.hidden();
            return;
        }

        this.element = obj;
        if (obj.offsetHeight <= obj.scrollHeight) {
            var oThis = this;
            //this.show();
            this.xTrack.style.top = this.min;
            this.xImg.title = "0%";
            obj.onscroll = function () {
                var iPos = obj.scrollTop/(obj.scrollHeight - obj.offsetHeight);
                iPos = iPos * (oThis.max - oThis.min) + oThis.min;
                oThis.xTrack.style.top = iPos;
                oThis.xImg.title = Math.round((iPos - oThis.min) / (oThis.max - oThis.min) * 100) + "%";
            };
        }
        else {
            this.hidden();
            obj.onscroll = null;
        }
    },

    // 更新状态
    update: function () {
        this.setObj(this.element);
    },

    // 显示滚动条
    show: function () {
        this.xBar.style.visibility = "visible";
        this.xTrack.style.visibility = "visible";
    },

    // 隐藏滚动条
    hidden: function () {
        this.xBar.style.visibility = "hidden";
        this.xTrack.style.visibility = "hidden";
    },



    //+------------------------------------
    // Private 属性和方法
    //-------------------------------------

    CL_BAR_NORAML: "silver",
    CL_BAR_ACTIVE: "yellowgreen",

    IMG_TRACK_NORMAL: g_sImgPath + "tick_normal.gif",
    IMG_TRACK_ACTIVE: g_sImgPath + "tick_active.gif",

    xBar: null,             // 滑杆
    xTrack: null,           // 滑块
    xImg: null,

    offset: 0,              // 鼠标偏移量
    canMove: false,         // 移动标志
    min: 0,                 // 最小位置
    max: 0,                 // 最大位置

    global: window.document,

    init: function () {
        var bar = document.createElement("DIV");
        this.xBar = bar;
        with (bar.style) {
            position = "absolute";
            left = this.x;
            top = this.y;
            width = 1;
            height = this.length;
            background = this.CL_BAR_NORAML;
            visibility = "hidden";
        }
        this.global.body.appendChild(bar);

        var track = document.createElement("DIV");
        this.xTrack = track;
        with (track.style) {
            position = "absolute";
            left = parseInt(this.xBar.style.left) - 9;
            top = parseInt(this.xBar.style.top) + 4;
            width = 18;
            height = 18;  
            border = 0;
            margin = 0;
            padding = 0;
            cursor = "hand";
            visibility = "hidden";
        }
        this.global.body.appendChild(track);

        var img = document.createElement("IMG");
        this.xImg = img;
        with (img) {
            border = 0;
            width = 18;
            height = 18;
            src = this.IMG_TRACK_NORMAL;
            title = "0%";
        }
        track.appendChild(img);

        this.min = parseInt(this.xBar.style.top) + 5;
        this.max = parseInt(this.xBar.style.height) + parseInt(this.xBar.style.top) - 25;

        var oThis = this;

        this.xTrack.onmouseover = function () { oThis.over(); };
        this.xTrack.onmouseout = function () { oThis.out(); };
        this.xTrack.onmousedown = function () { oThis.startDrag(); };
        this.xTrack.onmousemove = function () { oThis.drag(); };
        this.xTrack.onmouseup = function () { oThis.endDrag(); };
        this.xBar.onselectstart = function () { oThis.cancelSelect(); };
    },

    // 鼠标滑过
    over: function () {
        this.xImg.src = this.IMG_TRACK_ACTIVE;
    },

    // 鼠标滑出
    out: function () {
        if (!this.canMove)
            this.xImg.src = this.IMG_TRACK_NORMAL;
    },

    // 开始拖拽
    startDrag: function () {
        this.xTrack.setCapture();
        this.offset =  parseInt(this.xTrack.style.top) - event.clientY;
        this.xBar.style.background = this.CL_BAR_ACTIVE;
        this.xImg.src = this.IMG_TRACK_ACTIVE;
        this.canMove = true;
    },

    // 拖拽
    drag: function () {
        if (this.canMove) {
            var iPos = event.clientY + this.offset;
            iPos = iPos < this.min ? this.min : (iPos > this.max ? this.max : iPos);
            var n = Math.round((iPos - this.min) / (this.max - this.min) * 100)/100;
            this.xTrack.style.top = iPos;
            this.xImg.title = n * 100 + "%";
            this.setPosition(n);
        }
    },

    // 结束拖拽
    endDrag: function () {
        this.xTrack.releaseCapture();
        this.xBar.style.background = this.CL_BAR_NORAML;
        this.xImg.src = this.IMG_TRACK_NORMAL;
        this.canMove = false;
    },

    // 设置滚动位置
    setPosition: function (iPosition) {
        if (this.element)
            this.element.scrollTop =
                iPosition * (this.element.scrollHeight - this.element.offsetHeight);
    },

    // 取消拖拽选择
    cancelSelect: function() {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
        return false;
    }
}