function createWorkspace(parent, menuAndToolbars, interactive, height)
{
    var inner = document.createElement("div");
    // WARNING: width MUST be present for opacity to work when forms are displayed
    inner.style.overflow = "auto";
    inner.style.width = "100%";
    //inner.style.height = "100%";
    if( height )
	inner.style.height = height;
    inner.style.padding = "0 0 0 0";
    // from css inner.style.border = "thin solid"; 
    // from css inner.style.background =  "rgb(224,224,224)";
    inner.style.top      = 0;
    inner.style.left      = 0;
    inner.style.zIndex    = 1;
    inner.id       = "Editor";
    inner.className = "Editor";
    inner.setAttribute( "class", "Editor");
    inner.setAttribute( "className", "Editor");
    parent.appendChild(inner);

    GamakaManager.init(parent);

    if(menuAndToolbars)
	createMenuAndToolBars(inner, interactive);

    // create a container of workspace that will have a fixed height
    // TODO: ideally this should occupy client height
    var workspaceouter = document.createElement("div");
    workspaceouter.style.width = "100%";
    workspaceouter.style.height = "95%";
    //workspaceouter.style.height = parent.offsetHeight-inner.offsetHeight-5;
    //workspaceouter.style.overflow = "auto";	// scrollbars as needed
    workspaceouter.className = "WorkspaceOuter";
    workspaceouter.id = "WorkspaceOuter";
    workspaceouter.setAttribute( "class", "WorkspaceOuter");
    workspaceouter.setAttribute( "className", "WorkspaceOuter");
    inner.appendChild(workspaceouter);

    // now create workspace inside but with padding so that actual song
    // content is not flushed to the left (TODO: ideally we would like it
    // centered)
    var workspace = document.createElement("div");
    workspace.style.height = "100%";
    //workspace.style.padding = "0.5em 0.5em 0.5em 0.5em";
    workspace.className = "Workspace";
    workspace.id = "Workspace";
    workspace.setAttribute( "class", "Workspace");
    workspace.setAttribute( "className", "Workspace");
    workspaceouter.appendChild(workspace);
    return workspace;
}
/**
 * create the editor workspace
 * @param {DOM}	parent			the parent DOM elem
 * @param {boolean} menuAndToolBars	create main menu and tool bars?
 * @param {boolean} interactive		interactive?
 * @param {string}  height		height of worksspace  (css style)
 * @return DOM element representing editor workspace
 * @type DOM
 */
create the editor workspace
@param {DOM} parent                  the parent DOM elem
@param {boolean} menuAndToolBars     create main menu and tool bars.
@param {boolean} interactive         interactive.
@param {string}  height              height of worksspace  (css style)
@return DOM element representing editor workspace
@type DOM
create the editor workspace @param { DOM } parent the parent DOM elem @param { boolean } menuAndToolBars create main menu and tool bars . @param { boolean } interactive interactive . @param { string } height height of worksspace ( css style ) @return DOM element representing editor workspace @type DOM
function createWorkspace(parent, menuAndToolbars, interactive, height)
{
    var inner = document.createElement("div");
    inner.style.overflow = "auto";
    inner.style.width = "100%";
    if( height )
	inner.style.height = height;
    inner.style.padding = "0 0 0 0";
    inner.style.top      = 0;
    inner.style.left      = 0;
    inner.style.zIndex    = 1;
    inner.id       = "Editor";
    inner.className = "Editor";
    inner.setAttribute( "class", "Editor");
    inner.setAttribute( "className", "Editor");
    parent.appendChild(inner);
    GamakaManager.init(parent);
    if(menuAndToolbars)
	createMenuAndToolBars(inner, interactive);
    var workspaceouter = document.createElement("div");
    workspaceouter.style.width = "100%";
    workspaceouter.style.height = "95%";
    workspaceouter.className = "WorkspaceOuter";
    workspaceouter.id = "WorkspaceOuter";
    workspaceouter.setAttribute( "class", "WorkspaceOuter");
    workspaceouter.setAttribute( "className", "WorkspaceOuter");
    inner.appendChild(workspaceouter);
    var workspace = document.createElement("div");
    workspace.style.height = "100%";
    workspace.className = "Workspace";
    workspace.id = "Workspace";
    workspace.setAttribute( "class", "Workspace");
    workspace.setAttribute( "className", "Workspace");
    workspaceouter.appendChild(workspace);
    return workspace;
}
function createWorkspace ( parent , menuAndToolbars , interactive , height ) { var inner = document . createElement ( "div" ) ; inner . style . overflow = "auto" ; inner . style . width = "100%" ; if ( height ) inner . style . height = height ; inner . style . padding = "0 0 0 0" ; inner . style . top = 0 ; inner . style . left = 0 ; inner . style . zIndex = 1 ; inner . id = "Editor" ; inner . className = "Editor" ; inner . setAttribute ( "class" , "Editor" ) ; inner . setAttribute ( "className" , "Editor" ) ; parent . appendChild ( inner ) ; GamakaManager . init ( parent ) ; if ( menuAndToolbars ) createMenuAndToolBars ( inner , interactive ) ; var workspaceouter = document . createElement ( "div" ) ; workspaceouter . style . width = "100%" ; workspaceouter . style . height = "95%" ; workspaceouter . className = "WorkspaceOuter" ; workspaceouter . id = "WorkspaceOuter" ; workspaceouter . setAttribute ( "class" , "WorkspaceOuter" ) ; workspaceouter . setAttribute ( "className" , "WorkspaceOuter" ) ; inner . appendChild ( workspaceouter ) ; var workspace = document . createElement ( "div" ) ; workspace . style . height = "100%" ; workspace . className = "Workspace" ; workspace . id = "Workspace" ; workspace . setAttribute ( "class" , "Workspace" ) ; workspace . setAttribute ( "className" , "Workspace" ) ; workspaceouter . appendChild ( workspace ) ; return workspace ; }
create the editor workspace
 @param {DOM} parent                  the parent DOM elem
 @param {boolean} menuAndToolBars     create main menu and tool bars?
create the editor workspace @param { DOM } parent the parent DOM elem @param { boolean } menuAndToolBars create main menu and tool bars?
// WARNING: width MUST be present for opacity to work when forms are displayed
 //inner.style.height = "100%";
 // from css inner.style.border = "thin solid"; 
 // from css inner.style.background =  "rgb(224,224,224)";
 // create a container of workspace that will have a fixed height
 // TODO: ideally this should occupy client height
 //workspaceouter.style.height = parent.offsetHeight-inner.offsetHeight-5;
 //workspaceouter.style.overflow = "auto";	// scrollbars as needed
 // now create workspace inside but with padding so that actual song
 // content is not flushed to the left (TODO: ideally we would like it
 // centered)
 //workspace.style.padding = "0.5em 0.5em 0.5em 0.5em";
