/* Mootools Class vor Animating Background
 * (c) 2010 by Felix . Buenemann /a/t/ gmail . com
 *
 * Version: 2010-09-02-001
 *
 * Requires MooTools 1.2:
 * Core: Array, Class, Class.Extras, Element, Element.Dimensions, Element.Style, FX.Tween
 * More: Asset
 */

var fbBgShow = new Class({
	
	Implements: [Options], 
	
	options: {
		/* defaults */
		transitionDuration: 2000, // ms
		showInterval: 5000, // ms
		imagesDir: '', // relative path to slides
		holder: 'fbbgshow',
		imgAspect: 1.6, // width/height ratio of images
		imgCenter: true,
		imgStyle: {
			opacity:0,
			top:0,
			left:0,
			position:'absolute',
			'z-index': 10
		},
		onFirst: null, // callback at first loaded image
		onComplete: null // callback for loaded
	},
	
    initialize: function(images, options){
        
		// overwrite default options
		this.setOptions(options);
		
		this.currentSlide = null;
		this.currentIndex = 0;
		
		holder = $(this.options.holder);
		
		if(!images)
			return;
			
		images.each(function(img,i){ images[i] = this.options.imagesDir + '' + img; },this); //add dir to images
		
		this.slides = [];
		
		// setup event handlers
		window.addEvent('resize',(function(){this.resizeSlide();}).bind(this));
		// for iDevices
		window.onorientationchange = (function(){this.resizeSlide();}).delay(500,this);
		
		var loader = new Asset.images(images, {
			
			onProgress: (function(c,idx) {
				this.slides.push(new Element('img',{
					src:images[idx],
					//height:window.getHeight(),
					styles: this.options.imgStyle
				}).inject(holder).set('tween', {duration: this.options.transitionDuration}));
				// show first pic as loaded
				if(c==1) {
					if(this.options.onFirst)
						this.options.onFirst();
					this.resizeSlide(this.slides[c]).tween('opacity',1);
				}
			}).bind(this),
			
			onComplete: (function() {
				
				if(this.options.onComplete)
					this.options.onComplete();
				
				if(Browser.Platform.ipod)
					return; // disable animation on iDevices (low CPU power)
				
				var interval = this.options.showInterval+this.options.transitionDuration;
				
				var changeSlide = function() {
					this.slides[this.currentIndex].fade(0);
					++this.currentIndex;
					this.currentIndex = (this.slides[this.currentIndex] ? this.currentIndex : 0);
							
					this.resizeSlide(this.slides[this.currentIndex]).fade(1);
					
				};
				changeSlide.delay(this.options.transitionDuration,this);
				changeSlide.periodical(interval,this);

			}).bind(this)
		});
    },

	// handle resizing of slides
	resizeSlide: function(slide) {
		var slides = [];
		
		if(slide) {
			// cache last slide
			if(this.currentSlide && (slide.get('src') != this.currentSlide.get('src')))
				this.lastSlide = this.currentSlide;
			this.currentSlide = slide;
		} else
			slide = this.currentSlide;
		
		var win = window.getSize();
		
		// if last slide visible, scale it aswell
		if(this.lastSlide && (this.lastSlide.getStyle('opacity') > 0))
			slides.push(this.lastSlide);
			
		slides.push(slide).each(function(c,i) {
			var idx = i - 1;
			//console.log('scale '+idx+': '+slides[idx].get('src'));
			if(slides[idx]) { // dunno why it's sometimes undefined
				slides[idx].set('height',win.y).set('width',win.y*this.options.imgAspect);
				if(win.x > slides[idx].get('width')) {
					slides[idx].set('width',win.x).set('height',win.x/this.options.imgAspect);
				}
				if(this.options.imgCenter) {
					// center image
					if(slides[idx].get('width') > win.x) {
						var off = (win.x-slides[idx].get('width'))/2;
						slides[idx].setStyle('left',off+'px');
					} else {
						slides[idx].setStyle('left','0px');
					}
				}
			}
		},this);
		
		return slide;	
	}
	
});