// blank line needed for js concatenation
document.observe('dom:loaded', function()
	{
	// if we want more than one panel/tab group on a page, we'll have to rework this
	var outerContainer = $$('.panel-outer-container')[0];
	var container = $$('.panel-container')[0];
	var animate = container.hasClassName('animate');
	var panels = $$('.panel');
	var tabGroups = $$('.tab-group');
	var nextButtons = tabGroups.invoke('select', '.next').flatten();
	var previousButtons = tabGroups.invoke('select', '.previous').flatten();
	var selected;

	function select(panel, defaultSelected)
	{
		function after()
		{
			if (nextButtons.length)
			{
				if (panel.nextPanel)
					nextButtons.invoke('removeClassName', 'disabled');
				else
					nextButtons.invoke('addClassName', 'disabled');
			}
			if (previousButtons.length)
			{
				if (panel.previousPanel)
					previousButtons.invoke('removeClassName', 'disabled');
				else
					previousButtons.invoke('addClassName', 'disabled');
			}
			if (!defaultSelected && selected)
			{
				selected.tabs.invoke('removeClassName', 'selected');
				panel.tabs.invoke('addClassName', 'selected');
			}
			selected = panel;
		}

		if (animate)
		{
			new Effect.Parallel([
				new Effect.Morph(container, {
					style: 'left: ' + (-panel.left) + 'px;height:' + panel.height + 'px;',
					sync: true
				}),
				new Effect.Morph(outerContainer, {
					style: 'height:' + panel.height + 'px;',
					sync: true
				})
			], {
				afterFinish: after
			});
		}
		else
		{
			container.setStyle({
				left: -panel.left + 'px',
				height: panel.height + 'px'
			});
			outerContainer.setStyle({
				height: panel.height + 'px'
			});
			after();
		}
	}

	panels.each(function(panel, i)
		{
		panel.tabs = [];
		tabGroups.each(function(tabGroup)
			{
			panel.tabs.push(tabGroup.select('.tab')[i]);
		});
		panel.left = panel.positionedOffset().left;
		panel.height = panel.getDimensions().height;
		if (panel.tabs[0].hasClassName('selected'))
			selected = panel;
		if (i > 0)
			panel.previousPanel = panels[i - 1];
		if (i + 1 < panels.length)
			panel.nextPanel = panels[i + 1];
		panel.tabs.each(function(tab)
			{
			tab.observe('click', function(event)
				{
				event.stop();
				select(panel, false);
			})
		});
	});
	if (selected)
		select(selected, true);

	function arrows(buttons, name)
	{
		buttons.each(function(button)
			{
			button.observe('click', function(event)
				{
				event.stop();
				if (selected && selected[name + 'Panel'])
					select(selected[name + 'Panel'], false);
			});
		});
	}

	arrows(nextButtons, 'next');
	arrows(previousButtons, 'previous');
});