﻿

var Tabs = new Class({

	container:Class.empty,
	tab : Class.empty,
	labels:Class.empty,
	contexts:Class.empty,
	current: -1,
	Options : 
	{
		onChange: Class.empty,
		onChanged: Class.empty,
		tabClass:'gavinTabContainer',
		labelsClass:'gavinTabLabels-top',
		labelClass:'gavinTab',
		labelCurrentClass:'gavinTab current',
		contextsClass:'gavinTabPaneWrapper',
		contextClass:'',
		contextCurrentClass:''
	},
	
	initialize: function(objContainer,options)
	{
		
		this.setOptions(options);
		this.container = objContainer;
		this.container.innerHTML = "";
		
		this.tab = new Element('div',{'class':this.Options.tabClass});
		this.container.appendChild(this.tab);
		
		this.labels = new Element('div',{'class':this.Options.labelsClass});
		this.tab.appendChild(this.labels);
		
		this.contexts = new Element('div',{'class':this.Options.contextsClass});
		this.tab.appendChild(this.contexts);
	},
	
	add : function(label,context)
	{
		
		var tempTab = new Element('div',
			{
				'class':this.Options.labelClass
			});
		var tempDiv = new Element('div');
		var tempSpan = new Element('span');
		
		tempSpan.innerHTML = label;
		tempDiv.appendChild(tempSpan);
		tempTab.appendChild(tempDiv);
		this.labels.appendChild(tempTab);
		
		var obj = this;
		
		tempTab.addListener('click',function()
		{
			var index = 0;
			var parent = obj.labels;
			for(var i=0;i<parent.getChildren().length;i++)
			{
				if(parent.getChildren()[i] == tempTab) 
				{
					index = i;
					break;
				}
			}
			obj.setCurrent(index,obj);
		});
		
		var tempContext = new Element('div',{'class':this.Options.contextClass});
		tempDiv = new Element('div');

		switch($type(context).toLowerCase())
		{
			case "string" :
				tempDiv.innerHTML = context;
				break;
			case "element":
				tempDiv.innerHTML = "";
				tempDiv.appendChild(context);
				break;
		}
		
		tempContext.appendChild(tempDiv);
		tempContext.style.display = "none";
		this.contexts.appendChild(tempContext);
		
	},
	
	remove : function(index)
	{
		if(this.labels.getChildren()[index] && this.contexts.getChildren()[index])
		{
			this.labels.removeChild(this.labels.getChildren()[index]);
			this.contexts.removeChild(this.contexts.getChildren()[index]);
			
			if(this.current == index) this.setCurrent(this.current);
		}
		
	},
	
	setCurrent : function(index,objTab)
	{
		if(!objTab) objTab = this;
		
		this.fireEvent('onChange', [objTab]);
		
		if(objTab.current != -1 && objTab.labels.getChildren()[objTab.current] && objTab.contexts.getChildren()[objTab.current])
		{
			objTab.labels.getChildren()[objTab.current].className = objTab.Options.labelClass;
			objTab.contexts.getChildren()[objTab.current].style.display = "none";
		}
		
		if(objTab.labels.getChildren()[index] && objTab.contexts.getChildren()[index])
		{
			objTab.labels.getChildren()[index].className = objTab.Options.labelCurrentClass;
			objTab.contexts.getChildren()[index].style.display = "";
			objTab.current = index;
		}
		
		this.fireEvent('onChanged', [objTab],20);
	},
	
	getLength : function()
	{
		var length = this.labels.getChildren().length;
		return length;
	}
	
});

Tabs.implement(new Options);
Tabs.implement(new Events);
