// Requires general.js
// Requires animation.js

function loginSetup ()
{
	var loginBox = id("logIn");
	var loginLink = id("logInLink");

	function showLoginBox ()
	{
		if (loginBox.timeout)
		{
			clearTimeout(loginBox.timeout);
			loginBox.removeAttribute("timeout");
		}
		
		var duration = 0.6;
		if ( ! loginBox.open )
		{
			loginBox.style.width = "auto";
			loginBox.style.height = "auto";
			var loginDimensions = getElementDimensions(loginBox);
			loginBox.style.width = "60px";
			loginBox.style.height = "23px";
			if ( ! loginDimensions.width )
			{
				loginDimensions.width = 200;
			}
			if ( ! loginDimensions.height )
			{
				loginDimensions.height = 200;
			}
			var widthAnimation = { attribute: "width",
									startValue: null,
									endValue: loginDimensions.width,
									unit: "px" };

			var heightAnimation = { attribute: "height",
									startValue: null,
									endValue: loginDimensions.height + 10,
									unit: "px" };
			var onFinish = function () {
				var userInput = id("loginUser")
				if (userInput)
				{
					userInput.focus();
				}
				loginBox.timeout = setTimeout( showLoginBox, 20000.0 );
			};									
			loginBox.open = true;
			animateAttributes( loginBox, [ widthAnimation, heightAnimation ], duration, "ease-in", null, onFinish );
			// Google Chrome has a bug when box shadow is used with border radius.
			// Only change box shadow for browsers other than Chrome.
			if ( navigator.appVersion.search(/chrome/i) < 0)
        	{// Not using Google Chrome.
       			loginBox.style.webkitBoxShadow = "0px 0px 8px rgba( 0, 0, 0, 0.25 )";
       		}
       	}
		else
		{
			// To avoid an issue with the user typing while the box is closing on time out, need to take away the focus.
			loginLink.focus();
			loginLink.blur();
			var widthAnimation = { attribute: "width",
									startValue: null,
									endValue: 60,
									unit: "px" };
			var heightAnimation = { attribute: "height",
									startValue: null,
									endValue: 23,
									unit: "px" };
			loginBox.open = false;
			animateAttributes( loginBox, [ widthAnimation, heightAnimation ], duration, "ease-in" );
			// Google Chrome has a bug when box shadow is used with border radius.
			// Only change box shadow for browsers other than Chrome.
			if ( navigator.appVersion.search(/chrome/i) < 0)
        	{// Not using Google Chrome.
				loginBox.style.webkitBoxShadow = "0px 0px 0px rgba( 0, 0, 0, 0 )";
			}			
		}
		

		return false;
	}
		
	if (loginLink)
	{
		loginLink.onclick = showLoginBox;
	}
}