var Tabby = Class.create(
	{
		initialize: function ()
		{
			this.current = null;
			this.transitioning = false;

			$$('ul#tabs li a').each(
				function (elem)
				{
					elem.observe('click', this.openTab.bind(this));
				}.bind(this)
			);

			this.openFirstTab();
		},

		openTab: function (evt)
		{
			this.open(evt.element());
		},

		openFirstTab: function ()
		{
			this.open($$('ul#tabs li a').first());
		},

		open: function (elem)
		{
			if(this.transitioning)
			{
				return;
			}

			var content = $(elem).readAttribute('rel');

			if(content == this.current)
			{
				return;
			}

			new Effect.BlindDown(
				$(content),
				{
					scaleContent: false,
					duration: 0.7,
					queue: 'end',
					beforeStart: function ()
					{
						if(this.current === null)
						{
							$('tabs').select('li a[rel="'+content+'"]').first().addClassName('current');
							$('tabs').setStyle(
								{
									'padding': '0px'
								}
							);
						}
						else
						{
							new Effect.BlindUp(
								$(this.current),
								{
									scaleContent: false,
									duration: 0.5,
									queue: 'front',
									beforeStart: function ()
									{
										this.transitioning = true;
									}.bind(this),
									afterFinish: function ()
									{
										$('tabs').select('li a[rel="'+this.current+'"]').first().removeClassName('current');
										$('tabs').setStyle(
											{
												'padding': '0px 0px 1px 0px'
											}
										);
										$('tabs').select('li a[rel="'+content+'"]').first().addClassName('current');
										$('tabs').setStyle(
											{
												'padding': '0px'
											}
										);
									}.bind(this)
								}
							);
						}

						this.transitioning = true;
					}.bind(this),
					afterFinish: function ()
					{
						this.transitioning = false;
						this.current = content;
					}.bind(this)
				}
			);
		}
	}
);

var tabs;

document.observe(
	'dom:loaded',
	function ()
	{
		tabs = new Tabby;
	}
);