<?xml version="1.0" encoding="UTF-8"?>
<!-- skin.milionar.modern (docs/plan/skin-milionar/240-modern.md). Included first in Includes.xml by the composer
     (wcs/skin/compose.py): Kodi keeps the first include of a name, so these definitions replace the classic ones.
     Only the look differs; ids, parameters, navigation and actions stay those of the classic include. -->
<includes>
	<!-- The cinematic Home: the backdrop's tiny copy (hero.blur, 32 x 18 px from Kodi's texture cache) stretched over
	     the whole screen is the ambient light, the sharp backdrop fades into it, and the glass panels above it read as
	     frosted. The tiny copy is a few hundred bytes, so the blur costs nothing even on a weak box. -->
	<include name="MilionarCinemaBackdrop">
		<control type="group">
			<depth>DepthBackground</depth>
			<visible>$EXP[MilCineActive] + System.AddonIsEnabled(plugin.video.milionar) + !Player.HasVideo</visible>
			<animation effect="fade" time="300" condition="!String.IsEqual(Window(Home).Property(milionar.low_power),true)">VisibleChange</animation>
			<animation effect="fade" start="0" end="100" time="400" condition="!String.IsEqual(Window(Home).Property(milionar.low_power),true)">WindowOpen</animation>
			<animation effect="fade" start="100" end="0" time="300" condition="!String.IsEqual(Window(Home).Property(milionar.low_power),true)">WindowClose</animation>
			<control type="image">
				<include>FullScreenDimensions</include>
				<texture colordiffuse="cinema_bg">colors/white.png</texture>
			</control>
			<include content="ModernAmbientLight">
				<param name="left" value="-60" />
				<param name="top" value="-60" />
				<param name="alpha" value="ambient_light" />
			</include>
			<!-- the same light half a texel (32 of 65 px) further: the two bilinear stretches average out into a smooth blur -->
			<include content="ModernAmbientLight">
				<param name="left" value="-92" />
				<param name="top" value="-92" />
				<param name="alpha" value="ambient_light_half" />
			</include>
			<control type="image">
				<include>FullScreenDimensions</include>
				<texture>modern/ambient_shade.png</texture>
			</control>
			<control type="image">
				<left>462</left>
				<top>0</top>
				<width>1458</width>
				<height>820</height>
				<include>MilionarBackdropCollapse</include>
				<aspectratio>scale</aspectratio>
				<fadetime>400</fadetime>
				<texture background="true" diffuse="milionar/cinema/hero_fade.png">$VAR[MilCineFanart]</texture>
				<visible>!Skin.HasSetting(no_fanart)</visible>
			</control>
			<!-- the hero's text stays readable on a bright picture -->
			<control type="image">
				<include>FullScreenDimensions</include>
				<texture>modern/hero_scrim.png</texture>
				<visible>!Skin.HasSetting(no_fanart)</visible>
			</control>
		</control>
	</include>

	<include name="ModernAmbientLight">
		<control type="image">
			<left>$PARAM[left]</left>
			<top>$PARAM[top]</top>
			<width>2072</width>
			<height>1232</height>
			<aspectratio>scale</aspectratio>
			<fadetime>600</fadetime>
			<texture background="true" colordiffuse="$PARAM[alpha]">$VAR[MilCineBlur]</texture>
			<visible>!Skin.HasSetting(no_fanart)</visible>
		</control>
	</include>

	<!-- Home's sidebar (docs/plan/skin-milionar/240-modern.md §6): floating glass, 16 px off the screen's edges. Collapsed
	     it is a rail 16-112 with the icons and the logo mark on its axis (x 64); expanded a panel 16-446 grows out of the
	     rail: it slides out by 334 px and fades in while the rail fades out. The icons keep their column in both states,
	     only the labels come and go; the glass ends under the last menu item. The composer puts this in place of
	     Estuary's ContentPanel and its slide (Home.xml). Both images keep 20 px of shadow outside the glass. -->
	<include name="ModernSidebarPanel">
		<!-- with the sidebar open the content steps back: dimmed, so the eye follows the focus -->
		<control type="image">
			<left>0</left>
			<top>0</top>
			<width>1920</width>
			<height>1080</height>
			<texture colordiffuse="sidebar_scrim">colors/black.png</texture>
			<visible>!$EXP[MilionarSidebarCollapsed] + !Skin.HasSetting(HomeSidebarNoCollapse)</visible>
			<animation effect="fade" time="400" tween="cubic" easing="out">VisibleChange</animation>
		</control>
		<include content="ModernSidebarGlass">
			<param name="visible" value="Integer.IsEqual(Container(9000).NumItems,1)" />
			<param name="height" value="405" />
		</include>
		<include content="ModernSidebarGlass">
			<param name="visible" value="Integer.IsEqual(Container(9000).NumItems,2)" />
			<param name="height" value="500" />
		</include>
		<include content="ModernSidebarGlass">
			<param name="visible" value="Integer.IsEqual(Container(9000).NumItems,3)" />
			<param name="height" value="595" />
		</include>
		<include content="ModernSidebarGlass">
			<param name="visible" value="Integer.IsEqual(Container(9000).NumItems,4)" />
			<param name="height" value="690" />
		</include>
		<include content="ModernSidebarGlass">
			<param name="visible" value="Integer.IsEqual(Container(9000).NumItems,5)" />
			<param name="height" value="785" />
		</include>
		<include content="ModernSidebarGlass">
			<param name="visible" value="Integer.IsEqual(Container(9000).NumItems,6)" />
			<param name="height" value="880" />
		</include>
		<include content="ModernSidebarGlass">
			<param name="visible" value="Integer.IsEqual(Container(9000).NumItems,7)" />
			<param name="height" value="975" />
		</include>
		<include content="ModernSidebarGlass">
			<param name="visible" value="Integer.IsEqual(Container(9000).NumItems,8)" />
			<param name="height" value="1070" />
		</include>
		<include content="ModernSidebarGlass">
			<param name="visible" value="Integer.IsGreater(Container(9000).NumItems,8)" />
			<param name="height" value="1088" />
		</include>
	</include>
	<!-- the glass for one number of menu items: it ends 22 px under the last item (the list starts at 264, 95 px an
	     item) or 16 px above the screen's bottom; `height` counts the 20 px of shadow above and below -->
	<include name="ModernSidebarGlass">
		<control type="image">
			<left>-4</left>
			<top>-4</top>
			<width>136</width>
			<height>$PARAM[height]</height>
			<texture border="52">modern/sidebar.png</texture>
			<visible>$EXP[MilionarSidebarCollapsed] + $PARAM[visible]</visible>
			<animation effect="fade" time="260" tween="sine" easing="out">VisibleChange</animation>
		</control>
		<control type="image">
			<left>-4</left>
			<top>-4</top>
			<width>470</width>
			<height>$PARAM[height]</height>
			<texture border="52">modern/sidebar.png</texture>
			<visible>$PARAM[visible]</visible>
			<include content="MilionarSidebarTween">
				<param name="type" value="slide" />
				<param name="start" value="0,0" />
				<param name="end" value="-334,0" />
			</include>
			<animation effect="fade" start="100" end="0" time="400" tween="cubic" easing="out" condition="$EXP[MilionarSidebarCollapsed]">Conditional</animation>
		</control>
	</include>
	<!-- labels and buttons of the open sidebar come in once the panel is out (they would lie over the content
	     before), and go at once -->
	<include name="MilionarSidebarFade">
		<animation effect="fade" start="0" end="100" time="200" delay="140" tween="sine" easing="out">Visible</animation>
		<animation effect="fade" start="100" end="0" time="140" tween="sine" easing="out">Hidden</animation>
	</include>
	<!-- the icons on the rail's axis: Estuary's 95 px icon squares (centre 44.5) move by 20 px, the star keeps its nudge -->
	<include name="MilionarSidebarIconNudge">
		<animation effect="slide" start="0,0" end="20,0" time="0" condition="true">Conditional</animation>
		<animation effect="slide" start="0,0" end="0,-3" time="0" condition="String.IsEqual(ListItem.Art(thumb),icons/sidemenu/favourites.png)">Conditional</animation>
	</include>
	<!-- the current section on the collapsed rail: its gold icon on a soft gold pill, the open panel's focus pill
	     narrowed to the rail (the same texture: 8 px inside the glass, 6 px above and below, x 24-104) -->
	<include name="ModernSidebarActive">
		<control type="image">
			<left>0</left>
			<top>0</top>
			<width>128</width>
			<height>95</height>
			<texture border="42,22,42,22" colordiffuse="sidebar_active">modern/menu_focus.png</texture>
			<include>MilionarSidebarCollapsedOnly</include>
		</control>
	</include>
	<!-- the logo mark (centre 117 expanded) moves onto the rail's axis -->
	<include name="MilionarSidebarLogoCollapse">
		<include content="MilionarSidebarTween">
			<param name="type" value="slide" />
			<param name="start" value="0,0" />
			<param name="end" value="-53,0" />
		</include>
	</include>
	<!-- a mouse reaches the collapsed sidebar over the rail -->
	<include name="MilionarSidebarHitrect">
		<hitrect x="16" y="264" w="96" h="800" />
	</include>

	<!-- every other window: deep navy with soft colour light instead of Estuary's flat colour (the pattern stays) -->
	<include name="ColoredBackgroundImages">
		<control type="image">
			<depth>DepthBackground</depth>
			<include>FullScreenDimensions</include>
			<aspectratio>scale</aspectratio>
			<texture>modern/aurora.jpg</texture>
		</control>
		<control type="image">
			<depth>DepthBackground</depth>
			<include>FullScreenDimensions</include>
			<aspectratio>scale</aspectratio>
			<texture colordiffuse="secondary_background" fallback="special://skin/extras/backgrounds/pattern1.jpg">$INFO[Skin.String(background_overlay),special://skin/extras/backgrounds/pattern,.jpg]</texture>
		</control>
	</include>

	<!-- Estuary's dialog: a rounded glass panel with a soft drop shadow (its 20 px lie outside the dialog), a quiet
	     header with an accent bar instead of the coloured header strip -->
	<include name="DialogBackgroundCommons">
		<control type="image">
			<left>-2000</left>
			<top>-2000</top>
			<width>6000</width>
			<height>6000</height>
			<animation effect="fade" time="300">VisibleChange</animation>
			<animation effect="fade" start="0" end="100" time="300">WindowOpen</animation>
			<animation effect="fade" start="100" end="0" time="200">WindowClose</animation>
			<texture colordiffuse="A0000000">colors/black.png</texture>
			<visible>$PARAM[darken_bg]</visible>
		</control>
		<control type="button">
			<left>-2000</left>
			<top>-2000</top>
			<width>6000</width>
			<height>6000</height>
			<texturefocus />
			<texturenofocus />
			<onclick>Action(close)</onclick>
		</control>
		<control type="group">
			<width>$PARAM[width]</width>
			<height>$PARAM[height]</height>
			<control type="image">
				<left>-20</left>
				<top>-20</top>
				<right>-20</right>
				<bottom>-20</bottom>
				<texture border="52">modern/glass_shadow.png</texture>
			</control>
			<control type="image">
				<left>40</left>
				<top>58</top>
				<width>44</width>
				<height>6</height>
				<texture border="3" colordiffuse="button_focus">milionar/cinema/bar.png</texture>
			</control>
			<control type="image">
				<left>28</left>
				<top>69</top>
				<right>28</right>
				<height>1</height>
				<texture colordiffuse="14FFFFFF">colors/white.png</texture>
			</control>
			<control type="label" id="$PARAM[header_id]">
				<left>40</left>
				<top>0</top>
				<right>100</right>
				<height>62</height>
				<font>font32_title</font>
				<label>$PARAM[header_label]</label>
				<aligny>center</aligny>
				<shadowcolor>black</shadowcolor>
			</control>
			<control type="button" id="22002">
				<description>button overlay to avoid closing in dialog area</description>
				<left>0</left>
				<top>0</top>
				<right>0</right>
				<bottom>0</bottom>
				<texturefocus />
				<texturenofocus />
				<onclick>noop</onclick>
			</control>
			<control type="radiobutton">
				<right>10</right>
				<top>11</top>
				<width>48</width>
				<height>48</height>
				<radiowidth>48</radiowidth>
				<radioheight>48</radioheight>
				<texturefocus />
				<texturenofocus />
				<label></label>
				<textureradioofffocus colordiffuse="EEFFFFFF">dialogs/close.png</textureradioofffocus>
				<textureradiooffnofocus colordiffuse="EEFFFFFF">special://xbmc/media/vendor_icon.png</textureradiooffnofocus>
				<textureradioonfocus colordiffuse="EEFFFFFF">dialogs/close.png</textureradioonfocus>
				<textureradioonnofocus colordiffuse="EEFFFFFF">special://xbmc/media/vendor_icon.png</textureradioonnofocus>
				<onclick>Action(close)</onclick>
				<visible>!Skin.HasSetting(touchmode)</visible>
			</control>
			<control type="button">
				<right>10</right>
				<top>11</top>
				<width>48</width>
				<height>48</height>
				<texturefocus>dialogs/close.png</texturefocus>
				<texturenofocus>dialogs/close.png</texturenofocus>
				<onclick>Action(close)</onclick>
				<visible>Skin.HasSetting(touchmode)</visible>
			</control>
		</control>
	</include>

	<!-- dialogs open with a gentle spring instead of Estuary's deep zoom -->
	<include name="Animation_DialogPopupOpenClose">
		<animation type="WindowOpen" reversible="false">
			<effect type="zoom" start="94" end="100" center="50%,50%" delay="120" tween="back" easing="out" time="280" />
			<effect type="fade" delay="120" end="100" time="220" />
		</animation>
		<animation type="WindowClose" reversible="false">
			<effect type="zoom" start="100" end="96" center="50%,50%" easing="in" tween="cubic" time="180" />
			<effect type="fade" start="100" end="0" time="180" />
		</animation>
		<depth>DepthDialog</depth>
	</include>
</includes>
