var selectedTab = new Array();          // selected tab of each tabbed area


/*
 *  getTabbedArea - returns id of tabbed-area specified element is in
 *
 *   IN: element - element whose tabbed-area you want to identify
 *  RET: ID of parent tabbed area of the specified element
 */ 
function getTabbedArea( element ) {
    
    if ( element.className == undefined ) return undefined;
    
    if ( element.className.search(/tabbed-area/i) < 0 ) {
        return getTabbedArea( element.parentNode );
    } else {
        return element.id;
    }
    
} 


/*
 *  selectTab - selects a tab when user clicks on it
 *
 *   IN: clicked - node of tab that was clicked
 */
function selectTab( clicked ) {

    /* find out id of tabbed area we are in - exit if undefined */

    var area = getTabbedArea( clicked );
    if ( area == undefined ) return;
    var areaNode = document.getElementById( area );
        
    /* find out current selected tab of this area. If this is first time this
       function is called for this area, then will need to traverse nodes to
       find current selected tab - thereafter it will be defined in the
       selectedTab global */
       
    var current = selectedTab[area];
    if ( current == undefined ) {
        current = getElementsByClassName( 'tab-selected', 'div', areaNode );
        if ( current == undefined ) return;
        current = current[0];
        selectedTab[area] = current;
    }
    
    /* exit without doing anything if user has clicked current tab*/
    
    if ( current == clicked ) return;
    
    /* Locate content corresponding to clicked tab and remove hidden class so
       that it becomes visible. This relies on content area having classname
       like the corresponding tab, but with '-content' appended. 
       Change class of tab itself from 'tab' to 
       'tab-selected' so that its appearance changes to selected tab */

    clicked.className = removeClass( clicked.className, 'tab' );
    var content = getElementsByClassName( 
                    clicked.className + '-content', 'div', areaNode );    
    content[0].className = removeClass( content[0].className, 'hidden' );
    clicked.className += ' tab-selected';

    /* Perform a similar process for currently active tab, but hide it's
       content area, and change class of tab so it has non-selected 
       appearance. */
       
    current.className = removeClass( current.className, 'tab-selected' );
    content = getElementsByClassName( 
                    current.className + '-content', 'div', areaNode );  
    content[0].className += ' hidden';
    current.className += ' tab';

    /* update global selectedTab so records new selected tab for this area */

    selectedTab[area] = clicked;
    
}
   
    
/*
 *  getContentParent - obtains parent of specified element which is a
 *                     content area in a tab (i.e. has a class of 
 *                     "tab-content").
 *
 *   IN: element - element whose parent content area we want 
 *  RET: the content parent element
 */
function getContentParent( element ) {
    
    if ( element.className == undefined ) return undefined;
    
    if ( element.className.search(/tab-content/i) < 0 ) {
        return getContentParent( element.parentNode );
    } else {
        return element;
    }
    
} 


/*
 *  ocAjaxTab - obtains content for a tab using a Ajax request
 *
 *   IN: element inside tab content area where response will be placed
 *   IN: [optional] url to be used in the Ajax request, if not specified then
 *       will obtain url from a parent <form> element
 */
function ocAjaxTab( element, url ) {
    
    /* determine parent content area tab where the Ajax response will be
       placed - set the global elemAjax to this value. The Ajax callback
       function will then place the Ajax response there */
       
    elemAjax = getContentParent( element );
    
    /* now submit the Ajax request */
    
    if ( url ) 
        ocAjaxRequest( url );
    else    
        ocAjaxForm( element );
    
    return false;
    
}

function ocAjaxPostTab( element, url ) {
    
    elemAjax = getContentParent( element );
    
    ocAjaxForm( element );
}