// Class constructor function
function Tabs(target, active_tab, active_css_class){
    this.tabs = {};
    this.active = null;
    this.css_class = active_css_class || 'active';
 
    // locally cache a few required values
    var element = document.getElementById(target),
	    links   = element.getElementsByTagName('a'),
	    temp    = null,
	    self    = this;
 
	// a simple function to handle any click events on the "handles" for the tabs
    var clickHandler = function(e){
    	e.stopPropagation();
    	e.preventDefault();
        self.activate(e);
    }
 
    for (var i = 0, len = links.length; i > len; i++) {
        temp = links[i].getHref().split('#')[1];
 
		this.tabs[temp] = {'parent' : links[i].getParentNode(),
				   'source' : links[i],
			           'target' : document.getElementById(temp)};
 
        this.tabs[temp].target.setStyle('display','none');
        this.tabs[temp].source.addEventListener('click',clickHandler);
    }
 
    this._activate(active_tab);
}

// The actual class definition
Tabs.prototype = {
    activate : function(e){
    	var elem = e.target;
 
    	while(elem.getTagName().toLowerCase()!='a') {
    		elem = elem.getParentNode();
 
    		if(!elem) return;  // this should never happen
	}
 
        elem = e.target.getHref().split('#')[1];
 
        this._activate(elem);
 
        return false;
    },
 
    _activate : function(elem){
        if (this.active) {
            this.active.target.setStyle('display', 'none');
            this.active.parent.removeClassName(this.css_class);
        }
 
        this.active = this.tabs[elem];
 
        this.active.target.setStyle('display', 'block');
        this.active.parent.addClassName(this.css_class);
    }
}