﻿scrollVertical.prototype.scrollArea=null;      // 滚动的区域
scrollVertical.prototype.scrollMsg=null;       // 要滚动的内容
scrollVertical.prototype.unitHeight=0;         // 单独一行滚动内容的高度（程序中通过过的要滚动行的一个节点的offsetHeight获得） 
scrollVertical.prototype.msgHeight=0;          // 整个滚动内容的高度
scrollVertical.prototype.copyMsg=null;         // 复制滚动内容（程序中使用复制scrollMsg.innerHTML来获得的）
scrollVertical.prototype.scrollValue=0;        // 滚动的值
scrollVertical.prototype.scrollHeight=0;       // 滚动高度
scrollVertical.prototype.isStop=true;          // 停止滚动
scrollVertical.prototype.isPause=false;        // 暂停滚动 
scrollVertical.prototype.scrollTimer=null;     // 滚动计时器
scrollVertical.prototype.speed=3000;           // 滚动的时间间隔

/**
 * @method isMoz - 判断是否为Mozilla系列浏览器
 */ 
scrollVertical.prototype.isMoz = function(){
	return navigator.userAgent.toLowerCase().indexOf('gecko') > 0;
};

/**
 * @method play - 滚动信息的处理方法（函数）
 * @param {Object} o - 滚动类
 */ 
scrollVertical.prototype.play = function(o){
	var s_msg = o.scrollMsg;
	var c_msg = o.copyMsg;
	var s_area = o.scrollArea;
	var msg_h = o.msgHeight;
	
	var anim = function(){
		// 如果已经开始计时（间隔时间执行向上滚动），
		// 就停止它（以免无限制执行，耗系统资源）。
		if (o.scrollTimer) { 
			clearTimeout(o.scrollTimer);
		}
		// 如果暂停了滚动（鼠标放到了滚动层上）
		// 开始以10毫秒的时间间隔运行滚动	
		if (o.isPause) {
			o.scrollTimer = setTimeout(anim, 10);
			return;
		}
		// 当显示完所有信息后（这时滚动的距离就等于要滚动信息的高度msg_h）
		// 这时又重新开始滚动，将滚动距离清零
		if (msg_h - o.scrollValue <= 0) {
			o.scrollValue = 0;
		}
		else {
			o.scrollValue += 1;
			o.scrollHeight += 1;
		}
		// 根据浏览器的不同，处理滚动
		if (o.isMoz) { // Mozilla引擎浏览器
			s_area.scrollTop = o.scrollValue;
		}
		else { // 其余的浏览器则使用控制CSS样式处理滚动
			s_msg.style.top = -1 * o.scrollValue + "px";
			c_msg.style.top = (msg_h - o.scrollValue) + "px";
		}
        // 滚动高度等于显示滚动区域高度时（滚动完一行，一行内容全部显示）
		// 暂停4秒中，然后再开始执行下依次滚动。
		if (o.scrollHeight % s_area.offsetHeight == 0) {
			o.scrollTimer = setTimeout(anim, o.speed);
		}
		else {
			// 在两行内容之间过度滚动时，每10豪秒上升1px
			o.scrollTimer = setTimeout(anim, 10);
		}
	};
	// 执行滚动
	anim();
};

/**
 * scrollVertical 垂直滚动的构造函数
 * @param {Object} disp  -  必须  显示滚动区域的DOM节点（或节点ID） 
 * @param {Object} msg    -  必须  被显示的信息的DOM节点（或节点ID）
 * @param {string} tg     -  可选  以什么标记为一行的标签名称（tagName）
 */
function scrollVertical(disp, msg, 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;
	}
	
	// 为了开发方便，
	// 不用一直写this.scrollMsg这么常的名字，
	// 将两个对象付给局部变量
	var s_msg = this.scrollMsg;
	var s_area = this.scrollArea;
	

	if (!tg) {
		var tg = 'li';
	}
	
	this.unitHeight = s_msg.getElementsByTagName(tg)[0].offsetHeight;

	this.msgHeight = this.unitHeight * s_msg.getElementsByTagName(tg).length;

	var copydiv = document.createElement('div');

	copydiv.id = s_area.id + "_copymsgid";

	copydiv.innerHTML = s_msg.innerHTML;

	copydiv.style.height = this.msgHeight + "px";

	s_area.appendChild(copydiv);
	
	this.copyMsg = copydiv;
	this.play(this);
}
