var content = ["<div align='left' style='width:178px; float:left;'><div align='left'  style='width:159px; padding-left:18px; padding-right:0px; padding-top:15px; padding-bottom:15px;float:left;'><a href='#' onclick='second_effect.start();'><img src='images/clientarea.gif' alt='Client Area' border='0' /></a></div><div align='left' style='width:178px; float:left;'><div style='width:164px;float:right;'><strong>What is client area?<br /></strong>Web based platform for <br /> direct interaction between <br />client and AGO on projects <br /> status...</div></div></div>","<form action='http://agomnimedia.clientsection.com/login/authenticate'><table width='179' align='left' border='0' cellspacing='1' cellpadding='0'><tr><td align='left'><table width='179' align='left' border='0' cellpadding='0' cellspacing='0' bgcolor='#DCD9BF'><tr><td valign='top'><table width='100%' align='left' border='0' cellspacing='0' cellpadding='0' ><tr><td  width='22' align='left' valign='top' bgcolor='#DCD9BF'>&nbsp;</td><td width='134' valign='top' bgcolor='#DCD9BF'>&nbsp;</td></tr><tr><td  align='left' valign='top' bgcolor='#DCD9BF'>&nbsp;</td><td align='right' valign='top' bgcolor='#DCD9BF'><a href='#' onclick='second_effect.start();'><img src='images/quit.gif' width='9' height='9' border='0' /></a><img src='images/empty.gif' width='10' height='9' /></td></tr><tr><td  align='left' valign='top' bgcolor='#DCD9BF'>&nbsp;</td><td align='left' valign='top' bgcolor='#DCD9BF'><span class='breadcrumb'>User ID: </span></td></tr><tr><td align='left' valign='top' bgcolor='#DCD9BF'>&nbsp;</td><td align='left' valign='top' bgcolor='#DCD9BF'><input name='user_name' id='username' type='text' class='textfield' size='15' width='105' /></td></tr><tr><td  align='left' valign='top' bgcolor='#DCD9BF'>&nbsp;</td><td align='left' valign='top' bgcolor='#DCD9BF'><span class='breadcrumb'>Password: </span></td></tr><tr><td  width='22' align='left' valign='top' bgcolor='#DCD9BF'>&nbsp;</td><td align='left' valign='top' bgcolor='#DCD9BF'><input name='password' id='password' type='password' class='textfield' size='15' width='105' /></td></tr><tr><td colspan='2' align='left' valign='top' bgcolor='#DCD9BF'><img src='images/empty.gif' width='147' height='9' /></td></tr><tr><td colspan='2' align='center' valign='top' bgcolor='#DCD9BF'><input name='Submit' type='submit' class='button' value='SIGN IN' /></td></tr><tr><td colspan='2' align='left' valign='middle' bgcolor='#DCD9BF'><img src='images/empty.gif' width='147' height='9' /></td></tr><tr><td colspan='2' align='center' valign='middle'><img src='images/empty.gif' width='147' height='6' /></td></tr><tr><td colspan='2' align='center' valign='middle'><span class='bodytext'><a href='http://agomnimedia.clientsection.com/login/forgot_password' class='bodytext'>Forgot my password !</a></span><br><br></td></tr></table></td></tr><tr><td colspan='2' align='center' valign='middle'><img src='images/empty.gif' width='147' height='6' /></td></tr></table></td></tr></table></form>"];
	
	var i = 0;
	var observer = function (method, effect, data)
	{
		if (method == 'onPreEffect')
		{
			// we change before the element to run in reverse mode the content
			if (effect.direction == Spry.backwards)
				effect.element.innerHTML = content[++i % 2];
		}

		if (method == 'onPostEffect')
		{
			// we will restart the effect to run in opposite direction after the first run
			// the setTimeout is used to wait for the current animation to stop
			if (effect.direction == Spry.forwards)
				setTimeout(function(){effect.start()}, 10);
		}
		// nothing to be done here
		if (method == 'onStep'){}
		if (method == 'onCancel'){}
	}

	var second_effect = new Spry.Effect.Grow('grow_animation', {from: '100%', to: '0%', growCenter:true, toggle: true, duration: 1000});
	second_effect.addObserver(observer);
	

