function TabGroup(tabContainerId) {
 // --- initialization ---
    var tabBar = document.getElementById(tabContainerId);
    if (! tabBar) {
        return;
    }
	
	this.targetIds = new Array();
    var group = this;

// Find anchor elements.
   var aElems = tabBar.getElementsByTagName('a');
    for (var i in aElems) {
	 // Add event handler to link.
		var obj=aElems[i];
	    if (! obj.id) {
            continue;
        }

		this.targetIds.push(obj.id);
		 obj.onclick = function () {
      	 group.show(this.id);
          document.getElementById(this.id).className = this.id;
        }
	}

// Show the specified box.
    this.show = function (targetId, hideOthers) {
        if (! hideOthers) {
            this.hideAll();
        }
			var obj=document.getElementById('c'+targetId);
            document.getElementById('c'+targetId).style.display = 'block';
            document.getElementById(targetId).className = targetId+'on';			
    }

    // Hide the specified box.
    this.hide = function (targetId) {
            document.getElementById('c'+targetId).style.display = 'none';
            document.getElementById(targetId).className = targetId;
    }

 // Hide all boxes of this group.
    this.hideAll = function () {
        for (var i in this.targetIds) {
            this.hide(this.targetIds[i]);
        }
    }

 // Make the tab bar visible.
tabBar.style.display = 'block';
	
// Display the first tab content.
this.show(this.targetIds[0]);
}