<?xml version="1.0" encoding="UTF-8"?>

<component name="HomeScene" extends="Scene">
  <interface>
    <field id="contentId" type="string"/>
    <field id="mediaType" type="string"/>
  </interface>
    <script type="text/brightscript" uri="pkg:/components/HomeScene.brs" />

    <!-- All nodes must be inside <children> headers -->
    <children>
    <!-- Shaded background behind the RowList -->
    <Rectangle
        id = "shader"
        height = "1080"
        width = "1920"
        color = "0x000000FF"
        opacity = "0.7"/>


<!--

    <RowList
        id= "RowList"
        translation= "[20,200]"
        itemComponentName= "PosterItem"
        numRows= "4"
        rowitemSize="[[351,197]]"
        rowItemSpacing= "[[20,0]]"
        itemSize= "[1920,270]"
        rowLabelOffset= "[[50,10]]"
        focusXOffset = "[50]"
        showRowLabel= "[true]"
        rowFocusAnimationStyle= "floatingfocus"
    />
        rowitemSize="[[351,380]]"
        rowItemSpacing= "[[20,10]]"
        itemSize= "[1920,400]"
        rowLabelOffset= "[[50,10]]"
        focusXOffset = "[50]"
        showRowLabel= "[true]"
        rowFocusAnimationStyle= "floatingfocus"
    />
-->

    <!-- RowList node -->
    <RowList
        id= "RowList"
        translation= "[20,200]"
        itemComponentName= "PosterItem"
        numRows= "4"
        rowitemSize="[[490,276]]"
        rowItemSpacing= "[[20,0]]"
        itemSize= "[1920,380]"
        rowLabelOffset= "[[50,20]]"
        focusXOffset = "[50]"
        showRowLabel= "[true]"
    />

    <Video
        id = "Video"
        height = "1080"
        width = "1920"
	loop = "false"
        visible = "false"
    />

    <!-- Shaded overhang to display the focused content in the RowList -->
	
    <Rectangle
        id = "overhang"
        height = "180"
        width = "1920"
        color = "0x00000080" >
         <Overhang
            id="overhang2"
            showOptions="false"
            showClock="false"
            logoUri="pkg:/images/hd_overhang_logo.png"
			height="75"
            translation="[0,120]"
        />	
	    <!--Poster
	      id = "banner"
	      height = "75"
	      width = "400"
	      loadWidth = "75"
	      loadHeight = "400"
          uri="pkg:/images/banner.png"
	      loadDisplayMode = "scaleToFit"
          translation="[400,35]"
		  opacity = "1.0"
	      /-->

	    <Poster
	      id = "banner"
          uri="pkg:/images/banner.png"
          translation="[400,35]"
		  opacity = "1.0"
	      />

        <!-- Passed into a group node to make the formatting easier. All child nodes inherit the translation field of Group -->
	    <Group translation = "[20,75]">
	    <!--  Content title of the item focused. This label inherits translation from Group node -->
	    <Label
	      id = "Title"
	      height = "30"
	      width = "1520"
          translation="[380,60]"
	      xfont = "font:LargeBoldSystemFont"/>
	    <!-- Content description of the item focused . Also inherits translation from Group node -->
	    <!--Label
	      id = "Description"
	      height = "0"
	      width = "0"
	      color = "0xA3A3C2FF"
	      xtranslation = "[-1000,-1000]"
	      wrap = "true"/-->
	    <!-- Artwork of the item focused. Inherits translation of the Group node and adds onto the translation. Final translation on the screen is [150+850, 75+10] -->
	    <!--Poster
	      id = "Poster"
	      height = "0"
	      width = "0"
	      loadWidth = "0"
	      loadHeight = "0"
	      loadDisplayMode = "scaleToFit"
	      xtranslation = "[-1000,-1000]"/-->
	    </Group>
    </Rectangle>

    <Animation
      id = "moveOverhangPanelUp"
      duration = "3"
      easeFunction = "linear" >

      <Vector2DFieldInterpolator
        key = "[ 0.0, 1.0 ]"
        keyValue = "[ [0.0,0.0], [0.0,-400.0] ]"
        fieldToInterp = "Overhang.translation" />

    </Animation>

    <Animation
      id = "moveOverhangPanelDown"
      duration = "1.5"
      easeFunction = "linear" >

      <Vector2DFieldInterpolator
        key = "[ 0.0, 1.0 ]"
        keyValue = "[ [0.0,-400.0], [0.0,0.0] ]"
        fieldToInterp = "Overhang.translation" />

    </Animation>
    </children>
</component>
