/** BK
 *	@author : Partikule studio 2009
 *	
 *
 *
 */

var Bk = new Class({
	
	Implements: Options,

	options: {
		baseUrl:			'',
		bgContainer :		'bg',				// Background container
		debug:				'debug',					// Debug Div. Debug not printed if '';
		images:				'',
		home:				false
	},

	initialize: function(options){

		// Options
		this.setOptions(options);

		this.container =		$(this.options.container);
		this.bgContainer = 		$(this.options.bgContainer);

		// Images
		this.images = Array();
		if (this.options.images.length > 0)
			this.initDiaporama();
		
		this.diaporamaId = false;
		this.lastPicture = false;
		this.nextPicture = 0;
		
		// first next picture z-index
		// will increase as the picture are showed
		this.zIndex = this.options.images.length;
		
		// Window Resize event
		$(window).addEvent('resize', function(evt)
		{
			this.resizeDiaporama();
			if (this.options.home == true)
				this.slideHeader();
			
		}.bind(this));
	

		this.headerSize = $('header').getSize();

		// Add the first HR to the header if home
		if (this.options.home == true)
		{
			$('header').setStyle('margin-top', '-' + parseInt(this.headerSize.y + 40) + 'px');
			
			(new Element('hr')).inject($('header'), 'top');
		}

		// Show header
		if (this.options.home == true)
			this.displayHeader.delay(2000);

	},
	
	/** Display the header
	 * 
	 */
	displayHeader: function()
	{
		var winSize = $(document.body).getSize();
		var headerSize = $('header').getSize();
		
		$('header').set('morph', {transition:'back:out',duration:1200});
		$('header').morph({'margin-top': parseInt((winSize.y/2) - headerSize.y/2)});
		
	},
	
	/** Slide the header to the new position
	 *  called on window resize event
	 */
	slideHeader: function()
	{
		var winSize = $(document.body).getSize();
		var slideTo = 0;
		if (winSize.y > 220)
			slideTo = winSize.y/2 - this.headerSize.y/2;
		$('header').morph({'margin-top': slideTo});
	},
	
	
	initDiaporama: function()
	{
		
		this.images = new Asset.images(this.options.images, {
										onComplete: this.startDiaporama.bind(this),
										onProgress: function(counter, index){
											$('loading').set('html', 'loading : ' + (100/this.images.length * (counter+1)) + ' %');
										}.bind(this)
		});

	},

	startDiaporama: function()
	{
		// Resising the pictures
		this.resizeDiaporama();

		// Injects pictures into container
		for (var i = 0; i < this.images.length; i++)
		{
			this.images[i].setStyles({
				'position': 'absolute',
				'z-index': i
			});
			this.images[i].addClass('bg-img');
			
			this.images[i].fx = new Fx.Tween(this.images[i], 
			{
				property:'opacity', 
				fps:24,
				duration:384,
				transition:'linear'
			});
			
			this.images[i].fx.addEvent('complete', function()
			{
				if (this.lastPicture !== false)
					this.images[this.lastPicture].fx.set(0);
				
				this.lastPicture = this.nextPicture;

				if (this.lastPicture < this.images.length -1)
					this.nextPicture += 1;
				else 
					this.nextPicture = 0;
				

			}.bind(this));


			// Put the image into the container
			this.bgContainer.adopt(this.images[i]);
			
			// Fade hide
			this.images[i].fx.set(0);
		}

		// Shows the bg container
		$(this.options.bgContainer).setStyle('display', 'block');

		// Start the periodical fade in / out
		$('loading').fade('hide');
		
		this.showNextPicture();

		if (this.images.length > 1)
		{
			this.diaporamaId = this.showNextPicture.periodical(5000, this);
		}

	},

	/* Resize the diaporama (pictures)
	 */
	resizeDiaporama: function() 
	{
		var winSize = $(document.body).getSize();
		var winRatio = winSize.x / winSize.y;
		
		// Set the container size
		this.bgContainer.setStyle('height', winSize.y);
		this.bgContainer.setStyle('width', winSize.x);
		
		for (var i = 0; i < this.images.length; i++)
		{
			var img = this.images[i];
			
			// Set the reference : height or width
			var h = img.height;
			var w = img.width;
			var imgRatio = w / h;
			var ref = '';
			
			// reference = height
			if (imgRatio <= winRatio)
			{	
				ref = ('height');
				var ratio = 	h/w;
				img.width = 	winSize.x;
				img.height = 	img.width * ratio;
				
			}
			else
			{
				ref = ('width');
				var ratio = 	w/h;
				img.height = 	winSize.y;
				img.width = 	img.height * ratio;
			}
			
			// Img Tween FX
			img.set('tween', {duration: 600});		
		}
	},
	
	resizeComplete: function()
	{
		$(this.options.bgContainer).fade('in');
	},

	showNextPicture: function()
	{
		this.images[this.nextPicture].setStyle('z-index', this.zIndex);
		this.zIndex += 1;

		this.images[this.nextPicture].fx.start(0,1);
	}

	
});