var pageMenuEffect;
var imgEffect;
var pageEffect;

var overlap = 60;
var page = { current: "Personal Training", collapsed: true, isWorking: false };
var slideshow;

var menuItems = [];

function createEffects()
{
	if ($("pageDialog_pageMenu") != null)
	{
		pageMenuEffect = new Fx.Morph($("pageDialog_pageMenu"), { transition: Fx.Transitions.Quint.easeInOut, duration: 1000 });
	}

	imgEffect = new Fx.Morph($("imgPage"), { transition: Fx.Transitions.Quint.easeInOut, duration: 1000 });
	pageEffect = new Fx.Morph($("contentPage"), { transition: Fx.Transitions.Quint.easeInOut, duration: 1000 });
}

function ensureTypo()
{
	if ($defined(sIFR) && $defined(sIFR.replaceElement))
	{
		sIFR.replaceElement(".pageTitle", named({ sFlashSrc: "./Assets/fontin.swf", sColor: "#003063", sWmode: "transparent" }));
	};
}

function init()
{
	ensureTypo();
	createEffects();

	//ui.init();

	ui.registerCommandHandler("updateSubPage",
		function (command)
		{
			var dlgParams = base64Json.decode($("pageDialog_parameters").value);
			dlgParams.subPageID = command.Data.ID;
			$("pageDialog_parameters").value = base64Json.encode(dlgParams);

			if (!page.collapsed)
			{
				$("pageDialog_pageContent").setHTML(command.Data.Content);
				setTitle(command.Data.Title);

				return;
			}

			expandPage(true, false, true,
				function ()
				{
					$("pageDialog_pageContent").setHTML(command.Data.Content);
					setTitle(command.Data.Title);

					showPage(true, false, function () { });
				}
			);
		}
	);

	ui.registerCommandHandler("updatePage",
		function (command)
		{
			expandPage(page.current != command.Data.Title, true, false,
				function ()
				{
					if (page.current != command.Data.Title)
					{
						setTitle(command.Data.Title);
					}

					$("pageDialog_pageContent").setHTML(command.Data.Content);
				}
			);
		}
	);

	swfobject.embedSWF("Assets/Menu.swf", "menuInner", "500", "110", "9.0.0", "Assets/expressInstall.swf", {}, { wmode: "transparent" }, {});

	var htmlMenu = $('htmlMenu');

	if ($defined(htmlMenu))
	{
		menuItems = htmlMenu.getElements('.item');

		for (var i = 0; i < menuItems.length; i++)
		{
			var menuItem = menuItems[i];

			menuItem.addEvent('click', menuCallback);
		}
	}

	window.onresize = onResize;
	onResize();

	$("pageExpanded").setStyles({ display: "none" });
	$("pageCollapsed").setStyles({ display: "block" });

	slideshow = new Slideshow($("imgPage"), { path: "Assets/", duration: 1000, slideCss: "imgSlide", slides: ["pic_0.jpg", "pic_1.jpg", "pic_2.jpg", "pic_3.jpg", "pic_4.jpg", "pic_5.jpg", "pic_6.jpg", "pic_7.jpg", "pic_8.jpg", "pic_9.jpg"] });
}

function menuCallback()
{
	for (var i = 0; i < menuItems.length; i++)
	{
		menuItems[i].removeClass('active');
	}

	this.addClass('active');
	var title = this.get('text');
	setPage(title);
}

function setTitle(title)
{
	var header = new Element("div", { id: "pageDialog_pageTitle" });

	header.addClass("pageTitle");
	header.setHTML(title);

	header = header.replaces($("pageDialog_pageTitle"));

	ensureTypo();
	createEffects();
}

function setPage(title)
{
	if (page.isWorking)
	{
		return;
	}

	var wasCollapsed = true; //page.collapsed;

	if (title == "Partner")
	{
		if (!page.collapsed)
		{
			hidePage(true, true,
				function ()
				{
					UIService.GetPage(title, onGetPage);
					page.current = title;
					slideshow.fadeSlide();
				}
			);

			return;
		}

		slideshow.fadeSlide();

		expandPage(true, true, true,
			function ()
			{
				UIService.GetPage(title, onGetPage);
				page.current = title;
			}
		);
	}
	else
	{
		if (page.collapsed)
		{
			hidePage(true, true,
				function ()
				{
					UIService.GetPage(title, onGetPage);
					page.current = title;
					slideshow.fadeSlide();
				}
			);

			return;
		}

		slideshow.fadeSlide();

		collapsePage(true, true, true,
			function ()
			{
				UIService.GetPage(title, onGetPage);
				page.current = title;
			}
		);
	}
}

