function WebUI( console )
{
    system.registerEvent("onshow");
    system.registerEvent("onunshow");
    
    system.addEventListener("onloadSystem", activate);
    
    var place;
    
    function activate()
    {
        system.addEventListener("onshow", show);
        system.addEventListener("onresize", resize);
        system.addEventListener("onunshow", clear);
        system.addEventListener("onunload", clear);        
    }
    
    function show( node )
    {
        var nodes, i;
        if ( place == undefined )
        {
            place = document.createElement("DIV");
            system.dispatchEvent("onresizeConsole", new Size( 50, 100 ) );
            
            try
            {
                place.style.width = ( document.body.clientWidth - 50 ) / 100 * 50;
                place.style.height = console.currentStyle.height;
                place.style.left = console.currentStyle.width;
            }
            catch( e )
            {
                place.style.height = window.getComputedStyle(console, "").height;
                place.style.left = window.getComputedStyle(console, "").width;
            }
            place.style.top = 0;
//            place.style.backgroundColor = "red";
            console.parentNode.appendChild( place );
        }
        else
        {
            nodes = place.childNodes;
            for ( i = 0; i<nodes.length; ++i)
                place.removeChild( nodes.item(i) );
        }
        place.appendChild( node );
    }
    
    function clear()
    {
        var i, node;
        if ( place != undefined )
        {
            nodes = place.childNodes;
            for ( i = 0; i<nodes.length; ++i)
                place.removeChild( nodes.item(i) );
            console.parentNode.removeChild( place );
            place = undefined;
            system.dispatchEvent("onresizeConsole", new Size( 100, 100 ) );            
        }
    }
    
    function resize()
    {
        if ( place != undefined )
        {
            
            try
            {
                place.style.width = ( document.body.clientWidth - 50 ) / 100 * 50;
                place.style.height = console.currentStyle.height;
                place.style.left = console.currentStyle.width;
            }
            catch( e )
            {
                place.style.height = window.getComputedStyle(console, "").height;
                place.style.left = window.getComputedStyle(console, "").width;
            }
            place.style.top = 0;      
        }
    }
    
}