Tpl={
    w:993,h:231,
    __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,timer,nextTimer,hover;
    this.nums=[];
    shell.appendChild(pageBar);
    var This=this,pos=0,len=arrImgs.length;
    This.shell=shell;
    This.MaskDIV=mask;
    This.uw=This.w;
    This.uh=This.h;
    This.__createMask__();
	var Case=[[32,1,1],[32,1,1],[1,1,5],[1,1,6],[1,1,1],[1,1,2],[1,8,2],[1,1,0],[1,1,5],[1,1,4],[1,1,3]];
    //var Case=[[1,1,3]];
    var start=function (){
        var cur=arrImgs[pos%len].src,index=Math.round((Case.length-1)*Math.random());
        var opt=Case[index];
        if(This.prevNum)This.prevNum.className='';
        This.prevNum=This.nums[pos%len];
        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,5000);
       });        
    };
    for(var i=0,l=arrImgs.length;i<l;i++){
        num=document.createElement('A');
        num.href="javascript:void(0)";

        this.nums.push(pageBar.appendChild(num));
        num.numIndex=i;
        num.onclick=function (){
            pos=this.numIndex;
            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')
);