/**
 * FormLoader
 * @author	Partikule Studio for Michael Manccini
 *
 */

FormLoader = new Class({

	Implements: Options, 
	
	options:
	{
		loaderPicture : 'images/loader_white.png',
		color: '#fff',
		backgroundColor: '#000',
		backgroundOpacity: '0.6',
		loaderWidth: 16,
		loaderHeight: 16,
		loaderRows: 1,
		loaderCols: 7,
		loaderFps: 24,
		text: 'loading...'
	},
	
	initialize: function(el, options)
	{
		this.setOptions(options);
		
		// Form element
		var f = $(el);
		var size = f.getSize();
		
		// Store the form
		this.form = f;
		
		// formLoader container
		this.container =  new Element('div', {'styles': {'position':'absolute', 'z-index':10000, 'display':'block', 'width':size.x+'px', 'height':size.y+'px'}});
		
		// Transparent background
		var bg = new Element('div', {'styles': {'position':'absolute', 'display':'block', 'width':size.x+'px', 'height':size.y+'px', 'background-color':this.options.backgroundColor, 'opacity':this.options.backgroundOpacity, 'filter':'alpha(opacity='+(this.options.backgroundOpacity * 100) +')'}});
		this.container.adopt(bg);

		// SpinnerBox : Will Contains Spinner + optionnal text
		var mySpinnerBox = new Element('div', {'styles':{'position':'absolute', 'width':size.x+'px', 'z-index':100, 'margin-top': size.y / 2 - this.options.loaderHeight -10 + 'px'} });
		
		// Spinner
		var mySpinner = new pngAnimation(this.options.loaderPicture,
		{
			width: this.options.loaderWidth,
			height: this.options.loaderHeight,
			rows: this.options.loaderRows,
			cols: this.options.loaderCols,
			fps: this.options.loaderFps
		});

		// Spinner style & inject
		$(mySpinner).setStyles({'margin-left': size.x / 2 - (this.options.loaderWidth / 2 ) + 'px'});
		$(mySpinner).inject(mySpinnerBox);
		
		// Spinner text & inject
		var myText = new Element('p', {'styles':{'color': this.options.color, 'text-align':'center', 'font-size':'10px', 'margin-top':'5px', 'margin-left': '8px'}});
		myText.set('text', this.options.text);
		myText.inject(mySpinnerBox);
		
		// Final injects
		mySpinnerBox.inject(this.container);
		this.container.inject(f, 'top').hide();
	},
	
	
	show: function()
	{
		this.container.fade('hide');
		this.container.show();
		this.container.fade('in');
	},
	
	hide: function()
	{
		this.container.hide();
	}
});