var SideShowBox=Class.create({
	initialize:function(ele, options){
		this.element=$(ele);
		this.PeriodicalExecuter=null;
		
		this.options = Object.extend({
			mode:'fade',//fade, scroll
			direction:'left',//maybe more later
			duration:.3,// in sec
			delay:7,// in sec
			
			onChange:function(){},
			onChanged:function(){},
			onStop:function(){},
			onStart:function(){},
			
			_fadeEffect:function(current, next){
				//console.log(this);
				new Effect.Parallel([
					new Effect.Fade(current,{sync:true, duration:.3}),
					new Effect.Appear(next,{sync:true, duration:.3})
				],{queue:{
					position:'end',
					scope:$(current).identify()+'-scope',
					limit:1
				}});
			}
			
		},options);
		
		if(this.element.childElements().size()>1){
			this.getFirstElement().show().siblings().invoke('hide');
			this.start();
		}
	},
	start:function(){
		this.PeriodicalExecuter=new PeriodicalExecuter(this.transit.bind(this), this.options.delay);
		return this;
	},
	stop:function(){
		if(this.PeriodicalExecuter!=null)this.PeriodicalExecuter.stop();
		this.PeriodicalExecuter=null;
		return this;
	},
	transit:function(){
		//this.options._fadeEffect(this.getCurrentElement, this.getNextElement, this.options);
		this.options._fadeEffect(this.getCurrentElement(), this.getNextElement());
		//console.log(this);
		return this;
	},
	getCurrentElement:function(){
		return this.element.childElements().find(function(f){return f.visible();});
	},
	getNextElement:function(){
		return this.getCurrentElement()==this.getLastElement()?this.getFirstElement():this.getCurrentElement().next();
	},
	getFirstElement:function(){return this.element.childElements().first();},
	getLastElement: function(){return this.element.childElements().last();}
});
Component.init(".slideshowbox","SideShowBox", function(e){
	e.identify();
	return {
			/*effect:e.readAttribute("option:effect")||"fade",
			delay:Number(e.readAttribute("option:delay")||0),
			duration:Number(e.readAttribute("option:duration")||6)*/
			};
});