// This makes the "SpecialWindow" object (class) which has two members: _name & _focus
function SpecialWindow(name, focus)
{
    this._name = name;
    this._focus = focus;
}

// This is a global variable to store all the windows
var windows;

// set all the windows properties here if you need to;
function InitWindows()
{
    // We create an array of our special windows.  One for each window
    windows = Array(new SpecialWindow('musicPlayerPnl', false), new SpecialWindow('contentBoxPnl', false));
    
    for(var i = 0; i < windows.length; i++)
    {
        var currentWindow = document.getElementById(windows[i]._name);
        currentWindow.style.zIndex = i + 1;
    }
    // Call the HandleFocus which will set focus properties on windows that have focus set to true
    HandleFocus();
}

// Sets all the windows focus except the one passed in (foo) to false and sets the one with the passed in name to true
function ChangeFocus(foo)
{
    var focusedIndex;
    var zIndex;
    // Enumerate the windows
    for(var i = 0; i < windows.length; i++)
    {
        // This sets the focus for the current window (left) to the result of the name comparison (right)
        // i.e. - If the windows name is equal to foo then focus is true else it's false 
        // (== is the comparison operator, = is the assignment operator)
        // This is the same as
        if(windows[i]._name == foo)
        {
            var currentWindow = document.getElementById(windows[i]._name);
            windows[i]._focus = true;
            zIndex = currentWindow.style.zIndex;
            currentWindow.style.zIndex = windows.length;
            focusedIndex = i;
        }
        else
        {
            windows[i]._focus = false;
        }
        // but it does it in one line... and that makes coders happy
        //windows[i]._focus = (windows[i]._name == foo);
    }
    
    for(var i = 0; i < windows.length; i++)
    {
        if(i != focusedIndex)
        {
            var currentWindow = document.getElementById(windows[i]._name);
            if(currentWindow.style.zIndex > zIndex)
            {
                currentWindow.style.zIndex--;
            }
        }
    }
    
    // Call the HandleFocus which will set the new focus properties
    HandleFocus();
}

// Sets the new focus properties
// This can be anything but for now I set it to just write "FOCUSED!" or "BLURRED!";
// You can alter it to change the className as needed.
function HandleFocus()
{
    
    for(var i = 0; i < windows.length; i++)
    {
		var currentWindow = document.getElementById(windows[i]._name);
		if(windows[i]._focus)
		{
		    //currentWindow.style.zIndex = windows.length + 1;
		    focusWindow(windows[i]._name);
		}
		else
		{
		    //if (!currentWindow.style.zIndex) currentWindow.style.zIndex = 1;
		    //currentWindow.style.zIndex = windows[i].length;
		    unfocusWindow(windows[i]._name);
		}
    }
    
    var goo = document.getElementById(windows[1]._name);
    abc(goo)
}
function abc(goo)
{
    document.getElementById('suckit').innerHTML = goo.style.zIndex;
}
function focusWindow(fu)
{
    if (fu == 'contentBoxPnl')
    {
        document.getElementById('box01').className = 'box01Alt';
        document.getElementById('box02').className = 'box02Alt';
        document.getElementById('box03').className = 'box03Alt';
    }
}
function unfocusWindow(fu)
{
    if (fu == 'contentBoxPnl')
    {
        document.getElementById('box01').className = 'box01';
        document.getElementById('box02').className = 'box02';
        document.getElementById('box03').className = 'box03';
    }
}
//<div style="width: 800px;" onmousedown="ChangeFocus(null)">
//    <div id="box01"></div>
//    <div id="box02"></div>
//    <div id="box03"></div>
//    <input type="button" onclick="ChangeFocus('box01')" value="Box 01" />
//    <input type="button" onclick="ChangeFocus('box02')" value="Box 02" />
//    <input type="button" onclick="ChangeFocus('box03')" value="Box 03" />
//</div>