// Copyright (c) 2008-2009 Label Media (http://www.labelmedia.co.uk)
// 
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// 
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// For details, see the LabelEd web site: http://labeled.labelmedia.co.uk

/**
 * Example markup just in the HTML page
 * 

<ul id="productTabs">
	<li><a href="#product_overview">Overview</a></li>
	<li><a href="#product_specification">Specification</a></li>
</ul>

<div id="product_overview">
	Content
</div>

<div id="product_specification">
	Content
</div>

 *
 * JS to use:
 *

document.observe('dom:loaded', function()
{
	var tabs = new LabelTabs('productTabs');  // Pass the ID of the tabs ul
});

 */
var LabelTabs = Class.create(
{
	initialize: function(tabsContainer)
	{
		if (!$(tabsContainer))
		{
			return false;
		}
	
		this.tabsContainer = $(tabsContainer);
		
		this.start();
	},
	
	start: function()
	{	
		this.getContainers();
	},
	
	getContainers: function()
	{
		this.containers = new Array();
		this.tabs = new Array();
	
		this.tabsContainer.childElements().each(function(element)
		{	
			var linkElement = element.select('a')[0];
			var container = this.getContainer(linkElement);
			
			this.containers.push(container);
			this.tabs.push(linkElement);
			
			linkElement.observe('click', this.activateContainer.bind(this));
			linkElement.observe('LabelTabs:activate', this.activateContainer.bind(this));
		}.bind(this));
		
		var i=0;
		
		this.tabs.each(function(tab)
		{	
			if (this.getAnchor(tab.getAttribute('href')) == this.getAnchor(location.hash) || 
				location.hash == '' && i == 0)
			{			
				tab.fire('LabelTabs:activate');
			}
			
			i++;
		}.bind(this));
	},
	
	activateContainer: function(container)
	{
		if (container.stop)
		{
			container.stop();
		}
	
		var tab = container.element ? container.element() : container;
		var container = this.getContainer(tab);
		
		this.hideContainers();
		container.show();

		tab.addClassName('activeTab');
	},
	
	hideContainers: function()
	{
		this.containers.each(function(container)
		{
			container.hide();
		}.bind(this));
		
		this.tabs.each(function(tab)
		{
			tab.removeClassName('activeTab');
		}.bind(this));
	},
	
	getContainer: function(linkElement)
	{
		anchor = this.getAnchor(linkElement);
		
		if ($(anchor))
		{
			return $(anchor);
		}
		
		return false;
	},
	
	/**
	 * getAnchor get's around differences between IE and other browser's
	 * implementations of location.hash
	 */
	getAnchor: function(linkElement)
	{
		var anchor = linkElement.getAttribute ? linkElement.getAttribute('href') : linkElement;
		anchor = anchor.split('#')[1];
		
		return anchor;
	}
});