/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 *
 */
var Banner = new Class({

	Implements: [Events, Options],

	options: {
		prefijo: 'banner_',
		cantidad: 24,
		animacion: 50,
		intervalo: 5000,
		eje: 'vertical',
		
		slidesBase: ''
	},
	initialize: function(wrapper, slides, options){
		this.setOptions(options);

		wrapper = $(wrapper);

		this.slides = this.driver(slides);

		this.wrapper = {
			el: 	wrapper,
			width: 	$pick(parseInt(wrapper.getStyles('width')['width']), wrapper.getSize().x),
			height: $pick(parseInt(wrapper.getStyles('height')['height']), wrapper.getSize().y)
		};

		this.slices = {
			els: [],
			width: (this.options.eje == 'vertical' ? this.wrapper.width / this.options.cantidad : this.wrapper.width).toInt(),
			height: (this.options.eje == 'vertical' ? this.wrapper.height : this.wrapper.height / this.options.cantidad).toInt()
		};

		this.current = {
			slide: -1,
			overlay: 0,
			counter: 0
		};

		this.preloadImgs = [];
		this.estructura();
	},

	driver: function(slides){
		
		if ($type(slides[0]).contains('element')){
			this.slidesEl = [];

			slides.each(function(slide){
				this.slidesEl.push({
					'image': slide.get('src'),
                                        'map': slide.get('usemap')
					
				});
			}, this);
			slides.destroy().empty();
			slides = this.slidesEl;
		}
		return slides;
	},

	horizontal: function(){
		return {
			'background-position': '0 -' + (this.slices.height * this.current.counter) + 'px'
		};
	},

	vertical: function(){
		return {
			'background-position': '-' + (this.slices.width * this.current.counter) + 'px 0'
		};
	},
	estructura: function(){
		this.container = new Element('div', {
			'class': this.options.prefijo + 'container',
			'styles': {
				'height': this.wrapper.height,
				'width': this.wrapper.width
			}
		});

		this.container.inject(this.wrapper.el);
		this.preload();
	},

	persianas: function(idx){

		this.current.counter = idx;
		this.slices.els[idx] = new Element('div', {
			'class': this.options.prefijo + 'slice ' + this.options.prefijo + this.options.eje,
			'tween': {
				'duration': this.options.animacion * 4
			},
			'styles': $merge({
				'opacity': 0,
				'width': this.slices.width,
				'height': this.slices.height,
                                'usemap':'#Ndesa',
				'background-image': 'url(' + this.options.slidesBase + this.slides[this.current.slide].image + ')'
			}, this[this.options.eje]())
		}).inject(this.container);
		new Fx.Morph(this.slices.els[idx]).start($merge({
			'opacity': 1
		}, this.options.sliceFxIn));
		if (idx == this.options.cantidad-1){
			this.step.delay(this.options.animacion * 4, this);
		}
	},

	preload: function(){
		
		this.slides.each(function(o){
			this.preloadImgs.push(this.options.slidesBase + o.image);
		}, this);
		new Asset.images(this.preloadImgs, {
			onComplete: this.onPreload.bind(this)
		});
	},

	onPreload: function(){
		this.animarPersianas().periodical(this.options.intervalo, this);

		this.fireEvent('onPreload', this.slides[this.current.slide]);
	},
	animarPersianas: function(){
		this.current.slide++;
                //vuelve a la ultima cuando termine
		if (this.current.slide == this.slides.length){
			this.current.slide = 0;
		}
                //crea persianas
		for (var idx = 0; idx < this.options.cantidad; idx++){
			this.persianas.delay(this.options.animacion * idx, this, idx);
		}
		return this.animarPersianas;
	},
	step: function(){
		this.container.set('styles', {
			'background-image': 'url(' + this.options.slidesBase + this.slides[this.current.slide].image + ')'
		});
		this.slices.els.each(function(slice){
			slice.destroy();
		});
	}
});

Element.implement({
	banner: function(slides, options){
		return new Banner(this, slides, options);
	}
});