var blurPanel_content;
var blurPanel_appendHere;
var blurPanel_alphaPanel;

function focus(element, hideOnClick) {
    if(hideOnClick == undefined)
        hideOnClick = false;
        
    if(isFocused())
        unfocus();
        
    if(element.parentNode != undefined)
        element.parentNode.removeChild(element);        
    element.style.margin = 'auto';
    
    createBlurPanel();
    createCenteringPanel();
    
    if(hideOnClick)
        document.getElementById('blurPanel_content').onclick = function() { unfocus(); }; //DOM0 safe way of assigning onclick attribute
    else
        document.getElementById('blurPanel_content').onclick = function() {};
        
    document.getElementById('blurPanel_appendHere').appendChild(element);
}

function unfocus() {
    if(!isFocused())
        return; //nothing to do
        
    document.body.removeChild(document.getElementById('blurPanel_content'));
    document.body.removeChild(document.getElementById('blurPanel_alphaPanel'));
    blurPanel_appendHere = undefined;
    blurPanel_content = undefined;
    blurPanel_alphaPanel = undefined;
}

function createBlurPanel() {
    blurPanel_alphaPanel = document.createElement('div');
    blurPanel_alphaPanel.id = 'blurPanel_alphaPanel';
    with(blurPanel_alphaPanel.style) {
        position = 'absolute';
        margin = '0px';
        top = '0px';
        left = '0px';
        width = '100%';
        height = '100%';
        filter = 'alpha(opacity=80)';
        opacity = '0.8';
        backgroundColor = '#000000';
    }
    document.body.appendChild(blurPanel_alphaPanel);
}

function createCenteringPanel() {
//XXX I should have used style.display='table' and style.display='table-cell', but internet explorer does not support them

    blurPanel_appendHere = document.createElement('td');
    blurPanel_appendHere.id = 'blurPanel_appendHere';
    /*
    blurPanel_appendHere.style.display = 'table-cell';
    */
    with(blurPanel_appendHere.style) {
        backgroundColor = 'transparent';
        verticalAlign = 'middle';
        textAlign = 'center';
    }
    
    var tr = document.createElement('tr');
    tr.appendChild(blurPanel_appendHere);
    
    var table = document.createElement('table');
    /*
    table.style.display = 'table';
    */
    with(table.style) {
        width = '100%';
        height = '100%';
        borderStyle = 'solid';
    }
    table.appendChild(tr);
    
    blurPanel_content = document.createElement('div');
    blurPanel_content.id = 'blurPanel_content';
    with(blurPanel_content.style) {
        position = 'absolute';
        margin = '0px';
        top = '0px';
        left = '0px';
        width = '100%';
        height = '100%';
        backgroundColor = 'transparent';
        overflow = 'auto';
    }
    blurPanel_content.appendChild(table);
    blurPanel_content.innerHTML = blurPanel_content.innerHTML; //XXX IE workaround. Don't ask me why -____-'
    
    document.body.appendChild(blurPanel_content);
}

function isFocused() {
    return document.getElementById('blurPanel_alphaPanel') != undefined;
}