// 图片切换特效
//使用了jquery库
function changeImg2UC(containerID,images,titles,links,width,height)
{
	this.ImagesList=images; //图片列表
	this.TitlesList=titles; //标题列表
	this.LinksList=links; //标题链接列表
	this.CurrentIndex=0; //当前显示的图片在图片列表的位置
	this.IsRunning=false;//用于避免过快切换效果
	this.IsLoading=true;
	
	//自动运行控制参数
	this.AutoRun=false; //是否允许自动运行
	this.AutoRunInterval=null;
	
	if(containerID)
		this.Container= $("#"+containerID);
	else
		this.Container=$(document.body);		
	
	var me=this;
	$(document).ready(function(){me.InitUC(width,height)});
}

//添加图片及说明
changeImg2UC.prototype.InitUC=function(width,height)
{	
	var me=this;
	var setSize=false;
	if(!isNaN(width) && !isNaN(height))setSize=true;
	
	//创建页面元素
	//总框架
	this.box = $("<div class='ci2_container'></div>");
	this.Container.append(this.box);	
	//显示区域
	this.shower=$("<div class='ci2_shower'></div>");
	this.box.append(this.shower);
	//图片链接
	this.ImgLink=$("<a href='#' target='_blank'></a>");
	this.shower.append(this.ImgLink);	
	//图片
	this.Img=$("<IMG alt=''>");
	this.ImgLink.append(this.Img);
	//标题
	this.Title=$("<a href='#' target='_blank'></a>");
	this.TitleBox=$("<div class='ci2_text'></div>");
	this.TitleBox.append(this.Title);
	this.shower.append(this.TitleBox);	
	//标题背景
	this.TitleBG=$("<div class='ci2_textBG'></div>");
	this.shower.append(this.TitleBG);	
	//导航栏
	this.Guide=$("<div class='ci2_guide'></div>");
	this.box.append(this.Guide);
	//Loading
	this.Loading=$("<div class='ci2_Loading'></div>");
	this.box.append(this.Loading);	
	
	if(setSize){
		this.box.css("width",width+"px");
		this.box.css("height",height+"px");
		this.shower.css("width",width-18+"px");
		this.shower.css("height",height-9-this.Guide.height()+"px");
	}
	
	//加载图片
	var imgLoadedCout=0;
	var imgCount=this.ImagesList.length;
	for(var i=0;i<this.ImagesList.length;i++)
	{
		var mImage=$("<img src='"+this.ImagesList[i]+"'>");	
		mImage.ready(function(){
			imgLoadedCout++;
			if(imgLoadedCout==imgCount)
				me.Loading.hide();
				me.IsLoading=false;
			});
		
		var guideNum=$("<span>"+(i+1)+"</span>");	
		this.Guide.append(guideNum);
		guideNum.bind(
			"click",	
			{me:this},
			this.MoveAction
		)
	}
	this.Img.attr("src",this.ImagesList[0]);
	this.ImgLink.attr("href",this.LinksList[0]);
	this.Title.attr("href",this.LinksList[0]);
	this.Title.text(this.TitlesList[0]);
	this.Guide[0].childNodes[0].className="selected";
}

changeImg2UC.prototype.MoveAction=function(event)
{
	var me=event?event.data.me:this;
	
	//确定当前索引
	var idx=this.innerHTML-1;
	/*用于自动播放*/
	if(isNaN(idx))idx=me.CurrentIndex+1;
	if(idx>=me.ImagesList.length)idx=0;
	/*用于自动播放*/	
	
	if(idx==me.CurrentIndex)return;
	if(me.IsRunning)return;
	me.IsRunning=true;	
	
	//重新设定自动运行
	me.SetAutoRun(me.AutoRun);
	
	me.Guide[0].childNodes[me.CurrentIndex].className="";	
	me.CurrentIndex=idx;
	me.Guide[0].childNodes[idx].className="selected";
	
	me.Img.fadeOut(
		500,						
		function(){										
			me.Img.attr("src",me.ImagesList[idx]);
			me.Img.fadeIn(500);
			me.IsRunning=false;
		}
	);
	me.TitleBox.slideUp(
		500,
		function(){	
			me.TitleBox.slideDown(500);
			me.Title.text(me.TitlesList[idx]);
			me.ImgLink.attr("href",me.LinksList[idx]);
		}					
	);
	me.TitleBG.slideUp(
		500,
		function(){										
			me.TitleBG.slideDown(500);
		}					
	);
}

//设置自动运行
changeImg2UC.prototype.SetAutoRun=function(effect)
{
	var me=this;
	this.AutoRun=effect;
	this.AutoRunStop=false;
	if(this.AutoRunInterval!=null)clearInterval(this.AutoRunInterval);
	
	var AutoRunFunc=function()
	{
		if(me.IsLoading || me.AutoRunStop)return;
		if(me.AutoRun)me.MoveAction();	
	}

	//设置自动运程	
	if(effect)
	{
		this.shower.mouseover(function(){me.AutoRunStop=true;});
		this.shower.mouseout(function(){me.AutoRunStop=false;});
		this.AutoRunInterval=window.setInterval(AutoRunFunc,5000);
	}
	else if(!effect)
	{
		clearInterval(this.AutoRunInterval);
		this.AutoRunInterval=null;
	}	
}