YAHOO.example.init = function() {   
	var x = (YAHOO.util.Dom.getViewportWidth()/2)-180;
	var y = (YAHOO.util.Dom.getViewportHeight()/2)-220;
	YAHOO.util.Dom.setStyle('manifesto', 'visibility', 'hidden');
   var anim = new YAHOO.util.Motion('tl', { points: { to: [x,y] } }, 3, YAHOO.util.Easing.bounceOut);
   anim.animate();
   var anim2 = new YAHOO.util.Motion('tr', { points: { to: [x+185, y] } }, 2, YAHOO.util.Easing.bounceOut);
   anim2.animate();
   var anim3 = new YAHOO.util.Motion('md', { points: { to: [x, y+130] } }, 1, YAHOO.util.Easing.bounceOut);
   anim3.animate();
   var anim4 = new YAHOO.util.Motion('br', { points: { to: [x+185, y+260] } }, 1, YAHOO.util.Easing.bounceOut);
   anim4.animate();
   var anim5 = new YAHOO.util.Motion('bl', { points: { to: [x, y+260] } }, 2, YAHOO.util.Easing.bounceOut);
   anim5.animate();
   //show details
   var anim6 = new YAHOO.util.Motion('manifesto', { points: { to: [x+185, y] } }, 0.5, YAHOO.util.Easing.easeOut);
   YAHOO.util.Event.on('aniDet', 'click', function() {
			anim6.animate();
	YAHOO.util.Dom.setStyle('manifesto', 'visibility', 'visible');
												   }, anim6, true);
	// hide details
	var anim7 = new YAHOO.util.Motion('manifesto', { points: { to: [x, y+260] } }, 0.2, YAHOO.util.Easing.easeOut);
	   YAHOO.util.Event.on('HideDet', 'click', function() {
		anim7.animate();
		YAHOO.util.Dom.setStyle('manifesto', 'visibility', 'hidden');
												   }, 'manifesto', true); 
};


YAHOO.util.Event.onAvailable('tl', YAHOO.example.init);