function TabBinding(tab, content){
	this.tab = tab;
	this.content = content;
}


function TabLayout(){
	this.bindings = new Array();
	this.active = null;
	this.activeClass = "tab_active";
	this.inactiveClass = "tab_inactive";
	this.tabLinkPrefix = "tab";
	this.linkIndexOffset = -1;
	
	this.deactivateTabs = function(){
		for(var i = 0; i < this.bindings.length; i++){
			if(this.bindings[i].tab.className.indexOf(this.activeClass) > -1){
				jtk.replaceClass(this.bindings[i].tab, this.activeClass, this.inactiveClass);
			}
			else{
				this.bindings[i].tab.className += " " + this.inactiveClass;
			}
			
			if(this.bindings[i].content.className.indexOf(this.activeClass) > -1){
				jtk.replaceClass(this.bindings[i].content, this.activeClass, this.inactiveClass);
			}
			else{
				this.bindings[i].content.className += " " + this.inactiveClass;
			}
		}
		this.active = null;
	}
	
	this.activateTab = function(bindingId){
		if(this.bindings[bindingId] != null && typeof(this.bindings[bindingId]) == 'object'){
			this.deactivateTabs();
			jtk.replaceClass(this.bindings[bindingId].tab, this.inactiveClass, this.activeClass);
			jtk.replaceClass(this.bindings[bindingId].content, this.inactiveClass, this.activeClass);
			this.active = this.bindings[bindingId];
		}
	}
	
	this.bindTab = function(tabId, contentId){
		var tab = jtk.select("#" + tabId)[0];
		var content = jtk.select("#" + contentId)[0];
		var binding = new TabBinding(tab, content);
		var bindingId = this.bindings.length;
		var that = this;
		
		jtk.addEvent(tab, "click", function(){
			JTKDelegate.create(that, that.activateTab(bindingId));
		});
		
		this.bindings.push(binding);
	}
	
	this.init = function(){
		this.deactivateTabs();
		if(location.hash != ''){
			var linkedId = parseInt(location.hash.substr(this.tabLinkPrefix.length + 1)) + this.linkIndexOffset;
			this.activateTab(linkedId);
		}
		else if(this.bindings.length > 0){
			this.activateTab(0);
		}
	}
}