/**********************************************************************************
* JS类Xpnew_Marqueen　不间断滚动字幕
* 使用崔永祥的MSClass，不能应用到div + li的情况，所以根据网上的不间断滚动字幕，做出了这个类。
* 当前版本：V0.1
* 作者：xpnew 
* 
* 
* 
* 特别感谢：无忧脚本（让我受益良多）、小黄（我的同事，一开始是她让我解决这个div+li问题）
**********************************************************************************/
/*-----------------  使用方法>>>>： --------------------------------
指定一个div的css 宽、高 (建议用id选择器，也就是<div id="abc"></div>对应的css为 #abc {width:750px;height:150px;}
指定div 下面的li的宽度和浮动方式,建议使用#ID li 这样的复合选择器。#abc li{width:160px; float:left;}
放入js。
在合适的位置，写下代码var m1 = new Xpnew_Marqueen("abc");，建议为页面的底部。
如果有需要的话指定的相关的属性：
m1.step = 1;	//滚动的距离，单位像素。
m1.Speed = 25;	//滚动的频度，单位毫秒。
m1.Direction = 'left';   // 滚动的方向，现在只支持左右，left|right
m1.Refresh();				//开始滚动刷新
------------------  <<< 使用方法 ---------------------------------*/
function Xpnew_Marqueen(){
	
	var _this = this;		//防止类成员的this和类本身的this混淆，所以在类成员的代码段里有_this来引用。
	this.step = 1;
	this.Speed = 25;
	this.Direction = 'left';
	this.HtmlReady = true;
	//下以获取ID的方式来自于崔永祥
	this.ID = document.getElementById(arguments[0]);
	if(!this.ID)
	{
		alert("您要设置的\"" + arguments[0] + "\"初始化错误\r\n请检查标签ID设置是否正确!");
		this.ID = -1;
		return;
	}
	//解析div的结构，获取其中的ul和li
	if(!this.ID.hasChildNodes()){
		alert("初始化错误：滚动字幕不包含任何内容。");//暂时先这样，让我考虑一下是弹出对话框好，还是显示在状态栏好。
		return;
	}
	var nodeList01 = this.ID.childNodes; //nodeList01 是div下面的子节点列表
	var ULNode;			//ul标记
	
	this.length = 0;		//li的个数。
	
	
	//特别声明，下面段代码写完了之后，曾经尝试通过xpath获取 .//li，结果没有成功。
	
	for(var i =0; i< nodeList01.length ; i ++){
		if("UL" == nodeList01[i].nodeName){
			ULNode = nodeList01[i];
		}
	}
	
	//获取li并组成新的ul
	//如果div下面不包含ul，那就尝试直接获取div的li
	var UL_new = document.createElement("UL"); 		//新的ul
	
	if(ULNode)
	{
		var nodeList02 = ULNode.childNodes;
		
		if(!ULNode.hasChildNodes())
		{
			this.HtmlReady = false;
			return;
		}
		if(ULNode.childNodes.length == 0)
		{
			this.HtmlReady  = false;
			return;
			
		}
		var i = 0;
		var j = 0;
		for(var i =0; i< nodeList02.length; i++){
			if("LI" == nodeList02[i].tagName){
				j++;
			}
			else
			{
				window.status += i + ":" + nodeList02[i].tagName + " ";
			}
			
		}
		j = 0;
		i = 0;
		while(nodeList02.length > 0)
		{
			if("LI" == nodeList02[0].tagName){
				UL_new.appendChild(nodeList02[0]);
				i ++;
			}
			else
			{
				ULNode.removeChild(nodeList02[0]);
			}
			j++;
		}
		
	}
	else			//如果div下面不包含ul，那就尝试直接获取div的li
	{
		for(var i =0; i< nodeList01.length ; i ++){
			if("LI" == nodeList01[i].tagName){
				UL_new.appendChild(nodeList01[i]);
				this.ID.removeChild(nodeList01[i]);//顺便移除lis
			}
		}
	}
	
	if(!UL_new.hasChildNodes())
	{
		//alert("初始化错误：滚动字幕不包含任何重复内容。");//暂时先这样，让我考虑一下是弹出对话框好，还是显示在状态栏好。
		return;
	}
	//重组div的内部结构
	
	this.Player = document.createElement("DIV"); 
	this.Box = document.createElement("DIV"); 
	this.Player.appendChild(this.Box);
	this.Box.appendChild(UL_new);
	if(ULNode)
	{
		//ULNode.replaceChild(this.Player);  //一开始以为Firefox不支持replaceNode，后来发现应该是replaceChild方法。
		this.ID.replaceChild(this.Player,ULNode);
	}
	else
	{
		this.ID.appendChild(this.Player);
	}
	var FirstLi = UL_new.childNodes[0]; // 这个li会被反复使用到，所以添加一变量作为它的引用。
	this.LiElement = FirstLi;
	//--  使用 JQuery检测浏览器：
	if($.browser.msie)
	{
		if($.browser.version  == '6.0')
		{
			FirstLi.style.display = 'inline';  //IE六双倍边距BUG
		}
	}
	
	this.length = UL_new.childNodes.length;
	//this.Refresh();
	//this.play();
	_this.Player.onmouseover=function() {clearInterval(_this.MyMar);}
	_this.Player.onmouseout=function() {_this.Refresh();}
	this.LIReady = false;
	//alert(this.ID.innerHTML);
	/*
	if(!ULNode.hasChildNodes()){
		
		alert("初始化错误：滚动字幕不包含任何重复内容。");//暂时先这样，让我考虑一下是弹出对话框好，还是显示在状态栏好。
		return;
	}
	*/
}
Xpnew_Marqueen.prototype.ResetDiv = function()
{
	var UL_new = this.Box.childNodes[0];
	var FirstLi = this.Box.childNodes[0].childNodes[0];
	//获取div宽度、高度和li的宽度
	var w1,h1,w2,h2;
	w1 = getStyleWidth(this.ID);
	h1 = getStyleHeight(this.ID);
	w2 = getStyleWidth(FirstLi);
	h2 = getStyleHeight(FirstLi);
	var MarginWidth = getStyleMarginWidth(FirstLi);
	
	if(MarginWidth > 0)
	{
		w2 += MarginWidth;	
	}
	
	var MarginHeight
	var MarginHeight = getStyleMarginHeight(FirstLi);
	if(MarginHeight>0)
	{
		h2 += MarginHeight;
	}
		//测试滚动字幕的内部大小
		this.Player.style.width = w1;
		this.Player.style.height = h1;
		this.Player.style.overflow = "hidden";
		//this.Player.style.border = "1px solid red";
//		UL_new.style.padding = "0px";
//		UL_new.style.margin = "0px";
	if(this.Direction =='top' || this.Direction == 'bottom')
	{
		//获取div宽度、高度和li的宽度
		
		//h2 = getStyleMarginWidth(FirstLi);
		
		var h3 = parseInt(h2) * parseInt(this.length);　//当前所有的li高度，也就是this.Box的高度。
		//需要复制的份数
		var CopyTotal = Math.floor(parseInt(h1)/parseInt(h3)); 
	
		var CopyHTML = UL_new.innerHTML;
		
		for(var i = 0 ; i < CopyTotal; i ++)
		{
			UL_new.innerHTML += CopyHTML;
		}
		
		h3 = h3 * ( CopyTotal + 1);	
		
		UL_new.innerHTML += UL_new.innerHTML; //把内容复制一份。
		h3 = h3 * 2 ;				//因为内容增加了，所以宽度也要增加 （* 2）
		this.Box.style.height = h3 + 'px';
		
	}
	else
	{
		var w4 = FirstLi.offsetWidth;
		if(w4){
			w2 = w4>w2 ? w4 : w2;	
		}
		var MarginWidth = getStyleMarginWidth(FirstLi);
		
		if(MarginWidth > 0)
		{
			w2 += MarginWidth;	
		}
		var MarginHeight = getStyleMarginHeight(FirstLi);
		if(MarginHeight>0)
		{
			//h2 += MarginHeight;
		}
	
		var w3 = w2 * UL_new.childNodes.length;　//当前所有的li宽度。
	
	
		/******************************************************************************
		* 务必让滚动的内容的宽度超过外面div的宽度。
		* 这是为了内容比较少的情况准备的。比如说li宽为160，并且只有3个,而外部div预留了750。这样所有的li加在一起只有480
		* 如果li的数量太少，就要复制若干份。这个复制，是要填满一屏。（后面还要另外把所有的内容另外复制）
		* 先计算，需要复制多少份，然后，修改w3(所有的li宽度)
		* 根据份数，能过UL_new.innerHTML复制内容。
		* 
		* 
		*********************************************************************************/
		
		
		//需要复制的份数
		var CopyTotal = Math.floor(parseInt(w1)/parseInt(w3)); 
	
		var CopyHTML = UL_new.innerHTML;
		w3 = w3 * ( CopyTotal + 1);	
		for(var i = 0 ; i < CopyTotal; i ++)
		{
			UL_new.innerHTML += CopyHTML;
		}
		UL_new.innerHTML += UL_new.innerHTML; //把内容复制一份。
		w3 = w3 * 2 ;				//因为内容增加了，所以宽度也要增加 （* 2）
		this.Box.style.width = w3 + 'px';
	//	this.Box.style.border = "1px solid #FF0000";
	//	this.Player.style.border = "1px solid #FF00FF";
	}
	this.LIReady = true;
}
Xpnew_Marqueen.prototype.Refresh = function()
{
	var _speed;
	
	if (document.all){ 
		_speed = this.Speed;

	}
	else
	{
		_speed = this.Speed*2;
	}
	if(!this.HtmlReady)
		return false;
	var  _this = this;
	if(!this.LIReady)
	{
		this.ResetDiv();
		
	}
	if(this.MyMar || this.MyMar>0)
	{
		clearInterval(_this.MyMar);
	}
	//this.MyMar=setInterval(function(){this.play},this.Speed);
	this.MyMar=setInterval(function(){_this.play();},_speed);
}
Xpnew_Marqueen.prototype.play = function(){
	
	switch(this.Direction)
	{
		case 'left':
			if(this.Box.offsetWidth/2 - this.Player.scrollLeft <= 0)
			{
				this.Player.scrollLeft-=this.Box.offsetWidth/2;
				if(this.Player.scrollLeft< this.step){
					this.Player.scrollLeft = this.step;
				}
			}
			else
			{
				this.Player.scrollLeft += this.step;
				if(this.Player.scrollLeft==172)
				{
					this.Player.scrollLeft = 173;
				}
			}
		break;
		
		case 'right':
			if(this.Player.scrollLeft <= 0)
			{
				this.Player.scrollLeft+=this.Box.offsetWidth/2;
			}
			else
			{
				
				this.Player.scrollLeft -= this.step;
				
			}
		break;
		case 'top':
			if(this.Box.offsetHeight/2 - this.Player.scrollTop <= 0)
			{
//				clearInterval(this.MyMar)
//				return;
				this.Player.scrollTop-=this.Box.offsetHeight/2;
				if(this.Player.scrollTop< this.step){
					this.Player.scrollTop = this.step;
				}
			}
			else
			{
				this.Player.scrollTop += this.step;
				
			}
		break;
		
		case 'bottom':
			if(this.Player.scrollTop <= 0)
			{
				this.Player.scrollTop+=this.Box.offsetHeight/2;
			}
			else
			{				
				this.Player.scrollTop -= this.step;
			}
		break;
		default: 
		break;
	}
}