var personalizaveis = Class.create({
	
	loja_nm		:null,
	area		:null,
	boxes		:null,
	activedItens:null,
	itens		:[],
	lastId		:-1,
	toLoad		:0,
	effectDone	:0,
	onStack		:[],
	fadingTime	:.8,
	effects		:['appear', 'fade'],
	
	initialize: function(area, itens, loja_nm){
		this.loja_nm = loja_nm?'../'+loja_nm+'/':'';
		this.setItens(itens).area = $(area);
		if(this.itens.length>0)
			this.start();
	},
	setItens: function(itens){
		itens.each(function(i){
			if(i.inicio_png)
				this.itens.push(i);
		}.bind(this));
		return this;
	},
	getNext3: function(goBack){
		var itens=[], a;
		if(goBack)
			this.lastId-=2;
		(3).times(function(i){
			this.lastId+=!goBack?1:-1;
			if(!(a=this.itens[this.lastId]))
				a=this.itens[this.lastId=(!goBack?0:this.itens.length-1)];
			itens.push(a);
		}.bind(this));
		if(goBack){
			itens.reverse();
			this.lastId+=2;
		}
		this.activedItens = itens;
		return itens;
	},
	setActiveItens: function(itens){
		this.busy=true;
		this.toLoad=3;
		this.boxes.each(function(e, i){
			this.onStack.push(e.insert(Builder.node('div', {className:'foto'}, [
				Builder.node('strong').update(itens[i].modelo_nome)
			]).setOpacity(0).setStyle({backgroundImage:'url('+itens[i].inicio_png+')'})));
			this.loadArea.insert(Builder.node('img', {src:itens[i].inicio_png}).observe('load', function(){
				this.loadDone();
			}.bindAsEventListener(this)));
		}.bind(this));
	},
	loadDone: function(){
		this.toLoad--;
		if(this.toLoad<=0)
			this.finishLoadigImages().toLoad=0;
	},
	effectFinish: function(){
		this.effectDone++;
		if(this.effectDone>=3)
			this.busy=false;
	},
	finishLoadigImages: function(){
		this.onStack.each(function(e){
			var x = e.select('.foto');
			x.each(function(xe, i){
				if(i==x.length-1){
					xe[this.effects[0]]({duration:this.fadingTime, afterFinish:function(){
						this.effectFinish();
					}.bind(this)});
					throw $break;
				} else {
					if(!xe.fading)
						xe.fading = xe[this.effects[1]]({duration:this.fadingTime, afterFinish:function(ef){
							ef.element.remove();
						}});
				}
			}.bind(this));
				
		}.bind(this));
		this.onStack=[];
		this.loadArea.update('');
		return this;
	},
	goClick: function(boxId){
		if(this.activedItens[boxId])
			window.location=this.loja_nm+'veiculo.php?id='+this.activedItens[boxId].id;
	},
	controlItens: function(isNext){
		if(!this.busy)
			this.setActiveItens(this.getNext3(!isNext));
	},
	start: function(){
		var sf=this;
		this.area.insert(this.loadArea=Builder.node('div', {className:'loadArea'}));
		this.boxes = this.area.insert('<div class="item"><u></u><span><a href="javascript:void(0)"></a></span></div><div class="item"><u></u><span><a href="javascript:void(0)"></a></span></div><div class="item"><u></u><span><a href="javascript:void(0)"></a></span></div><div class="controle e"></div><div class="controle d"></div>').select('.item');
		this.boxes.each(function(bx, i){
			bx.down('a').observe('click', function(){
				sf.goClick(i);
			});
		});
		this.area.select('.controle').each(function(e,i){
			e.observe('click', function(){
				sf.controlItens(i);
			});
		});
		this.setActiveItens(this.getNext3());
	}
	
});