window.addEvent('domready',function(){
		var itm;
		var box = new viewer($('box').getChildren(),{
		mode: 'left',
		interval: 9000
		});
		var handles = $$('#handles li');
			handles.each(function(itm,i){
			itm.addEvent('click',box.walk.bind(box,[i,true]));
		    itm.id="pbBut"+i;
		});
		box.play(true);
	});

var viewer = new Class({
	sizes: {w:825,h:584},

	initialize: function(items,options){
		if(options) for(var o in options) this[o]=options[o];

		this.__current = 0;
		this.__previous = null;
		this.items = items.setStyle('display','none');
		this.items[this.__current].setStyle('display','block');
		this.attrs = {
			left: ['left',-this.sizes.w,0,'px'],
			top: ['top',-this.sizes.h,0,'px'],
			right: ['left',this.sizes.w,0,'px'],
			bottom: ['top',this.sizes.h,0,'px'],
			alpha: ['opacity',0,1,'']
		};
		this.sequence = typeof(this.mode)=='object' ? this.mode : false;
		this.curseq = 0;
		this.timer = null;
	},

	walk: function(n,manual){
		if(this.__current!==n && !this.disabled){
			this.disabled = true;
				this.stop();
					this.timer = this.next.periodical(this.interval,this,[false]);

			if(this.rand){
				this.mode = this.modes.getRandom();
			}else if(this.sequence){
				this.mode = this.sequence[this.curseq];
				this.curseq += this.curseq+1<this.sequence.length ? 1 : -this.curseq;
			}
			this.__previous = this.__current;
			this.__current = n;
			var a = this.attrs[this.mode].associate(['p','f','t','u']);
			for(var i=0;i<this.items.length;i++){
				if(this.__current===i){
					this.items[i].setStyles($extend({'display':'block','z-index':'2'},JSON.decode('{"'+a.p+'":"'+a.f+a.u+'"}')));
					document.getElementById('pbBut'+i).className= "active";
				}else if(this.__previous===i){
					this.items[i].setStyles({'z-index':'1'});
					document.getElementById('pbBut'+i).className= "";
				}else{
					this.items[i].setStyles({'display':'none','z-index':'0'});
					document.getElementById('pbBut'+i).className= "";

				}
			}
			this.items[n].set('tween',$merge(this.fxOptions,{onComplete:this.onComplete.bind(this)})).tween(a.p,a.f,a.t);
		}
	},

	play: function(wait){
		this.stop();
		if(!wait){
			this.next();
		}
		this.timer = this.next.periodical(this.interval,this,[false]);
	},

	stop: function(){
		$clear(this.timer);
	},

	next: function(manual){
		this.walk(this.__current+1<this.items.length ? this.__current+1 : 0,manual);
	},

	previous: function(manual){
		this.walk(this.__current>0 ? this.__current-1 : this.items.length-1,manual);
	},

	onComplete: function(){
		this.disabled = false;
		this.items[this.__previous].setStyle('display','none');
		if(this.onWalk) this.onWalk(this.__current);
	}
});