/* Depends on changeClass() from default.js. */

function activateTab( tab, paneToShow ) {

    /* Display other tabs, and activate a single tab */
    tab.siblings().removeClass("active");
    tab.addClass("active");

    /* Hide other divs, and show a single div with a nifty fade-in effect*/
    paneToShow.siblings('div').hide();
    paneToShow.fadeIn('fast');
}

$(document).ready(function () {

    /* Set a value that will prevent the auto-generated IDs from interfering
     * with anything other IDs. I also use this as the CSS class with which to
     * extract the <div>s to apply the tabs to. */
    var namespace = "ctcs-tabset";

    /* We're going to install tabs on content within all <div>s that have the
     * necessary CSS class */
    $('div.' + namespace ).each( function( containerIndex, container ) {

	/* Auto-generate its ID */
	var containerId = namespace + "-" + containerIndex;
	$(container).attr( "id", containerId );

	/* Find all <div>s within the display pane */
	$(container).find( "." + namespace + "-display-pane > div" ).each( function( i, div ) {
	    $(div).attr( "id", containerId + "-pane" + i );
	});

	/* There should be only one <ul> anyway */
	var tabList = $(container).children("ul:first");

	tabList.addClass( namespace + "-list" );
	tabList.attr( "id", container + "-list" ); /* Set an ID for fun */

	tabList.children().each( function( i, li ) {
	    $(li).bind( 'click', function() {
		activateTab( $(this), $('#' + containerId + "-pane" + i) );
	    });
	});

    }); /* END each */
});