var Tabs = Class.create();

Tabs.prototype = {

	initialize: function (selectors) {
		this.elements = [];
		var elems = $$(selectors), i, m;
		for (i=0; i<elems.length; i++) {
			if (m = elems[i].className.match(/(^|\s)tab:([^:]+):([^:]+)($|\s)/)) {
				this.addElement({element:elems[i], group:m[2], id:m[3]});
			}
		}
	},

	addElement: function(a) {
		var tab = $(a.element), i = this.elements.length, c;

		tab.tabsId = i;
		tab.style.cursor = 'pointer';
		Event.observe(tab, 'mouseover', this.onMouseOver.bind(this));
		Event.observe(tab, 'mouseout', this.onMouseOut.bind(this));
		Event.observe(tab, 'click', this.onClick.bind(this));

		container = $(a.group+'-'+a.id+'-container');

		if (tab.hasClassName('active')) {
			container.show();
		} else {
			container.hide();
		}

		this.elements[i] = {element:tab, group:a.group, id:a.id, container:container};
	},

	onMouseOver: function(ev) {
		var e = Event.findElement(ev, 'LI');
		e.addClassName('over');
	},

	onMouseOut: function(ev) {
		var e = Event.findElement(ev, 'LI');
		e.removeClassName('over');
	},

	onClick: function(ev) {
		var i, t = this.elements, e = Event.findElement(ev, 'LI');
		for (i in t) if (t[i].group==t[e.tabsId].group && t[i].element.tabsId!=e.tabsId) {
			t[i].element.removeClassName('active');
			t[i].container.hide();
		}
		e.addClassName('active');
		t[e.tabsId].container.show();
	}
}