var tabs;

var Tabber = new Class(
	{
	initialize: function(MenuTabList)
		{
		// Locate the list of tabs
		this.MenuTabs = $(MenuTabList); 

		// Add the CSS style to it
		this.MenuTabs.addClass("tablist"); 

		// Find all links in tabber
		this.Tabs = this.MenuTabs.getElementsBySelector("li"); 
		this.TabLinks = this.MenuTabs.getElementsBySelector("a"); 
		this.AllPageLinks = $$('a[href]'); 

		// If Prototype doesn't work on the user's browser,
		// by this time it would have failed. So, now I choose to 
		// scroll to the top of the page, to fix browsers
		// that choose to jump to the #target immediately on pageload
		window.scrollTo(1,1); 

		this.TabLinks.each(function(s)
			{
			var Hash = s.hash.substring(1); 

			// For each tab, add the Click handler 
			s.addEvent('click', handleClickEvent.bindAsEventListener(this)); 

			var initContentDiv = $(Hash + "_div"); 

			// Remove the <a name=""> target for this tab, so that the browser doesn't jump when you click a tab.
			var contentNames = initContentDiv.getElementsBySelector('a[name="' + Hash + '"]'); 
			contentNames.each(function(s)
				{
				s.remove(); 
				}); 
			
			// Find all links to this tab and add the same event handler
			this.AllPageLinks.each(function(pageLink)
				{
				if(pageLink.hash == s.hash && pageLink != s) 
					{
					pageLink.addEvent('click', handleClickEvent.bindAsEventListener(this)); 
					}
				}.bind(this));

			// Hide the target content
			initContentDiv.setStyle('display','none'); 
			}.bind(this)); 

		// Initialize the 'open tab' to be null
		this.OpenTab = null; 
       
		// If user is returning from a bookmark or link, open
		// the tab referred to by its hash
		var found = 0;
	
		var targetHash = window.location.hash; 

		this.TabLinks.each(function(link, i){
			if (targetHash == link.hash) found = i;
			});
		
		this.openSection(this.TabLinks[found]); 
		}, 

	// Open a tab by name
	openSectionByName: function(tabName)
		{
		targetHash = '#' + tabName; 
		var found = -1; 

		this.TabLinks.each(function(link, i){
			if (targetHash == link.hash) found = i;
			});
		
		if(found >= 0)
			this.openSection(this.TabLinks[found]); 
		},

	// Open the tab whose link was sent in
	openSection: function(clickedLink)
		{
		// Hide whatever tab was previously showing, if any
		if(this.OpenTab != null)
			this.OpenTab.setStyle('display','none'); 

		var sourceHash = clickedLink.hash.substring(1); 
		var showDiv = $(sourceHash + "_div"); 

		showDiv.setStyle('display','block'); 

		this.Tabs.each(function(s)
			{
			s.removeClass("current"); 
			if(s.getFirst().href == clickedLink)
				s.addClass("current"); 
			}); 

		// fix minor niggling browser detail where tab is focused
		clickedLink.blur();  
		
		this.OpenTab = showDiv; 
		}
	}); 

// Create the tabber on page load
window.addEvent('domready', function()
	{
	tabs = new Tabber('ClickerList'); 
	}); 

// Given a Mouse Event, pass the clicked link to openSection()
function handleClickEvent(ClickEvent)
	{
	ClickEvent = new Event(ClickEvent); 
	//console.log(ClickEvent); 
	this.openSection(ClickEvent.target);
	}