/**********************************************************************************
* 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';
	//下以获取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标记
	
	//alert( this.ID.innerHTML);
	//alert(nodeList01);
	
	//特别声明，下面段代码写完了之后，曾经尝试通过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;
		var i = 0;
		var j = 0;
		trace('**********************************************************************');
		for(var i =0; i< nodeList02.length; i++){
			trace('测试循环的次数：' + i  + 'nodeType：' + nodeList02[i].nodeType + ' name: ' + nodeList02[i].tagName);
			//trace('ULNode的内容：' + ULNode.innerHTML);

			if("LI" == nodeList02[i].tagName){
				j++;
			}
			else
			{
				window.status += i + ":" + nodeList02[i].tagName + " ";
			}
			
		}
		trace('一共有li节点:' + j);
		trace('**********************************************************************');
		j = 0;
		i = 0;
		while(nodeList02.length > 0)
		{
			trace('当前ULNode的长度：' + nodeList02.length);
			if("LI" == nodeList02[0].tagName){
				UL_new.appendChild(nodeList02[0]);
				i ++;
			}
			else
			{
				ULNode.removeChild(nodeList02[0]);
			}
			j++;
		}
		trace('当前ULNode的长度：' + nodeList02.length);
		trace('总次数：' + j + ' 有效的次数：' + i );
		trace('******************************************');
		/*废弃代码-----------------   	

		经过反复研究和测试，发现 ULNode的li  appendChild 给 UL_new之后nodeList02.length长度发生变化，
		所以这个循环最好使用while来实现。
		
		for(var i =0; i< nodeList02.length; i++){
			trace('测试循环的次数：' + i  + ' name: ' + nodeList02[i].tagName);
			trace('\n******************************************\n');
			trace('ULNode的长度：' + nodeList02.length);
			trace('ULNode的内容：' + ULNode.innerHTML);

			if("LI" == nodeList02[i].tagName){
				UL_new.appendChild(nodeList02[i]);
				window.status += "成功" + i + "-";
			}
			else
			{
				window.status += i + ":" + nodeList02[i].tagName + " ";
			}
		}
		*/
		
	}
	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;
	}
	
	trace('-------------------------转移的结果------------------------');
	trace(UL_new.childNodes.length);
	trace(UL_new.innerHTML);

	//重组div的内部结构
	trace('-------------------------重组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会被反复使用到，所以添加一变量作为它的引用。
	
	//--  使用 JQuery检测浏览器：
	if($.browser.msie)
	{
		if($.browser.version  == '6.0')
		{
			FirstLi.style.display = 'inline';  //IE六双倍边距BUG
		}
	}
	
	//获取div宽度、高度和li的宽度
	var w1,h1,w2,h2;
	w1 = getStyleWidth(this.ID);
	h1 = getStyleHeight(this.ID);
	w2 = getStyleWidth(FirstLi);
	h2 = getStyleHeight(FirstLi);
	trace('li原始宽度：' + w2);
	var w4 = FirstLi.offsetWidth;
	if(w4){
		w2 = w4>w2 ? w4 : w2;	
	}
	trace('li实际宽度：' + w2);
	var MarginWidth = getStyleMarginWidth(FirstLi);
	
	if(MarginWidth > 0)
	{
		w2 += MarginWidth;	
	}
	trace('li带上外边宽度：' + w2);
	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;
	}	

	trace('-------------------------复制的结果------------------------');
	trace(UL_new.childNodes.length);
	trace(UL_new.innerHTML);


	trace('w1: ' + w1 + ' h1: ' + h1 + ' w2: ' +  w2 + ' h2: ' +  h2 + ' w3: ' + w3 );
	h1 = h1 > h2 ? h2 : h1;
	trace('-------------------------this.Player.innerHTML start------------------------');
	
	trace(this.Player.innerHTML);
	trace('-------------------------this.Player.innerHTML over ------------------------');
	//测试滚动字幕的内部大小
	this.Player.style.width = w1;
	this.Player.style.height = h1;
	this.Player.style.overflow = "hidden";
	UL_new.innerHTML += UL_new.innerHTML; //把内容复制一份。
	w3 = w3 * 2 ;						//因为内容增加了，所以宽度也要增加 （* 2）
	trace('预计宽度：' + w3);
	this.Box.style.width = w3 + 'px';
	UL_new.style.padding = "0px";
	UL_new.style.margin = "0px";
	trace('this.Box的宽度：' + this.Box.style.width);
//	this.Box.style.border = "1px solid #FF0000";
//	this.Player.style.border = "1px solid #FF00FF";
	
	trace('初始位置：' + this.Player.scrollLeft);

	_this.Player.onmouseover=function() {clearInterval(_this.MyMar);}
	_this.Player.onmouseout=function() {_this.Refresh();}


	trace('实际内部大小：' + this.Box.offsetWidth);
	this.MyMar;
	
	//this.Refresh();
	//this.play();
	
	//alert(this.ID.innerHTML);
	/*
	if(!ULNode.hasChildNodes()){
		
		alert("初始化错误：滚动字幕不包含任何重复内容。");//暂时先这样，让我考虑一下是弹出对话框好，还是显示在状态栏好。
		return;
	}
	*/
	
	//获取div和li的宽度和高度
	
	
	
	
	//不能使用for in 循环！
	/*
	for(node1 in nodeList01){
		if("UL" == node1.nodeName){
			alert();	
			
		}
		//node1.innerHTML();
		alert(node1);
		alert(node1.nodeValue);	
	}
	*/
}
Xpnew_Marqueen.prototype.Refresh = function()
{
	var  _this = this;
	//this.MyMar=setInterval(function(){this.play},this.Speed);
	this.MyMar=setInterval(function(){_this.play();},this.Speed);
	//this.play();
	//this.MyMar=setTimeout(function(){_this.play();},this.Speed);
}

Xpnew_Marqueen.prototype.play = function(){
	switch(this.Direction)
	{
		case 'left':
			//this.Player.scrollLeft = 155;
			
//			trace(" Box.offsetWidth:" + this.Box.offsetWidth + " this.Player.scrollLeft:" + this.Player.scrollLeft );
//			trace(this.Box.offsetWidth/2 - this.Player.scrollLeft <= 0);
			if(this.Box.offsetWidth/2 - this.Player.scrollLeft <= 0)
			{
				trace('实际内部大小：' + this.Box.offsetWidth + " 结束位置：" + this.Player.scrollLeft + " 盒子的宽度：" + this.Box.offsetWidth);
//				clearInterval(this.MyMar)
//				return;
				this.Player.scrollLeft-=this.Box.offsetWidth/2;
				if(this.Player.scrollLeft< this.step){
					this.Player.scrollLeft = this.step;
				}
			}
			else
			{
				this.Player.scrollLeft += this.step;
				
			}
		break;
		
		case 'right':
//			trace(" this.Player.innerHTML:" + this.Player.innerHTML + " this.Player.scrollLeft:" + this.Player.scrollLeft);
//			trace(" this.Player.scrollLeft:" + this.Player.scrollLeft);
			if(this.Player.scrollLeft <= 0)
			{
				this.Player.scrollLeft+=this.Box.offsetWidth/2;
			}
			else
			{
				
				this.Player.scrollLeft -= this.step;
				
			}
		break;
		
		default: 
		break;
		
		
		/*网上的滚动字幕代码：
		if(marqueen2.offsetWidth-marqueen.scrollLeft<=0)
		{
			marqueen.scrollLeft-=marqueen1.offsetWidth;
		}	
		 else{
			marqueen.scrollLeft = marqueen.scrollLeft + 1;
		}
		*/
		
	}
	
	
}