var Boxes = Class.create(
{
	initialize:function(ele,options){
		this.ele = $(ele);
		var thisObj = this;
		
		this.items = [];
		this.items_arr = [];
		this.pos_arr = [];
		
		this.items = this.ele.select('.div_boxes_inner');
		for (var i=0; i<this.items.length; i++) {
			//this.pos_arr[i] = 0;
			this.items_arr[i] = [];
			this.items_arr[i] = this.items[i].select('dl');
			this.items_arr[i].each(
				function(e){
					/*
					var s = { zIndex:'auto', position:'relative' };
					e.setStyle(s);
					*/
					e.hide();
				}.bind(this)	
			);
			this.pos_arr[i] = this.items_arr[i].length-1;
		}
		
		this.options = Object.extend({
			duration:Number(thisObj.ele.readAttribute("option:duration")||8),
			afterChange:Prototype.emptyFunction,
			beforeChange:Prototype.emptyFunction,
			delay:0
		},options);
		
		this.is_effecting=false;
		
		this.ele.makeClipping();
		this.change();
		this.start();
		
			
	},
	change:function(){
		
		var thisObj = this;
		this.is_effecting=true;
		
		for (var i=0; i<this.items.length; i++) {
			var pos = this.pos_arr[i];
			var ele_last = this.items_arr[i][pos];
			pos = pos+1<this.items_arr[i].length ? pos+1 : 0;
			var ele = this.items_arr[i][pos];
			this.pos_arr[i] = pos;
			new Effect.Fade(ele_last,{delay:0});
			new Effect.Appear(ele,{delay:1});
		}
		
	},
	start:function(){
		this.pe=new PeriodicalExecuter(
			function(){
				this.change();
			}.bind(this),
			this.options.duration
		);
	}
}
);
Component.init('.div_boxes','Boxes');