/*
* Common Core Tab functionality.
*
* DO NOT CHANGE UNLESS YOU KNOW WHAT YOU ARE DOING!
*
* In order to use this method your page that contains the TABs must be configured as follow:
*
* TAB Setup:( If your page contains 3 tabs, then you must have (3) tabs with the following div-ids:
*   <div id="tab1" class='tab-active-wrapper'>
*   <div id="tab2" class='tab-inactive-wrapper'>
*   <div id="tab3" class='tab-inactive-wrapper'>
*
* PANEL Setup: (You MUST have a Panel defined for every Tab you declare. So if you have (3) tabs, then you need (3) Panels
*   <div id="tabPanel1" class='${panelContainer-param} inactive-panel'>
*   <div id="tabPanel2" class='${panelContainer-param} inactive-panel'>
*   <div id="tabPanel3" class='${panelContainer-param} inactive-panel'>
*
* LOCALE Variable: (While looping to build your tabs, implement this line of code so that you can capture the current tabs locale that you may be on)
*                   Also implement function TabUtils_OnSetCurrentTabIndex(..) on your JSP, so that this method can inform your page what the new index is.
*
*   <input type="hidden" name="tabLocale${rowCounter.count}" value="${dropDownInfo.id}"/> ***optional - if your tabs are displaying locale/languages***
*
* See /jsp/contentmanager/website/admin/common/meta-data.jsp for real-life example
*/


/**
 * Creates a class called CheckBoxUtils.
 */
var TabUtils = {
    version : "1.0.0"
};


/**
 *
 * @param tabNamePrefix The Tab's DIV-ID Prefix name before the counter is appended. (example: tab)
 * @param tabPanelNamePrefix A Tab's Panel-DIV-ID Prefix name before the counter is appended. (example: tabPanel)
 * @param tabToActiveIndex The Index of the Tab the user clicked on that they want to be Enabled.
 * @param totalTabCount The total count of the number of Tabs on the page.
 * @param panelContainer The DIV container CSS-Name that this divPanel is categorized under. (eg: pass in 'form-container')
 */
TabUtils.switchTabs = function(tabNamePrefix, tabPanelNamePrefix, tabToActiveIndex, totalTabCount, panelContainer) {

    // Call the onBefore event - in case the developer wants to stop this process from happening.
    // If (false) is returned, stop the process from continuing.
    if (window.TabUtils_OnBeforeSwitchTabs != undefined) {
        if (!TabUtils_OnBeforeSwitchTabs(tabNamePrefix, tabPanelNamePrefix, tabToActiveIndex)) {
            return;
        }
    }

    // Loop through all the Tabs and all the Tab-Panels and disable them
    for (var i=0; i < totalTabCount; i++) {

        var elTab = document.getElementById(tabNamePrefix + (i+1));
        elTab.className = 'tab-inactive-wrapper';

        var elTabPanel = document.getElementById(tabPanelNamePrefix + (i+1));
        elTabPanel.className = panelContainer + ' inactive-panel';

    }

    // Now only activte the Tab & It's associated Panel.
    var elTabActive = document.getElementById(tabNamePrefix + tabToActiveIndex);
    elTabActive.className = 'tab-active-wrapper';

    var elTabPanelActive = document.getElementById(tabPanelNamePrefix + tabToActiveIndex);
    elTabPanelActive.className = panelContainer + ' active-panel';

    // Check if this js-function is declared on the main page that is including this tab.js
     //If the method exists, set the current selected tab-index.
    if (window.TabUtils_OnSetCurrentTabIndex != undefined) {
        TabUtils_OnSetCurrentTabIndex(tabNamePrefix, tabPanelNamePrefix, tabToActiveIndex);
    }

    // Call the onAfter event - in case the developer wants to process additional tasks after the method has completed.
    if (window.TabUtils_OnAfterSwitchTabs != undefined) {
        TabUtils_OnAfterSwitchTabs(tabNamePrefix, tabPanelNamePrefix, tabToActiveIndex);
    }


}