﻿var changeImg = Class.create({
	initialize:function(arrA,arrB,interval,className){
				this.arrA = arrA;
				this.arrB = arrB;
				this.interval = interval || 6;
				this.className = className || 'here';
				this.thisAdd = 0;
				this.scrollId,othis = this;
				this.arrA.each(function(n,j){
					n.setStyle({zIndex:20 - j});
					});
				this.arrB.each(function(m){
						m.writeAttribute({href:'javascript:void(0);'});
						m.setOpacity(0.7);
					});
				this.render();
				this.start();
	},
	
	render:function(){
		this.arrB.each(function(o,k){
			o.observe('mouseover',function(){
				othis.stop();
				for(var j=0;j<othis.arrB.length; j++){
					othis.arrB[j].removeClassName(othis.className);
				};
				o.addClassName(othis.className);
				othis.arrA.each(function(t){
					t.hide();
				});
				othis.arrA[k].show();
			});
			o.observe('mouseout',function(){
				othis.thisAdd = k;
				othis.start();
			});
		})
	},

	start:function() {
		if(!this.scrollId){	
				this.scrollId = new PeriodicalExecuter(this.goOn.bind(this), this.interval);
				}
	},

	stop:function() {
		if(this.scrollId){
			this.scrollId.stop();
			this.scrollId = 0;
		}
	},

	goOn:function() {
		new Effect.Fade(this.arrA[this.thisAdd], {duration:2, from:1.0, to:0.0});
		this.arrB.each(function(t){
			t.removeClassName(othis.className);
		});
		
		this.thisAdd++;
		if(this.thisAdd==this.arrA.length)this.thisAdd=0;
		new Effect.Appear(this.arrA[this.thisAdd], { duration:2, from:0.0, to:1.0});
		this.arrB[this.thisAdd].addClassName(this.className);	
	}	
	
})

