// Script: my.SmoothBox
// Version: 1.0.1
// Framework: Mootools 1.2 
// Author: Michel Frömmgen 

// PARAMETER YOU CAN CHANGE //------------------------------------------------------------------------------

var	selectors 	   = '#flyer',  		// you can add CSS-paths, several classes and IDs separated by comma 
	startheight	   = '30',				// start-height for animation
	endheight	   = '566',				// end-height for animation, resize start-height to given value
	startwidth	   = '290',				// start-width for animation
	endwidth	   = '400',				// end-width for animation, resize start-width to given value
	startfontsize  = '0',				// start-font-size for animation
	endfontsize	   = '13',				// end-font-size for animation, resize start-font-size to given value
	startopacity   = '0',				// start-opacity: (0, 0.1, 0.3,... 0.9 until 1)
	endopacity     = '1',				// step down until 0 for transparents (1, 0.9, 0.8,... 0.1 until 0)
	bgcolor		   = '',				// background-color for given selectors 
	bgimage		   = '' 				// url(images/image.jpg)
	
// START OF PROGRAM - DO NOT TOUCH THE CODE BELLOW //-------------------------------------------------------

window.addEvent('domready', function(){	
									 					 					 
// Overlay // ----------------------------------------------------------------------------------------------	


	
// End of Overlay // ---------------------------------------------------------------------------------------	
	
	
	var list = $$(selectors);
		list.each(function(element) { 

		var fx = new Fx.Morph(element, {duration: 4000, transition: Fx.Transitions.Bounce.easeOut, wait: false});
		
	
			fx.start({
				'opacity': [startopacity, endopacity],
				'height': [startheight, endheight],
				'width': [startwidth, endwidth],
				'font-size': [startfontsize, endfontsize],
				'background-color': bgcolor,
				'background-image': bgimage,	
				'opacity': [startopacity, endopacity ],
				'display': 'block'
			});
			

 
		$('close').addEvent('click', function(){
			fx.start({
				'opacity': [endopacity , startopacity],
				'height': [endheight, startheight],
				'width': [endwidth, startwidth],
				'font-size': [endfontsize, startfontsize]		
			});	
		});
 
	});		
			
}); //end of domready

// END OF PROGRAM // ---------------------------------------------------------------------------------------