//特点，根据循环个数自动生成按钮
var hotPic={
	init:function(w,h,content){
		var obj=document.getElementById(content);
		with(obj){
			style.width=w+"px";
			style.height=h+"px";
			style.overflow='hidden';
			//style.whiteSpace='nowrap';视情况而定
		}
		items=obj.getElementsByTagName('dd');//取得对象下的循环对象，这里循环对象是放置在DD标签内
		picAll=items.length;
		if(picAll>0){
			currentId=0;//当前Id
			interval=2000,//时间间隔
			hotPic.create();//创建按钮标签
			hotPic.repeat();//循环对象
		}
	},
	create:function(){
		var div=document.createElement("div");
		var ul=document.createElement("ul");
		var ulHtml="",imgHtml="";
		div.setAttribute("id","hotProductPage");
		for(var i=0;i<picAll;i++){ ulHtml+="<li></li>";}
		ul.innerHTML=ulHtml;
		imgHtml+="<img src='' /><img src='' />";
		div.appendChild(ul);
		div.innerHTML+=imgHtml;
		document.getElementById("hot").appendChild(div);
		//创建按钮表前后，取得要操作的对象
		btnItems=document.getElementById("hotProductPage").getElementsByTagName("li");
		ImgItems=document.getElementById("hotProductPage").getElementsByTagName("img");
	},
	set:function(){
		timer=setTimeout('hotPic.repeat()',interval)
	},
	clear:function(){
		clearTimeout(timer);
		timer=null;
	},
	repeat:function(){
		//控制重复循环
		if(currentId>picAll-1) currentId=0;
		else if(currentId<0) currentId=picAll-1;
		//控制图片前一个，后一个按钮显示
		if(currentId==0){ ImgItems[0].src='img/index_page_pre_off.gif';}
		else{ ImgItems[0].src='img/index_page_pre_on.gif';}
		if(currentId==picAll-1){ ImgItems[1].src='img/index_page_next_off.gif';}
		else{ ImgItems[1].src='img/index_page_next_on.gif';}
		//对操作对象的各种动作处理
		ImgItems[0].onclick=function(){ currentId-=2; hotPic.repeat(); hotPic.clear();}
		ImgItems[0].onmouseover=function(){ hotPic.clear();}
		ImgItems[0].onmouseout=function(){ hotPic.set()}
		ImgItems[1].onclick=function(){ hotPic.repeat(); hotPic.clear();}
		ImgItems[1].onmouseover=function(){ hotPic.clear();}
		ImgItems[1].onmouseout=function(){ hotPic.set()}
		for(var i=0;i<picAll;i++){
			btnItems[i].suf=i;
			btnItems[i].onclick=function(){ currentId=this.suf; hotPic.repeat(); hotPic.clear();}
			btnItems[i].onmouseover=function(){ hotPic.clear();}
			btnItems[i].onmouseout=function(){ hotPic.set()}
			
			items[i].onmouseover=function(){ hotPic.clear();}
			items[i].onmouseout=function(){ hotPic.set()}
		}
		
		hotPic.display(currentId);
		currentId++;
		hotPic.set();
	},
	display:function(e){
		for(var i=0;i<picAll;i++){
			if(i==e){
				btnItems[i].className+=(btnItems[i].className.length>0?' ':'')+'focus';
				items[i].className+=(items[i].className.length>0?' ':'')+'display';
			}
			else{
				btnItems[i].className=btnItems[i].className.replace("focus");
				items[i].className=items[i].className.replace("display");
			}
		}
	}
}