// MNB
// 3/30/09
// Used for the tab system on the product page
// http://www.panasonic.com/business/provideo/support/products/index.asp?id=1
/*
REQUIRED:

<script language="javascript" type="text/javascript">
    var defaultTabPosition = 0;

    var tabStructureCopyArray = new Array("Operating Instructions", "FAQs", "Application Solutions", "Warranty", "Parts List");
    
    //var tabStructureImageFolder = "/business/provideo/support/images/products/";
    
    var tabStructureImageArray = new Array("operating-instructions-tab.gif", "faqs-tab.gif", "application-solutions-tab.gif", "warranty-tab.gif", "parts-list-tab.gif");
</script>

Basically, you will need to supply the following and set them to the variables above on your desired page:

defaultTabPosition:         The position (0 - 4) of the tab you want to load first.
tabStructureCopyArray:      The names desired for each tab in order from left to right.
tabStructureImageFolder:    The folder structure containing the tab images. (LEGACY)
tabStructureImageArray:     Filenames of each tabs image in order from left to right.
                            Here is the required naming convention:
                            
                            not selected:   'unique-name-tab.gif'
                            selected:       'unique-name-tab-selected.gif'

*/

YAHOO.util.Event.onDOMReady(initTabs);

var previousSelectedTab;
var totalTabs;


//Initiates your tab structure, sets the default, and determines the total tabs based on the the lesser of the 2 Arrays provided. (if one of the arrays is less than the other, the data in the longer array will not be presented)
function initTabs()
{
    var i;
    
    var tempTabImageDiv;
    var tempTabLinkDiv;
    
    for (i = 0; i < 5; i++)
    {
    
        tempTabImageDiv = document.getElementById('tab-' + (i+1) + '-image');
        tempTabLinkDiv = document.getElementById('tab-' + (i+1) + '-link');
        tempTabContent = document.getElementById('tab-' + (i+1) + '-content');
        
        //Check Images
        //Make sure that the image array contains this posiitons data, if not, hide
        if (tabStructureImageArray[i] != undefined)
        {
            //if the current position is the default selected Tab, make it so.
            if (defaultTabPosition == i)
            {
                tempFullSrc = tabStructureImageArray[i];
                tempFullSrc = tempFullSrc.replace('-tab', '-tab-selected');
                tempTabLinkDiv.className = tempTabLinkDiv.className.replace('-text', '-text-selected'); 
                tempTabImageDiv.src = tempFullSrc;
                tempTabContent.style.display = 'block';
            }
            else
            {
                tempTabImageDiv.src = tabStructureImageArray[i];
            }
        }
        else
        {
            //hide element
            tempTabImageDiv.style.display = 'none';
            tempTabLinkDiv.style.display = 'none';
            
            //remove onclick event
            tempTabImageDiv.onclick = '';
            tempTabLinkDiv.onclick = '';
            
            //remove pointer cursor
            tempTabImageDiv.style.cursor = 'default';
            tempTabLinkDiv.style.cursor = 'default';
            
            //This array does not have a full 5 tab structure set the current as the number of total tabs
            if (totalTabs == undefined)
            {
                totalTabs = i;
            }
        }
        
        //Checks the copy array
        //Make sure that the copy array contains this posiitons data, if not, hide
        if (tabStructureCopyArray[i] != undefined)
        {
            tempTabLinkDiv.innerHTML = "<a href='javascript:void(0)'>" + tabStructureCopyArray[i] + "</a>";
        }
        else
        {
            //hide element
            tempTabImageDiv.style.display = 'none';
            tempTabLinkDiv.style.display = 'none';
            
            //remove onclick event
            tempTabImageDiv.onclick = '';
            tempTabLinkDiv.onclick = '';
            
            //remove pointer cursor
            tempTabImageDiv.style.cursor = 'default';
            tempTabLinkDiv.style.cursor = 'default';
            
            //This array does not have a full 5 tab structure set the current as the number of total tabs
            if (totalTabs == undefined)
            {
                totalTabs = i;
            }
        } 
    }
    
    //if totalTabs is still undefined, then there are 5 tabs
    if (totalTabs == undefined)
    {
        totalTabs = 5;
    }
    //alert(totalTabs);
}

//selects the requested tab
function selectTab(index)
{
    var currentTabImageDiv = document.getElementById('tab-' + index + '-image');
    var currentTabLinkDiv = document.getElementById('tab-' + index + '-link');
    var currentTabContent = document.getElementById('tab-' + index + '-content');
    
    var newTabImage = currentTabImageDiv.src; 

    var newTabLinkClass = currentTabLinkDiv.className;
    
    //sets the previous to the default if it is the firt click on tabs
    if (previousSelectedTab == undefined)
    {
        previousSelectedTab = (defaultTabPosition + 1);
    }
    
    //ensure that the user has not clicked on the current selected tab before selecting
    if (previousSelectedTab != index)
    {
        // Set new image
        if (newTabImage.indexOf('-selected') != -1)
        {
            newTabImage = newTabImage.replace('-selected', '');
        }
        else
        {
            newTabImage = newTabImage.replace('-tab', '-tab-selected');  
        }
        
        // Set new class for text
        if (newTabLinkClass.indexOf('-selected') != -1)
        {
            newTabLinkClass = newTabLinkClass.replace('-selected', '');
        }
        else
        {
            newTabLinkClass = newTabLinkClass.replace('-text', '-text-selected');     
        }
        
        //show requested content
        currentTabContent.style.display = 'block';
        //show selected image source 
        currentTabImageDiv.src = newTabImage;
        currentTabLinkDiv.className = newTabLinkClass;
        
        unselectAllOtherTabs(index);
        
        previousSelectedTab = index;
        
        return true;
    }
    else
    {
        return false;
    }
}

//unselects all tabs besides the selected index
function unselectAllOtherTabs(selectedIndex)
{  
    var currentTabImageDiv;
    var currentTabLinkDiv;
    var currentTabContent;
    
    var newTabImage;
    var newTabLinkClass;
    
    var i;
    
    //Make sure that none of the other tabs are selected or showing content
    for (i = 1; i < (totalTabs + 1); i++)
    {
        if (i != selectedIndex)
        { 
            currentTabImageDiv = document.getElementById('tab-' + i + '-image');
            currentTabLinkDiv = document.getElementById('tab-' + i + '-link');
            currentTabContent = document.getElementById('tab-' + i + '-content');
            
            newTabImage = currentTabImageDiv.src; 
            newTabLinkClass = currentTabLinkDiv.className;
            
            if (newTabImage.indexOf('-selected') != -1)
            {
                newTabImage = newTabImage.replace('-selected', '');
                currentTabImageDiv.src = newTabImage;
            }
            if (newTabLinkClass.indexOf('-selected') != -1)
            {
                newTabLinkClass = newTabLinkClass.replace('-selected', '');
                currentTabLinkDiv.className = newTabLinkClass;
            }
            currentTabContent.style.display = 'none';
        }
    }
}