function onGetPage(pageEntity)
{
	renderPage(pageEntity);
	showPage(true, true, function () { });
}

function hidePage(hideTitle, hideMenu, onFinish)
{
	if (hideTitle)
	{
		$("pageDialog_pageTitle").setOpacity(0.0);
	}

	if (hideMenu)
	{
		if ($("pageDialog_pageMenu") != null)
		{
			$("pageDialog_pageMenu").setOpacity(0.0);
		}
	}

	if (page.collapsed)
	{
		$("pageCollapsed").setStyles({ display: "none" });
	}
	else
	{
		$("pageExpanded").setStyles({ display: "none" });
	}

	onFinish();
}

function showPage(showTitle, showMenu, onFinish)
{
	if (showTitle)
	{
		$("pageDialog_pageTitle").setOpacity(1.0);
	}

	if (showMenu)
	{
		if ($("pageDialog_pageMenu") != null)
		{
			$("pageDialog_pageMenu").setOpacity(1.0);
		}
	}

	if (page.collapsed)
	{
		$("pageCollapsed").setStyles({ display: "block" });
	}
	else
	{
		$("pageExpanded").setStyles({ display: "block" });
	}

	onFinish();
}

function renderPage(pageEntity)
{
	$("contentPage").setHTML(pageEntity.Content);
	setTitle(pageEntity.Title);
}

function expandPage(hideTitle, hideMenu, stayHidden, onFinish)
{
	if (!page.collapsed || page.isWorking)
	{
		if (onFinish != null)
		{
			onFinish();
		}

		return;
	}

	page.isWorking = true;

	var imgLeft = -(671 - overlap);
	var pageMenuLeft = 50 + 671 - overlap;
	var pageWidth = 245 + 671 - overlap;
	var pageCollapseLeft = pageWidth - 50;

	hidePage(hideTitle, hideMenu,
		function ()
		{
			imgEffect.start({ left: [0, imgLeft] });

			if (pageMenuEffect != null)
			{
				pageMenuEffect.start({ left: [50, pageMenuLeft] });
			}

			pageEffect.start({ left: [671, overlap], width: [245, pageWidth] }).chain(
				function ()
				{
					page.collapsed = false;

					if (!stayHidden)
					{
						showPage(hideTitle, hideMenu,
							function ()
							{
								page.isWorking = false;
								onFinish();
							}
						);
					}
					else
					{
						page.isWorking = false;
						onFinish();
					}
				}
			);
		}
	);
}

function collapsePage(hideTitle, hideMenu, stayHidden, onFinish)
{
	if (page.collapsed || page.isWorking)
	{
		onFinish();
		return;
	}

	page.isWorking = true;

	var imgLeft = -(671 - overlap);
	var pageMenuLeft = 50 + 671 - overlap;
	var pageWidth = 245 + 671 - overlap;
	var pageCollapseLeft = pageWidth - 50;

	hidePage(hideTitle, hideMenu,
		function ()
		{
			if (pageMenuEffect != null)
			{
				pageMenuEffect.start({ left: [pageMenuLeft, 50] });
			}

			imgEffect.start({ left: [imgLeft, 0] });
			pageEffect.start({ width: [pageWidth, 245], left: [overlap, 671] }).chain(
				function ()
				{
					page.collapsed = true;

					if (!stayHidden)
					{
						showPage(hideTitle, hideMenu,
							function ()
							{
								page.isWorking = false;
								onFinish();
							}
						);
					}
					else
					{
						page.isWorking = false;
						onFinish();
					}
				}
			);
		}
	);
}

function onResize()
{
	var wndSize = window.getSize();

	var bgWidth = 980;
	var bgHeight = 630;

	var mainTop = 0;
	var mainWidth = 980;

	var teaserWidth = mainWidth - 963;

	if (wndSize.x > 980)
	{
		bgWidth = wndSize.x;
	}

	if (wndSize.y > 630)
	{
		bgHeight = wndSize.y;
	}

	if (wndSize.y > 630)
	{
		mainTop = (wndSize.y - 630) * 0.3788;
	}

	mainWidth = wndSize.x;

	if (mainWidth < 980)
	{
		mainWidth = 980;
	}

	teaserWidth = mainWidth - 923;

	$("bg").setStyles({ width: bgWidth, height: bgHeight });
	$("main").setStyles({ top: mainTop, width: mainWidth });

	$("scrollMain").setStyles({ width: wndSize.x, height: wndSize.y });
	$("teaserPage").setStyles({ width: teaserWidth });
}