var Tab = Class.create();

Tab.prototype = {
    initialize: function(container, options) {
	Object.extend(this, options || { });

	this.items = $(container).getElementsByTagName('li');

	for(var i = 0; i < this.items.length; i++) {
	    this.initItem(this.items[i]);
	}
    },
    initItem: function(el) {
	if(Element.hasClassName(el, 'active')) {
	    this.activeItem = el;
	}
	Event.observe(el, 'click', this.click.bind(this));
	Event.observe(el, 'mouseover', this.mouseover.bind(this));
	Event.observe(el, 'mouseout', this.mouseout.bind(this));
    },
    mouseover: function(e) {
	Element.addClassName(Event.findElement(e, 'li'), 'hover');
    },
    mouseout: function(e) {
	Element.removeClassName(Event.findElement(e, 'li'), 'hover');
    },
    click: function(e) {
	var li = Event.findElement(e, 'li');
	this.setActive(li);
	li.fire('mb:navigate');
    },
    setActive: function(li) {
	Element.removeClassName(this.activeItem, 'active');
	Element.addClassName(li, 'active');

	try {
	    Element.hide(this.activeItem.id + '-content');
	} catch (e) {
	    // alert('1:' + e.message + ' ' + this.activeItem.id);
	}

	try {
	    Element.show(li.id + '-content');
	} catch (e) {
	    // alert('2:' + e.message + ' ' + li.id);
	}

	this.activeItem = li;
    }
}