var GroupTabs = new Class({
	initialize: function(elems){
		if(elems.length > 0){
			this.tabs = new Array();
			var self = this;
			var i=0;
			var wi = Math.floor(100/elems.length);
			var controller = new Element('ul', {'id':'tGroupCtrl'});
			controller.injectInside(elems[0].getParent());
			elems.each(function(elem){
				var title = elem.getElement('th');
				var outer = new Element('div', {'class': 'tGroup'});
				var ctrl = new Element('li', {
					'styles': {
						'width': wi + '%'
					}
				});
				var button = new Element('a', {
					'events': {
						'click': function(event){
							var e = new Event(event);
							self.activate(this);
							e.stop();
						}
					},
					'href': '#'
				});
				button.setText(title.getText());
				button.injectInside(ctrl);
				ctrl.injectInside(controller);
				outer.injectInside(elem.getParent());
				elem.injectInside(outer);
				this.tabs.push({
					'content': outer,
					'ctrl' : button
				});
				title.remove();
				outer.setStyle('display', 'none');
				i++;

			},this);

			this.activate(this.tabs[0].ctrl);
		} else {
			alert('Parameter must be a list of Elements');
		}
	},

	activate: function(button){
		this.tabs.each(function(elem){
			if(elem.ctrl == button){
				elem.content.setStyle('display', 'block');
				elem.ctrl.addClass('active');
			} else {
				elem.content.setStyle('display', 'none');
				elem.ctrl.removeClass('active');
			}
		});
	}
});

var tabs = new GroupTabs($$('.ContentRight .group'));