/*
* 08/Abr/10 - Fix: Comprueba si la imagen ya fue cargada antes de asignar el evento onLoad.
* 18/Oct/10 - Fix: Removida la variable firsttime. Ahora el primer caption sigue la misma rutina de verificación de contenido para decidir si mostrarse (Anteriormente siempre se mostraba)
* 07/Abr/11 - Fix: Se mostraban Captions incorrectos.
* 29/Abr/11 - Opción 'fadenav' para hacer la barra de navegación semi transparente cuando nav = 'in'.
*/
var mooShowcase = new Class({
	Implements: Options,
	options: {
		nav: 'out',
		numbers: false,
		nextprev: false,
		spinner: true,
		fadenav: true,
		duration: 1200,
		captionheight: 72, // caption area height
		delay: 4000
	},
	previous:false,
	current:false,
	next:false,
	fx:[],
	navs:[],
	imgs_loaded:0,
	initialize: function(el,options){
		this.setOptions(options);
		this.nav = this.options.nav;
		this.showcase = $(el) || false;
		if(!this.showcase){
			return alert('No se encontró el contenedor con el id '+el);
		} else {
			/// Setting up layout
			this.showcase.setStyle('position','relative');
			this.wrapper = new Element('div',{'class':'mooshowcase_wrapper'}).adopt(this.showcase.getChildren()).inject(this.showcase);
			
			this.captions = this.wrapper.getChildren('.caption');
			if(this.captions.length){
				this.captionpad = new Element('div',{'class':'mooshowcase_captionpad'}).adopt(this.captions);
				this.caption = new Element('div',{
					'class':'mooshowcase_caption',
					styles:{ bottom:-this.options.captionheight+'px', height:this.options.captionheight+'px' }
				}).adopt(this.captionpad);
				this.caption.inject(this.wrapper);
			} else
				this.captions = false;
			
			this.snaps = this.wrapper.getElements('.item');
			
			if(this.snaps.length == 1)
				this.nav = false;
			
			this.container = new Element('div',{'class':'mooshowcase_container' });
			this.fxHeight = new Fx.Tween(this.container,{ property:'height', duration:this.options.duration *0.3, transition:Fx.Transitions.Quart.easeInOut, link:'cancel'});
			this.container.inject(this.wrapper).adopt(this.snaps);
			
			if(this.nav){
				this.navbar = new Element('div',{'class':'mooshowcase_nav '+this.nav});

				if(this.nav=='in' && this.options.fadenav){
					this.navbarFx = new Fx.Tween(this.navbar,{ link:'cancel', 'property':'opacity', 'duration':'short' });
					this.navbarFx.start(0.5);
					this.showcase.addEvents({
						'mouseenter':function(){ this.navbarFx.start(1); }.bindWithEvent(this),
						'mouseleave':function(){ this.navbarFx.start(0.5); }.bindWithEvent(this)
					});
				}
				
				if(this.options.nextprev){
					this.navbar_np = new Element('div',{'class':'navnp'});
					new Element('a',{
						'href':'javascript:;',
						'class':'next'
					}).addEvent('click',function(e){ (function(){ this.reset(); this.change(this.current+1); }.bind(this,e))(); }.bind(this)).inject(this.navbar_np);
					
					new Element('a',{
						'href':'javascript:;',
						'class':'prev'
					}).addEvent('click',function(e){ (function(){ this.reset(); this.change(this.current-1); }.bind(this,e))(); }.bind(this)).inject(this.navbar_np);

					this.navbar_np.inject(this.navbar);
				}
				
				this.navbar.inject(this.showcase);
			}
			
			if(this.options.spinner){
				this.spinner = new Element('div',{ 'class':'mooshowcase_spinner' });
				this.spinner.inject(this.container);
			}
			 
			if(this.captions)
				this.fxCaption = new Fx.Tween(this.caption,{ property:'bottom', duration:this.options.duration *0.4, transition:Fx.Transitions.Quart.easeInOut, link:'cancel'});
			
			this.snaps.each(function(el,idx){
				if(this.nav){
					this.navs.push(new Element('a',{
						href:'javascript:;',
						html: this.options.numbers ? idx+1 : '',
						'class':idx==0 ? 'selected':''
					}).addEvent('click',function(e){ this.reset(); this.change(idx); }.bind(this)).inject(this.navbar,this.nav=='in' ? 'top':'bottom'));
					
					
				}
				
				el.set('opacity',0);
				this.fx.push(new Fx.Tween(el,{ property:'opacity', duration:this.options.duration, transition:Fx.Transitions.Quart.easeInOut, link:'cancel'}));
				
				var complete = false;
				
				if(el.get('tag')!='img'){
					el = el.getElement('img');
					complete = el ? el.complete : true;
				} else 
					complete = el.complete;
				
				if(complete){ // Si ya cargó, contabilizamos..
					this.imgs_loaded++;
					this.checkload();
				} else {
					el.addEvent('load',function(){ this.imgs_loaded++;this.checkload(); }.bind(this));
				}
				
			}.bind(this));
		}
	},
	reset:function(){
		$clear(this.period);
		this.period = this.change.periodical(this.options.delay,this,false);
	},
	checkload:function(){
		if(this.imgs_loaded >= this.snaps.length){
			this.current = this.snaps.length - 1;
			if(this.options.spinner)
				this.spinner.setStyle('display','none');
				this.change();
				
			if(this.snaps.length > 1)
				this.period = this.change.periodical(this.options.delay,this,false);
		}
	},
	change:function(idx){
		var current = this.current;
		var previous = this.previous;
		var next;
		if(idx){
			if(idx < 0)
				next = this.snaps.length-1;
			else if(idx > this.snaps.length-1)
				next = 0;
			else 
				next = idx;
			
		} else {
			next = (current >= (this.snaps.length - 1)) ? 0 : current + 1;
		}

		// Disminución de altura
		this.fxHeight.start(this.snaps[next].getSize().y);
		this.fx[current].start(0);
		this.fx[next].start(1);

		if(this.captions){
			this.fxCaption.start(-(this.options.captionheight)).chain(function(){
				if(current!==false){
					this.captions[current].setStyle('display','none');
				}
				this.captions[next].setStyle('display','block');
				if(this.captions[next].get('html')) /* ¿Quién quiere ver un caption vacío? R= Nadie */
					this.fxCaption.start(0);
					
			}.bind(this));
		}

		if(this.nav){
			this.navs[current].removeClass('selected');
			this.navs[next].addClass('selected');
		}

		this.previous = current;
		this.current = next;
	}
	
});