var whereToBuyBrowser = {
	topLevelNavItems: Object,
	initialHeight: 0,
	init: function() {
		this.topLevelNavItems = $("#whereToBuyBrowser>ul>li>a");
		this.topLevelNavItems.each(function(index) {
			$(this).parent().removeClass("On");
		});
		this.initialHeight = $("#whereToBuyBrowser").height();
		$("#whereToBuyBrowser").height(350);
		this.topLevelNavItems.click(function() {
			$("#whereToBuyBrowser>ul>li>a").each(function(index) {
				$(this).parent().removeClass("On");
			});

			var parent = $(this).parent();
			parent.addClass("On");

			var heightAddend = parent.find("ul").height();
			$("#whereToBuyBrowser").height(whereToBuyBrowser.initialHeight + heightAddend);

			// this unfortunately seems to need to happen on click for the correct color to appear in the nonactive element.
			Cufon.replace(".Swiss", { fontFamily: "Swiss 721", hover: true });

			return false;
		});
	}
};

function initializeWhereToBuy() {
	whereToBuyBrowser.init();
}

$(function() {
	initializeWhereToBuy();
});