// 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 HTML markup:

<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>

/**
 * And the JS to use:

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

*/

var LabelTabs = Class.create(
{
	initialize: function(tabsContainer, options)
	{
		if (!$(tabsContainer)) {
			return false;
		}
		
		this.options = {
			changeEvent	: 'click'
		};
		
		if (options)
		{
			for (var key in this.options)
			{
				if (options[key] != undefined) {
					this.options[key] = options[key];
				}
			}
		}
	
		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(this.options.changeEvent, 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.findElement ? container.findElement('a') : container;
		var container = this.getContainer(tab);
		
		this.hideContainers();
		
		if (container.show) {
			container.show();
		}
		
		tab.addClassName('activeTab');
		tab.up().addClassName('active');
	},
	
	hideContainers: function()
	{
		this.containers.each(function(container)
		{
			if (container) {
				container.hide();
			}
		}.bind(this));
		
		this.tabs.each(function(tab) {
			tab.removeClassName('activeTab');
			tab.up().removeClassName('active');
		}.bind(this));
	},
	
	getContainer: function(linkElement)
	{
		anchor = this.getAnchor(linkElement);
		
		if ($(anchor)) {
			return $(anchor);
		}
		
		return false;
	},
	
	/**
	 * getAnchor gets 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;
	}
});