pointer free for all!

There are two modes of manipulating stuff in the editor:
	1) pointer locked fps style where you can't click on the sidebar and other things
	2) pointer free where your mouse is visible and you can click on the sidebar and other things.

*** During pointer lock fps mode these things will be available: ***
"sidebar" area (on the right part of the screen):
	the sampler
"majority" area (the rest of the screen):
	the reticule
	the inventory

*** During the pointer free clickity mode, these things will be available: ***
"sidebar" area (on the right part of the screen):
	the inspector
	the assets hierarchy
	(only one is visible at a time)
"majority" area (the rest of the screen):
	the code-editor (sometimes hidden)
	the inventory
	the bottom bar

I am trying to figure out how best to organize these in the dom. Below is pseudo code for different ways I could do that

The below is pseudo code for how the elements would be organized in relation to each other - what the parent elements would be, what they would contain. This would determine how the elements were programmed to appear and disappear

This pseudo code is a snapshot of what elements would be collapsed and which would be showing when the pointer was free to click all over the place:


**************************
Version 1: One "majority" area and one "sidebar" area.
The elements that are nested by one tab are the elements that would be individually shown and hidden when the pointer status was changed.
- CONS: The javascript is more prone to error during the changes in development when littler elements are changed, moved around, removed, or added depending on how the application is changing.
- PROS: No duplicate elements, more compact.
**************************
< .majority >
	< .intro (collapsed) >
	< .reticule (collapsed) >
	< .code-editor >
	< .bottombar >
	< .inventory >
< .sidebar >
	< .sampler (collapsed) >
	< .editor >
		< .inspector >
		< .assets (collapsed) >


**************************
Version 2: Two full page divs (.pointerlock and .pointerfree),  each with a "majority" element and a "sidebar" element.
- CONS: This would have duplicate elements - two sidebar elements and two majority elements. Possibly two inventory elements, which I'm not sure how to handle.
- PROS: Less prone to error all around. To switch between pointer states in javascript I'd just handle the big elements, no fiddling with the smaller ones. In the html I don't have to worry about changing anything about the interior elements.
**************************
< .pointerlock (collapsed) >
	< .majority >
		< .intro (collapsed) >
		< .reticule >
		< .inventory > (how does this move between the pointerlock and pointerfree?)
	< .sidebar >
		< .sampler >
< .pointerfree >
	< .majority >
		< .code-editor >
		< .inventory > (If it isn't in the dom and in flow with the other elements, manipulating it in relation to the other elements becomes more complicated)
		< .bottombar >
	< .sidebar >
		< .inspector >
		< .assets (collapsed) >


**************************
Version 3: Back to all little elements again, but this time there would be a .pointerlock class and a .pointerfree class to make the functionality more clear.
- CONS: The html is more prone to error. Keeping those classes on the right elements may be more fiddly than even Version 1
- PROS: Programming less prone to error, I'd just toggle two classes, no fiddling with individual elements: hide(.pointerlock), show(.pointerfree) and hide(.pointerfree), show(.pointerlock) (aproximately)
**************************
< .majority >
	< .intro .pointerlock (collapsed) >
	< .reticule .pointerlock (collapsed) >
	< .code-editor .pointerfree >
	< .bottombar .pointerfree >
	< .inventory >
< .sidebar >
	< .sampler .pointerlock (collapsed) >
	< .editor .pointerfree  >
		< .inspector >
		< .assets .collapsed >


**************************
It is unclear to me which would be better practice regarding html and css
**************************