var modeat = 'hide';
var currentItem = null;
function category(item,mode) 
{
    if(mode == 'show') 
    { 
        document.getElementById('category').style.display = 'block';
	
        // HIGHLIGHT CATEGORY
        document.imgCategory.src = "../templates/site/images/practices_categoryListing_ro.png";
	
        // DEHIGHLIGHT ALPHABETICAL
        document.imgAlphabetical.src = "../templates/site/images/practices_alphabeticalListing.png";
	
        // HIDE ALPHABETICAL
        document.getElementById('alphabetical').style.display = 'none';
    }
    else
    { 
        document.getElementById('category').style.display = 'none';
    }
}
function alphabetical(item,mode) 
{
    if(mode == 'show') 
    { 
        document.getElementById('alphabetical').style.display = 'block';

        // DEHIGHLIGHT CATEGORY
        document.imgCategory.src = "../templates/site/images/practices_categoryListing.png";
	
        // HIGHLIGHT ALPHABETICAL
        document.imgAlphabetical.src = "../templates/site/images/practices_alphabeticalListing_ro.png";

        // HIDE CATEGORY
        document.getElementById('category').style.display = 'none';
    }
    else 
    {
        document.getElementById('alphabetical').style.display = 'none'; 
    }
}
/////////////////////////////////////////////////////////////////////////////////////////////
// VARIABLE TO HOLD THE ID OF THE CURRENT SUBPRACTICE THAT IS OPEN.  SINCE ONLY ONE SUBPRACTICE IS OPEN
// AT A TIME, WHEN A USER CLICKS ON A NEW SUBPRACTICE, YOU CAN CLOSE THE OLD SUBPRACTICE AND RESET THE VARIABLE AND
// OPEN THE NEW SUBPRACTICE

var currentDivId = null;        // KEEP TRACK OF THE CURRENT ITEM
var currentDivState = null;     // KEEP TRACK OF THE DIV DISPLAY STATE

var currentBoxImageId = null;   // THE ID OF THE PLUS / MINUS BOX IMAGE 

var DOM = null;

function showState()
{
    alert ( "currentDivId: " + currentDivId + "\ncurrentDivState: " + currentDivState + "\ncurrentBoxImageId: " + currentBoxImageId );
}

function showBoxState(item)
{
    var imgpath = item.src;
    // CHANGE THE BOX FOR SAME IMAGE SELECTED
    if(imgpath.match("Plus") != null)
    {   
        var x = imgpath.replace('Plus.png','Minus.png');
        item.src = x;
    }
    else
    {
        var x = imgpath.replace('Minus.png','Plus.png');
        item.src = x;
    }
    
    if ( currentBoxImageId !== null )
    {
        // close all other boxes
        imgpath = currentBoxImageId.src;
        imgpath.replace('Plus.png','Minus.png');
    }
}

function showDisplayState()
{
    if ( currentDivState == "open" )
    {
        DOM.style.display = "none";                 // HIDE THE CONTENT
        currentDivState = "close";
    }
    else
    {
        DOM.style.display = "block";                // DISPLAY THE CONTENT
        currentDivState = "open";
    }
}

function showSubpractice(item, dbId)
{
    var divId = "divBox_" + dbId;                           // GET THE SELECTED ITEM'S ID
    // STATE INITIAL
    if ( currentDivId == null)
    {
        DOM = document.getElementById ( divId );            // SET THE DOM
        DOM.style.display = "block";                        // DISPLAY THE CONTENT
        showBoxState( item );                               // SWAP THE PLUS / MINUS BOX IMAGES
        currentDivId = divId;                               // SET THE CURRENT DIV ID
        currentDivState = "open";                           // KEEP TRACK OF DIV DISPLAY STATE

        currentBoxImageId = item;                           // SET THE CURRENT PLUS / MINUS BOX IMAGE ID
    }
    else
    {
        // STATE: SAME ITEM SELECTED
        if ( currentDivId == divId )
        {
            showBoxState( item );                           // SWAP THE PLUS / MINUS BOX IMAGES
            showDisplayState();                             // HIDE / DISPLAY CONTENT
            
        }   
        else
        {
            //alert ('currentDivId: ' + currentDivId + '\ndivId: ' + divId); 
            // CLOSE THE OLD ITEMS
            DOM.style.display = "none";                     // HIDE THE CONTENT
            if (currentDivState !='close')
            {
                showBoxState ( currentBoxImageId );             // CLOSE THE PLUS / MINUS BOX IMAGE
            }
            //showState();

            currentDivId = divId;                           // RESET THE CURRENT DIV ID TO NEW ID
            currentDivState = "close";                      // RESET THE DIV DISPLAY STATE TO CLOSE
            currentBoxImageId = item;                       // RESET THE PLUS / MINUS BOX IMAGE ID TO SELECTED ID
            DOM = document.getElementById ( divId );        // SET THE DOM
            //showState();

            // OPEN THE NEW ITEMS
            showDisplayState();                             // DISPLAY THE CONTENT
            showBoxState( item );                           // SWAP THE PLUS / MINUS BOX IMAGES FOR THE NEW SELECTED IMAGE
            //showState();
        }
    }
}