/**
 * This function toggles the style of an element
 * @param elementId The element ID to set the style for.<b>
 * @param styleName1 The style name in state 1 (used as defualt).
 * @param styleName2 The style name in state 2. 
 */
function toggleStyle(elementId, styleName1, styleName2) {
       try
       {
           var el = getElementById(elementId);
           if (el != null)
           {
               if (el.className == styleName1)
               {
                   el.className = styleName2;
               }
               else if (el.className == styleName2)
               {
                   el.className = styleName1;
               }
               else
               {
                   el.className = styleName1;
               }
            }
       }
       catch(e)
       {
           // ignore exception
       }
}
	
/**
 * Changes the visibility from two divs set in block mode.
 * @param elementId1 The element ID of div 1.
 * @param elementId2 The element ID of div 2.
 */	
function toggle2Divs(elementId1, elementId2) {
	toggleDiv(elementId1);
	toggleDiv(elementId2);
}

/**
* Gets an element by its ID.
* @param elementId The element ID.
* @return The element object. 
*/
function getElementById(elementId) {
	var el = null;
	if (document.all)
	{
	    el = document.all[elementId];
	}
	else
	{
	    el = document.getElementById(elementId);
	}
	return el;
}
/**
 * Hides one element 
 * @param elementId The element ID of the element to be hidden.
 */	
function divShow( elementId )
{
	var el = getElementById(elementId);
	if ( el != null )
	{
		el.style.display = 'block';
	}
}
/**
 * Make one element visible 
 * @param elementId The element ID of the element to be shown.
 */	
function divHide( elementId )
{
	var el = getElementById(elementId);
	if ( el != null )
	{
		el.style.display = 'none';
	}
}
/**
 * shows one element whil all others will be hidden.  Similar to a page with tabs
 * @param elementId The element ID of the element to be shown.
 * @param otherIds array with String IDs of DIVs to be hidden
 */ 
function showOnlyOneElement( elementId, otherIds )
{
// alert( otherIds );
	if ( otherIds != null )
	{
		for ( i = 0; i < otherIds.length; i++ )
		{
			if ( otherIds[i] == elementId )
			{
				divShow( elementId );
			}
			else
			{
				divHide( otherIds[i] );
			}
		}
	}
}
/**
 * Changes the visibility from an element set in display:block mode.
 * @param elementId The element ID of the element.
 */	
function toggleDiv(elementId)
{
    try
    {
        var el = getElementById(elementId);
        
        if (el != null)
        {
            if (el.style.display == 'none')
            {
                el.style.display = 'block';
            }
            else if (el.style.display == 'block')
            {
                el.style.display = 'none';
            }
            else
            {
                el.style.display = 'block';
            }
         }
    }
    catch(e)
    {
        // ignore exception
    }
}

/**
 * Changes the visibility from an element set in display:block mode.
 * The hiding and showing is animated and the background is greyed out.
 * @param elementId The element ID of the element.
 */	
function toggleDivAnimated(elementId)
{
    try
    {
        var el = getElementById(elementId);
        
        if (el != null)
        {
             if (el.style.display == 'none')
             {
                 PopupDiv.show(elementId);
             }
             else if (el.style.display == 'block')
             {
                 PopupDiv.close();
             }
             else
             {
                 PopupDiv.show(elementId);
             }
         }
    }
    catch(e)
    {
        // ignore exception
    }
}