var changePic = Class.create({
	initialize:function(imgArray,num,cssClass,interval){
		this.imgArray = imgArray;
		this.num = num;
		this.interval = interval || 6;
		this.cssClass = cssClass;
		this.thisAdd = 0;
		this.picId,this.nums;
		that = this;
		this.init();
		this.start();
	},
	
	init:function(){		
		this.imgArray.each(function(n,i){
			n.setStyle({zIndex:80 - i});
			that.num.insert('<a href="javascript:void(0)">'+(i+1)+'</a>');
		})
		this.nums = this.num.select('a');
		this.nums[0].addClassName(this.cssClass);
		this.nums.each(function(o,k){
			o.observe('mouseover',function(){
				that.stop();
				for(var j=0,len = that.nums.length;j<len; j++){
					that.nums[j].removeClassName(that.cssClass);
				};
				o.addClassName(that.cssClass);
				that.imgArray.invoke('hide');
				that.imgArray.invoke('setOpacity',1);
				that.imgArray[k].show();
				that.imgArray[k].setOpacity(1.0);
			});
			o.observe('mouseout',function(){
				that.thisAdd = k;
				that.start();
			});
		})
		
	},
	
	start:function(){
		this.picId = new PeriodicalExecuter(this.effect.bind(this),this.interval);
	},
	stop:function() {
		if(this.picId){			
			this.picId.stop();
			this.picId = 0;
		}
	},
	effect:function(){
			new Effect.Fade(this.imgArray[this.thisAdd], { duration:2,from:1.0, to:0.0,afterFinish:function(){
				that.nums.invoke('removeClassName',that.cssClass);
			}});

			this.thisAdd++;
		    if(this.thisAdd==this.imgArray.length) this.thisAdd=0;
		    new Effect.Appear(this.imgArray[this.thisAdd], { duration:2, from:0.0, to:1.0,afterFinish:function(){
		    	that.nums[that.thisAdd].addClassName(that.cssClass);
		    }});
	}
})