Too bad it's not supported currently. Here is my proposal, which would need Steven's help to work out.
The reason your approach does not work is that auto-hide panels conflict with each other. Say, when Overlay2 auto-hide panel is open, lyrics auto-hide panel has to be closed. How could this be avoided? Because XML documents support tree structure, we could divide parts of codes into different segments using a sub-parent element. Let's name the new element "segment." Then you could define each BG as a segment that has two auto-hide panels (lyrics and artist info) inside it. This way the conflict between BG and auto-hide panels would be gone. To navigate between different segments, we would need a new onClick function support, namely "OpenSegment." If this is implemented, multiple theater views could be inserted into a big view, rendering each view as a segment.
Here is a test code I wrote with your Overlay 1 and Overlay 2.
<?xml version="1.0" encoding="utf-8"?>
<root>
<settings enableScaling="true" />
<settings backgroundImage="" />
<settings rotationPeriod="300" />
<screenSaver>
<settings idlePeriod="0" />
<settings monitor="1" otherMonitors="blackout" />
</screenSaver>
<!-- BG1 Segment-->
<segment name="BG1">
<!-- Artist Picture -->
<element type="ArtistPicture" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" aspectRatio="zoomKeep" fillColor="255,0,0,0" fade="0.0"></element>
<element name="DarkerBG" type="Block" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" bg="160,8,0,30"></element>
<!-- Overlay 1 -->
<element name="#Overlay1" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" allowPinning="true" resizePictures="false" disableHotPoint="true" >
<element name="Darker" type="Block" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" bg="160,8,0,30"></element>
<element type="Icon" image="Images\overlay0.png" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" ></element>
<element type="Icon" image="Images\overlay01.png" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" ></element>
<!-- Menu -->
<element type="Text" xAnchor="Panel.Right" x="-20" y="5" width="10" font="Segoe UI Light" style="Regular" size="10" fg="235,235,235" mouseOverFg="255,255,255" onClick="OpenSegment:BG1">•</element>
<element type="Text" xAnchor="Panel.Right" x="-20" y="15" width="10" font="Segoe UI Light" style="Regular" size="10" fg="235,235,235" mouseOverFg="255,255,255" onClick="OpenSegment:BG2">•</element>
<!-- Lyrics -->
<autoHide name="#RightSidebarLyrics" xAnchor="Panel.Right" x="-391" y="60" width="300" heightDock="Panel" height="-368" bg="0,8,0,30" fg="215,215,215" fg2="255,255,255" allowPinning="true" resizePictures="false" >
<element type="Field" id="Title" xAnchor="Panel.Right" x="-376" y="95" width="285" font="Segoe UI" style="Bold" size="12" fg="255,255,255" ></element>
<element type="Lyrics" xAnchor="Panel.Right" x="-374" y="125" width="285" heightDock="Y:#RightSidebarLyrics.Bottom" height="-40" font="Segoe UI" style="Regular" size="9" fg="255,255,255" fg2="255,140,0" ></element>
</autoHide>
<!-- Artist Info -->
<autoHide name="#RightSidebarArtist" xAnchor="Panel.Right" x="-391" y="60" width="300" heightDock="Panel" height="-368" bg="0,8,0,30" fg="215,215,215" fg2="255,255,255" allowPinning="true" resizePictures="false" >
<element type="Field" id="Artist" xAnchor="Panel.Right" x="-376" y="95" width="285" font="Segoe UI" style="Bold" size="12" fg="255,255,255" ></element>
<element type="ArtistInfo" xAnchor="Panel.Right" x="-374" y="125" width="285" heightDock="Y:#RightSidebarArtist.Bottom" height="-40" font="Segoe UI" style="Regular" size="9" fg="255,255,255" fg2="255,140,0" ></element>
</autoHide>
<!-- Next Track Info -->
<element name="#NextInfo" type="Text" xAnchor="Panel.Right" x="-233" yAnchor="Panel.Bottom" y="-101" width="90" font="Segoe UI Light" style="Regular" size="16" fg="180,180,180" onClick="OpenNowPlayingAssistant" >></element>
<element type="Field" id="Tracks[1]" xAnchor="Panel.Right" x="-213" yAnchor="Panel.Bottom" y="-90" width="125" font="Segoe UI" style="Regular" size="8" fg="250,250,250" >
<child id="Title" ></child>
</element>
<element type="Field" id="Tracks[1]" xAnchor="Panel.Right" x="-213" yAnchor="Panel.Bottom" y="-70" width="125" font="Segoe UI" style="Bold" size="8" fg="250,250,250" >
<child id="Artist" ></child>
</element>
<!-- Progress Bar -->
<element name="BarBg" type="Block" xAnchor="Panel.Left" yAnchor="Panel.Bottom" x="92" y="-195" widthDock="X:Panel.Right" width="-92" height="2" bg="20,255,255,255"></element>
<element type="ProgressBar" xAnchor="Panel.Left" yAnchor="Panel.Bottom" x="92" y="-195" widthDock="X:Panel.Right" width="-92" height="2" fg="245,245,245" ></element>
<!-- Player Controls -->
<element type="PlayerBar" autohide="false" xAnchor="Panel.Center" x="-150" yAnchor="Panel.Bottom" y="-92" width="300" height="52" bdr="0,0,0,0" bg="0,0,0,0" fg="245,245,245" fg2="180,180,180" ></element>
<element name="#LyricsStatus" type="Text" xAnchor="Panel.Center" x="-18" yAnchor="Panel.Bottom" y="-72" font="Wingdings" style="Regular" size="12" fg="8,0,30" fg2="245,245,245" width="20" onClick="OpenAutoHidePanel(#RightSidebarLyrics)">&</element>
<!-- Track Info -->
<element type="AlbumCover" x="90" yAnchor="Panel.Bottom" y="-404" width="180" height="180" min="180" max="180" brightness="1.0" ></element>
<element type="ProgressPosition" xAnchor="Panel.Right" x="-340" yAnchor="Panel.Bottom" y="-257" widthDock="X:Panel.Right" width="-82" align="right" font="Segoe UI Light" style="Regular" size="22" fg="245,245,245" ></element>
<element name="BigTitle" type="Field" id="Title" x="82" yAnchor="Panel.Bottom" y="-182" widthDock="X:#NextInfo.Left" width="0" reserveWidth="120" font="Segoe UI Light" style="Regular" size="30" fg="245,245,245"></element>
<element type="Field" id="RatingLove" xAnchor="Panel.Right" x="-226" yAnchor="Panel.Bottom" y="-163" width="140" fg="115,115,115" fg2="240,240,240" size="20" rightMargin="8" >
<child id="Rating" fg="245,245,245" fg2="25,255,255,255" size="20" />
</element>
<element type="Field" id="Artist" x="86" yAnchor="Panel.Bottom" y="-104" widthDock="X:#NextInfo.Left" width="-10" font="Segoe UI" style="Bold" size="16" fg="245,245,245" onClick="OpenAutoHidePanel(#RightSidebarArtist)" ></element>
<element type="Field" id="Album" x="87" yAnchor="Panel.Bottom" y="-74" widthDock="X:#NextInfo.Left" width="-10" font="Segoe UI Light" style="Regular" size="14" fg="245,245,245" ></element>
</segment>
<!-- BG2 Segment-->
<segment name="BG2">
<!-- Artist Picture -->
<element type="ArtistPicture" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" aspectRatio="zoomKeep" fillColor="255,0,0,0" fade="0.0"></element>
<element name="DarkerBG" type="Block" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" bg="160,8,0,30"></element>
<!-- Overlay 2 -->
<element name="#Overlay2" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" allowPinning="true" resizePictures="false" disableHotPoint="true" >
<element name="Darker" type="Block" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" bg="220,8,0,30"></element>
<element type="Icon" image="Images\overlay1.png" x="1" y="1" widthDock="Panel" width="-2" heightDock="Panel" height="-2" ></element>
<!-- Menu -->
<element type="Text" xAnchor="Panel.Right" x="-20" y="5" width="10" font="Segoe UI Light" style="Regular" size="10" fg="235,235,235" mouseOverFg="255,255,255" onClick="OpenSegment:BG1">•</element>
<element type="Text" xAnchor="Panel.Right" x="-20" y="15" width="10" font="Segoe UI Light" style="Regular" size="10" fg="235,235,235" mouseOverFg="255,255,255" onClick="OpenSegment:BG2">•</element>
<!-- Lyrics -->
<autoHide name="#RightSidebarLyrics" xAnchor="Panel.Right" x="-391" y="60" width="300" heightDock="Panel" height="-368" bg="0,8,0,30" fg="215,215,215" fg2="255,255,255" allowPinning="true" resizePictures="false" >
<element type="Field" id="Title" xAnchor="Panel.Right" x="-376" y="95" width="285" font="Segoe UI" style="Bold" size="12" fg="255,255,255" ></element>
<element type="Lyrics" xAnchor="Panel.Right" x="-374" y="125" width="285" heightDock="Y:#RightSidebarLyrics.Bottom" height="-40" font="Segoe UI" style="Regular" size="9" fg="255,255,255" fg2="255,140,0" ></element>
</autoHide>
<!-- Artist Info -->
<autoHide name="#RightSidebarArtist" xAnchor="Panel.Right" x="-391" y="60" width="300" heightDock="Panel" height="-368" bg="0,8,0,30" fg="215,215,215" fg2="255,255,255" allowPinning="true" resizePictures="false" >
<element type="Field" id="Artist" xAnchor="Panel.Right" x="-376" y="95" width="285" font="Segoe UI" style="Bold" size="12" fg="255,255,255" ></element>
<element type="ArtistInfo" xAnchor="Panel.Right" x="-374" y="125" width="285" heightDock="Y:#RightSidebarArtist.Bottom" height="-40" font="Segoe UI" style="Regular" size="9" fg="255,255,255" fg2="255,140,0" ></element>
</autoHide>
<!-- Next Track Info -->
<element name="#NextInfo" type="Text" xAnchor="Panel.Right" x="-233" yAnchor="Panel.Bottom" y="-101" width="90" font="Segoe UI Light" style="Regular" size="16" fg="180,180,180" onClick="OpenNowPlayingAssistant" >></element>
<element type="Field" id="Tracks[1]" xAnchor="Panel.Right" x="-213" yAnchor="Panel.Bottom" y="-90" width="125" font="Segoe UI" style="Regular" size="8" fg="250,250,250" >
<child id="Title" ></child>
</element>
<element type="Field" id="Tracks[1]" xAnchor="Panel.Right" x="-213" yAnchor="Panel.Bottom" y="-70" width="125" font="Segoe UI" style="Bold" size="8" fg="250,250,250" >
<child id="Artist" ></child>
</element>
<!-- Progress Bar -->
<element name="BarBg" type="Block" xAnchor="Panel.Left" yAnchor="Panel.Bottom" x="92" y="-195" widthDock="X:Panel.Right" width="-92" height="2" bg="20,255,255,255"></element>
<element type="ProgressBar" xAnchor="Panel.Left" yAnchor="Panel.Bottom" x="92" y="-195" widthDock="X:Panel.Right" width="-92" height="2" fg="245,245,245" ></element>
<!-- Player Controls -->
<element type="PlayerBar" autohide="false" xAnchor="Panel.Center" x="-150" yAnchor="Panel.Bottom" y="-92" width="300" height="52" bdr="0,0,0,0" bg="0,0,0,0" fg="245,245,245" fg2="180,180,180" ></element>
<element name="#LyricsStatus" type="Text" xAnchor="Panel.Center" x="-18" yAnchor="Panel.Bottom" y="-72" font="Wingdings" style="Regular" size="12" fg="8,0,30" fg2="245,245,245" width="20" onClick="OpenAutoHidePanel(#RightSidebarLyrics)">&</element>
<!-- Track Info -->
<element type="AlbumCover" x="90" yAnchor="Panel.Bottom" y="-404" width="180" height="180" min="180" max="180" brightness="1.0" ></element>
<element type="ProgressPosition" xAnchor="Panel.Right" x="-340" yAnchor="Panel.Bottom" y="-257" widthDock="X:Panel.Right" width="-82" align="right" font="Segoe UI Light" style="Regular" size="22" fg="245,245,245" ></element>
<element name="BigTitle" type="Field" id="Title" x="82" yAnchor="Panel.Bottom" y="-182" widthDock="X:#NextInfo.Left" width="0" reserveWidth="120" font="Segoe UI Light" style="Regular" size="30" fg="245,245,245"></element>
<element type="Field" id="RatingLove" xAnchor="Panel.Right" x="-226" yAnchor="Panel.Bottom" y="-163" width="140" fg="115,115,115" fg2="240,240,240" size="20" rightMargin="8" >
<child id="Rating" fg="245,245,245" fg2="25,255,255,255" size="20" />
</element>
<element type="Field" id="Artist" x="86" yAnchor="Panel.Bottom" y="-104" widthDock="X:#NextInfo.Left" width="-10" font="Segoe UI" style="Bold" size="16" fg="245,245,245" onClick="OpenAutoHidePanel(#RightSidebarArtist)" ></element>
<element type="Field" id="Album" x="87" yAnchor="Panel.Bottom" y="-74" widthDock="X:#NextInfo.Left" width="-10" font="Segoe UI Light" style="Regular" size="14" fg="245,245,245" ></element>
</segment>
</root>