// setupMagicTabs() when the DOM is loaded...
if(document.addEventListener)
{
	document.addEventListener('DOMContentLoaded', setupMagicTabs, false);
}
// .. and if that doesn't work, do it when the document is loaded
Event.observe(window, 'load', setupMagicTabs);

var magicTabs = new Object();

function setupMagicTabs()
{
	var tabContainers = document.getElementsByClassName('magic-tab-container');
	for(var i = 0; i < tabContainers.length; i++)
	{
		if(! tabContainers[i].magicTabSetCreated)
		{
			magicTabs[tabContainers[i]] = new MagicTabSet(tabContainers[i]);
			tabContainers[i].magicTabSetCreated = true;
		}
	}
}

MagicTabSet = Class.create();
Object.extend(MagicTabSet.prototype,
	{
		initialize: function(element)
		{			
			this.element = $(element);
			this.paneContainer =
				this.element.getElementsByClassName('magic-tab-panes')[0]
			this.paneContainer.style.display = 'none';
			
			
			this.paneContainer.cleanWhitespace();
			for(var i = 0; i < this.paneContainer.childNodes.length; i++)
			{
				this.paneContainer.childNodes[i].style.display = 'none';
			}
			
			// Listen for clicks on all tab links; select preselected tab if any
			var tabList = this.element.getElementsByClassName('magic-tabs')[0];
			this.tabs = tabList.getElementsByTagName('a');
			for(var i = 0; i < this.tabs.length; i++)
			{
				var tab = this.tabs[i];			
				Event.observe(tab, 'click', this.selectTab.bind(this, tab));
				// tab.onclick = function() { return false; }
				//FIXME:
				if(Element.hasClassName(tab.parentNode, 'magic-tab-selected')) 
				{
					this.selectTab(tab);
				}
			}
			
			if(m = window.location.href.match(/(#.+)$/))
			{
				var tab = tabList.getElementsBySelector(
					'a[href=' + m[1] + ']')[0];
				this.selectTab(tab);
			}

      // Special case: handle links embedded in panes
      var embeddedLinks = this.paneContainer.getElementsBySelector('a[href]');
      for(var i = 0; i < embeddedLinks.length; i++)
      {
        var href = embeddedLinks[i].getAttribute('href');
        var m;
        if(m = href.match(/^(#.+)$/))
        {
  				var tab = tabList.getElementsBySelector(
	  				'a[href=' + m[1] + ']')[0];
          Event.observe(embeddedLinks[i], 'click', this.selectTab.bind(this, tab));
        }
      }
		},
		
		selectTab: function(tab)
		{	
			this.paneContainer.style.display = 'block';
			
			if(tab == this.activeTab)
			{
				return;
			}
				
			if(this.activePane)
			{
				this.paneContainer.style.height = this.activePane.offsetHeight + 'px';
				this.activePane.style.display = 'none';
			}
			else
			{
				this.paneContainer.style.height = '0'
			}
			
			if(this.activeTab)
			{
				// FIXME
				Element.removeClassName(this.activeTab.parentNode, 'magic-tab-selected');
			}

			var target;
			tab = $(tab);
			
			if(tab.tagName.toLowerCase() == 'select')
			{
				target = tab.options[tab.selectedIndex].getAttribute('value');
			}
			else
			{
				this.activeTab = tab;
				Element.addClassName(tab.parentNode, 'magic-tab-selected'); // FIXME
				target = tab.getAttribute('href');
			}
			
			if(m = target.match(/#(.+)$/))
			{
				var targetPane = this.paneContainer.getElementsBySelector(
					'a[name=' + m[1] + ']')[0].parentNode;
				this.activePane = targetPane;
				
				this.paneContainer.style.overflow = 'hidden';
				targetPane.style.visibility = 'hidden';
				targetPane.style.display = '';
				
				new Effect.AdjustHeight(this.paneContainer,
					{	duration: 0.6,
						newHeight: targetPane.offsetHeight,
						afterFinish: function() {
							this.paneContainer.style.overflow = '';
							targetPane.style.display = 'none';
							targetPane.style.visibility = '';
							new Effect.Appear(targetPane,
								{ duration: 0.5,
									afterFinish: function() {
											this.paneContainer.style.height = '';
											targetPane.style.opacity = '';
										}.bind(this)
								});
						}.bind(this)
					});
			}
		}
	});


Effect.AdjustHeight = Class.create();
Object.extend(Object.extend(
		Effect.AdjustHeight.prototype, Effect.Base.prototype),
	{
	  initialize: function(element)
		{
	    this.element = $(element);
	    var options = arguments[1] || {};
	    this.start(options);
	  },
	  setup: function(element)
		{
	    this.beginH = this.element.offsetHeight;
	    this.endH = this.options.newHeight;
	  },
	  update: function(position)
		{
			this.element.style.height = Math.round(
				this.beginH + position * (this.endH - this.beginH) ) +'px';
	  },
	  finish: function(position)
		{
	    this.element.style.height = this.endH+'px';
	  }
	});