/*	Mac-style styles
	================  */

/*
	We have a small issue.  We already have a layer for screen corners.
	Now we're adding a layer for the menubar.  If the menubar is on top, then
	it obscures the top corner images, but if it's below, then the corner layer
	(which fills the screen) gets the mouseDown events that we were expecting
	for ourselves.  Moving the corners out of their own layer is a nasty hack,
	and anyway still doesn't work completely because a mouse-down in a corner
	would still get eaten instead of hitting the menubar, which is what happens
	in real life.
	
	Our solution is to have two menubar layers.  One handles the visual aspects
	of the menubar, and the other the behavioral.  The rounded screen corners go
	in between.  Corner sandwich!
	
	z-index  4:  behavioral menubar  (draws menu titles and handles events)
	z-index  3:  behavioral desktop
	z-index  2:  rounded corners     (draws rounded corners)
	z-index  1:  visual menubar      (draws menubar itself)
	z-index  0:  TBD
	z-index -1:  desktop picture     (draws under siblings but over parent's background)
	
	Update:  Now that we're adding windows, the small issue has become a big
	problem.  The menubar is easy to bifurcate, since the visual aspect has one
	part.  But a window has many parts, and they must exist both in the visual
	aspect for display, and in the behavioral aspect for interaction.  The
	sandwich no longer scales.
	
	I have put a name to this DOM Events defect:  The Glass Ceiling.
	
	One alternative is to catch events on the ceiling and re-dispatch them.
	While we're provided with methods by which to do this (node.dispatchEvent())
	it's still up to us to implement the hit-testing that tells us which node to
	dispatch to, duplicating in Javascript what the browser already does in C++.
	This is such a significant divergence from the spirit of client scripting
	and the intent of the project that I refuse to consider this option further.
	It would work, but only in the same way that using tables to render an image
	in an unsupported format works.  It's a great hack, but an unacceptable
	solution.
	
	My strong preference is to use the design that is closest to the one I would
	have used if the defect didn't exist.  That means no bifurcated objects, and
	no homebrew hit-testing.  Given that the defect hasn't gone away in the last
	two paragraphs, my next option is to compromise on the behavior of the
	rounded screen corners.  One layer containing all four corners will exist
	above the desktop background but below everything else -- it won't eat (or
	at all receive) events, but windows and the Finder's selection rectangle
	will obscure it.  Bummer.  The menubar will completely cover the two top
	corners, and therefore will need its own copies.  I'll probably keep the
	menubar split since that's already implemented and allows a mousedown in a
	corner to activate the menubar.  With luck, nobody will even notice.
	
	Here's the new z order:
	
	z-index  4:  menubar
	z-index  3:  windows
	z-index  2:  desktop objects, e.g. selection rectangle
	z-index  1:  rounded corners
	z-index  0:  desktop picture     (draws under siblings but over parent's background)
	
*/

/* Our Mac OS screen-within-a-window */
#screen
{
	/* Set up a positioning context for our children */
	position: absolute;
	
	/* Scale to fit. */
	width: 100%;
	height: 100%;
	
	background-color: black;
	color: black;             /* silence warning */
	
	/* clip content exceeding screen bounds */
	overflow: hidden;
}

/* Our Mac OS screen-within-a-window */
#window-manager
{
	/* Set up a positioning context for our children */
	position: absolute;
	
	/* Scale to fit. */
	width: 100%;
	height: 100%;
	
	background-color: #999;   /* default desktop background */
	color: black;             /* silence warning */
}

#window-manager:hover
{
	cursor: default;
}

#window-manager > *
{
	position: absolute;  /* All screen elements are absolutely positioned */
}

/* Desktop Picture, if any. */
/* e.g. http://stahlforce.com/desktop/4-1024-water-poles-moon-desktop-background.jpg */

#desktop-picture
{
	/* Place behind menubar and screen corners. */
	z-index: 0;
	
	/* Scale to fit the screen. */
	width: 100%;
	height: 100%;
}

/* The rounded corners of the screen, in their own layer. */
.screen-corners
{
	position: absolute;
	
	/* Fill the screen. */
	width: 100%;
	height: 100%;
	
	z-index: 1;  /* see above for explanation */
	
	background: transparent;
}

.menubar .bottom.corner { display: none }

.corner
{
	position: absolute;  /* corner images must be placed exactly */
	display: block;      /* implicit to absolute positioning */
}

/* Each image in its corner of the screen, flush with the edges */
.top.corner    { top:    0% }
.left.corner   { left:   0% }
.right.corner  { right:  0% }
.bottom.corner { bottom: 0% }

/* Only show the first 5px from the corner */
.top.left.corner     { clip: rect( 0px, 5px, 5px, 0px ) }
.top.right.corner    { clip: rect( 0px, 8px, 5px, 3px ) }
.bottom.left.corner  { clip: rect( 3px, 5px, 8px, 0px ) }
.bottom.right.corner { clip: rect( 3px, 8px, 8px, 3px ) }

/*
This is the image for all corners:

@ @ @ @ @ @ @ @
@ @ @     @ @ @
@ @         @ @
@             @
@             @
@ @         @ @
@ @ @     @ @ @
@ @ @ @ @ @ @ @
*/