// This element will change depending on the currently selected sub-tab.
var CurrentSelectedSubTab;

// Changes the class of the selected sub-tab.
function ChangeSelectedSubTab(SelectedElement)
{
    // Clear the currently selected element if it exists.
    if (document.getElementById(CurrentSelectedSubTab))
    {
        if (document.getElementById(CurrentSelectedSubTab).className)
        {
            document.getElementById(CurrentSelectedSubTab).className = "menu4";
        }
    }
    
    // Select the passed element if it exists.
    if (document.getElementById(SelectedElement))
    {
        if (document.getElementById(SelectedElement).className)
        {
            document.getElementById(SelectedElement).className = "menu4Selected";
            CurrentSelectedSubTab = SelectedElement;
        }
    }
}    


// Displays text by moving the text from a given element into the target element.
function DisplayText(TargetID, SourceID)
{
    document.getElementById(TargetID).innerHTML = document.getElementById(SourceID).innerHTML;
}

// Displays text by moving the text from a given element into the target element.
function DisplayImage(TargetID, URL, StyleClass)
{
    document.getElementById(TargetID).src = URL;
    document.getElementById(TargetID).className = StyleClass;
}

// Displays text by moving the text from a given element into the target element.
function DisplayDataByCounter(ImageTargetID, ImageArray, TextTargetID, TextArray, NewIndex, StyleClass)
{
    // Only continue if there is an image to display.
    if (ImageArray[NewIndex])
    {
        // Display the new image.
        document.getElementById(ImageTargetID).src = ImageArray[NewIndex];
        document.getElementById(ImageTargetID).className = StyleClass;
        
        // Display the new text.
        document.getElementById(TextTargetID).innerHTML = TextArray[NewIndex];
        
        // Reset the current array and counter as needed.
        CurrentImageArray = ImageArray;
        CurrentTextArray = TextArray;
        Counter = NewIndex;

        // Check for a "next" and "previous" and display the arrows as needed.
        if (CurrentImageArray[Counter - 1])
        {
            document.getElementById("ImageToggleLeft").className = "ImageToggleSpan";
        }
        else
        {
            document.getElementById("ImageToggleLeft").className = "ImageToggleSpanDisabled";
        }

        if (CurrentImageArray[Counter + 1])
        {
            document.getElementById("ImageToggleRight").className = "ImageToggleSpan";
        }
        else
        {
            document.getElementById("ImageToggleRight").className = "ImageToggleSpanDisabled";
        }
    }
}

function TextLimit(TargetElement, MaxCount, CharLabel)
{
    if (TargetElement)
    {
        if (TargetElement.value.length >= MaxCount)
        {
            TargetElement.value = TargetElement.value.substring(0, MaxCount);
        }

        if (document.getElementById(CharLabel))
        {
            document.getElementById(CharLabel).innerHTML = MaxCount - TargetElement.value.length;
        }
    }
}

function SwitchTopContentHTML(UseTarget, AltCaption)
{
    // Use AltCaption as an optional parameter.
    if (!AltCaption)
    {
        AltCaption = "";
    }

    if (UseTarget == "")
    {
        document.getElementById("topContent").innerHTML =
            "<img id=\"imgContent\" src=\"/SWP/img/spacer.gif\" alt=\"" + AltCaption + "\" title=\"" + AltCaption + "\" />";
    }
    else
    {
        document.getElementById("topContent").innerHTML =
            "<img id=\"imgContent\" src=\"/SWP/img/spacer.gif\" style=\"display: none;\" />" +
            document.getElementById(UseTarget).innerHTML;
    }
}