// JavaScript Document
window.onload=function() {
	sWidth=903;
	sHeight=237;
	setTimer=5000;
	imgStyle=0; //0-随机 1-纵向百叶窗 2-左上往右下 3-右下往左上 4-中间向左右 5-中间向上下 6-横向百叶窗 7-中间向四周 8-由上至下 9-由左至右
	displayNum=false;
	lrBtnBar=false;
	displayText=false;
	
	
	Tpl={
		w:sWidth,h:sHeight,
		__clip__:function (el,x,y,w,h){
			var _=[y,w,h,x];
			for(var i=_.length;i--;)_[i]=_[i]<0?'auto':_[i]+'px';
			el.style.clip="rect("+_.join(" ")+")";
		},
		__timeLine__:function (play,end,len) {
			var play=play||Date,end=end||Date,s=0,t=0,len=(len||480)/10,th,p=Math.pow,
			fx=function(x){return x},c=function(f,t){return +f+(t-f)*s};
			return th=setInterval(function(){play(c,s=fx(t++/len));if(s==1)end(clearInterval(th))},10);
		},
		__createMask__:function (){
			var ranges=[],masks=[],r,c;
			for(var i=0;i<32;i++){
				r=document.createElement('DIV');
				r.className="range";
				masks.push(r.appendChild(document.createElement('DIV')));            
				ranges.push(this.MaskDIV.appendChild(r))
			};
			this.masks=masks;
			this.ranges=ranges
		},
		__setMask__:function (bgImg,col,row){
			var a,b,w=Math.ceil(this.w/col),h=Math.ceil(this.h/row),l=this.ranges.length;
			this.uw=w;
			this.uh=h;
			this.actCount=Math.min(col*row,l);
			for(var i=0;i<l;i++){
				a=this.ranges[i].style;
				b=this.masks[i].style;
				b.width=a.width=w+'px';
				b.height=a.height=h+'px';
				b.background="url("+bgImg+")";
				b.backgroundPosition=(-i%col)*w+'px '+parseInt(-i/col)*h+'px';
				b.clip="rect(0 0 0 0)";
				if(i==col*row-1)break
			};
		},
		__fxs__:[
			function (el,x){this.__clip__(el,x(this.uw,0),x(this.uh,0),x(0,this.uw),x(0,this.uh))},
			function (el,x){this.__clip__(el,x(this.uw,0),-1,x(0,this.uw),-1)},
			function (el,x){this.__clip__(el,-1,x(this.uh,0),-1,x(0,this.uh))},
			function (el,x){this.__clip__(el,-1,-1,-1,x(0,this.uh))},
			function (el,x){this.__clip__(el,-1,-1,x(0,this.uw),-1)},
			function (el,x){this.__clip__(el,-1,-1,x(0,this.uw),x(0,this.uh))},
			function (el,x){this.__clip__(el,x(this.uw,0),x(this.uh,0),-1,-1)}
		]
	};
	imgFx=function (shell,mask){
		var arrImgs=shell.getElementsByTagName('IMG');
		var pageBar=document.createElement('DIV');
		pageBar.className='pageBar';
		
		var num,rbtn,lbtn,timer,nextTimer,hover;
		this.nums=[];
		shell.appendChild(pageBar);
		
		var urlDiv=document.createElement('a');
		urlDiv.style.display="block";
		urlDiv.style.width="100%";
		urlDiv.style.height="100%";
		urlDiv.style.position="absolute";
		shell.appendChild(urlDiv);	
		
		if(lrBtnBar) {
		var btnBar=document.createElement('DIV');
		btnBar.className='btnBar';
		shell.appendChild(btnBar);		
		}
		
		var This=this,pos=0,len=arrImgs.length;
		This.shell=shell;
		This.MaskDIV=mask;
		This.uw=This.w;
		This.uh=This.h;
		This.__createMask__();
		switch (imgStyle) {
        case 0:
		   var Case=[[4,1,1],[1,1,5],[1,1,6],[1,1,1],[1,1,2],[1,8,2],[1,1,0],[1,1,3],[1,1,4]];
		   break;
        case 1:
		   var Case=[[4,1,1]];
		   break;
        case 2:
		   var Case=[[1,1,5]];
		   break;
        case 3:
		   var Case=[[1,1,6]];
		   break;
        case 4:
		   var Case=[[1,1,1]];
		   break;
        case 5:
		   var Case=[[1,1,2]];
		   break;
        case 6:
		   var Case=[[1,4,2]];
		   break;
        case 7:
		   var Case=[[1,1,0]];
		   break;
        case 8:
		   var Case=[[1,1,3]];
		   break;
        case 9:
		   var Case=[[1,1,4]];
		   break;
		}     
		
		var start=function (){
			if(pos<0) pos=len-1;
			if(pos>=len) pos=0;
			if(displayText&&lrBtnBar) sText.innerHTML=arrImgs[pos].getAttribute('alt');
			if(arrImgs[pos].getAttribute('rev')!=null&&arrImgs[pos].getAttribute('rev')!="") {
				urlDiv.style.cursor="pointer";
				urlDiv.href=arrImgs[pos].getAttribute('rev');
				urlDiv.target=arrImgs[pos].getAttribute('target');
			}
			else {
				urlDiv.style.cursor="default";
				urlDiv.href="javascript:void(0)";
			}
			var cur=arrImgs[pos].src,index=Math.round((Case.length-1)*Math.random());
			var opt=Case[index];
			if(This.prevNum)This.prevNum.className='';
			This.prevNum=This.nums[pos];
			This.prevNum.className='current';
			This.__setMask__(cur,opt[0],opt[1]);
			timer=This.__timeLine__(function (x){
				for(var i=This.actCount;i--;){
					This.__fxs__[opt[2]].call(This,This.masks[i],x)
				};
		   },function (){
			   This.shell.style.background='url('+cur+')';
			   pos++;
			   if(!hover)nextTimer=setTimeout(start,setTimer);
		   });        
		};
		for(var i=0,l=arrImgs.length;i<l;i++){
			num=document.createElement('A');
			num.href="javascript:void(0)";
			num.innerHTML=(i+1);
			this.nums.push(pageBar.appendChild(num));
			num.numIndex=i;
			num.onclick=function (){
				pos=this.numIndex;
				clearTimeout(timer);
				clearTimeout(nextTimer);
				start();
			}
			if(!displayNum||lrBtnBar) {
				num.style.display="none";
			}
		};
		if(lrBtnBar) {
			rbtn=document.createElement('A');
			lbtn=document.createElement('A');
			sText=document.createElement('span');
			rbtn.className="rightBtn";
			lbtn.className="leftBtn";
			sText.className="sText";
			//rbtn.innerHTML="&gt;";
			//lbtn.innerHTML="&lt;";
			btnBar.appendChild(rbtn);	
			btnBar.appendChild(lbtn);
			btnBar.appendChild(sText);
			rbtn.onclick=function (){
				clearTimeout(timer);
				clearTimeout(nextTimer);
				start();
			}
			lbtn.onclick=function (){
				pos-=2;
				clearTimeout(timer);
				clearTimeout(nextTimer);
				start();
			}
		}
		start();
	};
	imgFx.prototype=Tpl;
	try {document.execCommand("BackgroundImageCache", false, true);}catch(e){};
	
	var _51Fx=new imgFx(
		document.getElementById('imageFx'),
		document.getElementById('maskFx')
	);
}