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

var BgGallery = new Class({
	
	Implements: Options,

	options: {
		baseUrl:		'',
		container :		'bg'
	},
	
	initialize: function(el, options){

		// Options
		this.setOptions(options);

		// Gallery
		this.galleries = $$(el);
		
		// Container
		this.container = $(this.options.container);
		
		// Current picture
		this.currentPicture = false;
		
		// Current z-index
		this.zIndex = 0;

		// 
		this.imagesList = Array();

		if (this.galleries) {
			this.build();
		}
	},
	
	
	build: function()
	{
		// Thumb elements array
		this.thumbList = Array();
		
		// Thumb Href array
		this.hrefList = Array();
		
		// For each gallry, get the pictures
		this.galleries.each(function(gal, index)
		{
			var el = gal.getElements('a');
			
			el.each(function(item, idx)
			{
				this.hrefList.push(item.getProperty('href'));
				this.thumbList.push(item);
				item.fade('hide');
			}.bind(this));
			
		}.bind(this));

		this.zIndex = this.thumbList.length;

		// Loads the big pictures and show each thumbs
		this.images = new Asset.images(this.hrefList, 
		{
			onComplete: this.activate.bind(this),
			onProgress: function(counter, index) 
			{
				// show the thumb
				this.thumbList[counter].fade('in');
				
				// create the image element & inject it into the container
				new Element('img', {
					'src': this.hrefList[counter],
					'id': 'picture' + counter,
					'style': 'position:absolute;z-index:' + (counter+1),
					'class':'bg-img'
				}).inject(this.container).fade('hide');
				
				// Picture
				var img = $('picture' + counter);

				// Add Fade Fx to img
				img.fx = new Fx.Tween(img, 
				{
					property:'opacity', 
					fps:20,
					duration:200,
					transition:'linear'
				});

				img.fx.addEvent('complete', function()
				{
					if (this.currentPicture !== false){
						this.currentPicture.fx.set(0);
					}
					this.currentPicture = img;

				}.bind(this));
				
				
				// add the click event on thumb
				this.thumbList[counter].addEvent('click', function(event)
				{
					event.stop();
					event.stopPropagation();
					
					// set the new z-index to the picture
					this.zIndex += 1;
					img.setStyle('z-index', this.zIndex);
					
					if (this.currentPicture != img) {
						img.fx.start(0,1);
					}
					
				}.bind(this));

				// if index = 0, show the first image
				if (counter === 0)
				{
					this.resizeContainer();
					$(this.container).setStyle('display', 'block');
					this.showFirstPicture.delay(250, this, img);
				}


			}.bind(this)
		});
	
		
		
	},

	showFirstPicture: function(img)
	{
		this.resizePicture(img);
		img.fx.start(0,1);
	
	},
	
	/** Add the browser resize event and first resize of all pictures
	 */
	activate: function()
	{
		this.resizeAllPictures();
		
		// Window Resize event
		$(window).addEvent('resize', function(evt)
		{
			this.resizeAllPictures();
		}.bind(this));
		
	},

	/* Resize all the pictures
	 */
	resizeAllPictures: function() 
	{
		// Resize the container
		this.resizeContainer();
		
		for (var i = 0; i < this.images.length; i++)
		{
			var img = $('picture' + i);
			this.resizePicture(img)
		}
	},
	
	resizePicture: function(img)
	{
		// Set the reference : height or width
		var h = img.height;
		var w = img.width;
		var imgRatio = w / h;
		var ref = '';
	
		// reference = height
		if (imgRatio <= this.winRatio)
		{	
			ref = ('height');
			var ratio = 	h/w;
			img.width = 	this.winSize.x;
			img.height = 	img.width * ratio;
			
		}
		else
		{
			ref = ('width');
			var ratio = 	w/h;
			img.height = 	this.winSize.y;
			img.width = 	img.height * ratio;
		}
	},


	/** Sets the container size
	 */
	resizeContainer: function()
	{
		this._getWinsize();
		
		// Set the container size		
		this.container.setStyle('height', this.winSize.y);
		this.container.setStyle('width', this.winSize.x);

	},


	/** Get winSize and ratio
	 */
	_getWinsize: function()
	{
		// Set the correct size for each picture									
		this.winSize = $(document.body).getSize();
		this.winRatio = this.winSize.x / this.winSize.y;	
	}
});