﻿function PlayImage(setting){
	var imgObjs = [];
	var btnObjs = [];
	var timer;
	var index = 0;
	var isInit = false;
	var container = document.createElement("div");
	var btnStyle = {
				border:"1px solid gray",	
				width:"20px",
				height:"20px",
				cssFloat:"left",
				styleFloat:"left",
				cursor:"pointer",
				margin:"0 5px",
				fontSize:"12px",
				lineHeight:"20px",
				textAlign:"center"
	}
	//供外部使用的方法
	var methods = {
		getLink : function(str){
			return p.links.length>1 ? "<a href='"+p.links[index]+"' target='"+p.target+"'>"+str+"</a>" : str;
		}	
	}
	//参数
	var p = $.extend({
			eventType : "onmouseover",  //暂时不支持onclick，因为会有bug
			fn		: function(i){},  //每次播放图片之前回调的函数,当前待播放的图片下标会被传进来，从1开始
			btnFocus: "",               //当鼠标移到按钮上时的class样式
			imgBox	: "",               //放置图片的容器
			btnBox  : "",			    //放置按钮的容器
			imgs	: [],				//图片数组
			links	: [],				//链接
			target	: "_blank",			//链接打开方式
			height	: 200,              //图片的高度
			width	: 200,              //图片的宽度
			stay	: 3000,             //停留时间 
			speed	: 500,              //速度
			btnOrder: "asc",            //按钮排序方式，asc：1-n  desc：n-1
			btnStyle: btnStyle          //按钮的样式,如果为null或者false，则不会用此类里的默认样式
	},setting);
	this.set = function(setting){
		p = $.extend(p,setting);
	}
	function $$(id){
		return typeof(id)=="string"?document.getElementById(id) : id;
	}
	
	this.play = function(){
		if(!isInit){
				//按钮
				var btnBox = $$(p.btnBox);
				for(var i=0;i<p.imgs.length;i++){
					var btn = document.createElement("p");
					btn.innerHTML=p.btnOrder=="desc"?p.imgs.length-i:i+1;
					if(p.btnStyle){
						p.btnStyle = $.extend(btnStyle,p.btnStyle);
						for(var a in p.btnStyle){
							btn.style[a] = p.btnStyle[a];	
						}
					}					
					btnBox.appendChild(btn);
					btnObjs.push(btn);	
				}
				if(p.btnOrder=="desc")
				btnObjs.reverse();
				for(var i=0;i<btnObjs.length;i++){
					(function(){
							var k=i;
							btnObjs[k][p.eventType] = function(){
								clearTimeout(timer);
								$(container).stop();
								setFocusObject(k);
								index=k;
								p.fn(index+1,methods);
								$(container).animate({scrollTop:k*p.height});
							}
							btnObjs[k].onmouseout = function(){
								$(container).stop();
								timer=setTimeout(rotate,0);	
							}
					})();	
				}
								
				//图片
				$$(p.imgBox).appendChild(container);
				with(container.style){
					width=p.width+"px";
					height=p.height+"px";
					overflow="hidden";
				}
				for(var i=0;i<=p.imgs.length;i++){
					var img = new Image();
					if(p.links.length>0){
						img.style.border="none";
						var a = document.createElement("a");
						a.href=p.links[i];
						a.target=p.target;
						a.appendChild(img);
						container.appendChild(a);
					}else{
						container.appendChild(img);	
					}
					imgObjs.push(img);
					img.src = p.imgs[i%p.imgs.length];
				}
				isInit = true;
		}
		
		p.fn(1,methods);
		index++;
		setFocusObject(0);
		timer=setTimeout(rotate,p.stay);	
		
	}

	function setFocusObject(j){
		//按钮
		if(btnObjs.length>0){
			for(var i=0;i<btnObjs.length;i++){
				btnObjs[i].className = btnObjs[i].className.replace(" "+p.btnFocus,"");	
			}
			btnObjs[j].className += " "+p.btnFocus;	
		}
	}
	
	function rotate(){
		p.fn((index%(imgObjs.length-1))+1,methods);
		setFocusObject(index==imgObjs.length-1?0:index);
		//图片
		$(container).animate({scrollTop:index*p.height},p.speed,function(){
			if(index==imgObjs.length-1){
				$(container).attr("scrollTop",0);
				index=1;
			}else{
				index++;
			}
			timer=setTimeout(rotate,p.stay);	
		});		
	}
}
