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();
        }
    }
    $( ".selector" ).tabs({ selected: 1 });
}
//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();
}

function selectTab(tabnumber) {
	
}

//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++) {
	mi = i+1;
	tabsHTML += "<li><a style='padding-left: 10px;padding-right:10px; font-size:9px;' href='#tab"+mi+"'> " + $(panes[i]).attr("rel") + "</a></li>";
     }
     tabs.html(tabsHTML);
}