var scrollImg = Class.create({
	initialize:function(arr,o1,direction,interval,change){
		this.arr = arr;
		this.change = change;
		this.direction = direction || 'left';
		this.interval = interval || 2;
		this.scrollId;
		this.scrollWidth;
		this.o1 = o1;
		this.o2;
		this.k = 0;
		this.init();
	},
	init:function(){
		var othis = this;
		this.o2 = new Element('ul',{'class':'aaaaa'});
		this.o2.innerHTML = this.o1.innerHTML;
		this.arr.insert(this.o2);
		this.scrollWidth = this.o1.select('li')[0].getWidth() *this.o1.select('li').size();
		this.o1.setStyle({width:this.scrollWidth + 'px'});
		this.o2.setStyle({left:this.scrollWidth + 'px',width:this.scrollWidth + 'px'});		
		if(!!this.change){
			this.change.each(function(n){
				n.observe('mouseover',othis.stop.bind(othis));
				n.observe('mouseout',othis.start.bind(othis));
			});
		};
		this.start()
	},
	start:function(){
		if(!this.scrollId){
			if(this.direction =='left'){
				this.scrollId = new PeriodicalExecuter(this.moveLeft.bind(this), this.interval);
			}else{
				this.scrollId = new PeriodicalExecuter(this.moveRight.bind(this), this.interval);
			}
		}
	},
	stop:function() {
		if(this.scrollId){
			this.scrollId.stop();
			this.scrollId = 0;
		}
	},
	goLeft:function() {
		this.direction = "left";
		this.stop();
		this.moveLeft();
		this.start();
	},

	goRight:function() {
		this.direction = "right";
		this.stop();
		this.moveRight();
		this.start();
	},
	moveLeft:function(){
		var othis = this;
		if(parseInt(this.o1.getStyle('left')) <= - this.scrollWidth){
			this.arr.insert(this.o1);
			this.o1.setStyle({left:this.scrollWidth + 'px'});
			this.o2.setStyle({left:0 + 'px'});
		};
		if(parseInt(this.o2.getStyle('left')) <= - this.scrollWidth){
			this.arr.insert(this.o2);
			this.o2.setStyle({left:this.scrollWidth + 'px'})
			this.o1.setStyle({left:0 + 'px'})
		};
	    if(!!this.change){
	    	this.change.invoke('removeClassName','here');
	    	this.change[0].observe('click',function(){
				othis.change.invoke('removeClassName','here');
				othis.change[0].addClassName('here');
				othis.o2.setStyle({left:othis.scrollWidth + 'px'})
				othis.o1.setStyle({left:0 + 'px'})
				othis.k = 0;
			})
	    	this.change[1].observe('click',function(){
	    		othis.change.invoke('removeClassName','here');
				othis.change[1].addClassName('here');
				othis.o2.setStyle({left:othis.scrollWidth - othis.o1.select('li')[0].getWidth() + 'px'})
				othis.o1.setStyle({left:-othis.o1.select('li')[0].getWidth() + 'px'})
				othis.k = 1;
			})
	    	this.change[2].observe('click',function(){
	   	 		othis.change.invoke('removeClassName','here');
				othis.change[2].addClassName('here');
				othis.o2.setStyle({left:othis.scrollWidth - othis.o1.select('li')[0].getWidth()*2 + 'px'})
				othis.o1.setStyle({left:-othis.o1.select('li')[0].getWidth()*2 + 'px'})
				othis.k = 2;
			})

	    };
	     if(!!this.change){
	   		var liLen = this.arr.select('ul')[0].select('li');
	   		this.k++;
	   		if(this.k==liLen.length){this.k = 0;};
	   		this.change[this.k].addClassName('here');   		
	     };
		new Effect.Parallel(
	         [
	         new Effect.Move(this.o1, {x: -(this.o1.down('li').getWidth()), y:0, sync: true }),
	         new Effect.Move(this.o2, {x: -(this.o2.down('li').getWidth()), y:0, sync: true })
	         ],
	         {duration: 0.5}
	         );
	},
	moveRight:function(){
		var othis = this;
		if(parseInt(this.o1.getStyle('left')) >= this.scrollWidth){
			this.arr.insert({top:this.o1});
			this.o1.setStyle({left:-this.scrollWidth + 'px'})
			this.o2.setStyle({left:0 + 'px'})
		};
		if(parseInt(this.o2.getStyle('left')) >= this.scrollWidth){
			this.arr.insert({top:this.o2});
			this.o2.setStyle({left:-this.scrollWidth + 'px'})
			this.o1.setStyle({left:0 + 'px'})
		};
	    if(!!this.change){
	    	this.change.invoke('removeClassName','here');
	    	this.change[0].observe('click',function(){
				othis.change.invoke('removeClassName','here');
				othis.change[0].addClassName('here');
				othis.o2.setStyle({left:othis.scrollWidth + 'px'})
				othis.o1.setStyle({left:0 + 'px'})
				othis.k = 0;
			})
	    	this.change[1].observe('click',function(){
	    		othis.change.invoke('removeClassName','here');
				othis.change[1].addClassName('here');
				othis.o2.setStyle({left:othis.scrollWidth - othis.o1.select('li')[0].getWidth() + 'px'})
				othis.o1.setStyle({left:-othis.o1.select('li')[0].getWidth() + 'px'})
				othis.k = 1;
			})
	    	this.change[2].observe('click',function(){
	   	 		othis.change.invoke('removeClassName','here');
				othis.change[2].addClassName('here');
				othis.o2.setStyle({left:othis.scrollWidth - othis.o1.select('li')[0].getWidth()*2 + 'px'})
				othis.o1.setStyle({left:-othis.o1.select('li')[0].getWidth()*2 + 'px'})
				othis.k = 2;
			})
	    };
	     if(!!this.change){
	   		var liLen = this.arr.select('ul')[0].select('li');
	   		this.k--;
	   		if(this.k<0){this.k = liLen.length - 1;};
	   		this.change[this.k].addClassName('here');
	     };
		new Effect.Parallel(
	         [
	         new Effect.Move(this.o1,{ x: this.o1.down('li').getWidth(), y:0, sync: true }),
	         new Effect.Move(this.o2,{ x: this.o2.down('li').getWidth(), y:0, sync: true })
	         ],
	         {duration: 0.5}
	    );	
	}
	
})