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

function shoppingBagSetup ()
{
	var shoppingBagBox = id("shoppingBag");
	var shoppingBagLink = id("shoppingBagLink");

	function showShoppingBagBox ()
	{
		if (shoppingBagBox.timeout)
		{
			clearTimeout(shoppingBagBox.timeout);
			shoppingBagBox.removeAttribute("timeout");
		}
		
		var duration = 0.6;
		if ( ! shoppingBagBox.open )
		{
			// Firefox has a redraw bug when border radius is used in animation of only one dimension.
			// Making the width change slighty (but not too slightly) is enough to force Firefox to redraw the edges correctly.
			var widthAnimation = { attribute: "width",
									startValue: null,
									endValue: 160.2,
									unit: "px" };
			shoppingBagBox.style.height = "auto";
			var shoppingBagHeight = getElementDimensions(shoppingBagBox).height;
			shoppingBagBox.style.height = "23px";
			if ( ! shoppingBagHeight )
			{
				shoppingBagHeight = 180;
			}
			var heightAnimation = { attribute: "height",
									startValue: null,
									endValue: shoppingBagHeight + 10,
									unit: "px" };
			var onFinish = function () { shoppingBagBox.timeout = setTimeout( showShoppingBagBox, 15000.0 ) };
			shoppingBagBox.open = true;
			animateAttributes( shoppingBagBox, [ 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.
       			shoppingBagBox.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.
			shoppingBagLink.focus();
			shoppingBagLink.blur();
			var widthAnimation = { attribute: "width",
									startValue: null,
									endValue: 160,
									unit: "px" };
			var heightAnimation = { attribute: "height",
									startValue: null,
									endValue: 23,
									unit: "px" };
			shoppingBagBox.open = false;
			animateAttributes( shoppingBagBox, [ 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.
				shoppingBagBox.style.webkitBoxShadow = "0px 0px 0px rgba( 0, 0, 0, 0 )";
       		}
		}
		

		return false;
	}
		
	if (shoppingBagLink)
	{
		shoppingBagLink.onclick = showShoppingBagBox;
	}
}