/**
 * scrollVertical 垂直滚动的构造函数
 * @param {Object} disp  -  必须  显示滚动区域的DOM节点（或节点ID） 
 * @param {Object} msg    -  必须  被显示的信息的DOM节点（或节点ID）
 * @param {string} tg     -  可选  以什么标记为一行的标签名称（tagName）
 */
function scrollVertical(disp, msg, tg) {
    this.scrollArea = null;      // 滚动的区域
    this.scrollMsg = null;       // 要滚动的内容
    this.unitHeight = 0;         // 单独一行滚动内容的高度（程序中通过过的要滚动行的一个节点的offsetHeight获得）
    this.msgHeight = 0;          // 整个滚动内容的高度
    this.copyMsg = null;         // 复制滚动内容（程序中使用复制scrollMsg.innerHTML来获得的）
    this.scrollValue = 0;        // 滚动的值
    this.scrollHeight = 0;       // 滚动高度
    this.isStop = true;          // 停止滚动
    this.isPause = true;        // 暂停滚动
    this.scrollTimer = null;     // 滚动计时器
    this.speed = 4000;           // 滚动的时间间隔
    this.tg = tg;
    
	// 给在之前定义的this.scrollArea付值
	if (typeof(disp) == 'string') {
		// 如果disp给的是节点的ID，通过document.getElementById获取该节点
		// 然后付值给this.scrollArea
		this.scrollArea = document.getElementById(disp);
	}
	else {
		// 如果是DOM节点，直接付给this.scrollArea
		this.scrollArea = disp;
	}
	// 以给this.scrollArea相同的方法给this.scrollMsg付值
	if (typeof(msg) == 'string') {
		this.scrollMsg = document.getElementById(msg);
	}
	else {
		this.scrollMsg = msg;
	}
		
	
	// 如果没有给定一行的识别标签，
	// 默认将li标签认为是一行的标签
	// 所以上面介绍的，tag参数是可选的
	if (!this.tg) {
		this.tg = 'li';
	}		
       
}
scrollVertical.prototype.isMoz = function() {
    return navigator.userAgent.toLowerCase().indexOf('gecko') > 0;
};

scrollVertical.prototype.play = function() {

    if (this.scrollMsg == null) return;
    // 获取单行的高度
    // 获取到第一(this.scrollMsg.getElementsByTagName(tg)[0])tg(一行的标签)的高度，作为单行的高度
    if (this.scrollMsg.getElementsByTagName(this.tg) == null) return;
    if (this.scrollMsg.getElementsByTagName(this.tg).length == 0) return;
    this.unitHeight = this.scrollMsg.getElementsByTagName(this.tg)[0].offsetHeight;
    // 获取整个信息框的高度
    // 公式为 单行高度（unitHeight）*行数（this.scrollMsg.getElementsByTagName(tg).length，显示信息中包含多少个tg(行)标签）
    this.msgHeight = this.unitHeight * this.scrollMsg.getElementsByTagName(this.tg).length;
    this.scrollValue = 0;
    this.scrollHeight = 0;

    this.isPause = false;
    var me = this;
    var anim = function() {
        // 如果已经开始计时（间隔时间执行向上滚动），
        // 就停止它（以免无限制执行，耗系统资源）。        
        if (me.scrollTimer) {
            clearTimeout(me.scrollTimer);
        }
        // 如果暂停了滚动（鼠标放到了滚动层上）
        // 开始以10毫秒的时间间隔运行滚动        
        if (me.isPause) {
            me.scrollTimer = setTimeout(anim, 1000);
            return;
        }

        // 根据浏览器的不同，处理滚动
        //if (false){ // Mozilla引擎浏览器 //me.isMoz)
        //    s_area.scrollTop = me.scrollValue;
        // }
        //else { // 其余的浏览器则使用控制CSS样式处理滚动
        me.scrollMsg.style.top = (-1 * me.scrollValue) + "px";
        //}
        // 滚动高度等于显示滚动区域高度时（滚动完一行，一行内容全部显示）
        // 暂停4秒中，然后再开始执行下依次滚动。
        if (me.scrollValue % me.scrollArea.offsetHeight == 0) {
            me.scrollTimer = setTimeout(anim, me.speed);
        }
        else {
            // 在两行内容之间过度滚动时，每10豪秒上升1px
            me.scrollTimer = setTimeout(anim, 10);
        }
        me.scrollValue += 1;
        // 当显示完所有信息后（这时滚动的距离就等于要滚动信息的高度msg_h）
        // 这时又重新开始滚动，将滚动距离清零
        if (me.msgHeight - me.unitHeight - me.scrollValue < 0) {
            me.scrollValue = 0;
        }
    };
    // 执行滚动
    anim();
};