var currentContentGroup;
var contentGroups;

$(document).ready(
            function() {
                hideContentGroups();
                populateTabs();
                $(".tabs").tabs(".panes > .pane", {
                    onBeforeClick: onTabClick
                });
            });
//Initialize the contentgroups
function hideContentGroups() {
    contentGroups = $(".contentGroup");
    if (contentGroups.length > 1) {
        for (i = 0; i < contentGroups.length; i++) {
            $(contentGroups[i]).hide();
        }
    }
}
//Piggyback on the tab click to perform additional actions
function onTabClick(event, tabIndex) {
    if (contentGroups.length == 0) {
        return;
    }
    if (currentContentGroup != undefined) {
        currentContentGroup.hide();
    }
    currentContentGroup = $(contentGroups[tabIndex]).show();
}
//Find the panes and populate the tabs based on the "rel" attribute in the pane
//This approach will only work for one tab group per page, no nested tabs please
function populateTabs() {
    var panes = $(".tabs").parent().find(".pane");
    var tabs = $(".tabs");
    var tabsHTML = "";
    for (var i = 0; i < panes.length; i++) {
        tabsHTML += "<li><a>" + $(panes[i]).attr("rel") + "</a></li>";
    }
    tabs.html(tabsHTML);
}